@can('absenceForm')
    @extends('adminlte::page')

    @section('title', config('adminlte.title') . ' | Absence Form')


@section('content_header')<div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6 m-0 text-dark">
                <h1>Absence Forms</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="/">Home</a></li>
                    <li class="breadcrumb-item active">Absence Form</li>
                </ol>
            </div>
        </div>
    </div>
@stop

@section('content')
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Homemade+Apple&display=swap" rel="stylesheet">
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@6.1.10/index.global.min.js'></script>
    <style>
        #calendar {
            min-width: 100%;
            height: 60vh;
            margin: auto;
        }

        .calendar-container {
            min-width: 100%;
            height: 100%;
            position: relative;
            /* Set parent to relative */
        }

        #calendar-loader {
            position: absolute;
            /* Set loader to absolute */
            top: 50%;
            left: 50%;
            width: 150px;
            height: 150px;
            z-index: 10;
            /* Ensure loader is on top of other elements */
        }

        #calendar-loader1 {
            position: absolute;
            /* Set loader to absolute */
            top: 50%;
            left: 50%;
            width: 150px;
            height: 150px;
            z-index: 10;
            /* Ensure loader is on top of other elements */
        }

        .Signed {
            font-family: "Homemade Apple", cursive;
            font-weight: 400;
            font-style: normal;
        }

        .modal-body.BTG-watermark {
            position: relative;
        }

        .modal-body.BTG-watermark::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: url('/img/BTG_logo.png') no-repeat center;
            background-size: contain;
            width: 100%;
            height: 100%;
            opacity: 0.1;
            z-index: 0;
            pointer-events: none;
        }
    </style>
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    @if (session('success'))
                        <script>
                            toastr.options = {
                                "closeButton": true,
                                "debug": false,
                                "newestOnTop": false,
                                "progressBar": true,
                                "positionClass": "toast-top-right",
                                "preventDuplicates": false,
                                "onclick": null,
                                "showDuration": "300",
                                "hideDuration": "1000",
                                "timeOut": "5000",
                                "extendedTimeOut": "1000",
                                "showEasing": "swing",
                                "hideEasing": "linear",
                                "showMethod": "fadeIn",
                                "hideMethod": "fadeOut"
                            };
                            toastr.success('{{ session('success') }}');
                        </script>
                    @endif
                    @if (session('error'))
                        <script>
                            toastr.options = {
                                "closeButton": true,
                                "debug": false,
                                "newestOnTop": false,
                                "progressBar": true,
                                "positionClass": "toast-top-right",
                                "preventDuplicates": false,
                                "onclick": null,
                                "showDuration": "300",
                                "hideDuration": "1000",
                                "timeOut": "5000",
                                "extendedTimeOut": "1000",
                                "showEasing": "swing",
                                "hideEasing": "linear",
                                "showMethod": "fadeIn",
                                "hideMethod": "fadeOut"
                            };
                            toastr.error('{{ session('error') }}');
                        </script>
                    @endif


                    <div class="table-responsive">
                        <table id="holidayList" class="table table-striped table-hover W-100">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Employee</th>
                                    <th>Job title</th>
                                    <th>Date</th>
                                    <th>Day(s)</th>
                                    <th>Type</th>
                                    <th style="width: 200px;">Note</th>
                                    <th style="width: 120px;">Requested date</th>
                                    <th>Status</th>
                                    <th style="width: 180px;">Actions</th>
                                </tr>
                            </thead>
                            <tbody>

                                @foreach ($holDatas as $data)
                                    <tr>
                                        <td class="align-middle">
                                            {{ $data->id }}
                                        </td>
                                        <td class="align-middle">
                                            {{ $data->name }}
                                        </td>
                                        <td class="align-middle">
                                            {{ $data->jobtitle }}
                                        </td>
                                        <td class="align-middle">
                                            {{ date('d/m/Y', strtotime($data->start_date)) }} {{ $data->start_ampm }} -
                                            {{ date('d/m/Y', strtotime($data->end_date)) }} {{ $data->end_ampm }}
                                        </td>
                                        <td class="align-middle">
                                            {{ number_format($data->number_days, 1) }}
                                        </td>
                                        <td class="align-middle">
                                            {{ $data->type }}
                                        </td>
                                        <td class="align-middle">
                                            {{ $data->note }}
                                        </td>
                                        <td class="align-middle">
                                            {{ date('d/m/Y H:m:s', strtotime($data->created_at)) }}
                                        </td>
                                        <td class="align-middle">
                                            @switch($data->status)
                                                @case('Approved')
                                                    @if ($data->cancel_req === 1)
                                                        <div class="badge badge-success">
                                                            <h5 class="font-weight-bold p-1">Approved</h5>
                                                        </div> <span class="h4"><i
                                                                class="fas fa-long-arrow-alt-right fa-lg"></i></span>
                                                        <div class="badge badge-secondary">
                                                            <h5 class="font-weight-bold p-1">Cancelling</h5>
                                                        </div>
                                                    @else
                                                        <span class="badge badge-success">
                                                            <h5 class="font-weight-bold p-1">Approved</h5>
                                                        </span>
                                                    @endif
                                                @break

                                                @case('Pending')
                                                    @if ($data->cancel_req === 1)
                                                        <div class="badge badge-warning">
                                                            <h5 class="font-weight-bold p-1">Pending</h5>
                                                        </div> <span class="h4"><i
                                                                class="fas fa-long-arrow-alt-right fa-lg"></i></span>
                                                        <div class="badge badge-secondary">
                                                            <h5 class="font-weight-bold p-1">Cancelling</h5>
                                                        </div>
                                                    @else
                                                        <div class="badge badge-warning">
                                                            <h5 class="font-weight-bold p-1">Pending</h5>
                                                        </div>
                                                    @endif
                                                @break
                                            @endswitch
                                        </td>
                                        <td class="align-middle">
                                            <a type="button" class="btn btn-primary mr-4" data-toggle="modal"
                                                data-target="#approveModal{{ $data->id }}">View Form</a>

                                            {{-- <a href="#" class="btn btn-danger mr-4" data-toggle="modal"
                                                data-target="#rejectmodal{{ $data->id }}">Reject</a> --}}
                                        </td>
                                    </tr>
                                    @if (!empty($data->id))
                                        <!-- Modal Approved/Reject -->
                                        <div class="modal fade" id="approveModal{{ $data->id }}" tabindex="-1"
                                            data-backdrop="static" data-keyboard="false" aria-labelledby="Model_Approve"
                                            aria-hidden="true">
                                            <div class="modal-dialog modal-dialog-centered modal-lg">
                                                <div class="modal-content">
                                                    <form action="{{ route('absence_form.update', $data->id) }}"
                                                        method="POST">
                                                        @csrf
                                                        @method('PUT')
                                                        <div class="modal-header">
                                                            <h5 class="modal-title text-center" id="exampleModalLabel">
                                                                Leave of
                                                                absence for
                                                                {{ $data->type }}
                                                                - {{ $data->name }}
                                                                {{ date('d/m/Y', strtotime($data->start_date)) }} -
                                                                {{ date('d/m/Y', strtotime($data->end_date)) }} </h5>
                                                            <button type="button" class="close" data-dismiss="modal"
                                                                aria-label="Close">
                                                                <span aria-hidden="true">&times;</span>
                                                            </button>
                                                        </div>

                                                        <div class="modal-body BTG-watermark">

                                                            <div id="error-{{ $data->id }}"
                                                                class="row mb-2 alert alert-danger" role="alert"
                                                                style="display: none;">
                                                            </div>

                                                            <div class="row mb-4 border">
                                                                <div class="col-sm-12 border-bottom">
                                                                    Employees name: <b>{{ $data->name }}</b>
                                                                </div>

                                                                <div class="col-sm-4 border-right">
                                                                    From date:
                                                                    <b>{{ date('d/m/Y', strtotime($data->absence_start_date)) }}</b>
                                                                </div>
                                                                <div class="col-sm-4 border-right">
                                                                    To date:
                                                                    <b>{{ date('d/m/Y', strtotime($data->absence_end_date)) }}</b>
                                                                </div>
                                                                <div class="col-sm-4">
                                                                    Number of days:
                                                                    <b>{{ number_format($data->absence_days, 1) }}</b>
                                                                </div>

                                                                <div class="col-sm-12 border-top border-bottom"
                                                                    style="height: 100px;">
                                                                    Reason for leave: <br />
                                                                    <b>{{ $data->absence_reason }}</b>
                                                                </div>

                                                                <div class="col-sm-4 border-right">
                                                                    Compassionate Leave:@if ($data->absence_type === 'Compassionate Leave')
                                                                        <i class="fas fa-check"></i>
                                                                    @endif
                                                                </div>
                                                                <div class="col-sm-4 border-right">
                                                                    Appointment: @if ($data->absence_type === 'Appointment')
                                                                        <i class="fas fa-check"></i>
                                                                    @endif
                                                                </div>
                                                                <div class="col-sm-4">
                                                                    Other: @if ($data->absence_type === 'Other')
                                                                        <i class="fas fa-check"></i>
                                                                    @endif
                                                                </div>
                                                            </div>

                                                            <div class="row mb-4 border">
                                                                <div class="col-sm-12 text-center border-bottom">
                                                                    Line Manager Comments
                                                                </div>
                                                                <div class="col-sm-9 mb-2">
                                                                    Do you support this application:
                                                                    <input
                                                                        id="absence_support_application-{{ $data->id }}"
                                                                        type="text" class="form-control form-control-sm"
                                                                        name="absence_support_application"
                                                                        id="absence_support_application" value="">
                                                                    Rationale:
                                                                    <input id="absence_rationale-{{ $data->id }}"
                                                                        type="text"
                                                                        class="form-control form-control-sm"
                                                                        name="absence_rationale" id="absence_rationale"
                                                                        value="">
                                                                </div>
                                                                <div
                                                                    class="col-sm-3 text-center form-check d-flex border-left">
                                                                    <div class="form-check mr-3">
                                                                        <input id="absence_yes-{{ $data->id }}"
                                                                            class="form-check-input " type="radio"
                                                                            name="absence_yes_no" value="Yes">
                                                                        <label class="form-check-label"
                                                                            for="absence_yes-{{ $data->id }}">
                                                                            Yes
                                                                        </label>
                                                                    </div>
                                                                    <div class="form-check">
                                                                        <input id="absence_no-{{ $data->id }}"
                                                                            class="form-check-input" type="radio"
                                                                            name="absence_yes_no" value="No">
                                                                        <label class="form-check-label"
                                                                            for="absence_no-{{ $data->id }}">
                                                                            No
                                                                        </label>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                            <div class="row mb-4 border">
                                                                <div class="col-sm-5 border-bottom border-right">
                                                                    Agreed outcome:
                                                                </div>
                                                                <div class="col-sm-7 border-bottom p-2">
                                                                    <input id="absence_agreed_outcome-{{ $data->id }}"
                                                                        type="text" name="absence_agreed_outcome"
                                                                        class="form-control form-control-sm">
                                                                </div>
                                                                <div class="col-sm-5 border-bottom border-right">
                                                                    Number of days/hours granted with pay:
                                                                </div>
                                                                <div class="col-sm-7 border-bottom p-2">
                                                                    <input
                                                                        id="absence_granted_with_pay-{{ $data->id }}"
                                                                        type="text" name="absence_granted_with_pay"
                                                                        class="form-control form-control-sm">
                                                                </div>
                                                                <div class="col-sm-5 border-bottom border-right">
                                                                    Number of days/hours granted without pay:
                                                                </div>
                                                                <div class="col-sm-7 border-bottom p-2">
                                                                    <input
                                                                        id="absence_granted_without_pay-{{ $data->id }}"
                                                                        type="text" name="absence_granted_without_pay"
                                                                        class="form-control form-control-sm">
                                                                </div>
                                                                <div class="col-sm-5 border-bottom border-right">
                                                                    Number of days/hours covered by holidays:
                                                                </div>
                                                                <div class="col-sm-7 border-bottom p-2">
                                                                    <input
                                                                        id="absence_covered_holidays-{{ $data->id }}"
                                                                        type="text" name="absence_covered_holidays"
                                                                        id="absence_covered_holidays"
                                                                        class="form-control form-control-sm">
                                                                </div>
                                                                <div class="col-sm-5 border-bottom border-right">
                                                                    Number of hours to be worked back:
                                                                </div>
                                                                <div class="col-sm-7 border-bottom p-2">
                                                                    <input id="absence_worked_back-{{ $data->id }}"
                                                                        type="text" name="absence_worked_back"
                                                                        id="absence_worked_back"
                                                                        class="form-control form-control-sm">
                                                                </div>
                                                                <div class="col-sm-5 border-right">
                                                                    Work from home:
                                                                </div>
                                                                <div class="col-sm-7 p-2">
                                                                    <input type="text" name="absence_work_from_home"
                                                                        id="absence_work_from_home-{{ $data->id }}"
                                                                        class="form-control form-control-sm">
                                                                </div>
                                                            </div>

                                                            <div class="row mb-4 border p-4">
                                                                <div class="col-sm-3">
                                                                    Signed by Employee:
                                                                </div>
                                                                <div class="col-sm-9">
                                                                    <b class="Signed"><u>{{ $data->name }}</u></b>
                                                                </div>
                                                                <div class="col-sm-3">
                                                                    Signed by Manager:
                                                                </div>
                                                                <div class="col-sm-5">
                                                                    <div class="input-group">
                                                                        <input type="text"
                                                                            name="absence_sign_by_manager"
                                                                            id="absence_sign_by_manager-{{ $data->id }}"
                                                                            class="form-control form-control-sm Signed"
                                                                            placeholder="Signed by Manager" readonly>
                                                                        <div class="input-group-append">
                                                                            <button
                                                                                id="absence_signed-{{ $data->id }}"
                                                                                class="btn btn-outline-secondary btn-sm"
                                                                                type="button">Signed</button>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="col-sm-4">
                                                                    Name: <b><u>{{ $user->name }}</u></b>
                                                                </div>
                                                                <div class="col-sm-12">
                                                                    Date Approved: <input
                                                                        id="absence_date_approved-{{ $data->id }}"
                                                                        type="date" name="absence_date_approved"
                                                                        class="form-control form-control-sm" readonly>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <div class="modal-footer">
                                                            <button id="clearFormButton-{{ $data->id }}"
                                                                type="reset" class="btn btn-secondary"
                                                                data-dismiss="modal">Cancel</button>

                                                            <button id="absenceApprove-{{ $data->id }}"
                                                                type="submit" name="SubmitButton" value="approve"
                                                                class="btn btn-success" style="display: none;"
                                                                disabled>Approve</button>

                                                            <button id="absenceReject-{{ $data->id }}" type="submit"
                                                                name="SubmitButton" value="reject" class="btn btn-danger"
                                                                style="display: none;" disabled>Reject</button>

                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                    <script>
                                        //signed and validate
                                        $('#absence_signed-{{ $data->id }}').click(function() {
                                            $('#absence_sign_by_manager-{{ $data->id }}').val('{{ $user->name }}');
                                            $('#absence_date_approved-{{ $data->id }}').val('{{ date('Y-m-d') }}');

                                            //validate form
                                            let $absence_yes_no = $('input[name="absence_yes_no"]:checked').val();
                                            console.log('Selected value:', $absence_yes_no); // Debugging
                                            if ($absence_yes_no == undefined) {
                                                handleErrors("Please fill in the Leave of Absence Form and sign it.",
                                                    true, {{ $data->id }});
                                            } else {
                                                handleErrors(null, false, {{ $data->id }});
                                                // $('#absenceApprove').attr("disabled", false);
                                                console.log(
                                                    "Form is valid. Proceed with submission or further actions.");
                                            }
                                        })

                                        $('input[name="absence_yes_no"]').change(function() {
                                            let absenceYes = $('#absence_yes-{{ $data->id }}').is(':checked');
                                            let absenceNo = $('#absence_no-{{ $data->id }}').is(':checked');

                                            if (absenceYes) {
                                                $('#absenceApprove-{{ $data->id }}').show();
                                                $('#absenceReject-{{ $data->id }}').hide();
                                            } else if (absenceNo) {
                                                $('#absenceApprove-{{ $data->id }}').hide();
                                                $('#absenceReject-{{ $data->id }}').show();
                                            } else {
                                                $('#absenceApprove-{{ $data->id }}').hide();
                                                $('#absenceReject-{{ $data->id }}').hide();
                                            }
                                        })

                                        function handleErrors(errorMessage, disableButton, id) {
                                            if (errorMessage) {
                                                $("#error-" + id).html(errorMessage).show();
                                                setTimeout(() => $('#error-' + id).fadeOut(1000), 5000);
                                            }
                                            if (disableButton) {
                                                $('#absenceApprove-' + id).attr('disabled', true);
                                                $('#absenceApprove-' + id).attr('disabled', true);
                                                $('#absenceReject-' + id).attr('disabled', true);
                                            } else {
                                                $('#absenceApprove-' + id).attr('disabled', false);
                                                $('#absenceApprove-' + id).attr('disabled', false);
                                                $('#absenceReject-' + id).attr('disabled', false);
                                            }
                                        }

                                        $('#clearFormButton-{{ $data->id }}').click(function() {
                                            $('#absence_sign_by_manager-{{ $data->id }}').val('');
                                            $('#absence_date_approved-{{ $data->id }}').val('');
                                            $('#absence_yes-{{ $data->id }}').prop('checked', false);
                                            $('#absence_no-{{ $data->id }}').prop('checked', false);
                                            $('#absence_support_application-{{ $data->id }}').val('');
                                            $('#absence_rationale-{{ $data->id }}').val('');
                                            $('#absence_agreed_outcome-{{ $data->id }}').val('');
                                            $('#absence_granted_with_pay-{{ $data->id }}').val('');
                                            $('#absence_granted_without_pay-{{ $data->id }}').val('');
                                            $('#absence_covered_holidays-{{ $data->id }}').val('');
                                            $('#absence_worked_back-{{ $data->id }}').val('');
                                            $('#absence_work_from_home-{{ $data->id }}').val('');
                                            $('#absenceApprove-{{ $data->id }}').attr("disabled", true);
                                            $('#absenceReject-{{ $data->id }}').attr("disabled", true);
                                            $('#absenceApprove-{{ $data->id }}').hide();
                                            $('#absenceReject-{{ $data->id }}').hide();
                                        })
                                    </script>
                                    <!-- end modal -->
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    <hr class="bg-secondary">
                    <div class="row mb-2">
                        <div class="col-sm-3">
                            Filter by:
                            <select class="custom-select" id="AssignResources">
                                <option value="team" selected>Team</option>
                                <option value="department">Department</option>
                                <option value="location">Location</option>
                            </select>
                        </div>
                    </div>
                    <div>
                        @php
                            if ($user->is_hr_manager === 1) {
                                $type = 'all';
                            } elseif ($user->is_line_manager === 1) {
                                $type = 'approver';
                            } elseif ($user->is_holiday_approver === 1) {
                                $type = 'approver';
                            }
                        @endphp

                        {{-- Key --}}
                        <div class="d-flex justify-content-center flex-wrap">
                            <div class="d-flex flex-column align-items-center">
                                <svg width="18" height="18">
                                    <rect width="18" height="18" r="0" rx="0" ry="0"
                                        fill="lightblue" style="-webkit-tap-highlight-color: black"></rect>
                                </svg>
                                <div class="p-2" style="text-align: center">Statutory Holiday</div>
                            </div>
                            <div class="d-flex flex-column align-items-center">
                                <svg width="18" height="18">
                                    <rect width="18" height="18" r="0" rx="0" ry="0"
                                        fill="rgb(153,202,255)" style="-webkit-tap-highlight-color: black">
                                    </rect>
                                </svg>
                                <div class="p-2" style="text-align: center">Company Holiday</div>
                            </div>
                            <div class="d-flex flex-column align-items-center">
                                <svg width="34" height="18">
                                    <rect width="34" height="18" r="0" rx="0" ry="0"
                                        fill="rgb(238, 247, 39)" stroke="black"
                                        style="-webkit-tap-highlight-color: black">
                                    </rect>
                                </svg>
                                <div class="p-2" style="text-align: center">Requests</div>
                            </div>
                            <div class="d-flex flex-column align-items-center">
                                <svg width="34" height="18">
                                    <rect width="34" height="18" r="0" rx="0" ry="0"
                                        fill="rgb(0,119,200)" stroke="black" style="-webkit-tap-highlight-color: black">
                                    </rect>
                                </svg>
                                <div class="p-2" style="text-align: center">Booked Holiday</div>
                            </div>
                            <div class="d-flex flex-column align-items-center">
                                <svg width="34" height="18">
                                    <rect width="34" height="18" r="0" rx="0" ry="0"
                                        fill="rgb(183,217,255)" stroke="black"
                                        style="-webkit-tap-highlight-color: black">
                                    </rect>
                                </svg>
                                <div class="p-2" style="text-align: center">Other Leave</div>
                            </div>
                            <div class="d-flex flex-column align-items-center">
                                <svg width="34" height="18">
                                    <rect width="34" height="18" r="0" rx="0" ry="0"
                                        fill="rgb(40,167,69)" stroke="black" style="-webkit-tap-highlight-color: black">
                                    </rect>
                                </svg>
                                <div class="p-2" style="text-align: center">Working from home</div>
                            </div>
                            <div class="d-flex flex-column align-items-center">
                                <svg width="34" height="18">
                                    <rect width="34" height="18" r="0" rx="0" ry="0"
                                        fill="rgb(232,62,140)" stroke="black" style="-webkit-tap-highlight-color: black">
                                    </rect>
                                </svg>
                                <div class="p-2" style="text-align: center">Sickness (open)</div>
                            </div>
                            <div class="d-flex flex-column align-items-center">
                                <svg width="34" height="18">
                                    <rect width="34" height="18" r="0" rx="0" ry="0"
                                        fill="rgb(243,153,194)" stroke="black"
                                        style="-webkit-tap-highlight-color: black">
                                    </rect>
                                </svg>
                                <div class="p-2" style="text-align: center">Sickness</div>
                            </div>
                            <div class="d-flex flex-column align-items-center">
                                <svg width="34" height="18">
                                    <rect width="34" height="18" r="0" rx="0" ry="0"
                                        fill="rgb(16, 71, 29)" stroke="black" style="-webkit-tap-highlight-color: black">
                                    </rect>
                                </svg>
                                <div class="p-2" style="text-align: center">One to One</div>
                            </div>
                            <div class="d-flex flex-column align-items-center">
                                <svg width="34" height="18">
                                    <rect width="34" height="18" r="0" rx="0" ry="0"
                                        fill="rgb(23,162,184)" stroke="black" style="-webkit-tap-highlight-color: black">
                                    </rect>
                                </svg>
                                <div class="p-2" style="text-align: center">Training</div>
                            </div>
                        </div>

                        <div class="calendar-container">
                            <div id="calendar"></div>
                            <div id="calendar-error"><i class="fas fa-exclamation-triangle"
                                    style="width: 100%; height: 100%; display: none;"></i></div>
                            <img id="calendar-loader" src="{{ asset('img/Spinner.apng') }}" alt="Loading..."
                                width="100" height="100">
                            <img id="calendar-loader1" src="{{ asset('img/Spinner.apng') }}" alt="Loading..."
                                width="100" height="100">
                        </div>


                        <script>
                            $(document).ready(function() {

                                var calendarEl = document.getElementById('calendar');
                                var calendar;

                                function initializeCalendar(assignResource) {
                                    if (calendar) {
                                        calendar.destroy();
                                    }

                                    calendar = new FullCalendar.Calendar(calendarEl, {

                                        schedulerLicenseKey: '0236013615-fcs-1706868278',
                                        displayEventTime: false,

                                        eventDidMount: function(info) {
                                            var eventObj = info.event;
                                            var props = eventObj.extendedProps;

                                            if (props.PopUp == true) {
                                                // console.log(props.popTime);

                                                $(info.el).popover({
                                                    title: props.popType,
                                                    content: props.popTime,
                                                    placement: 'auto',
                                                    trigger: 'hover',
                                                    container: 'body'
                                                });
                                            }
                                        },
                                        resourceLabelDidMount: function(info) {
                                            var resourceObj = info.resource;
                                            var props = resourceObj.extendedProps;

                                            if (props.PopUp == true) {
                                                // console.log(props.popTime);

                                                $(info.el).popover({
                                                    title: props.BalanceTitle,
                                                    content: props.BalanceContent,
                                                    html: true,
                                                    placement: 'auto',
                                                    trigger: 'hover',
                                                    container: 'body'
                                                });
                                            }
                                        },

                                        themeSystem: 'bootstrap',
                                        timeZone: 'GMT',
                                        initialView: 'resourceTimelineMonth',
                                        slotDuration: "12:00:00",
                                        scrollTime: "00:00:00",
                                        slotLabelInterval: {
                                            "hours": 24
                                        },
                                        slotLabelFormat: [{
                                            weekday: 'narrow',
                                            day: 'numeric'
                                        }],

                                        aspectRatio: 1.5,
                                        resourceAreaWidth: "15vw",
                                        editable: false,
                                        resourceAreaHeaderContent: 'Employee',
                                        resourceGroupField: assignResource,
                                        resourceOrder: 'title, team, department, location',

                                        headerToolbar: {
                                            left: 'prev,next today',
                                            center: 'title',
                                            right: 'resourceTimelineMonth,resourceTimelineWeek,resourceTimelineDay'
                                        },

                                        businessHours: {
                                            startTime: '00:00',
                                            endTime: '24:00',
                                        },
                                        refetchResourcesOnNavigate: true,
                                        filterResourcesWithEvents: false,

                                        resources: function(fetchInfo, successCallback, failureCallback) {
                                            document.getElementById('calendar-loader1').style.display = 'block';
                                            document.getElementById('calendar-error').style.display =
                                                'none';
                                            fetch('/resources/fetch?type={{ $type }}', {
                                                    method: 'POST',
                                                    headers: {
                                                        'Content-Type': 'application/json',
                                                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr(
                                                            'content'),
                                                    },
                                                    body: JSON.stringify({
                                                        start: fetchInfo.start,
                                                        end: fetchInfo.end,
                                                    }),
                                                })
                                                .then(response => response.json())
                                                .then(data => {

                                                    successCallback(data);
                                                    document.getElementById('calendar-loader1').style.display =
                                                        'none';
                                                })
                                                .catch(error => {
                                                    // Handle errors (optional)
                                                    console.error('Error fetching events:', error);
                                                    failureCallback(error);
                                                    document.getElementById('calendar-loader1').style.display =
                                                        'none';
                                                    document.getElementById('calendar-error').style.display =
                                                        'block';
                                                });

                                        },

                                        events: function(info, successCallback, failureCallback) {
                                            console.log("Events info: " + info.startStr);
                                            document.getElementById('calendar-error').style.display =
                                                'none';
                                            document.getElementById('calendar-loader').style.display = 'block';
                                            fetch('/events/fetch?type={{ $type }}', {
                                                    method: 'POST',
                                                    headers: {
                                                        'Content-Type': 'application/json',
                                                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr(
                                                            'content'),
                                                    },
                                                    body: JSON.stringify({
                                                        start: info.startStr,
                                                        end: info.endStr,
                                                    }),
                                                })
                                                .then(response => response.json())
                                                .then(data => {
                                                    successCallback(data);
                                                    document.getElementById('calendar-loader').style.display =
                                                        'none';
                                                    //Try to workaround to get resourceId visible
                                                    console.log("SuccessCallback: " + info.resources);
                                                })
                                                .catch(error => {
                                                    // Handle errors (optional)
                                                    console.error('Error fetching events:', error);
                                                    failureCallback(error);
                                                    document.getElementById('calendar-loader').style.display =
                                                        'none';
                                                    document.getElementById('calendar-error').style.display =
                                                        'block';
                                                });
                                        },
                                        datesSet: function(dateInfo) {
                                            // This function will be called when the user navigates to a different date range
                                            console.log('Navigated to new date range:', dateInfo.startStr, dateInfo.endStr);
                                            clearAllResources();
                                            calendar.refetchEvents();
                                            // calendar.refetchResources();

                                        }
                                    });

                                    var loaderEl = document.getElementById('calendar-loader');

                                    calendar.render();


                                    function clearAllResources() {
                                        var resources = calendar.getResources();
                                        resources.forEach(function(resource) {
                                            resource.remove();
                                        });
                                    }
                                }
                                var assignResource = $('#AssignResources').val();
                                initializeCalendar(assignResource);

                                $('#AssignResources').on('change', function() {
                                    assignResource = $(this).val();
                                    initializeCalendar(assignResource);
                                });

                                $('#holidayList').DataTable({

                                });

                            });
                        </script>
                    </div>

                </div>
            </div>
        </div>
    </div>

@stop

@section('footer')
    &nbsp;
@stop
@endcan