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

    @section('title', config('adminlte.title') . ' | Holiday Approval')


@section('content_header')<div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6 m-0 text-dark">
                <h1>Holiday Approval</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">Holidays Approval</li>
                </ol>
            </div>
        </div>
    </div>
@stop

@section('content')
    <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 */
        }

        /* Dark Mode Popover Support */
        .dark-mode .popover {
            background-color: #2d3238 !important;
            border-color: #3d434a !important;
        }

        .dark-mode .popover-header {
            background-color: #3a4047 !important;
            color: #fff !important;
            border-bottom-color: #4a5158 !important;
        }

        .dark-mode .popover-body {
            background-color: #2d3238 !important;
            color: #e6e6e6 !important;
        }
    </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
                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <div class="table-responsive">
                        <table id="holidayList" class="table table-striped table-hover" style="width: 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)
                                                        <span class="badge badge-info px-3 py-2" data-toggle="tooltip"
                                                            title="Approved -> Cancellation">
                                                            Requested Cancellation</span>
                                                    @else
                                                        <span class="badge badge-success">
                                                            <span class="h6">Approved</span>
                                                        </span>
                                                    @endif
                                                @break

                                                @case('Pending')
                                                    @if ($data->cancel_req === 1)
                                                        <div class="badge badge-warning">
                                                            <span class="h6">Pending</span>
                                                        </div> <i class="fas fa-long-arrow-alt-right fa-lg"></i>
                                                        <div class="badge badge-secondary">
                                                            <span class="h6">Cancelling</span>
                                                        </div>
                                                    @else
                                                        <span class="badge badge-warning px-3 py-2">
                                                            Pending
                                                        </span>
                                                    @endif
                                                @break
                                            @endswitch
                                        </td>
                                        <td class="align-middle">
                                            <form action="{{ route('holiday_approval.approve', $data->id) }}"
                                                method="POST">
                                                @csrf


                                                @if ($data->cancel_req === 1)
                                                    <input type="hidden" name="type_approve" value="Cancel">
                                                @else
                                                    <input type="hidden" name="type_approve" value="Pending">
                                                @endif
                                                <div class="btn-group">
                                                    <button type="submit" class="btn btn-sm btn-outline-success">
                                                        <i class="fas fa-check-circle"></i>
                                                        Approve</button>
                                                    <a href="#" class="btn btn-sm btn-outline-danger"
                                                        data-toggle="modal" data-target="#rejectmodal{{ $data->id }}">
                                                        <i class="fa fa-times-circle"></i>
                                                        Reject</a>
                                                </div>
                                            </form>
                                        </td>
                                    </tr>
                                    @if (!empty($data->id))
                                        <!-- Modal Reject -->
                                        <div class="modal fade" id="rejectmodal{{ $data->id }}" tabindex="-1"
                                            aria-labelledby="Model_Rejection" aria-hidden="true">
                                            <div class="modal-dialog modal-dialog-centered modal-lg">
                                                <div class="modal-content">
                                                    <form action="{{ route('holiday_approval.update', $data->id) }}"
                                                        method="POST">
                                                        @csrf
                                                        @method('PUT')

                                                        <div class="modal-header bg-light border-bottom">
                                                            <h5 class="modal-title font-weight-bold" id="exampleModalLabel">
                                                                @if ($data->status === 'Approved')
                                                                    Reject Cancellation Request
                                                                @else
                                                                    Reject {{ $data->type }} Request
                                                                @endif
                                                            </h5>
                                                            <button type="button" class="close" data-dismiss="modal"
                                                                aria-label="Close">
                                                                <span aria-hidden="true">&times;</span>
                                                            </button>
                                                        </div>

                                                        <div class="modal-body">
                                                            <!-- Employee & Date Information -->
                                                            <div class="alert bg-light border text-center mb-4">
                                                                <p class="mb-1"><strong>Employee:</strong>
                                                                    {{ $data->name }}</p>
                                                                <p class="mb-0 text-muted small">{{ $data->type }} Period
                                                                </p>
                                                                <h6 class="mb-0 font-weight-bold">
                                                                    <i class="far fa-calendar-alt text-primary mr-2"></i>
                                                                    {{ date('d/m/Y', strtotime($data->start_date)) }}
                                                                    <i class="fas fa-arrow-right mx-2 text-muted"></i>
                                                                    {{ date('d/m/Y', strtotime($data->end_date)) }}
                                                                </h6>
                                                                <small class="text-muted">
                                                                    ({{ number_format($data->number_days, 1) }}
                                                                    {{ $data->number_days > 1 ? 'days' : 'day' }})
                                                                </small>
                                                            </div>

                                                            <!-- Status Transition -->
                                                            <div class="text-center mb-4">
                                                                <p class="mb-3 text-muted small font-weight-bold">Status
                                                                    Change</p>
                                                                <div
                                                                    class="d-flex align-items-center justify-content-center">
                                                                    @if ($data->status == 'Pending' && $data->cancel_req != 1)
                                                                        <span
                                                                            class="badge badge-warning px-3 py-2 font-weight-bold">
                                                                            <i class="fas fa-clock mr-1"></i> Pending
                                                                        </span>
                                                                        <i
                                                                            class="fas fa-long-arrow-alt-right fa-2x mx-3 text-muted"></i>
                                                                        <span
                                                                            class="badge badge-danger px-3 py-2 font-weight-bold">
                                                                            <i class="fas fa-times-circle mr-1"></i>
                                                                            Rejected
                                                                        </span>
                                                                    @else
                                                                        <span
                                                                            class="badge badge-success px-3 py-2 font-weight-bold">
                                                                            <i class="fas fa-check-circle mr-1"></i>
                                                                            Approved
                                                                        </span>
                                                                        <i
                                                                            class="fas fa-long-arrow-alt-right fa-2x mx-3 text-muted"></i>
                                                                        <span
                                                                            class="badge badge-info px-3 py-2 font-weight-bold">
                                                                            <i class="fas fa-undo mr-1"></i> Cancellation
                                                                            Requested
                                                                        </span>
                                                                        <i
                                                                            class="fas fa-long-arrow-alt-right fa-2x mx-3 text-muted"></i>
                                                                        <span
                                                                            class="badge badge-danger px-3 py-2 font-weight-bold">
                                                                            <i class="fas fa-times-circle mr-1"></i>
                                                                            Rejected
                                                                        </span>
                                                                    @endif
                                                                </div>
                                                            </div>

                                                            <!-- Rejection Reason -->
                                                            <div class="form-group">
                                                                <label for="reject_reason_id" class="font-weight-bold">
                                                                    Rejection Reason <span class="text-danger">*</span>
                                                                </label>
                                                                <textarea class="form-control" id="reject_reason_id" name="reject_reason" rows="3"
                                                                    placeholder="Please provide a clear reason for rejecting this holiday request..." required></textarea>
                                                                <small class="form-text text-muted">
                                                                    <i class="fas fa-info-circle mr-1"></i>
                                                                    This reason will be communicated to {{ $data->name }}
                                                                </small>
                                                            </div>

                                                        </div>

                                                        <div class="modal-footer bg-light border-top">
                                                            <input type="hidden" name="chkstatus"
                                                                value="{{ $data->status }}">
                                                            @if ($data->status === 'Approved')
                                                                <input type="hidden" name="reject" value="1">
                                                            @else
                                                                <input type="hidden" name="reject" value="2">
                                                            @endif

                                                            <button type="button" class="btn btn-secondary"
                                                                data-dismiss="modal">
                                                                <i class="fas fa-times mr-1"></i> Cancel
                                                            </button>
                                                            <button type="submit" class="btn btn-danger">
                                                                <i class="fas fa-ban mr-1"></i>
                                                                @if ($data->status === 'Approved')
                                                                    Reject Cancellation Request
                                                                @else
                                                                    Reject {{ $data->type }} Request
                                                                @endif
                                                            </button>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- end modal -->
                                    @endif
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    {{-- Filter Section --}}
                    <div class="row mb-4 mt-2">
                        <div class="col-12 mb-2">
                            <strong>Filter by:</strong>
                        </div>
                        <div class="col-sm-3">
                            <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 == true || $user->is_hr_hq == true) {
                                $type = 'all';
                            } elseif ($user->is_line_manager == true) {
                                $type = 'approver';
                            } elseif ($user->is_holiday_approver == true) {
                                $type = 'approver';
                            }
                        @endphp

                        {{-- Key --}}
                        {{-- Legend Section --}}
                        @include('components.calendar-legend')

                        <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() {
                                $('#holidayList').DataTable({
                                    order: [
                                        [0, 'desc'],
                                    ],
                                });

                                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);
                                });
                            });
                        </script>
                    </div>

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

@stop

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