@extends('layouts.admin')

<title>{{ config('app.name', 'Laravel') }} | Admin | Receipt Number</title>

<style>
    /* The Modal (background) */
    .modal {
        display: none;
        /* Hidden by default */
        position: fixed;
        /* Stay in place */
        z-index: 1;
        /* Sit on top */
        padding-top: 100px;
        /* Location of the box */
        left: 0;
        top: 0;
        width: 100%;
        /* Full width */
        height: 100%;
        /* Full height */
        overflow: auto;
        /* Enable scroll if needed */
        background-color: rgb(0, 0, 0);
        /* Fallback color */
        background-color: rgba(0, 0, 0, 0.4);
        /* Black w/ opacity */
    }

    /* Modal Content */
    .modal-content {
        background-color: #fefefe;
        margin: auto;
        padding: 20px;
        border: 1px solid #888;
        width: 80%;
    }

    /* The Close Button */
    .close {
        color: #aaaaaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

    .close:hover,
    .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }
</style>

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

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

        #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;
        }

        input:-webkit-autofill,
        input:-webkit-autofill:hover,
        input:-webkit-autofill:focus,
        input:-webkit-autofill:active {
            -webkit-text-fill-color: #697a8d !important;
        }
    </style>
    <div id="alert" class="col-md-6">
        @if (Session::has('success'))
            <div class="alert alert-primary" role="alert">
                {{ Session::get('success') }}
            </div>
        @endif
    </div>

    <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> Add Receipt Number</h4>
            <!-- Basic Layout -->
            <div class="row" id="person_1">
                <div class="col-xl">
                    {{-- <div class="mb-2 text-center text-muted fw-bold">
                    Allowed to set holidays for future only. 
                        ( Exception: Last week dates can be chosen in case of emergency. )
                </div> --}}
                    <div class="card mb-4">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h5 class="mb-0">Receipt Number </h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-12 mb-3">
                                    <label class="form-label" for="basic-icon-default-fullname">Receipt Number</label>
                                    <input type="number" min="0" name="name" id="name"
                                        placeholder="Holiday Name" class="form-control input form-control-line"
                                        minlength="3" maxlength="30" onkeydown="return /[a-zA-Z0-9_\s-]/.test(event.key)"
                                        autocomplete="off">
                                </div>
                            </div>
                        </div>
                        <div class="form-group loaderbtn_div">
                            <button type="button" class="btn btn-success text-white" onclick="saveHoliday()"
                                id="save_btn">Save</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>

    <!-- The Modal -->
    <div id="myModal" class="modal" style="padding-top: 50px;">

        <!-- Modal content -->
        <div class="modal-content" style="width: 40%;">
            <div><span class="close text-end">&times;</span></div>
            <h4 class="text-center" id="text_in_modal"></h4>
            <div class="text-center mb-5">
                <img src="{{ URL::asset('assets/images/users/avatar.jpg') }}" id="card_pic" height="470"
                    width="100%" />
            </div>
        </div>
    </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>
        // Use jQuery.noConflict()
        jQuery.noConflict();

        // Now use jQuery instead of $ to avoid conflicts
        jQuery(document).ready(function($) {
            let mini = new Date();
            mini.setDate(mini.getDate() + 1);
            $('#start_date').datepicker({
                dateFormat: 'dd-mm-yy',
                changeMonth: true,
                changeYear: true,
                minDate: mini,
                maxDate: '+1Y', // Set the desired year range
            });

            $('#end_date').datepicker({
                dateFormat: 'dd-mm-yy',
                changeMonth: true,
                changeYear: true,
                minDate: mini,
                maxDate: '+1Y', // Set the desired year range
            });

            $('#start_date').on('change', () => calculateDuration());
            $('#end_date').on('change', () => calculateDuration());

            function calculateDuration() {
                const startDate = $('#start_date').datepicker('getDate');
                const endDate = $('#end_date').datepicker('getDate');

                if (startDate && endDate) {
                    const duration = Math.ceil((endDate - startDate) / (1000 * 60 * 60 * 24));
                    if (duration == 0) {
                        $('#duration').val(1);
                    } else if (duration >= 1) {
                        $('#duration').val(duration + 1);
                    } else {
                        $('#duration').val('');
                    }
                } else {
                    $('#duration').val('');
                }
            }
        });
    </script>

    <script>
        function handleFileChange(event, pass_val, tag_id) {
            if (event.target.files[0]) {
                $("#" + tag_id).removeClass("d-none");
            } else {
                $("#" + tag_id).addClass("d-none");
            }
        }

        function openingModal(text_to_include) {
            var modal = document.getElementById("myModal");

            // Get the <span> element that closes the modal
            var span = document.getElementsByClassName("close")[0];

            modal.style.display = "block";
            let fileInput, file;

            fileInput = document.getElementById('image');

            $("#text_in_modal").html(text_to_include);

            file = fileInput.files[0];
            const imgElement = document.getElementById('card_pic');

            if (file) {
                const fileURL = URL.createObjectURL(file);
                imgElement.src = fileURL;
            }

            // When the user clicks on <span> (x), close the modal
            span.onclick = function() {
                modal.style.display = "none";
            }

            // When the user clicks anywhere outside of the modal, close it
            window.onclick = function(event) {
                if (event.target == modal) {
                    modal.style.display = "none";
                }
            }
        }

        function saveHoliday() {
            const msg = confirm("You want to save following Holiday ?");
            if (msg == false) {
                return;
            }
            $('.text-danger').remove();
            $('input').removeClass('is-invalid');
            $('select').removeClass('is-invalid');
            $('#save_btn').prop("disabled", true);
            $('#loader').show();

            const name = ($("#name").val()).trim();
            const holiday_type = $("#holiday_type").val() ? $("#holiday_type").val() : "";
            const start_date = ($("#start_date").val()).trim();
            const end_date = ($("#end_date").val()).trim();
            const duration = ($("#duration").val()).trim();
            const image = $('#image').prop('files')[0];
            const description = ($("#description").val()).trim();


            var formData = new FormData();
            formData.append('name', name);
            formData.append('holiday_type', holiday_type);
            formData.append('start_date', start_date);
            formData.append('end_date', end_date);
            formData.append('duration', duration);
            formData.append('description', description);
            formData.append('image', image ? image : "");

            $.ajax({
                type: "post",
                url: "{{ route('holidays.store') }}",
                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) {
                    const status = data["status"];

                    if (status == 400) {
                        const error_code = data["error_code"];

                        if (error_code === 1) {
                            $.each(data["errors"], function(field_name, error) {
                                // Check if the error message for the field already exists
                                if ((field_name == "image" && (!$(`#image`).closest('div').next()
                                        .hasClass('text-danger'))) ||
                                    (field_name == "description" && (!$(`#description`).closest('div')
                                        .next().hasClass('text-danger')))) {
                                    $(`#${field_name}`).closest('div').after(
                                        '<div class="text-strong text-danger">' + error + '</div>');
                                } else if (!$(`#${field_name}`).closest('div').next().hasClass(
                                        'text-danger')) {
                                    $(`#${field_name}`).addClass('is-invalid');
                                    $(`#${field_name}`).closest('div').append(
                                        '<span class="text-strong text-danger">' + error + '</span>'
                                        );
                                }
                            });

                            const firstErrorElement = $('.is-invalid').first();
                            if (firstErrorElement.length) {
                                $('html, body').animate({
                                    scrollTop: firstErrorElement.offset().top -
                                        20 // Adjust the offset as needed
                                }, 500);
                            }
                        } else {
                            if (!$(`#save_btn`).closest('div').next().hasClass('text-danger')) {
                                $(`#save_btn`).closest('div').after('<span class="text-strong text-danger">' +
                                    data["message"] + '</span>');
                            }
                        }

                    } else {
                        window.location.href = data.redirect;
                    }
                    $('#save_btn').prop("disabled", false);

                },
                error: function() {
                    // Hide loader in case of an error
                    $('#loader').hide();
                    $('#save_btn').prop("disabled", false);

                    // Handle error
                },
                complete: function() {
                    // Hide loader when the request is completed (success, error, or failure)
                    $('#loader').hide();
                    $('#save_btn').prop("disabled", false);

                }
            });
        }
    </script>
@endsection