@extends('layouts.app')
@section('head')
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Personal Schedule Tracker</title>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
#calendar .fc-day-number {
    color: red !important; /* Change this to your desired color */
}
.modal-footer {
    display: flex;
    justify-content: space-between; /* This will evenly distribute the buttons */
    margin-top: 10px; /* Adjust margin as needed */
  }

 
</style>
@endsection

@section('content')
    <div class="container mt-5">
        {{-- For Search --}}
        <!-- <div class="row">
            <div class="col-md-6">
                <div class="input-group mb-3">
                    <input type="text" id="searchInput" class="form-control" placeholder="Search events">
                    <div class="input-group-append">
                        <button id="searchButton" class="btn btn-primary">{{__('Search')}}</button>
                    </div>
                </div>
            </div>

            <div class="col-md-6">
                <div class="btn-group mb-3" role="group" aria-label="Calendar Actions">
                    <button id="exportButton" class="btn btn-success">{{__('Export Calendar')}}</button>
                </div>
                <div class="btn-group mb-3" role="group" aria-label="Calendar Actions">
                    <a href="{{ URL('add-schedule') }}" class="btn btn-success">{{__('Add')}}</a>
                </div>

            </div>
        </div> -->

       
                 <div class="card-body">
    <a type="button" class="btn btn-primary" href="https://c.ats-logiciel.com/cabs/public/billets">
        Billets
</a>
    <a type="button" class="btn btn-primary" href="https://c.ats-logiciel.com/cabs/public/chauffeurs/create">
        Nouveau Véhicule
</a>
    <br><br>
    <div id="calendar" style="width: 100%; height: 100vh;"></div>
</div>
 <!-- modal-content.html -->
<!-- <div id="myModalContent">
    <h2 id="modalTitle"></h2>
    <p id="modalDateStart"></p>
    <button id="printButton">Print</button>
</div> -->
<div class="modal" tabindex="-1"  id="myModalContent" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" >Event</h5>
 

        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <h5 class="modal-title" id="modalTitle" >Event</h5>
     

        <h5  type= "date" class="modal-title" id="modalDateStart" >Date</h5>
      </div>
      <div class="modal-footer">
           
    
       
            <button type="button" class="btn btn-primary" id="printButton">Generate Billet Collectif</button>
            
            <button type="button" class="btn btn-info" id="editButton">Edit</button>
            <button type="button" class="btn btn-danger" id="suppButton">Supprimer</button>

           
      </div>
    </div>
  </div>
