@extends('layouts.master')
@section('style')
    <style>
        .color-box {
            width: 25px;
            height: 10px;
            border: 1px solid #ccc;
            display: inline-block;
/*            margin-right: 5px;*/
        }      
        .fc-toolbar button {
            background-color: #007bff !important; 
            border-color: #007bff !important; 
            color: #fff !important; 
            transition: background-color 0.3s; 
        }

        .fc-toolbar button.fc-button-active,
        .fc-toolbar button.fc-button-primary {
            background-color: #0056b3 !important; 
            border-color: #0056b3 !important; 
            color: #fff !important; 
        }

        .fc-toolbar button.fc-button-primary {
            background-color: #007bff !important;
            border-color: #007bff !important;
            color: #fff !important;
        }

        .fc-toolbar button.fc-button-active {
            background-color: #3399ff !important; 
            border-color: #3399ff !important; 
        }
    </style>
@endsection
@section('content')
    <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>
                         <a href="{{ route('assets.tasks.add') }}" class="btn btn-success btn-sm me-2" target="_blank"><i class="fa fa-plus"></i>Add New Task</a>
                    </div>
                </div>
                <div id='calendar_new' style="background-color:#fff;"></div>
                <div class="card mt-3">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-lg-3">
                                <div class="color-box" style="background-color: #ad883a;"></div>
                                <span class="fs-5">Driver License Expire</span>
                            </div>
                           <!--  <div class="col-lg-3">
                                <div class="color-box" style="background-color: #62ad3a;"></div>
                                <span class="fs-5">Driver Insurance Expire</span>
                            </div> -->
                           <!--  <div class="col-lg-3">
                                <div class="color-box" style="background-color: #8d0404;"></div>
                                <span class="fs-5">Driver ABS Expire</span>
                            </div> -->
                           <!--  <div class="col-lg-3">
                                <div class="color-box" style="background-color: #3a87ad;"></div>
                                <span class="fs-5">Driver TDG Expire</span>
                            </div> -->
                           <!--  <div class="col-lg-3">
                                <div class="color-box" style="background-color: #ffc107;"></div>
                                <span class="fs-5">Driver WCB Expire</span>
                            </div> -->
                            <div class="col-lg-3">
                                <div class="color-box" style="background-color: #959953;"></div>
                                <span class="fs-5">Annual Truck Inspection</span>
                            </div>
                            <div class="col-lg-3">
                                <div class="color-box" style="background-color: #325fbf;"></div>
                                <span class="fs-5">90 BIT Inspection Truck</span>
                            </div>
                            <div class="col-lg-3">
                                <div class="color-box" style="background-color: #D81A48;"></div>
                                <span class="fs-5">Truck Plate Expire</span>
                            </div>
                            <div class="col-lg-3 mt-3">
                                <div class="color-box" style="background-color: #5014D0;"></div>
                                <span class="fs-5">Trailer Plate Expire</span>
                            </div>

                            <div class="col-lg-3 mt-3">
                                <div class="color-box" style="background-color: #17C653;"></div>
                                <span class="fs-5">90 BIT Inspection Trailer</span>
                            </div>

                            <div class="col-lg-3 mt-3">
                                <div class="color-box" style="background-color: #0dcaf0;"></div>
                                <span class="fs-5">Annual Trailer Inspection</span>
                            </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');
        var jsonData = null;
        var events = JSON.parse(jsonData);

        var calendar = new FullCalendar.Calendar(calendarEl, {
            headerToolbar: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
            },
            initialDate: new Date().toISOString().slice(0,7) + '-01', 
            navLinks: true,
            nowIndicator: true,
            weekNumbers: true,
            weekNumberCalculation: 'ISO',
            editable: true,
            selectable: true,
            dayMaxEvents: true,
            events: events,

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

            viewDidMount: function(info) {
                if (info.view.type === 'listMonth') {
                    calendar.changeView('listMonth'); 
                }
            },

            eventDidMount: function(info) {
                var event = info.event;
                var element = info.el;
                var data = '';
                if (event.extendedProps.type === "driver") {
                    let sanitizedNotes = event.extendedProps.note ? 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") {
                    let sanitizedNotes = event.title ? sanitizeHtml(event.title) : '';
                    data = `<table class='table table-striped'>\
                    <tr><td>Truck No</td><td>${event.extendedProps.tip.UNIT_ID}</td></tr>\
                    <tr><td>NOTES</td><td>${sanitizedNotes}</td></tr>\
                </table>`;
                }
                if (event.extendedProps.type === "trailer") {
                    let sanitizedNotes = event.title ? sanitizeHtml(event.title) : '';
                    data = `<table class='table table-striped'>\
                    <tr><td>Trailer No</td><td>${event.extendedProps.tip.TRAILER_ID}</td></tr>\
                    <tr><td>NOTES</td><td>${sanitizedNotes}</td></tr>\
                </table>`;
                }
                if (event.extendedProps.type === "task") {
                    let sanitizedNotes = event.extendedProps.tip.DESCRIPTION ? 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();

        function applyPrimaryClass() {
            $('.fc-toolbar button').each(function() {
                $(this).addClass('btn-primary');
            });
        }

        applyPrimaryClass();

        calendar.on('datesSet', function() {
            applyPrimaryClass();
        });

        calendar.on('eventDidMount', function() {
            applyPrimaryClass();
        });

        calendar.on('viewDidMount', function(info) {
            if (info.view.type === 'listMonth') {
                calendar.changeView('listMonth'); 
            }
        });
    });

    function sanitizeHtml(input) {
        let textarea = document.createElement('textarea');
        textarea.innerHTML = input;
        let decoded = textarea.value;
        let withoutTags = decoded.replace(/<[^>]*>/g, '');
        let trimmed = withoutTags.trim();
        return trimmed;
    }
</script>



@endsection()