@extends('layouts.teacher')

<title>{{ config('app.name', 'Laravel') }} | Teacher | Apply Leave</title>

@section('main-content')
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

    <style>
        .input {
            color: #697a8d;
        }

        input:-webkit-autofill,
        input:-webkit-autofill:hover,
        input:-webkit-autofill:focus,
        input:-webkit-autofill:active {
            -webkit-text-fill-color: #697a8d !important;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .question {
            border: 1px solid #ccc;
            padding: 20px;
            margin-top: 20px;
        }

        .icon-btn {
            margin-right: 5px;
        }

        #loader {
            text-align: center;
            /* Align the loader to the center */
            margin-left: 15px;
            /* Adjust this value to manage space between loader and button */
            width: auto;
            display: inline-block;
        }

        #loader img {
            width: 30px;
        }
    </style>


    <div class="content-wrapper">
        <!-- Content -->
        <div class="container-xxl flex-grow-1 container-p-y">
            <h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light"></span> Apply Leave</h4>
            <!-- Basic Layout -->
            <div class="row">
                <div class="col-xl">
                    <div class="card mb-4">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h5 class="mb-0">Leave Details</h5>
                            <!-- <small class="text-muted float-end">Merged input group</small> -->
                        </div>
                        <div class="card-body">
                            <div class="form-group">
                                <label class="form-label" for="registered_email">Your Registered Email</label>
                                <div class="input-group">
                                    <span id="basic-icon-default-gender" class="input-group-text"><i
                                            class="bx bx-paste"></i></span>
                                    <input class="form-input form-control bg-white" placeholder="example@mail.com" id="registered_email"
                                        autocomplete="off"  />
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="form-label" for="leave_reason">Start Date</label>
                                <div class="input-group">
                                    <span id="basic-icon-default-gender" class="input-group-text"><i
                                            class="bx bx-paste"></i></span>
                                    <input class="form-input form-control bg-white" placeholder="Start Date" id="start_date"
                                        autocomplete="off" readonly />
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="form-label" for="leave_reason">End Date</label>
                                <div class="input-group">
                                    <span id="basic-icon-default-gender" class="input-group-text"><i
                                            class="bx bx-paste"></i></span>
                                    <input class="form-control form-input bg-white" placeholder="End Date" id="end_date"
                                        autocomplete="off" readonly />
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="form-label" for="leave_reason">Reason</label>
                                <div class="input-group">
                                    <span id="basic-icon-default-gender" class="input-group-text"><i
                                            class="bx bx-paste"></i></span>
                                    <input type="text" id="leave_reason" name="leave_reason" class="form-control"
                                        placeholder="Reason for Leave" maxlength="200" autocomplete="off">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="form-label" for="leave_document">Upload Document / Images (If Any)</label>
                                <div class="input-group">
                                    <span id="basic-icon-default-gender" class="input-group-text"><i
                                            class="bx bx-paste"></i></span>
                                    <input type="file" id="leave_document" name="leave_document" class="form-control"
                                        placeholder="Document / Image" autocomplete="off">
                                </div>
                            </div>

                            <div class="form-group loaderbtn_div">
                                <button id="save-studymaterial" class="btn btn-success" onclick="applyLeave()">Apply
                                    Leave</button>
                                <div class="loaderDiv" id="loader" style="display: none;">
                                    <!-- Your loader HTML or spinner goes here -->
                                    <img src="{{ asset('assets/loader.gif') }}" alt="Loading..." />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- / Content -->
        <div class="content-backdrop fade"></div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>

    <script>
        const start_date = document.getElementById('start_date');
        const end_date = document.getElementById('end_date');
        let today = new Date();
        today.setHours(0, 0, 0, 0); // Set to start of the day for accurate comparison
        jQuery.noConflict();
        jQuery(document).ready(function($) {

            $("#start_date").datepicker({
                dateFormat: "dd-mm-yy",
                minDate: today,
                maxDate: null,
                changeMonth: true,
                changeYear: true,
                onSelect: function(selectedDate) {
                    const startDate = $(this).datepicker("getDate") || today;
                    $("#end_date").datepicker("option", "minDate",
                        startDate); // Set end_date min to start_date
                    $(".select_month").prop('disabled', true);
                }
            }).on('click', function() {
                $(this).datepicker('show');
            });

            $("#end_date").datepicker({
                dateFormat: "dd-mm-yy",
                minDate: today,
                changeMonth: true,
                changeYear: true,
                onSelect: function() {
                    $(".select_month").prop('disabled', true);
                    const endDate = $(this).datepicker("getDate") || today;
                    $("#start_date").datepicker("option", "maxDate",
                        endDate);
                }
            }).on('click', function() {
                $(this).datepicker('show');
            });


        });


        function applyLeave() {
            $('.text-danger').remove();
            $('#loader').show();
            var formData = new FormData();
            formData.append('start_date', $('#start_date').val());
            formData.append('registered_email', $('#registered_email').val());
            formData.append('end_date', $('#end_date').val());
            formData.append('leave_reason', $('#leave_reason').val());
            var leave_document = $('#leave_document').prop('files')[0];
            if (leave_document) {
                formData.append('leave_document', leave_document);
            }

            $.ajax({
                type: "post",
                url: "/apply-leave",
                contentType: 'multipart/form-data',
                cache: false,
                contentType: false,
                processData: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: formData,
                success: function(data) {
                    // Hide the loader after response is received
                    $('#loader').hide();
                    if ($.isEmptyObject(data.error)) {
                        window.location.href = data.success;
                    } else {
                        // printErrorMsg(data.error);
                        $.each(data.error, function(field_name, error) {
                            // Check if the error message for the field already exists
                            if (!$('#' + field_name + '').closest('div').next().hasClass(
                                    'text-danger')) {
                                $('#' + field_name + '').closest('div').after(
                                    '<span class="text-strong text-danger">' + error +
                                    '</span>');
                            }
                        });
                    }
                },
                error: function() {
                    // Hide loader in case of an error
                    $('#loader').hide();
                    // Handle error
                },
                complete: function() {
                    // Hide loader when the request is completed (success, error, or failure)
                    $('#loader').hide();
                }
            });
        }
    </script>
@endsection