@extends('layouts.app')

@section('form-title') {{ __('Agenda') }} @endsection

@section('breadcrumb')
<li class="breadcrumb-item">{{ __('Agenda') }} </li>
@endsection

@section('content')
<style>
    #show-map {
        height: 200px;
        /* The height is 400 pixels */
        width: 100%;
        /* The width is the width of the web page */
    }
    .table td, .table th {
        padding: 0.50rem !important;
    }
    .d-name{
        padding: 2 4 2 5px;
        color: #FFF;
    }
    .clndr-grid { width: 100% !important;}
    .apmnts-not-available {
        background-color: #b4babd !important;
        border-color: #a7acaf !important;
        color: #fff !important;
    }
   
    .mytooltip {
        display: inline-flex !important;
    }
    .mytooltip .tooltip-item2 {
        color: #fff !important;
    }

    .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        padding-right: var(--bs-gutter-x, 0rem) !important;
        padding-left: var(--bs-gutter-x, 0rem) !important;
    }
    .card .card-block{
        padding: 0.5rem !important;
    }
    h5 {
        font-size: 17px !important;
        margin: 10px !important;
    }
    .p-10 {
        padding: 10px 0px 0px 0px !important;
    }
    .btn-sm {
        margin-right: 10px !important;
    }
</style>

@include('agendas.non-working-days.edit')

<div class="pcoded-inner-content">
    <div class="main-body">
        <div class="page-wrapper">
            <!-- Page body start -->
            <div class="page-body">

                <div class="row">
                    {{-- Driver section --}}
                    <div class="col-sm-6">
                        <div class="card">
                            <div class="card-header">
                                <h5>{{ __("Show drivers") }}</h5>
                            </div>
                            <div class="card-block">
                                <div class="row mb-1">
                                    <div class="col-sm-1">
                                        <div class="checkbox-zoom zoom-default">
                                            <label class="form-label">
                                              <input type="checkbox" class="" name="d-all" id="d-all" value="">
                                              <span class="cr">
                                                <i class="cr-icon icofont icofont-ui-check txt-default"></i>
                                              </span>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-sm-11"><label class="d-block" for="d-all"><h6>{{ __('(De) select all') }}</h6></label></div>
                                </div>
                                @foreach($drivers as $driver)
                                <div class="row mb-1">
                                    <div class="col-sm-1">
                                        <div class="checkbox-zoom zoom-default">
                                            <label class="form-label">
                                              <input class="driver" type="checkbox" name="sd-all" id="driver_{{ $driver->id }}" value="{{ $driver->id }}">
                                              <span class="cr">
                                                <i class="cr-icon icofont icofont-ui-check txt-default"></i>
                                              </span>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-sm-11">
                                        <label class="d-block d-name rounded" for="driver_{{ $driver->id }}" style="background-color: {{ $driver->color }};">{{ $driver->name }}</label>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                    </div>

                    {{-- Calendar --}}
                    <div class="col-sm-6">
                        <div class="card">
                            <div class="card-block">
                                <div id="calendar" class="overflow-hidden bg-grey bg-lighten-3"></div>
                                <input type="hidden" id="calendar_date" value="{{ date('Y-m-d') }}">
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Filter --}}
                @include('agendas.agenda.filter', ['total_filter_name' => 'total_days', 'filter_days_name' => 'day'])

                <div class="card" id="div-loader" style="display: block;">
                    <div class="row card-block">
                        <div class="d-flex justify-content-center">
                            <span class="pcoded-micon">
                              {{ __('Loading...') }}<i class="fa fa-refresh fa-lg ms-2 rotate-refresh"></i>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="container-fluid" id="div-appointments" style="display: none;"></div>
                <input type="hidden" id="total_appointments" value="0">
                <input type="hidden" id="old_calendar_date" value="">

                @include('agendas.agenda.filter', ['total_filter_name' => 'total_days2', 'filter_days_name' => 'day2'])
            </div>
        </div>
        <!-- Page body end -->
    </div>
