@extends('layouts.master')
@section('style')
<style>
    .color-box {
    width: 25px;
    height: 10px;
    border: 1px solid #ccc;
    display: inline-block;
    margin-right: 5px;
}
</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>
                    </div>
                </div>
                <div id='calendar'></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: #bb96d9;"></div>
                                <span class="fs-5">Driver Medical Card Expire</span>
                            </div>
                            <div class="col-lg-3">
                                <div class="color-box" style="background-color: #c011d7;"></div>
                                <span class="fs-5">Driver PEC Card Expire</span>
                            </div>
                            <div class="col-lg-3">
                                <div class="color-box" style="background-color: #6eebb6;"></div>
                                <span class="fs-5">Driver Fit Test Expire</span>
                            </div>
                            <div class="col-lg-3">
                                <div class="color-box" style="background-color: #e56e6e;"></div>
                                <span class="fs-5">Driver Hazmat Expire</span>
                            </div>
                            <div class="col-lg-3">
                                <div class="color-box" style="background-color: #e83e8c;"></div>
                                <span class="fs-5">Truck Insurance Expire</span>
                            </div>
                            <div class="col-lg-3">
                                <div class="color-box" style="background-color: #ff6700;"></div>
                                <span class="fs-5">Truck License Expire</span>
                            </div>
                            <div class="col-lg-3">
                                <div class="color-box" style="background-color: #007bff;"></div>
                                <span class="fs-5">Trailer Insurance Expire</span>
                            </div>
                            <div class="col-lg-3">
                                <div class="color-box" style="background-color: #7cb8ff;"></div>
                                <span class="fs-5">Trailer License Expire</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');
            var jsonData = '';
            var events = JSON.parse(jsonData);
            var calendar = new FullCalendar.Calendar(calendarEl, {
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
                },
                initialDate: "{{ date('Y-m-d') }}",
                navLinks: true,
                nowIndicator: true,
                weekNumbers: true,
                weekNumberCalculation: 'ISO',
                editable: true,
                selectable: true,
                dayMaxEvents: true,
                events: events,
                eventDidMount: function(info) {
                    var event = info.event;
                    var element = info.el;
                    var data = '';
                    if (event.extendedProps.type == "driver") {
                        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>${event.title}</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>
                        <tr><td>NOTES</td><td>${event.title}</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>
                        <tr><td>NOTES</td><td>${event.title}</td></tr>
                    </table>`
                    }

                    $(element).qtip('destroy', true);

                    $(element).qtip({
                        content: data,
                        overwrite: false
                    });
                }
            });

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