@extends('layouts.app')
@section('title', trans('menu.schedule_title'))
@section('plugin-styles')
    <link type="text/css" rel="stylesheet" href="{{asset('vendors/daterangepicker/css/daterangepicker.css')}}" />
@stop
@section('content')
	@php
		$date_string = date(config('settings.date_format'));
		$now = Carbon\Carbon::now();
		$monthText = $from->format('F');
		$monthText = translateArray(strtolower($monthText));

        use Illuminate\Support\Str;

        $user = request()->user();
    @endphp
<div class="content">
    <div class="content-header pb-1">
        @include('layouts.partials.single-page-header-schedule', [
            'userData' => $user,
            'mySchdule' => 0,
        ])
    </div>
	@include('layouts.partials.excelModal')
	@include('layouts.partials.excelModalSendEmail')

	@if (isset($error) && $error != "")
        <div class=" m-4 text-center">
            <h4 class="text-danger"><i class="mdi mdi-alert-circle"></i> {{$error}}</h4>
        </div>
    @else

        <div class="table-responsive table-sm-responsive" id="request-hours">
	        <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6">
                <livewire:widgets.special-days :from="$from" :to="$to" :user="$user" />

                <livewire:timetracker::widgets.compensations :from="$from" :to="$to" :user="$user" />

                <livewire:timetracker::widgets.vacations :from="$from" :to="$to" :user="$user" />

                <livewire:timetracker::widgets.leaves :from="$from" :to="$to" :user="$user" />
            </div>

            <div style='clear:both'></div>
        </div>
        @include('layouts.partials.schedule-filter',[
            'prev' => $date->copy()->subMonth()->startOfMonth()->format(config('settings.date_format')),
            'next' => $date->copy()->addMonth()->startOfMonth()->format(config('settings.date_format')),
            'type' => 'month'
        ])
        <div class="rounded-0">
            <div class="flex flex-wrap gap-4 justify-end items-center mb-2">
                <div class="flex flex-wrap gap-2">
                    <div class="bg-custom-yellow-100 rounded-2xl flex items-center py-1 pl-[17px] pr-4 gap-[7px]">
                        <div class="h-[10px] w-[10px] rounded-full bg-custom-yellow-500"></div>
                        <h1 class="text-md-medium text-custom-yellow-500">
                            {!! trans('menu.vacationhour_title') !!}
                        </h1>
                    </div>
                    <div class="bg-custom-red-100 rounded-2xl flex items-center py-1 pl-[17px] pr-4 gap-[7px]">
                        <div class="h-[10px] w-[10px] rounded-full bg-custom-red-500"></div>
                        <h1 class="text-md-medium text-custom-red-500">{!! trans('menu.absence_title') !!}</h1>
                    </div>
                    <div class="bg-custom-blue-100 rounded-2xl flex items-center py-1 pl-[17px] pr-4 gap-[7px]">
                        <div class="h-[10px] w-[10px] rounded-full bg-custom-blue-500"></div>
                        <h1 class="text-md-medium text-custom-blue-500">{!! trans('compensations.title') !!}</h1>
                    </div>
                </div>
            </div>
            <div class="table-responsive table-sm-responsive" id="monthview">
                @include('timetracker::schedules.components.monthview-calendar')
            </div>
	    </div>
    @endif
</div>
@php
    $formattedFromDate = $from->format(config('settings.date_format'));