</div>
<div id="clndr" class="clearfix">
    <script type="text/template" id="clndr-template">
      <div class="clndr-controls">
        <div class="clndr-previous-button">&lt;</div>
        <div class="clndr-next-button">&gt;</div>
        <div class="current-month">
          <%= month %>
          <%= year %>
        </div>
      </div>
      <div class="clndr-grid">
        <div class="days-of-the-week clearfix">
          <% _.each(daysOfTheWeek, function(day) { %>
            <div class="header-day">
              <%= day %>
            </div>
            <% }); %>
        </div>
        <div class="days">
          <% _.each(days, function(day) { %>
            <div class="<%= day.classes %>" id="<%= day.id %>"><span class="day-number"><%= day.day %></span></div>
            <% }); %>
        </div>
      </div>
      {{-- <div class="event-listing">
        <div class="event-listing-title">Event this month</div>
        <% _.each(eventsThisMonth, function(event) { %>
          <div class="event-item font-small-3">
            <div class="event-item-day font-small-2">
              <%= event.date %>
            </div>
            <div class="event-item-name text-bold-600">
              <%= event.title %>
            </div>
            <div class="event-item-location">
              <%= event.location %>
            </div>
          </div>
          <% }); %>
      </div> --}}
    </script>
</div>
@endsection

