@extends('layouts.master')

@section('content')
@php
    $status = config('custom.status');
@endphp
<style>
    .status-btn.active {
    color: #00000073;
    background: #004085;
      
    }
</style>
    <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
        <div id="kt_content_container" class="container-xxl">
            <div class="flex-lg-row-fluid">
                <div class="d-flex flex-wrap flex-stack pb-7">
                    <div class="d-flex flex-wrap align-items-center my-1">
                        <h3 class="fw-bold me-5 my-1">Calendar
                        </h3>
                    </div>
                </div>
              
              

              
                <div class="tab-content">
                    <div id="kt_project_users_table_pane" class="tab-pane fade show active">
                        <div class="card card-flush">
                            <div class="card-body pt-0">
                                     <div id='calendar_new' style="background-color:#fff;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection()
@section('script')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.3/jquery.qtip.min.js"></script>
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.11/index.global.min.js'></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.3/jquery.qtip.min.css">
    <script>
    
        document.addEventListener('DOMContentLoaded', function() {
            var calendarEl = document.getElementById('calendar_new');

            // Dummy events data
            var events = [
                {
                    title: 'Driver Meeting',
                    start: '2025-08-06',
                    extendedProps: {
                        type: 'driver',
                        tip: {
                            NAME: 'John Doe',
                            PHONE: '123-456-7890',
                            EMAIL: 'john@example.com'
                        },
                        note: 'Discuss route updates and fuel policy.'
                    }
                },
                {
                    title: 'Truck Maintenance',
                    start: '2025-08-08',
                    extendedProps: {
                        type: 'truck',
                        tip: {
                            UNIT_ID: 'TRK123'
                        }
                    }
                },
                {
                    title: 'Trailer Inspection',
                    start: '2025-08-10',
                    extendedProps: {
                        type: 'trailer',
                        tip: {
                            TRAILER_ID: 'TRL789'
                        }
                    }
                },
                {
                    title: 'Task: Load Check',
                    start: '2025-08-11',
                    extendedProps: {
                        type: 'task',
                        priority: 'High',
                        tip: {
                            TASK: 'Check Load',
                            VERIFIED: 'Pending',
                            DESCRIPTION: 'Verify the weight and securing of the load.'
                        }
                    }
                }
            ];

            // Simple sanitizer
            function sanitizeHtml(input) {
                return $('<div>').text(input).html();
            }

            var calendar = new FullCalendar.Calendar(calendarEl, {
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
                },
                initialDate: '2025-08-01',
                navLinks: true,
                nowIndicator: true,
                weekNumbers: true,
                editable: false,
                selectable: false,
                dayMaxEvents: true,
                events: events,

                views: {
                    listMonth: {
                        buttonText: 'List',
                        type: 'listMonth',
                        duration: { days: 31 },
                    }
                },

                eventDidMount: function(info) {
                    var event = info.event;
                    var element = info.el;
                    var data = '';
                    if (event.extendedProps.type === "driver") {
                        let sanitizedNotes = sanitizeHtml(event.extendedProps.note || '');
                        data = `<table class='table table-striped'>
                            <tr><td>NAME</td><td>${event.extendedProps.tip.NAME}</td></tr>
                            <tr><td>PHONE</td><td>${event.extendedProps.tip.PHONE}</td></tr>
                            <tr><td>EMAIL</td><td>${event.extendedProps.tip.EMAIL}</td></tr>
                            <tr><td>NOTES</td><td>${sanitizedNotes}</td></tr>
                        </table>`;
                    }
                    if (event.extendedProps.type === "truck") {
                        data = `<table class='table table-striped'>
                            <tr><td>Truck No</td><td>${event.extendedProps.tip.UNIT_ID}</td></tr>
                        </table>`;
                    }
                    if (event.extendedProps.type === "trailer") {
                        data = `<table class='table table-striped'>
                            <tr><td>Trailer No</td><td>${event.extendedProps.tip.TRAILER_ID}</td></tr>
                        </table>`;
                    }
                    if (event.extendedProps.type === "task") {
                        let sanitizedNotes = sanitizeHtml(event.extendedProps.tip.DESCRIPTION || '');
                        data = `<table class='table table-striped'>
                            <tr><td>Task</td><td>${event.extendedProps.tip.TASK}</td></tr>
                            <tr><td>Category</td><td>${event.extendedProps.tip.VERIFIED}</td></tr>
                            <tr><td>Priority</td><td>${event.extendedProps.priority}</td></tr>
                            <tr><td>Description</td><td>${sanitizedNotes}</td></tr>
                        </table>`;
                    }

                    $(element).qtip('destroy', true);
                    $(element).qtip({
                        content: data,
                        position: {
                            my: 'top center',
                            at: 'bottom center',
                            adjust: {
                                screen: true
                            }
                        },
                        overwrite: false
                    });
                }
            });

            calendar.render();
        });
   
    </script>
@endsection()