</div>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script type="text/javascript">
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        var calendarEl = document.getElementById('calendar');
        var events = [];
        var calendar = new FullCalendar.Calendar(calendarEl, {
            headerToolbar: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth'
            },
            buttonText: {
                prev: 'Précédent',
                next: 'Suivant',
                today: 'Aujourd\'hui',
                month: 'Mois',
                week: 'Semaine',
                day: 'Jour'
            },
            initialView: 'dayGridMonth',
            timeZone: 'UTC',
            events: '/cabs/public/events',
            locale: 'fr',
            editable: true,
            views: {
    dayGridMonth: {
      dayHeaderFormat: {
        weekday: 'long'
      }
    }
  },

            // Deleting The Event
            // eventContent: function(info) {
            //     var eventTitle = info.event.title;
            //     var eventElement = document.createElement('div');
            //     eventElement.innerHTML = '<span style="cursor: pointer;">❌</span> ' + eventTitle;

            //     eventElement.querySelector('span').addEventListener('click', function() {
            //         if (confirm("Are you sure you want to delete this event?")) {
            //             var eventId = info.event.id;
            //             $.ajax({
            //                 method: 'DELETE',
            //                 url: '/schedule/' + eventId,
            //                 headers: {
            //                     'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            //                 },
            //                 success: function(response) {
            //                     console.log('Event deleted successfully.');
            //                     calendar.refetchEvents(); // Refresh events after deletion
            //                 },
            //                 error: function(error) {
            //                     console.error('Error deleting event:', error);
            //                 }
            //             });
            //         }
            //     });
            //     return {
            //         domNodes: [eventElement]
            //     };
            // },


//             eventContent: function(info) {
//     var eventTitle = info.event.title+ '\n\n\n\n\n';
//     var eventElement = document.createElement('div');
//     eventElement.innerHTML = '<span style="cursor: pointer;">❌</span> ' + eventTitle;

//     eventElement.querySelector('span').addEventListener('click', function() {
    

//                     var eventData = JSON.stringify(info.event);
//                     window.location.href = '/add-schedule?event=' + encodeURIComponent(eventData);
        
//     });
//     return {
//         domNodes: [eventElement]
//     };
// },
eventContent: function(info) {
    var eventTitle = info.event.title;
    var eventid = info.event.id;

    // var de = info.event.heure_debut.toISOString().slice(0, 10); 
    // var fi = info.event.heure_fin.toISOString().slice(0, 10); 
    
    var eventData = JSON.stringify(info.event);
    // console.log(eventData);

    var eventObj = JSON.parse(eventData);

    // Access 'heure_debut' and 'heure_fin' properties from 'extendedProps'
    var heureDebut = eventObj.extendedProps.heure_debut;
    // console.log(heureDebut);

    const timeParts = heureDebut.split(":");


    const hours = timeParts[0];
    const minutes = timeParts[1];
    const seconds = timeParts[2].slice(0, 2);


    const newheureDebut = hours + ":" + minutes;
    // console.log(newTimeString);

    var heureFin = eventObj.extendedProps.heure_fin;


    // console.log(heureDebut);

    const timePartsf = heureFin.split(":");


    const hoursf = timePartsf[0];
    const minutesf = timePartsf[1];
    // const seconds = timePartsf[2].slice(0, 2);


    const newheureFin = hoursf + ":" + minutesf;

    var eventDateStart = info.event.start.toISOString().slice(0, 10); 

    var eventElement = document.createElement('div');
    eventElement.innerHTML = '<h6 style="text-align: center; word-wrap: break-word; white-space: normal;">' + eventTitle +  '<br>' + newheureDebut + ' - ' + newheureFin + '</h6>';








    eventElement.querySelector('h6').addEventListener('click', function() {
        event.stopPropagation();
        var modalContent = $('#myModalContent');
        var modalTitle = $('#modalTitle');
        var modalid = $('#modalid');

        var modalDateStart = $('#modalDateStart');
        var printButton = $('#printButton');
        var editButton = $('#editButton');
        var suppButton = $('#suppButton');

      


        modalTitle.text('Nom Event : ' + eventTitle);
        modalDateStart.text('Date : ' + eventDateStart);
        modalid.text(eventid);

        printButton.on('click', function() {
                            var eventData = JSON.stringify(info.event);
                 window.location.href = '/cabs/public/evenst/show?event=' + eventid;
                //  window.location.href = '/evenst/show?event=' + encodeURIComponent(eventData);

        });
        editButton.on('click', function() {
                            var eventData = JSON.stringify(info.event);
                 window.location.href = '/cabs/public/evenst/update/' + eventid;
                //  window.location.href = '/evenst/show?event=' + encodeURIComponent(eventData);

        });
        suppButton.on('click', function() {
                            var eventData = JSON.stringify(info.event);
                 window.location.href = '/cabs/public/evenst/delete/' + eventid;
                //  window.location.href = '/evenst/show?event=' + encodeURIComponent(eventData);

        });   
        var closeButton = document.querySelector('.close');
        if (closeButton) {
            // Add an event listener for the "Close" button
            closeButton.addEventListener('click', function() {
                // Close the modal
                modalContent.modal('hide');
            });
        }
 
        // Show the modal
        modalContent.modal('show');
    });

    return {
        domNodes: [eventElement]
    };
},


            dateClick: function(info) {

                var clickedDate = info.dateStr;

                localStorage.setItem('selectedDate', clickedDate);

                window.location.href = 'https://c.ats-logiciel.com/cabs/public/evenst/create?date='+ encodeURIComponent(clickedDate);
            },

  

            // eventDrop: function(info) {
            //     var eventId = info.event.id;
            //     var newStartDate = info.event.start;
            //     var newEndDate = info.event.end || newStartDate;
            //     var newStartDateUTC = newStartDate.toISOString().slice(0, 10);
            //     var newEndDateUTC = newEndDate.toISOString().slice(0, 10);

            //     $.ajax({
            //         method: 'PUT',
            //         url: `/schedule/${eventId}`,
            //         data: {
            //             start_date: newStartDateUTC,
            //             end_date: newEndDateUTC,
            //         },
            //         success: function() {
            //             console.log('Event moved successfully.');
            //         },
            //         error: function(error) {
            //             console.error('Error moving event:', error);
            //         }
            //     });
            // },

            // Event Resizing
            // eventResize: function(info) {
            //     var eventId = info.event.id;
            //     var newEndDate = info.event.end;
            //     var newEndDateUTC = newEndDate.toISOString().slice(0, 10);

            //     $.ajax({
            //         method: 'PUT',
            //         url: `/schedule/${eventId}/resize`,
            //         headers: {
            //             'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            //         },
            //         data: {
            //             end_date: newEndDateUTC
            //         },
            //         success: function() {
            //             console.log('Event resized successfully.');
            //         },
            //         error: function(error) {
            //             console.error('Error resizing event:', error);
            //         }
            //     });
            // },
        });

        calendar.render();

        // document.getElementById('searchButton').addEventListener('click', function() {
        //     var searchKeywords = document.getElementById('searchInput').value.toLowerCase();
        //     filterAndDisplayEvents(searchKeywords);
        // });


        // function filterAndDisplayEvents(searchKeywords) {
        //     $.ajax({
        //         method: 'GET',
        //         url: `/events/search?title=${searchKeywords}`,
        //         success: function(response) {
        //             calendar.removeAllEvents();
        //             calendar.addEventSource(response);
        //         },
        //         error: function(error) {
        //             console.error('Error searching events:', error);
        //         }
        //     });
        // }


        // // Exporting Function
        // document.getElementById('exportButton').addEventListener('click', function() {
        //     var events = calendar.getEvents().map(function(event) {
        //         return {
        //             title: event.title,
        //             start: event.start ? event.start.toISOString() : null,
        //             end: event.end ? event.end.toISOString() : null,
        //             color: event.backgroundColor,
        //         };
        //     });

        //     var wb = XLSX.utils.book_new();

        //     var ws = XLSX.utils.json_to_sheet(events);

        //     XLSX.utils.book_append_sheet(wb, ws, 'Events');

        //     var arrayBuffer = XLSX.write(wb, {
        //         bookType: 'xlsx',
        //         type: 'array'
        //     });

        //     var blob = new Blob([arrayBuffer], {
        //         type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
        //     });

        //     var downloadLink = document.createElement('a');
        //     downloadLink.href = URL.createObjectURL(blob);
        //     downloadLink.download = 'events.xlsx';
        //     downloadLink.click();
        // })
        function confirmDelete() {
            var userConfirmed = confirm("Êtes-vous sûr? La suppression est irréversible!");
            if (userConfirmed) {
                // If user confirms, submit the form
                document.getElementById("deleteForm").submit();
            }
        }
    </script>
@endsection