@extends('layouts.master')
@section('css')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <style>
        .fc-daygrid-day-number {
            color: black;
            font-size: 24px !important;
            font-weight: 600 !important;
            margin: 2px !important;
        }

        #calendar td.fc-day-sun .fc-daygrid-day-number {
            color: red;
        }

        .fc-event-title.fc-sticky {
            font-size: 24px !important;
            display: flex !important;
            justify-content: center !important;
        }

        @media only screen and (max-width: 600px) {
            .fc-event-title.fc-sticky {
                font-size: 12px !important;
            }
        }

        @media only screen and (max-width: 420px) {
            .fc-event-title.fc-sticky {
                font-size: 8px !important;
            }
        }

        .fc .fc-daygrid-day.fc-day-today {
            background-color: #289bff59 !important;
        }
    </style>
@endsection
@section('title')
    Holiday Calendar
@endsection
@section('content')
    <div class="page-breadcrumb ">
        <div class="d-flex justify-content-between align-items-center">
            <h4 class="page-title text-uppercase font-medium p-3">Holiday Calendar</h4>
        </div>
    </div>

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="box-shadow white-box border-top3x">
                    <div class="row">
                        <div class="col-md-12">
                            <div id='calendar'></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="leaveModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-light p-3">
                    <h5 class="modal-title" id="exampleModalLabel">Add Holiday</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
                        id="close-modal"></button>
                </div>
                <form id="leave-form" action="" method="POST">
                    @csrf
                    <div class="modal-body">
                        <input type="hidden" name="leave_date" id="leave_date">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="mb-3">
                                    <label class="form-label">Mark As Holiday</label>
                                    <input type="checkbox" name="is_leave" id="is_leave">
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="mb-3">
                                    <label for="leave_reason" class="form-label">Holiday Comments</label>
                                    <input type="text" class="form-control" name="leave_reason" id="leave_reason">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <div class="hstack gap-2 justify-content-end">
                            <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-primary" id="add-leave">Add</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script src="{{ URL::asset('/assets/js/app.min.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.11/index.global.min.js"></script>
    <script>
        let calendarEl = document.getElementById('calendar');
        let calendar;
        $(document).ready(function() {
            calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth',
                height: 'auto',
                timeZone: 'local',
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth'
                },
                events: {
                    url: '/admin/get-leave-calendar-data',
                    method: 'POST',
                    extraParams: {
                        _token: '{{ csrf_token() }}',

                    },
                    failure: function() {
                        alert('there was an error while fetching events!');
                    },
                    color: 'yellow', // a non-ajax option
                    textColor: 'black' // a non-ajax option
                },
                showNonCurrentDates: false,
                eventClick: function(info) {
                    if (info.event.title != '') {
                        $('#is_leave').prop('checked', true);
                        $('#leave_reason').val(info.event.title);
                    } else {
                        $('#is_leave').prop('checked', false);
                        $('#leave_reason').val('');
                    }
                    $('#leave_date').val(info.event.startStr);
                    $('#leaveModal').modal('show');
                }
            });
            calendar.render();
        });
        $('#add-leave').click(function(e) {
            e.preventDefault();
            var formData = $('#leave-form').serialize();
            $.ajax({
                type: 'POST',
                url: '/admin/add-leave',
                data: formData,
                success: function(response) {
                    if (response.status == 'success') {
                        $('#leaveModal').modal('hide');
                        calendar.refetchEvents();
                    }
                }
            });
        });
    </script>
@endsection