@push('child-scripts')
<script>
    $(document).ready(function(){
        var a = moment().format("YYYY-MM"),
        b = moment().add(1, "month").format("YYYY-MM"),
        c = [
            {
                date: a + "-10",
                title: "Robot war",
                location: "Center of Science"
            }, 
            {
                date: a + "-19",
                title: "Cat Frisbee",
                location: "Jefferson Park"
            }, 
            {
                date: a + "-23",
                title: "Elephent fight",
                location: "Natural Park"
            }, 
            {
                date: b + "-07",
                title: "Small Cat Photo Session",
                location: "Center for Cat Photography"
            }
        ];

        $("#calendar").clndr({
            template: $("#clndr-template").html(),
            //events: c,
            trackSelectedDate: !0,
            clickEvents: {
                click: function(target) {
                    $('#calendar_date').val(moment(target.date._i).format('YYYY-MM-DD'));
                    getAppointments();
                },
                onMonthChange: function(month) {
                    showVisitIconInCalendar(calendar);
                }
            }
        });

        // document.getElementById('d-all').addEventListener('click', function(){
        //     let isChecked = this.checked;

        //     $('.driver').each(function(index, obj){
        //         this.checked = isChecked;
        //     });
        // });


        let pusher_app_key = "{{ config('furnit.pusher_key') }}";
        Pusher.logToConsole = true;
        
        var pusher = new Pusher(pusher_app_key, {
            cluster: 'eu'
        });

        var channel = pusher.subscribe('furnit');

        channel.bind('appointment', function(data) {
            if(JSON.stringify(data.message === 'appointment')){
                //alertSuccess('{{ __("Appointments updated or created!") }}');
                //playNotificationSound();
                getAppointments();
            }
        });

        const savedCheckedValues = localStorage.getItem('checked-drivers');

        if (savedCheckedValues) {
            const checkedArray = savedCheckedValues.split(',');
            $('.driver').each(function () {
                if (checkedArray.includes(this.value)) {
                    $(this).prop('checked', true);
                } else {
                    $(this).prop('checked', false);
                }
            });
            updateDAllCheckboxState();
        } else {
            $('#d-all').prop('checked', true).trigger('change');

            $('.driver').each(function () {
                $(this).prop('checked', true);
            });

            saveDriversSelection();
        }

        $('.driver').on('change', function () {
            saveDriversSelection();
            updateDAllCheckboxState();
        });

        $('#d-all').on('change', function () {
            const isChecked = $(this).is(':checked');

            $('.driver').each(function () {
                $(this).prop('checked', isChecked);
            });

            saveDriversSelection();

            getAppointments();
        });
        
        getAppointments();

        $('.driver').on('click', function(){
            getAppointments();
        });

        $('#total_days').on('change', function(){
            $('#total_days2').val($(this).val());
            getAppointments();
        });

        $('#total_days2').on('change', function(){
            $('#total_days').val($(this).val());
            getAppointments();
        });

        $('#day').on('change', function(){
            $('#day2').val($(this).val());
            getAppointments();
        });

        $('#day2').on('change', function(){
            $('#day').val($(this).val());
            getAppointments();
        });

        $('.next').on('click', function(){
            var date = new Date($('#calendar_date').val());
            var days = parseInt($('#total_days').val(), 10);

            if(!isNaN(date.getTime())){
                date.setDate(date.getDate() + days);
                $('#calendar_date').val(date.toInputFormat());
                getAppointments();
            } else {
                console.log("Invalid Date");  
            }
        });

        $('.prev').on('click', function(){
            var date = new Date($('#calendar_date').val());
            var days = parseInt($('#total_days').val(), 10);

            if(!isNaN(date.getTime())){
                date.setDate(date.getDate() - days);
                $('#calendar_date').val(date.toInputFormat());
                getAppointments();
            } else {
                console.log("Invalid Date");  
            }
        });

        Date.prototype.toInputFormat = function() {
            var yyyy = this.getFullYear().toString();
            var mm = (this.getMonth()+1).toString(); // getMonth() is zero-based
            var dd  = this.getDate().toString();
            return yyyy + "-" + (mm[1]?mm:"0"+mm[0]) + "-" + (dd[1]?dd:"0"+dd[0]); // padding
        };

        showVisitIconInCalendar(calendar);
    });

    function saveDriversSelection() {
        const checkedValues = $('.driver:checked').map(function () {
            return this.value;
        }).get().join(',');

        localStorage.setItem('checked-drivers', checkedValues);
    }

    function updateDAllCheckboxState() {
        //console.log('length', $('.driver').length);
        //console.log('checkedlength', $('.driver:checked').length);

        if($('.driver').length === $('.driver:checked').length){
            $('#d-all').prop('checked', true);
        }else{
            $('#d-all').prop('checked', false);
        }
    }

    function getAppointments(){
        let drivers = [];
        let number_of_days = $('#total_days').val();
        let day = $('#day').val();
        let calendar_date = $('#calendar_date').val();
        let total_old_appointments = $('#total_appointments').val();
        let old_calendar_date = $('#old_calendar_date').val();
        
        $("input:checkbox[name=sd-all]:checked").each(function() {
            drivers.push($(this).val());
        });

        $.ajax({
            type:'POST',
            url: "{{ route('agenda.store') }}",
            data: {
                drivers: JSON.stringify(drivers),
                number_of_days: number_of_days,
                day: day,
                calendar_date: calendar_date,
                total_old_appointments: total_old_appointments,
                old_calendar_date: old_calendar_date
            },
            beforeSend: function() {
                //$('#div-appointments').hide();
                //$('#div-loader').show();
            },
            success: function(resp){
                $('#total_appointments').val(resp.total_appointments);
                $('#old_calendar_date').val(resp.calendar_date);

                //if(resp.need_to_referesh){
                    $('#div-appointments').hide();
                    $('#div-loader').show();

                    $('#div-appointments').html(resp.agenda);

                    setTimeout(function() {
                        $('#div-loader').hide();
                        $('#div-appointments').show();
                    }, 1000);
                //}else{
                    //$('#div-appointments').html(resp.agenda);
                //}
            },
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
    }

    function showVisitIconInCalendar(calendar){

        const daysContainer = document.querySelector('.days');

        let extractedDates = [];

        daysContainer.querySelectorAll('div').forEach(dayDiv => {
            const dateClass = Array.from(dayDiv.classList).find(cls => cls.startsWith('calendar-day-'));
            
            if (dateClass) {
                const dateParts = dateClass.split('-');
                const year = parseInt(dateParts[2]);
                const month = parseInt(dateParts[3]);
                const day = parseInt(dateParts[4]);

                const dateString = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
                
                extractedDates.push(dateString);
            }
        });

        const calendar_dates = extractedDates.join(',');

        $.ajax({
            url: "{{ route('date.visits') }}",
            type: "POST",
            data: {calendar_dates: calendar_dates},
            headers: {
                'X-CSRF-TOKEN': "{{ csrf_token() }}"
            },
            success: function(date_visits){
            for(var key in date_visits){
                var value = date_visits[key];
                if(value === 'yes'){
                    $('.calendar-day-'+key).find('span').after(' <i class="fa fa-map-marker text-success" aria-hidden="true"></i>');
                }
            }
            }
        });
    }

    function alertSuccess(msg){
        Swal.fire({
            position: 'bottom-right',
            icon: 'success',
            title: msg,
            showConfirmButton: false,
            timer: 3000
        });
    }

    function playNotificationSound() {
        const audio = new Audio("{{ asset('audio/appointment-notification.mp3') }}");
        audio.load();
        audio.play().catch(function(error) {
            console.error("Audio play failed: ", error);
        });
    }
</script>
    
@endpush