@extends("website.service-providers.layouts.layout")
@section('title', "Services")
@section("body")

<link href="{{ asset('webAssets/assets/full-calendar/css/core-main.css') }}" rel="stylesheet" />
<link href="{{ asset('webAssets/assets/full-calendar/css/daygrid-main.css') }}" rel="stylesheet" />
<link href="{{ asset('webAssets/assets/full-calendar/css/timegrid-main.css') }}" rel="stylesheet" />
<script src="{{ asset('webAssets/assets/full-calendar/js/main-min.js') }}"></script>

<input type="hidden" id="events" value="" />

<style>
    /* .fc-v-event {
        background: #9f0c34 !important;
        border: 1px solid var(--fc-event-border-color, #9f0c34);
    } */
    .availability-event {
        background-color: rgb(36, 70, 204, 0.9) !important;
        /* border-color: green !important; */
    }
    .booking-event {
        background-color: rgb(55, 136, 216,0.9) !important;
        /* border-color: blue !important; */
    }
    /* .delete-event-icon.delete-event-icon{
        background: green;
    }
    .edit-event-icon.edit-event-icon{
        background: green;
    } */
</style>

<section class="banner-services">
    <img class="banner-background-ellipse" src="{{ asset('assets/images/banner-bg-img.png') }}" alt="">
</section>

<section class="services-breadcrumb-section dashboard-breadcrumb">
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="#">Home</a></li>
                <li class="breadcrumb-item active" aria-current="page">Availability </li>
            </ol>
        </nav>
    </div>
</section>
<section class="dashboard-main">
    <div class="container">
        <div class="row">
            @include("website.service-providers.includes.sidebar")
            @include("website.layouts.modal")
            <div class="main-content client">
                <div class="main-content-wrapper lg-width ">
                    <h3 class="heading-text">Skill Master Status</h3>
                    <ul class="nav-buttons d-flex">
                        <div class="ul-action-btn d-flex flex-wrap">
                            <li><a id="button-calendar" type="button" class="btn btn-primary current">Calendar</a></li>
                            <li><a id="button-map" type="button" class="btn btn-secondary past">Map</a></li>
                        </div>
                    </ul>
                </div>
                <div id="block-calendar">
                    <div id="calendar" class="custom-calender"></div>
                </div>


                <div id="block-map" style="display:none">
                    <div id="map" style="height: 500px;"></div>
                    <div id="controls" class="mt-2">
                        <button id="loadDefault" class="btn btn-secondary btn-sm">Load Default</button>
                        <button id="clear" class="btn btn-secondary btn-sm">Clear</button>
                        <button id="drawArea" class="block-draws btn btn-secondary btn-sm">Draw Area</button>
                        <button class="block-save btn btn-primary" id="saveData" style="display:none">Save</button>
                    </div>
                </div>
            </div>
        </div>
