@include('layouts.headElement')
@include('layouts.headerNormal')
@include('layouts.sidebarV2')


<style>
    #date_range,
    #month_range {
        height: calc(3.5rem + 2px);
        /* Match Bootstrap form-control height */
        border-radius: 0.375rem;
        /* Match Bootstrap border-radius */
        padding: 0.375rem 0.75rem;
        font-size: 1rem;
        line-height: 1.5;
    }
    table td,
    table th {
        border: 1px solid #dee2e6 !important;
    }
    /* Calendar popup background */
    .flatpickr-calendar {
        background-color: rgb(188, 78, 114) !important;
        color: white !important;
        border: none;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    }

    /* Day cells - text color */
    .flatpickr-day {
        color: white !important;
        font-weight: 500;
    }

    /* Day hover effect */
    .flatpickr-day:hover {
        /* background: white !important; */
        color: rgb(199, 41, 54) !important;
        border-radius: 6px;
    }

    /* Selected day */
    .flatpickr-day.selected,
    .flatpickr-day.startRange,
    .flatpickr-day.endRange {
        /* background: blue !important; */
        color: black !important;
        border-radius: 6px;
    }

    /* Month and year in header */
    .flatpickr-current-month,
    .flatpickr-months .flatpickr-prev-month,
    .flatpickr-months .flatpickr-next-month {
        color: black !important;
    }

    /* Weekdays (Sun, Mon, ...) */
    .flatpickr-weekday {
        color: black !important;
    }

    /* Disable future dates */
    .flatpickr-day.flatpickr-disabled,
    .flatpickr-day.flatpickr-disabled:hover {
        background: transparent !important;
        color: #ccc !important;
        cursor: not-allowed !important;
    }

    /* Highlight today */
    .flatpickr-day.today {
        border: 1px solid white;
        font-weight: bold;
    }

    /* Flatpickr month navigation arrows */
    .flatpickr-months .flatpickr-prev-month svg,
    .flatpickr-months .flatpickr-next-month svg {
        fill: black !important;
        /* Your desired arrow color */
        stroke: black !important;
        /* For outlines, if present */
        width: 14px;
        height: 14px;
    }

    /* Optional: Add hover effect */
    .flatpickr-months .flatpickr-prev-month:hover svg,
    .flatpickr-months .flatpickr-next-month:hover svg {
        fill: rgb(255, 215, 0) !important;
        /* Example: gold on hover */
        cursor: pointer;
    }

    .flatpickr-monthSelect-month {
        color: white;
    }

    .flatpickr-monthSelect-month.flatpickr-disabled {
        color: #aaa !important;
        background-color: transparent !important;
        cursor: not-allowed;
    }

    .ui-datepicker {
        position: absolute;
        top: 114px;
        width: 300px !important;
        height: 300px;
        color: #963131;
        margin: 5px auto 0;
        font: 12pt Arial, sans-serif;
    }

    .ui-datepicker-header {
        background: #d9a441;
        color: black;
        border-width: 1px 0 0 0;
        border-style: solid;
        border-color: #111;
    }

    .ui-datepicker-calendar .ui-state-hover {
        background: white;
        color: #963131;
    }

    /* .ui-datepicker .ui-datepicker-prev span {
        background-color: #111;
    } */

    .ui-timepicker-standard a {
        border: 1px solid #d4d4d4;
        color: #ffffff;
        display: block;
        padding: 0.2em 0.4em;
        text-decoration: none;
        background-color: #963131;
    }

    .ui-timepicker-standard .ui-menu-item {
        margin: 0 auto;
        padding: 0 30%;
    }

    .ui-datepicker .ui-datepicker-buttonpane button {
        background-color: #d9a441 !important;
    }

    .ui-datepicker .ui-datepicker-header {
        border: 1px solid #d9a441 !important;
    }

    .monthYearPickerOnly .ui-datepicker-calendar {
        display: none;
    }

    .monthYearPickerOnly.ui-datepicker {
        font-size: 0.9rem;
        z-index: 9999 !important;
    }

    .monthYearPickerOnly {
        height: 99px;
    }

    /* Chrome, Safari, Edge, Opera */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    /* Firefox */
    input[type=number] {
        -moz-appearance: textfield;
    }

    #upload_name {
        margin-top: -8px;
    }

    .select2-container .select2-selection--multiple {
        min-height: 58px;
    }

    .edit_box_location {
        width: 300px !important;
        height: auto !important;
    }



    #pageloader {
        background: rgb(255 255 255 / 20%);
        display: none;
        height: 100%;
        position: fixed;
        width: 100%;
        z-index: 9999;
        top: 0;
        left: 0;
    }

    #pageloader img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        height: 150px;
        border: double black;
        background-color: antiquewhite;
        border-radius: 20px;
    }


    .dataTables_length,
    .dataTables_filter {
        display: block;
    }

    .filter {
        width: 51px;
    }

    tfoot {
        display: table-header-group !important;
    }

    .info {
        margin-bottom: 0rem !important;
        color: brown;
        font-size: 9px;
        font-weight: bold;
    }

    .toggler {
        position: absolute;
        right: 29px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
    }

    #toggler {
        position: absolute;
        right: 29px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
    }


    ul {
        list-style-type: none;
    }

    #edittoggler {
        position: absolute;
        right: 29px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
    }

    .edit_box_location {
        width: 340px !important;
        height: auto !important;
    }

    @media only screen and (min-width: 200px) and (max-width: 767px) {
        .tbl-adjust {
            width: 150%;
        }

        ul.chosen-choices {
            height: 57px !important;
            width: 250px !important;
        }

        ul.chosen-results {
            height: 75px !important;
            width: 250px !important;
            overflow-y: scroll;
        }

        select option {
            font-size: 13px;
        }
    }


    @media (max-width: 992px) {
        select option {
            font-size: 13px;
        }
    }

    .image-design {
        border: 1px solid;
        background: #fff;
        width: 100%;
        height: auto;
        padding: 1%;
    }

    .request_btn {
        padding: 10px;
        border-radius: 8px;
        background: #BA434D;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #fff;
    }



    #parent-form {
        width: 100%;
    }



    .form-card {
        border-radius: 5px;
        /* box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; */
        border: 2px solid #eee;
    }

    .formData {

        padding: 10px;
    }

    .custom-input {
        border: none !important;
        border-bottom: 2px solid #ddd !important;
        padding: 6px 5px !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 36px;


    }

    .custom-input::placeholder {
        color: #212529;
    }

    .custom-input:focus {
        color: #212529;
        background-color: #fff;
        border-color: #eee;
        outline: 0;
        box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
        border-radius: 8px;

    }

    .heading-block {

        background: #b19f83;
        padding: 10px;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }

    .heading-block h5 {
        color: #fff;

    }

    .button-block {
        padding: 10px;
        border-top: 2px solid #F5F5F5;
    }

    .submit-btn {
        background-color: #BA434D;
        /* padding: 8px 20px; */
        border-radius: 5px;
        color: #fff;
        border: none;
        /* font-size: 15px; */
        /* width: 120px; */
    }


    .Reset-btn {
        background: #212529;
        padding: 8px 20px;
        border-radius: 5px;
        color: #fff;
        border: none;
        /* font-size: 15px; */
        /* width: 120px; */
    }

    input:disabled {
        background: #eee;
    }

    .check-icon {
        height: 50px;
        width: 50px;
        background: green;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
    }

    #close-btn {
        font-size: 25px;
    }

    small {
        font-weight: 600 !important;
    }

    @media(max-width: 767px) {
        .btn-grp {
            display: flex;
            justify-content: space-between;
            gap: 5px;
        }
    }



    .ui-datepicker td.today-highlight a {
        color: white !important;
        /* background-color: transparent !important; */
        font-weight: bold;
        text-align: center;
    }

    .input_tag_size {}

    .skiptranslate {
        display: none;
    }