@endphp
@endsection
@section('footer-script')
    @include('layouts.partials.errors')
    <script type="text/javascript" src="{{asset('vendors/daterangepicker/js/daterangepicker.js')}}"></script>
	<script>
        
        var date = '{{request()->has('date') && request()->get('date') != "" ? date(request()->get('date')) : ''}}';
        date = (date != "") ? moment(date, "{{getDateFormat()}}") : '';
        function fixRequestedHours() {
            $(".requested_hours, .partial_hours").each(function(item) {
                let days = $(this).data('days'), id = $(this).data('id'), day_start = $(this).data('start');

                for(let i = day_start; i < (day_start + days); i++ ) {

                    let length = $("#row-"+id).find('.day-'+i+" div").length;

                    if(length > 1) {
                        $("#row-"+id).find('.day-'+i).attr("style", 'height: '+(length * 40)+'px;');

                        $("#row-"+id).find('.day-'+i+" div").each(function( key, item) {

                            let calcTop = 40 * key;

                            $(this).attr("style", 'height: 40px !important; position:absolute; width:100%; left:0; top: '+(calcTop)+'px');
                        });
                    }

                }
            });
        }

        function get_month_view(data) {

            $("#monthview").append( customLoader );

            PDRequest({
                    type    : "GET",
                    url     : "{{ route('schedules.monthly') }}?"+data,
                    event   : false
                }).then((response) => {

                    $("#monthview").html(response.html);

                    $(".month-btn.prev").data('month', parseInt(response.month) - 1 );
                    $(".month-btn.next").data('month', parseInt(response.month) + 1 );
                    $(".month-title").html(response.monthText);
                    $(".schedule-range").html(response.scheduleRange);

                    Livewire.dispatch('updateRange', [response.from, response.to]);

                    fixRequestedHours();
                }).catch(error => {
                    $("#monthview").find(".custom-loader").remove();
                });
        }

		$(document).ready(function() {

            fixRequestedHours();

            $('body').on('change click', '.select-tab', function(e) {

                var month = {{ $month }};
                var from_date = "{{ $formattedFromDate }}";
                e.preventDefault();

                if($(this).hasClass("month-btn")) {
                    $("input[name=month]").val($(this).data('month'));
                }

                data = $('#calendar-search-form').serialize()+"&month=" + month+"&date=" + from_date +"&per_page="+$("select[name='per_page']").val();

                get_month_view(data);

            });

            $("body").on("change", "select[name='per_page']", function(e) {
                e.preventDefault();
                var month = {{ $month }};
                var from_date = "{{ $formattedFromDate }}";
                
                if($(this).hasClass("month-btn")) {
                    $("input[name=month]").val($(this).data('month'));
                }

                data = $('#calendar-search-form').serialize()+"&month=" + month +"&date=" + from_date +"&per_page="+$("select[name='per_page']").val();

                get_month_view(data);
            });

            $("body").on("click", ".pagination a", function(event) {
                var month = {{ $month }};
                var from_date = "{{ $formattedFromDate }}";
                event.preventDefault();

                const urlParams = new URLSearchParams($(this).attr('href'));
                
                data = $('#calendar-search-form').serialize()+"&month=" + month+"&date=" + from_date +"&per_page="+$("select[name='per_page']").val()+"&page="+urlParams.get('page');

                get_month_view(data);

            });

            $('body').on('click', '.printOnPage', function(e) {
				var exportType = $(this).attr('data-name');
				var from = "{{$from}}";
				var to = "{{$to}}";
				var week = '{{$month}}';
				var url = "{{route('schedules.weekly-report.excel')}}"+'?from='+from+ '&to='+to+ '&exportType='+exportType+ '&week='+week;
				var myWindow = window.open(url, "");
			});

            $('body').on('click', '.week_total', function(e) {
                // $(this).find("i").toggleClass("mdi-minus");
                $(this).toggleClass("active");
                console.log($(this));

                if($(this).hasClass("active")) {
                    $("."+$(this).data('week')).css({"z-index" : "0"});//, 'color' : "#fff"
                } else {
                    $("."+$(this).data('week')).css({"z-index" : "99"});//,'color' : "#707889"
                }
            });



            $('body').on('click', '.printOnPageSendMail', function(e) {
				var menuType = "weekly";
				var exportType = $(this).attr('data-name');
				var from = "{{$from}}";
				var to = "{{$to}}";
				var week = '{{$month}}';
				var url = "{{route('schedules.send-as-email')}}"+'?from='+from+ '&to='+to+ '&exportType='+exportType+ '&week='+week+ '&menuType='+menuType;
				var myWindow = window.open(url, "");
			});
		});

        function cb(start, end) {
            $('#reportrange span.date-text').html(start.format('D MMM, YYYY'));
            window.location = "{{route('schedules.monthly')."?date="}}"+start.format(current_date_format)
        }

        $('#reportrange').daterangepicker({
            opens           : 'left',
            singleDatePicker: true,
            showDropdowns   : true,
            showWeekNumbers: true,
            @if(request()->has('date') && request()->get('date') != "")
                startDate      : (date != "") ? date : moment(),
            @endif
            locale          : {
                format          : "{{getDateFormat()}}",
                "firstDay": 1,
                "daysOfWeek": daysOfWeek,
                "monthNames": monthNames
            },
            showDropdowns       : true
        }, cb);

	</script>

@endsection