</section>

            <!-- Edit Event Modal -->

            <div id="editEventModal" class="modal custom-modal" style="display:none;">
                <div class="modal-content">
                    <span class="close" id="closeModal">
                        <img src="{{ asset('webAssets/assets/images/cross-btn.svg') }}" alt="cross-icon">
                    </span>

                    <h2 class="heading-text text-center">Please edit your availability time</h2>
                    <div class="edit-items d-flex flex-wrap gap-2 align-items-center mt-2">
                        <input type="time" id="modalStartTime" class="custom-input mt-2 flex-grow-1" />
                        <h5>to</h5>
                        <input type="time" id="modalEndTime" class="custom-input mt-2 flex-grow-1" />
                    </div>

                    <button id="saveEditButton" class="btn btn-secondary mt-3 w-auto">Update</button>
                </div>
            </div>

            <div class="modal" id="deleteEventModal" tabindex="-1">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">

                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="alert-img-col text-center">
                                <img src="{{ asset('webAssets/assets/images/alert-icon.svg') }}" alt="cross-icon">
                            </div>

                            <p class="para mt-2 text-center">Are you sure you would like to proceed with deleting this time slot?
                            </p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary flex-grow-1 btn-confirm-delete" data-bs-dismiss="modal">Yes</button>
                            <button type="button" class="btn btn-decline btn-cancel-delete flex-grow-1" data-bs-dismiss="modal" aria-label="Close">No</button>
                        </div>
                    </div>
                </div>
            </div>

    <script src="https://maps.googleapis.com/maps/api/js?key={{ env('GOOGLE_MAP_KEY') }}&libraries=drawing"></script>

    <script>
        $("#button-calendar").on('click', () => {
            $("#block-map").hide();
            $("#block-calendar").show();

            $("#button-calendar").removeClass("btn btn-secondary past");
            $("#button-calendar").addClass("btn btn-primary current");

            $("#button-map").removeClass("btn btn-primary current");
            $("#button-map").addClass("btn btn-secondary past");
        })
        $("#button-map").on('click', () => {
            $("#block-map").show();
            $("#block-calendar").hide();

            $("#button-calendar").removeClass("btn btn-primary current");
            $("#button-calendar").addClass("btn btn-secondary past");

            $("#button-map").removeClass("btn btn-secondary past");
            $("#button-map").addClass("btn btn-primary current");
        })
    </script>
    <script>

    document.addEventListener('DOMContentLoaded', function () {
   
    var today = new Date().toISOString().slice(0, 10);
    var calendarEl = document.getElementById('calendar');
    
    var events = JSON.parse(document.getElementById('events').value);
    console.log('Calendar events:', events,today);
    console.log('Browser TimeZone:', Intl.DateTimeFormat().resolvedOptions().timeZone);



        var selectedEvent = null;
        var calendar = new FullCalendar.Calendar(calendarEl, {
            displayEventTime: true, // Ensures the time is shown on the calendar
            timeZone: 'local', // Adjust times to Eastern Time
            initialView: 'timeGridWeek',
            slotMinTime: '00:00:00',
            slotMaxTime: '24:00:00',
            slotDuration: '00:30:00',
            slotLabelInterval: '01:00',
            editable: false,
            selectable: true,
            validRange: {
                start: today, // Restrict dates before today
            },
            events: events,
            eventClassNames: function(arg) {
                if (arg.event.extendedProps.eventFlag === 0) {
                    return ['availability-event']; // Green for availability
                } else if (arg.event.extendedProps.eventFlag === 1) {
                    return ['booking-event']; // Blue for bookings
                }
                return [];
            },

            eventContent: function (arg) {
                // let eventEl = document.createElement('div');
                // Event title
                // let titleEl = document.createElement('span');
                // titleEl.innerHTML = arg.event.title;
                // eventEl.appendChild(titleEl);

                // Convert UTC start and end times to local time
                let startTime = new Date(arg.event.start);
                let endTime = new Date(arg.event.end);

                let localStartTime = startTime.toLocaleString([], {
                    hour: '2-digit',
                    minute: '2-digit',
                    hour12: true,
                });

                let localEndTime = endTime.toLocaleString([], {
                    hour: '2-digit',
                    minute: '2-digit',
                    hour12: true,
                });

                // Display the local times
                // let timeEl = document.createElement('span');
                // timeEl.innerHTML = `${localStartTime} - ${localEndTime}`;
                // eventEl.appendChild(timeEl);


                let eventEl = document.createElement('div');
                // eventEl.style.padding = '5px'; // Add padding to the event container
                eventEl.style.marginTop = '5px'; // Add spacing between event elements

                let timeEl = document.createElement('span');
                timeEl.innerHTML = `${arg.event.title} ${localStartTime} - ${localEndTime}`;
                timeEl.style.display = 'inline-block'; // Ensure it respects padding
                timeEl.style.marginLeft = '5px'; // Add slight spacing from the left edge

                eventEl.appendChild(timeEl);


                let selectedDateEvent = startTime.toISOString().slice(0, 10);
                let eventFlag = arg.event.extendedProps.eventFlag;

                // Event action based on conditions
                if (selectedDateEvent >= today && eventFlag == 0) {
                    // Edit icon
                    let editIcon = document.createElement('span');
                    editIcon.innerHTML = '<i class="fa fa-edit" style="color:white; cursor:pointer;"></i>';
                    editIcon.classList.add('edit-event-icon');

                    editIcon.addEventListener('click', function () {
                        document.getElementById('modalStartTime').value = localStartTime.slice(0, 5); // Extract hour and minute
                        document.getElementById('modalEndTime').value = localEndTime.slice(0, 5); // Extract hour and minute

                        // Show the modal
                        document.getElementById('editEventModal').style.display = 'block';

                        // Save button functionality
                        document.getElementById('saveEditButton').onclick = function () {
                            var newStartTime = document.getElementById('modalStartTime').value;
                            var newEndTime = document.getElementById('modalEndTime').value;
                            var localDateStart = new Date(arg.event.start);
                            var localDateEnd = new Date(arg.event.end);

                            // Set the new start and end time based on the input
                            var startParts = newStartTime.split(':');
                            var endParts = newEndTime.split(':');
                            
                            // Set the hour and minute values on the local date objects
                            localDateStart.setHours(startParts[0], startParts[1], 0); // Setting hour and minute for start time
                            localDateEnd.setHours(endParts[0], endParts[1], 0); // Setting hour and minute for end time
                            
                            // Convert both start and end times to UTC
                            var from_timea = localDateStart.toISOString(); // Convert to UTC
                            var to_timea = localDateEnd.toISOString(); // Convert to UTC

                            console.log(from_timea, to_timea);

                            if (newStartTime && newEndTime) {
                                // Send AJAX request to update the event
                                $.ajax({
                                    url: "{{ route('sp.spAvailabilityUpdateWeb') }}",
                                    type: 'POST',
                                    data: {
                                        id: arg.event.id,
                                        sp_id: arg.event.extendedProps.sp_id,
                                        date: arg.event.extendedProps.aval_date,
                                        // from_time: arg.event.start.toISOString().split('T')[0] + 'T' + newStartTime + ':00Z',
                                        // to_time: arg.event.end.toISOString().split('T')[0] + 'T' + newEndTime + ':00Z'
                                        from_time: from_timea,
                                        to_time: to_timea
                                    },
                                    headers: {
                                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                    },
                                    success: function (response) {
                                        if (response.success) {
                                            arg.event.setStart(new Date(arg.event.start.toISOString().split('T')[0] + 'T' + newStartTime + ':00Z'));
                                            arg.event.setEnd(new Date(arg.event.end.toISOString().split('T')[0] + 'T' + newEndTime + ':00Z'));
                                            toastr.success('Availability updated successfully!');
                                            document.getElementById('editEventModal').style.display = 'none';
                                            setTimeout(function () {
                                                location.reload();
                                            }, 500);
                                        } else if (response.errors) {
                                            toastr.error(response.errors.message);
                                        } else {
                                            toastr.error('Error updating event');
                                        }
                                    },
                                    error: function (xhr, status, error) {
                                        toastr.error('Error: ' + error);
                                    }
                                });
                            }
                        };
                    });
                    eventEl.appendChild(editIcon);

                    // Delete icon
                    let deleteIcon = document.createElement('span');
                    deleteIcon.innerHTML = '<i class="fa fa-trash" style="color:white; cursor:pointer;"></i>';
                    deleteIcon.classList.add('delete-event-icon');

                    deleteIcon.addEventListener('click', function () {
                        // Open the deleteEventModal
                        let modal = new bootstrap.Modal(document.getElementById('deleteEventModal'));
                        modal.show();

                        // Handle confirming the delete action when the confirm button in the modal is clicked
                        document.querySelector('#deleteEventModal .btn-confirm-delete').onclick = function () {
                            $.ajax({
                                url: "{{ route('sp.spAvailabilityDelete') }}", 
                                type: 'POST',
                                data: {
                                    id: arg.event.id
                                },
                                headers: {
                                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                },
                                success: function (response) {
                                    if (response.success) {
                                        arg.event.remove();
                                        toastr.success(response.success.message);
                                        setTimeout(function () {
                                            location.reload();
                                        }, 500);
                                        modal.hide();
                                    } else {
                                        toastr.error('Error in deleting availability');
                                    }
                                },
                                error: function (xhr, status, error) {
                                    toastr.error('Error: ' + error);
                                }
                            });
                        };

                        document.querySelector('#deleteEventModal .btn-cancel-delete').onclick = function () {
                            modal.hide();
                        };
                    });

                    eventEl.appendChild(deleteIcon);
                }

                return { domNodes: [eventEl] };
            },

            select: function (info) {
                var selectedDate = info.startStr.slice(0, 10);
                if (selectedDate < today) {
                    calendar.unselect();
                    toastr.error('Please select a date from today onwards.');
                } else {
                    if (selectedEvent) {
                        selectedEvent.remove();
                    }
                    selectedEvent = calendar.addEvent({
                        title: 'Selected Time',
                        start: info.startStr,
                        end: info.endStr,
                        rendering: 'background',
                        color: '#ff9f89',
                        editable: false
                    });
                    showSelectedTimeSlot(info.startStr, info.endStr);
                    showSaveButton();
                    var clickListener = function (event) {
                        if (selectedEvent && event.target !== calendarEl && !calendarEl.contains(event.target)) {
                            selectedEvent.remove();
                            document.removeEventListener('click', clickListener);
                        }
                    };
                    document.addEventListener('click', clickListener);
                }
            },
            unselect: function () {
                clearSelectedTimeSlot();
                hideSaveButton();
            },
            headerToolbar: {
                start: 'prev,next today',
                center: 'title',
                end: 'saveButton'
            },
            customButtons: {
                saveButton: {
                    text: 'Save Slot',
                    click: function () {
                        saveSelectedTimeSlot();
                    }
                }
            }
        });


        calendar.render();


        function deleteEvent(event) {
            if (confirm("Are you sure you want to delete this event?")) {
                event.remove();
                // Optionally send a request to the server to delete the event
            }
        }

        function showSelectedTimeSlot(start, end) {
            var selectedTimeElement = document.getElementById('selectedTime');
            if (selectedTimeElement) {
                selectedTimeElement.textContent = `Selected Time: ${start} to ${end}`;
            }
        }

        function clearSelectedTimeSlot() {
            var selectedTimeElement = document.getElementById('selectedTime');
            if (selectedTimeElement) {
                selectedTimeElement.textContent = '';
            }
        }

        function showSaveButton() {
            var saveButton = document.querySelector('.fc-button-saveButton');
            if (saveButton) {
                saveButton.style.display = 'block';
            }
        }

        function hideSaveButton() {
            var saveButton = document.querySelector('.fc-button-saveButton');
            if (saveButton) {
                saveButton.style.display = 'none';
            }
        }

        function saveSelectedTimeSlot() {
            if (selectedEvent) {
                var startDate = selectedEvent.startStr.slice(0, 10);
                var startTime = new Date(selectedEvent.startStr).toISOString(); // UTC format
                var endTime = new Date(selectedEvent.endStr).toISOString(); // UTC format
                // var startTime = selectedEvent.startStr;
                // var endTime = selectedEvent.endStr;

                var selectedDateTimeRange = {
                    date: startDate,
                    from_time: startTime,
                    to_time: endTime
                };

                $.ajax({
                    url: "{{ route('sp.saveAvailability') }}",
                    type: 'POST',
                    data: selectedDateTimeRange,
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function (response) {
                        if (response.success) {
                            toastr.success(response.message);
                            setTimeout(function () {
                                location.reload();
                            }, 500);
                        } else {
                            toastr.error(response.message);
                        }
                    },
                    error: function (xhr, status, error) {
                        toastr.error(error);
                    }
                });

                selectedEvent.remove();
                selectedEvent = null;
                clearSelectedTimeSlot();
                hideSaveButton();
            } else {
                toastr.error('Please select a time slot first.');
            }
        }
    });