</style>
</head>

<body>
    @include ('layouts.loader')

    <main id="body_main_container" class="body_main_container">
        <div id="body_container">
            <div class="card" id="page_header_container">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-8">
                            <h5 class="card-title">Apply For Attendance Absent </h5>
                        </div>
                        <div class="col-md-2"></div>
                        <div class="col-md-2">
                            <a href="/attendance_rectification"
                                class="btn btn-reset align-items-center"
                                style="float: right;">
                                <i class="fa fa-arrow-left me-1" style="font-size: 10px;"></i>
                                Back
                            </a>
                        </div>
                    </div>
                </div>
            </div>



            <section class="section dashboard form-container">
                <div class="card p-0">
                    <div class="card-body p-2">
                        <form class="formData" id="attendanceForm">
                            <input type="hidden" name="_token" value="{{ csrf_token() }}">
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="form-floating ">
                                        <select class="form-select" id="kitchen_name" name="kitchen_name" required>
                                            <option value="">Select</option>
                                            @foreach ($kitchensData as $kitchens)
                                            <option value="{{ $kitchens->id }}"> {{$kitchens->kitchen_name }}</option>
                                            @endforeach
                                        </select>

                                        <label for="floatingName">Kitchen Name</label>

                                        <p id="error_kitchen_name" style="color:red"></p>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-floating">
                                        <select class="form-select" id="emp_name" name="emp_name" aria-label="" autocomplete="off" required>
                                            <option value="">Select</option>

                                        </select>
                                        <label for="floatingName">Employee Name</label>

                                        <p id="error_emp_name" style="color:red"></p>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-floating">
                                        <select class="form-select" id="attendanceCorrection" name="attendanceCorrection" aria-label="">
                                            <option value="">Select Attendance</option>
                                            <!-- <option value="AT1">Login not marked</option>
                                            <option value="AT2">WeekOff not marked</option>
                                            <option value="AT3">WeekOff exchanged to work</option>
                                            <option value="AT4">Work exchanged to WeekOff</option> -->
                                            <option value="AT5">Marked Absent/Work exchanged to Absent</option>
                                        </select>
                                        <label for="floatingName">Attendance mark Absent</label>
                                        <p id="error_at_correct" style="color:red"></p>
                                    </div>
                                </div>

                                <div class="col-md-3">
                                    <div class="form-floating">
                                        <input type="text" class="form-control" id="startDate" name="startDate" autocomplete="off" placeholder="Your Name" required="" readonly='true'>
                                        <label for="floatingName">Absent Dates</span></label>
                                        <p id="error_from_date" style="color:red"></p>
                                    </div>
                                </div>
                                <input type="hidden" class="form-control" name="emp_code" id="emp_code">







                                <div class="col-md-12">

                                    <div class="form-floating">
                                        <input type="text" class="form-control" name="remarks" id="reasonText"
                                            placeholder="Please enter text" autocomplete="off">
                                        <label for="revision">Remarks and details of Absent</label>
                                    </div>
                                </div>
                            </div>
                            <div class=" text-center mt-2">
                                <button type="submit" class="btn submit-btn" type="button" id="submit-btn">Submit</button>
                                <button class="btn reset-btn" type="button" onclick="clearData()">Reset</button>

                            </div>

                        </form>
                    </div>
                </div>
            </section>
            <section class="section dashboard form-container">
                <div class="card p-0">
                    <div class="card-body p-2">
                        <div class="mt-3 p-2">
                            <!-- Web Tables -->
                            <div class="mt-3 p-2" id="web">

                                <div id="pendingTable_web" style="overflow-x:auto;">

                                    <table id="itemList" class="table table-bordered nowrap" style="width:100%;">
                                        <thead>
                                            <tr>
                                                <th class="text-center">Applied On</th>
                                                <th class="text-center">Emp Code</th>
                                                <th class="text-center">Emp Name</th>
                                                <th class="text-center">Attendance mark Absent</th>
                                                <th class="text-center">Absent Date</th>
                                                <th class="text-center">Remarks</th>
                                                <th class="text-center">Action ON</th>
                                                <th class="text-center">Action By</th>
                                                <th class="text-center">Status</th>
                                            </tr>
                                        </thead>
                                        <tbody>

                                        </tbody>
                                    </table>
                                </div>

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

        </div>

        </div>

    </main>
    @include('layouts.footer')

    <!-- <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"> -->

    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/jquery-ui.js"></script>
    <script src='js/jquery.validate.js'></script>
    <!-- IMPORTANT: Multi-date plugin -->
    <script src="https://cdn.jsdelivr.net/npm/jquery-ui-multidatespicker/jquery-ui.multidatespicker.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-ui-multidatespicker/jquery-ui.multidatespicker.css">
    <script>
        let leaveformData = document.getElementById("attendanceForm");
        let subBtn = document.getElementById("submit-btn")


        function clearData() {
            leaveformData.reset();

            const form = $('#attendanceForm');
            form[0].reset();
            form.validate().resetForm();
            form.find('.error-border').removeClass('error-border');
            form.find('.success-border').removeClass('success-border');

        }



        $(document).ready(function(e) {

            $("#attendanceForm").validate({
                rules: {
                    kitchen_name: "required",
                    emp_name: "required",
                    attendanceCorrection: "required",
                    startDate: "required",

                },
                errorPlacement: function(error, element) {
                    if (element.attr("id") == "kitchen_name") {
                        error.appendTo('#error_kitchen_name');
                    } else if (element.attr("id") == "emp_name") {
                        error.appendTo('#error_emp_name');
                    } else if (element.attr("name") == "attendanceCorrection") {
                        error.appendTo('#error_at_correct');
                    } else if (element.attr("name") == "startDate") {
                        error.appendTo('#error_from_date');
                    } else {
                        error.insertAfter(element);
                    }
                },
            });



            setupDatePicker();

            $("#emp_name").change(function() {
                $("#emp_code").val($(this).find(":selected").text());
            });
            fetchPendingData();

        })



        let selectedDates = [];

        function setupDatePicker() {
            let yesterday = new Date();
            yesterday.setDate(yesterday.getDate() - 1);

            let oneMonthBack = new Date(yesterday);
            oneMonthBack.setMonth(oneMonthBack.getMonth() - 1);

            $("#startDate").multiDatesPicker({
                dateFormat: "yy-mm-dd",
                minDate: oneMonthBack, // start = 1 month back
                maxDate: yesterday, // end = yesterday
                showOn: "focus",
                onSelect: function(dateText) {
                    selectedDates = $("#startDate").multiDatesPicker("getDates");
                    console.log("Selected Dates:", selectedDates);
                }
            });
        }

        $('#kitchen_name,#staff_type').change(function() {
            let kitchenId = $('#kitchen_name').val();
            if (kitchenId.length <= 0) {
                return;
            }
            var staff_type = '';
            $("#pageloader").fadeIn();
            $.ajax({
                url: 'get_emp_list_by_kitchen_id_and_staff_type',
                method: 'get',
                data: {
                    id: kitchenId,
                    staff_type: staff_type
                },
                success: function(res) {
                    if (res) {
                        let empData = JSON.parse(res);
                        $("#pageloader").fadeOut();
                        $('#emp_name').html('');

                        if (empData.length === 0) {
                            $('#emp_name').html('');
                        } else {
                            // $('#emp_name').prop('disabled', false);
                            $('#emp_name').append(`<option value="">Select</option>`);
                            empData.forEach(function(data) {
                                $('#emp_name').append(`<option value="${data.client_user_id}">${data.full_name} (${data.emp_code})</option>`);
                            });
                        }

                        $('#emp_name').multipleSelect('refresh');
                        $('#emp_name').multipleSelect('checkAll');
                        $(".sd-CustomSelect").css({
                            display: "block",
                            visibility: "visible"
                        });
                    } else {
                        $('#user_id').html('');
                        $('#user_id').multipleSelect('refresh');

                    }

                },
                error: function(res) {
                    console.log(res);
                }
            });
        });






        //add attendance.....................................................................................

        $('#attendanceForm').submit(function(e) {
            e.preventDefault();
            var formData = new FormData(this);
            if ($('#attendanceForm').valid()) {
                $('#pageloader').show();

                $.ajax({
                    url: 'add_absent_attendance',
                    type: "POST",
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function(returndata) {
                        $('#pageloader').hide();
                        if (returndata.status == 0) {
                            let msg = returndata.message;
                            if (returndata.existing_dates && returndata.existing_dates.length > 0) {
                                msg += "\n\nAlready have request for these dates:\n" + returndata.existing_dates.join(", ");
                            }
                            alert(msg);
                        } else {
                            alert('Your Attendance rectification request was submitted successfully.');

                            $(".btn-close").click();
                            $("#attendanceForm")[0].reset();
                            $('#emp_name').html('');
                             $('#startDate').html('');
                            
                            selectedDates = [];
                            fetchPendingData();
                        }
                    },
                    error: function() {
                        $('#pageloader').hide();
                    }
                });

            }
        })

        function fetchPendingData() {
            $('#pageloader').show();
            var token = ' {{ csrf_token() }} ';
            $.ajax({
                url: "get_attendance_absent_data_status_tab",
                type: "POST",
                dataType: "json",
                data: {
                    _token : token
                },
                success: function(response) {

                    $('#pageloader').hide();
                    fetchPendingDataDesktop(response);
                    // fetchPendingDataMobile(response);
                },
                error: function(xhr, error) {
                    $('#pageloader').hide();
                    console.log(error);
                }
            });
        }

        //get Month
        function formatDateToDDMonYYYY(dateStr) {
            const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
                "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
            ];
            const date = new Date(dateStr);
            const day = String(date.getDate()).padStart(2, '0');
            const month = months[date.getMonth()];
            const year = date.getFullYear().toString().slice(-2);
            return `${day}-${month}-${year}`;
        }

        //Month End


        //Desktop View Show Table 
        var table1, table2;

        function translateDataTable() {
            // logic
        }
         function translateElement (el) {
            return el;
           
        }


        function fetchPendingDataDesktop(response) {
            var userRole = "{{ session('role') }}";

            let showStatusColumn = Array.isArray(response) && response.some(item =>
                item.is_approve_by_manager !== 0
            );



            let actionByActionDate = Array.isArray(response) && response.some(item =>
                item.actionby != null && item.actiondate != null
            );


            $('#itemList').DataTable().clear().destroy();
            table1 = $('#itemList').DataTable({

                data: response,
                autoWidth: true,
                responsive: true,
                paging: true,
                info: false,
                searching: true,
                lengthChange: false,
                pageLength: 100,
                scrollX: true,
                fixedColumns: false,
                columns: [{
                        data: "timestamp",
                        title: "Applied On",
                        render: function(data, type, row) {
                            return formatDateToDDMonYYYY(data);
                        }
                    },
                    {
                        data: "emp_id",
                        title: "Emp Code",
                    },
                    {
                        data: "full_name",
                        title: "Emp Name",
                    },
                    {
                        data: "attendance_correction",
                        title: "Attendance mark Absent",
                        render: function(data, row, type){
                            if (data === "AT1") {
                                return "Login not marked";
                            } 
                            else if (data === "AT2") {
                                return "WeekOff not marked";
                            } 
                            else if (data === "AT3") {
                                return "WeekOff exchanged to work";
                            } 
                            else if (data === "AT4") {
                               return "Work exchanged to WeekOff";
                            } else if (data == "AT5") {
                                return "Marked Absent/Work exchanged to Absent";
                            }
                        }
                    },
                    {
                        data: "date_to_adjust",
                        title: "Absent Date",
                        render: function(data, row, type) {
                            return formatDateToDDMonYYYY(data);
                        }
                    },
                    {
                        data: "remarks",
                        title: "Remarks",
                        render: function(data, row, type) {
                            if(data == undefined || data == '' || data == null) {
                                   return `
                                <textarea class="form-control" 
                                    style=" height:80px; overflow-y:auto; resize:none; 
                                        font-size:12px; background-color: transparent !important;" 
                                    readonly>No Reasons</textarea>
                            `;

                            } else {
                            return `
                                <textarea class="form-control" 
                                    style=" height:80px; overflow-y:auto; resize:none; 
                                        font-size:12px; background-color: transparent !important;" 
                                    readonly>${data}</textarea>
                            `;
                            }

                        },

                    },
                    {
                        data: null,
                        title: "Comments By Approver",
                        visible: (showStatusColumn),
                        render: function(data, type, row) {
                            var managerStatus = data.is_approve_by_manager;
                            var comment = '';
                            if (managerStatus == 1 || managerStatus == 2) {
                                comment = data['comment_by_manager'];
                            } else {
                                comment = '';
                            }

                            return `<div class="scrollable-cell" id="scroll_box">${comment ? comment : ''}</div>`;

                        }
                    },
                    {
                        data: null,
                        title: "Action On",
                        visible: (actionByActionDate),
                        render: function(data, type, xhr) {
                            return data.actiondate ? formatDateToDDMonYYYY(data.actiondate) : '';
                        }

                    },
                    {
                        data: null,
                        title: "Action By",
                        visible: (actionByActionDate),
                        render: function(data, xhr, row) {

                            return data.actionby ? data.actionby : '';

                        }
                    },
                    

                ],

                initComplete: function() {
                    setTimeout(() => translateDataTable('itemList'), 300);
                    $(".sidebar").click(function() {
                        setTimeout(() => table1.columns.adjust().draw(), 300);
                    });
                },
                drawCallback: function() {
                    setTimeout(() => translateDataTable('itemList'), 300);
                },
                // columnDefs: [
                //     { width: '1%', targets: '_all' }
                // ]

            });

            setTimeout(async () => {
                const modal = document.getElementById('itemList');
                const elements = modal.querySelectorAll('td, th, label, button, input[placeholder], div');
                for (const el of elements) {
                    await translateElement(el);
                }
            }, 100);
            setTimeout(() => {
                table1.columns.adjust().draw();
            }, 300);
              

        }



    </script>
</body>

</html>