</script>


<script>
    let map;
    let drawingManager;
    let selectedShape;
    let allLatLng = [];

    function initMap() {
        const locations = {!! json_encode($locationData['location'] ?? []) !!};
        const defaultCenter = locations.length > 0 ? {
            lat: parseFloat(locations[0].latitude),
            lng: parseFloat(locations[0].longitude)
        } : {
            lat: 37.4316,
            lng: -78.6569
        };
        // Initialize the map
        map = new google.maps.Map(document.getElementById('map'), {
            center: defaultCenter,
            zoom: 8,
            disableDefaultUI: true
        });

        drawingManager = new google.maps.drawing.DrawingManager({
            // drawingMode: google.maps.drawing.OverlayType.POLYGON,
            drawingMode: null,
            drawingControl: false,
            polygonOptions: {
                editable: true,
                draggable: true
            }
        });

        google.maps.event.addListener(drawingManager, 'overlaycomplete', function (event) {
            if (event.type === google.maps.drawing.OverlayType.POLYGON) {
                if (selectedShape) {
                    selectedShape.setMap(null);
                }
                selectedShape = event.overlay;
                selectedShape.setEditable(true);
                selectedShape.setDraggable(true);
                allLatLng = selectedShape.getPath().getArray().map(latLng => ({
                    latitude: latLng.lat(),
                    longitude: latLng.lng()
                }));
                // console.log('Polygon vertices:', allLatLng);
                drawingManager.setDrawingMode(null);
            }
        });

        // Function to draw a default polygon
        function drawDefaultPolygon() {
            const locations = {!! json_encode($locationData['location'] ?? []) !!};
            // console.log(locations,'ak');
            // const defaultPolygonCoords = [
            //     { lat: 37.5, lng: -78.7 },  // Example coordinates
            //     { lat: 37.4, lng: -78.8 },  // Add more coordinates as needed
            //     { lat: 37.6, lng: -78.9 }
            // ];
            const defaultPolygonCoords = locations.map(coord => ({
                lat: parseFloat(coord.latitude),
                lng: parseFloat(coord.longitude)
            }));

            // console.log('Converted Coordinates:', defaultPolygonCoords);

            const defaultPolygon = new google.maps.Polygon({
                paths: defaultPolygonCoords,
                editable: false,
                draggable: false,
                map: map
            });

            selectedShape = defaultPolygon;
            allLatLng = defaultPolygonCoords.map(coord => ({
                latitude: coord.lat,
                longitude: coord.lng
            }));
            // console.log('Default Polygon verticessssss:', allLatLng);
        }

        // Draw the default polygon on map load
        drawDefaultPolygon();

        document.getElementById('loadDefault').addEventListener('click', () => {
            map.setCenter(defaultCenter);
            map.setZoom(8);
            if (selectedShape) {
                selectedShape.setMap(null);
            }
            allLatLng = [];

            $(".block-draws").css("display", "");
            $(".block-save").css("display", "none");
            // Draw default polygon again
            drawDefaultPolygon();
        });
        document.getElementById('clear').addEventListener('click', () => {
            map.setCenter(defaultCenter);
            map.setZoom(8);
            if (selectedShape) {
                selectedShape.setMap(null);
            }
            allLatLng = [];

            $(".block-draws").css("display", "");
            $(".block-save").css("display", "none");
        });

        document.getElementById('drawArea').addEventListener('click', () => {
            map.setCenter(defaultCenter);
            map.setZoom(8);
            if (selectedShape) {
                selectedShape.setMap(null);
            }
            allLatLng = [];
            $(".block-draws").css("display", "none");
            $(".block-save").css("display", "");
            drawingManager.setMap(map);
            drawingManager.setDrawingMode(google.maps.drawing.OverlayType.POLYGON);
        });

        google.maps.event.addListener(map, 'click', () => {
            if (!drawingManager.getDrawingMode()) {
                map.setOptions({
                    scrollwheel: true,
                    disableDoubleClickZoom: true
                });
            }
        });
    }
    window.onload = initMap;

    document.getElementById('saveData').addEventListener('click', () => {
        var formData = new FormData();
        formData.append('location', JSON.stringify(allLatLng));
        $.ajax({
            url: "{{ route('sp.updateLocation') }}",
            method: 'POST',
            processData: false,
            contentType: false,
            data: formData,
            dataType: 'json',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function (response) {
                if (response.success.status == 200) {
                    toastr.success(response.success.message);
                    setTimeout(function () {
                        location.reload();
                    }, 1000);
                } else if (response.error.status == 422) {
                    toastr.error(response.error.message);
                }
            },
            error: function (xhr, status, error) {
                console.error('There was a problem with your AJAX request:', error);
            }
        });
    });

document.getElementById('closeModal').addEventListener('click', function() {
    document.getElementById('editEventModal').style.display = 'none';
});

</script>


@endsection