@include('layouts.headElement')
@include('layouts.headerNormal')
@include('layouts.sidebarV2')
<meta name="csrf-token" content="{{ csrf_token() }}">
<style>
    .dataTables_filter {
        float: right !important;
        text-align: right !important;
        margin-bottom: 10px;
    }
      #ex_img1 {
        width: 27px;
        float: right;
        margin-top: 0%;
        margin-bottom: 1%;
        color: #963131 !important;
    }
      #ex_img2 {
        width: 27px;
        float: right;
        margin-top: 0%;
        margin-bottom: 1%;
        color: #963131 !important;
    }
      #ex_img3 {
        width: 27px;
        float: right;
        margin-top: 0%;
        margin-bottom: 1%;
        color: #963131 !important;
    }
      #ex_img4 {
        width: 27px;
        float: right;
        margin-top: 0%;
        margin-bottom: 1%;
        color: #963131 !important;
    }

    .dataTables_filter input {
        margin-left: 5px;
    }

     .approved_tab {
        padding: 3px;
        background-color: #008000;
        color: white;
        border-radius: 5px;
    }

    .pending_tab {
        padding: 3px;
        background-color: #949090ff;
        border-radius: 5px;
        color: #fff;
    }

    .dissapprove_tab {
        padding: 3px;
        background-color: hsla(0, 87%, 56%, 1.00);
        border-radius: 5px;
        color: white;
    }

    .approved_icon {
        background-color: #008000;
    }

    .dissapprove_icon {
        background-color: hsla(0, 87%, 56%, 1.00);

    }

    .pending_icon {
        background-color: #949090ff;
    }

    .approved_icon,
    .dissapprove_icon,
    .pending_icon {
        padding: 3px;
        width: 90px;
        color: #fff;
        font-size: 15px;
        border-radius: 5px;
        text-align: center;
    }


    /* 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;
    }


    .error {
        color: red;
        font-size: 13px;
        font-weight: 600;
        /* margin-top: 45px; */
    }

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

        #backbtn {
            display: block !important;
        }

    }


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

    .actions-icons {
        display: flex;
        align-items: center;
        justify-content: space-around;
    }

    .actions-icons i {
        font-size: 25px;
        cursor: pointer;
    }

    .actions-icons i:nth-child(1) {
        color: green;
    }

    .actions-icons i:nth-child(2) {
        color: red;
    }

    .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;
        border-bottom: 2px solid #ddd;
        padding: 15px 5px;
        width: 100%;
        max-width: 100%;
        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: #963131;
        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;
    }

    #itemList {
        white-space: nowrap;
    }

    #itemList th,
    #itemList td {
        white-space: nowrap;
    }

    #itemList_new {
        white-space: nowrap;
    }

    #itemList_new th,
    #itemList_new td {
        white-space: nowrap;
    }




    @media (min-width: 768px) {
        #web {
            display: block !important;
        }

        #mobileDevice {
            display: none !important;
        }
    }

    /* Mobile (show mobile table only) */
    @media (max-width: 767.98px) {
        #web {
            display: block !important;
        }

        #mobileDevice {
            display: none !important;
        }
    }

    .reduiredfield {

        color: red;
        font-size: 18px;
        font-weight: bold;
    }

    .active-tabs {
        border: 1px solid #963131 !important;
        color: #963131 !important;
    }

    .btn-sm {
        border: none !important;

    }

    #itemList_new th {
        white-space: nowrap !important;
    }



    #itemList th,
    #itemList_new th,
    #itemListPending th,
    #itemListApproved th {
        /* border-top: 1px solid #ddd;
        border-left: 1px solid #ddd;
        border-right: 1px solid #ddd;
        border-bottom: 2px solid #000; */
        font-size: 12px;
        font-weight: bold;
        text-align: center;
        vertical-align: middle;
        padding: 6px;
    }

    #itemList td,
    #itemList_new td,
    #itemListPending td,
    #itemListApproved td {
        border: 1px solid #ddd !important;
        font-size: 12px;
        text-align: center;
        vertical-align: middle;
        padding: 6px;
    }

    #itemList tbody tr:hover,
    #itemList_new tbody tr:hover,
    #itemListPending tbody tr:hover #itemListApproved tbody tr:hover {
        background-color: #f2f2f2 !important;
        cursor: pointer;
    }

    .dataTables_filter {
        margin-bottom: 10px !important;
    }

    /* 

        

 

        /* Base styles */
    .filter-btn,
    .filter-tab-btn {
        background-color: transparent !important;
        border: 1px solid #963131 !important;
        color: #963131 !important;
        border-radius: 4px;
        padding: 4px 12px;
        font-size: 13px;
        transition: all 0.2s ease;
    }

    /* Hover effect */
    .filter-btn:hover,
    .filter-tab-btn:hover {
        border: 1.5px solid #963131 !important;
    }

    /* Focus and active state */
    .filter-btn:focus,
    .filter-btn:active,
    .filter-tab-btn:focus,
    .filter-tab-btn:active {
        outline: none !important;
        box-shadow: none !important;
        background-color: transparent !important;
    }

    button.filter-tab-btn.active-tab,
    button.filter-tab-btn.active-tab:focus,
    button.filter-tab-btn.active-tab:active,
    button.filter-tab-btn.active-tab:hover,
    button.filter-tab-btn.active-tab:visited {
        background-color: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
        outline: none !important;
        border: 2px solid #963131 !important;
        color: #963131 !important;
    }

    /* Optional - if you still use .selected */
    .selected {
        border: 2px solid #963131 !important;
    }

    #toast-container>.toast-success {
        background-color: #963131 !important;
        color: white !important;
    }


    .toast-error {
        background-color: #963131 !important;
        color: #fff !important;
    }

    .scrollable-div {
        max-height: 150px;
        overflow-y: auto;
        overflow-x: hidden;
        width: 100%;
        box-sizing: border-box;
        word-wrap: break-word;
        white-space: pre-wrap;
        word-break: break-word;
        /* breaks long words to avoid horizontal scroll */
    }

    .scrollable-comment::-webkit-scrollbar {
        width: 6px;
        /* thin vertical scrollbar */
    }

    .scrollable-comment::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.3);
        /* scrollbar color */
        border-radius: 3px;
    }

    .scrollable-comment::-webkit-scrollbar-track {
        background: transparent;
        /* optional track color */
    }

    /* Firefox */
    .scrollable-comment {
        scrollbar-width: thin;
        scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
    }



    #pageloader {
        background: rgba(255, 255, 255, 0.2);
        /* cleaner RGBA syntax */
        display: none;
        /* keep as needed */
        height: 100%;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999;
    }

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

    @media screen and (max-width: 600px) {
        #pageloader img {
            height: 150px;
        }
    }

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

    .filter-btn.active-filter,
    .filter-tab-btn.active-tab {
        border: 2px solid #963131 !important;
        /* Darker shade of your theme */
        color: #963131 !important;
        font-weight: 600;
    }

    .filter-btn.active-filter:hover,
    .filter-tab-btn.active-tab:hover {
        border: 2px solid #10184f !important;
    }

    .submit-btn-handler {
        background-color: #963131 !important;
        color: white !important;
        padding: 6px 12px;
        border-radius: 5px;
        border: none !important;
        font-size: 17px;
        font-weight: bold;
        transition: 1s;
    }

    .submit-btn-handler:hover {
        background-color: #963131 !important;
    }


    .approve-icon.active {
        color: #28a745 !important;
        /* bright green */
        opacity: 1 !important;
        filter: drop-shadow(0 0 3px #28a745);
    }

    .reject-icon.active {
        color: #dc3545 !important;
        /* bright red */
        opacity: 1 !important;
        filter: drop-shadow(0 0 3px #dc3545);
    }

    .swal2-modal {
        width: 40%;
    }


    .pen_sub_btn {
        background-color: #963131;
        padding: 6px 14px;
        color: #fff;
        outline: none;
        border: none;
        border-radius: 5px;
    }

    .pen_sub_btn:hover {
        background-color: #0e144aff;
    }

    .selected-approve {
        border: 4px solid darkgreen;
        border-radius: 50%;
        padding: 10px;
    }

    .selected-reject {
        border: 4px solid darkred;
        border-radius: 50%;
        padding: 10px;
    }



    .icon-selected {
        width: 21%;
        height: 21%;
        border: 2px solid #056639ff;
        background-color: transparent;

    }


    .icon-reject {
        width: 21%;
        height: 21%;
        border: 2px solid #e95353ff;
        background-color: transparent;

    }

    .icons_div {
        width: 20%;
        height: 20%;
        border-radius: 50%;
        font-size: 30px;
    }

    .custom-scroll::-webkit-scrollbar {
        width: 3px !important;
        height: 3px !important;
        /* small width */
    }

    .custom-scroll::-webkit-scrollbar-track {
        background: transparent;
    }

    .custom-scroll::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.3);
        border-radius: 2px;
    }

    .custom-scroll::-webkit-scrollbar-thumb:hover {
        background-color: rgba(0, 0, 0, 0.5);
    }

    /* For Firefox */
    .custom-scroll {
        scrollbar-width: thin;
        scrollbar-color: rgba(0, 0, 0, 0.4) transparent;
    }

    /* Table Wrapper with Fixed Header and Submit Button */
    .table-wrapper-fixed {
        position: relative;
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - 200px);

    }

    /* Scrollable Table Container */
    .table-scroll-container {
        flex: 1;
        overflow-x: auto;
        overflow-y: auto;
        position: relative;
        max-height: calc(100vh - 150px);
    }

    /* Fixed Table Styles */
    .table-fixed {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        margin-bottom: 0 !important;
    }

    /* Fixed Header for DataTables */
    .table-fixed thead {
        position: sticky;
        top: 0;
        z-index: 100;
    }

    .table-fixed thead th {
        /* background-color: #f8f9fa !important; */
        position: sticky;
        top: 0;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        z-index: 100;
    }

    /* Fixed Submit Button Container */
    .fixed-submit-container {
        position: sticky;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: white;
        padding: 15px;
        border-top: 2px solid #ddd;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
        z-index: 100;
        text-align: center;
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        .table-wrapper-fixed {
            max-height: calc(100vh - 50px);
        }

        .table-scroll-container {
            max-height: 400px;
        }
    }

    #pendingTable_web {
        border: none !important;
    }

    .table-scroll-container::-webkit-scrollbar {
        width: 3px !important;
        height: 3px !important;
    }

    .table-scroll-container::-webkit-scrollbar-track {
        background: transparent;
    }

    .table-scroll-container::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.4);
        border-radius: 2px;
    }

    .table-scroll-container::-webkit-scrollbar-thumb:hover {
        background-color: rgba(0, 0, 0, 0.6);
    }

    /* Thin Scrollbar for Mobile Pending Table */
    #pendingTable::-webkit-scrollbar,
    #itemListPending::-webkit-scrollbar {
        width: 3px !important;
        height: 3px !important;
    }

    #pendingTable::-webkit-scrollbar-track,
    #itemListPending::-webkit-scrollbar-track {
        background: transparent;
    }

    #pendingTable::-webkit-scrollbar-thumb,
    #itemListPending::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.4);
        border-radius: 2px;
    }

    #pendingTable::-webkit-scrollbar-thumb:hover,
    #itemListPending::-webkit-scrollbar-thumb:hover {
        background-color: rgba(0, 0, 0, 0.6);
    }

    /* Thin Scrollbar for Mobile Completed Table */
    #approvedTable::-webkit-scrollbar,
    #itemListApproved::-webkit-scrollbar {
        width: 3px !important;
        height: 3px !important;
    }

    #approvedTable::-webkit-scrollbar-track,
    #itemListApproved::-webkit-scrollbar-track {
        background: transparent;
    }

    #approvedTable::-webkit-scrollbar-thumb,
    #itemListApproved::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.4);
        border-radius: 2px;
    }

    #approvedTable::-webkit-scrollbar-thumb:hover,
    #itemListApproved::-webkit-scrollbar-thumb:hover {
        background-color: rgba(0, 0, 0, 0.6);
    }

    /* Firefox Support for Mobile Tables */
    #pendingTable,
    #itemListPending,
    #approvedTable,
    #itemListApproved {
        scrollbar-width: thin;
        scrollbar-color: rgba(0, 0, 0, 0.4) transparent;
    }

    /* Mobile Tables with Fixed Headers */
    @media only screen and (max-width: 767px) {

        /* Container for pending table */
        #pendingTable {
            position: relative;
            max-height: calc(100vh - 300px);
            overflow-y: auto;
            overflow-x: none;
        }

        /* Container for approved table */
        #approvedTable {
            position: relative;
            max-height: calc(100vh - 300px);
            overflow-y: auto;
            overflow-x: none;
        }

        /* Fix the table headers */
        #itemListPending thead,
        #itemListApproved thead {
            position: sticky;
            top: 0;
            z-index: 10;
            background-color: #f8f9fa;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        #itemListPending thead th,
        #itemListApproved thead th {
            background-color: #f8f9fa !important;
            position: sticky;
            top: 0;
            z-index: 10;
        }

        /* Ensure tables take full width */
        #itemListPending,
        #itemListApproved {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
        }
    }
</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">Approve Attendance Rectification </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">


                        <div class="form-card m-2">

                            <div class="card shadow-sm mb-4">

                                <div class="card-body p-3" id="web">

                                    <div class="d-flex justify-content-start  gap-2 mb-3">
                                        <div class="d-flex gap-2">
                                            <button class="btn btn-sm filter-tab-btn active-tab"
                                                id="filterPending_web">Pending</button>
                                            <button class="btn btn-sm filter-tab-btn" id="filterApproved_web">Completed</button>
                                        </div>
                                    </div>

                                    <!-- Pending Table -->
                                    <div id="pendingTable_web" class="table-wrapper-fixed">
                                        <div class="table-scroll-container">
                                            <div class="mb-2">
                                                <input type="checkbox" id="selectAllRows">
                                                <label for="selectAllRows">Select All</label>
                                            </div>
                                            <table id="itemList"
                                                class="table table-bordered table-striped display nowrap table-fixed">
                                                <thead>
                                                    <tr>
                                                         <th>Select</th>
                                                        <th>Applied By</th>
                                                        <th>Emp Code</th>
                                                        <th>Applied date</th>
                                                        <th>Location</th>
                                                        <th>Rectification Date</th>
                                                        <th>From Time-To Time</th>
                                                        <th>Attendance To correct</th>
                                                        <th>Remarks</th>
                                                        <th>Action by</th>
                                                        <th>Action On</th>
                                                        <th>Status</th>
                                                        <th>Comment By Approver</th>
                                                        <th class="text-lg-center">Approve / Reject</th>
                                                    </tr>
                                                </thead>
                                            </table>
                                        </div>
                                        <!-- <div class="fixed-submit-container">
                                            <button type="button" id="submitAllRemarks"
                                                class="submit-btn-handler">Submit</button>
                                        </div> -->
                                        <br>
                                        <div class="text-center mb-4">
                                            <button class="btn btn-success" id="bulkApprove">
                                                Approve Selected
                                            </button>

                                            <button class="btn btn-danger" id="bulkReject">
                                                Reject Selected
                                            </button>
                                        </div>
                                    </div>

                                    <!-- Approved Table -->
                                    <div id="approvedTable_web" class="table-wrapper-fixed d-none">
                                        <div class="table-scroll-container">
                                            <table id="itemList_new" class="table table-bordered table-hover table-fixed"
                                                style="width: 100%;">
                                                <thead>
                                                    <tr style="white-space: nowrap !important;">
                                                        <th>Applied By</th>
                                                        <th>Emp Code</th>
                                                        <th>Location</th>
                                                        <th>Applied date</th>
                                                        <th>Rectification Date</th>
                                                        <th>From Time-To Time</th>
                                                        <th>Rectification TO Correct</th>
                                                        <th>remark</th>
                                                        <th>Status</th>
                                                        <th>Comment By Approver</th>
                                                        <th>ActionBy</th>
                                                        <th>Action Date</th>
                                                    </tr>
                                                </thead>
                                                <tbody></tbody>
                                            </table>
                                        </div>
                                        <!-- <div class="fixed-submit-container">
                                            <button type="button" id="submitAllRemarks_id"
                                                class="submit-btn-handler">Submit</button>
                                        </div> -->
                                    </div>
                                </div>
                            </div>

                            <div class="mt-3 p-2" id="mobileDevice">
                                <div class="d-flex justify-content-between align-items-center gap-2 mb-3">
                                    <div class="d-flex gap-2">
                                        <button class="btn btn-sm filter-btn active-filter" id="filterPending">Pending</button>
                                        <button class="btn btn-sm filter-btn" id="filterApproved">Completed</button>
                                    </div>



                                </div>
                                <!-- Pending Table - VISIBLE BY DEFAULT -->
                                <div id="pendingTable" class="table-responsive">
                                    <div class="mb-2 mt-2 d-flex justify-content-between align-items-center">
                                        <input type="text" placeholder="Search">
                                        <span>
                                            <i id="ex_img1" class="fas fa-file-excel" title="Employee_details" onclick="downloadExcel();"></i>
                                            
                                        </span>
                                    </div>

                                    <table id="itemListPending" style="width: 100%;" class="table table-bordered table-striped">
                                        <thead class="table table-bordered table-striped p-1 text-center">
                                            <tr class="">
                                                <th style="white-space: nowrap;">Applied By</th>
                                                <th style="white-space: nowrap;">Applied On</th>
                                                <th style="white-space: nowrap;">Location</th>
                                                <th style="white-space: nowrap;">More</th>
                                            </tr>
                                        </thead>
                                        <tbody class="text-center">

                                        </tbody>
                                    </table>

                                </div>

                                <!-- Approved Table - HIDDEN BY DEFAULT -->
                                <div id="approvedTable" class="table-responsive d-none">
                                    <div class="mb-2 mt-2 d-flex justify-content-between align-items-center">
                                        <input type="text" placeholder="Search">
                                        <span>
                                             <i id="ex_img2" class="fas fa-file-excel" title="Employee_details" onclick="downloadExcelComplete();"></i>
                                          
                                        </span>
                                    </div>

                                    <table id="itemListApproved" style="width: 100%;"
                                        class="table table-bordered table-striped">
                                        <thead class="table table-bordered table-striped p-1 text-wrap text-center">
                                            <tr class="text-center" style="font-size: 12px;">
                                                <th style="white-space: nowrap;">Applied By</th>
                                                <th style="white-space: nowrap;">Applied On</th>
                                                <th style="white-space: nowrap;">Status</th>
                                                <th style="white-space: nowrap;">More</th>
                                            </tr>
                                        </thead>
                                        <tbody class="text-center" style="font-size: 12px;">

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

                            </div>




                        </div>


                        <div class="modal fade" id="ExtralargeEdit" tabindex="-1" aria-hidden="true">
                            <div class="modal-dialog modal-xl modal-dialog-scrollable">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title fw-bold" style="margin-left: auto !important">
                                            Attendance Rectification</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                    </div>

                                    <div class="modal-body">
                                        <div class="table-responsive">
                                            <table class="table table-bordered">
                                                <thead class=""> <!-- Highlighted Header -->


                                                    <tr>
                                                        <th style="width: 40%;">Field</th>
                                                        <th>Details</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr style="display:none">
                                                        <td style="display:none"></td>
                                                        <td style="display:none">
                                                            <input type="hidden" value="0" id="status_id">
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td><strong>Applied By</strong></td>
                                                        <td id="model_full_name"></td>
                                                    </tr>
                                                    <tr>
                                                        <td><strong>Designation</strong></td>
                                                        <td id="designation_pending"></td>
                                                    </tr>
                                                    <tr>
                                                        <td><strong>Applied Date</strong></td>
                                                        <td id="model_applied_date"></td>
                                                    </tr>



                                                    <tr>
                                                        <td><strong>Attendance To Correct</strong></td>
                                                        <td id="attendance_to_correct"></td>
                                                    </tr>


                                                    <tr>
                                                        <td><strong>Rectification Date</strong></td>
                                                        <td id="rectification_Date"></td>
                                                    </tr>

                                                    <tr style="border-bottom: 2px solid #000">
                                                        <td><strong>Reason</strong></td>
                                                        <td id="remark"></td>
                                                    </tr>


                                                    <!-- Display Status  -->
                                                    <tr id="action_date" style="display:none;">
                                                        <td>
                                                            <strong>Action On</Strong>
                                                        </td>
                                                        <td id="action_on_pending">

                                                        </td>
                                                    </tr>

                                                    <tr id="action_by_name" style="display:none;">
                                                        <td>
                                                            <strong>Action By</Strong>
                                                        </td>
                                                        <td id="action_by_pending">

                                                        </td>
                                                    </tr>

                                                    <tr id="comment_by_manager_action_icon" style="display:none">
                                                        <td>
                                                            <strong>Status</Strong>
                                                        </td>
                                                        <td id="privous_icon">

                                                        </td>
                                                    </tr>

                                                    <tr id="comment_by_manager_show"
                                                        style="border-bottom:2px solid #000; display:none;">
                                                        <td>
                                                            <strong>Comment By Approver</Strong>
                                                        </td>
                                                        <td id="privous_comment">

                                                        </td>
                                                    </tr>
                                                    <!-- End Status -->

                                                    <tr class="action_icon_pending_based_on_role" style="display:none;">
                                                        <td><strong> Approve / Reject</strong></td>

                                                        <td id="model_applied_reject">
                                                        </td>

                                                    </tr>

                                                    <tr class="action_icon_pending_based_on_role_based" style="display:none;">
                                                        <td><strong>Comments By Hr <sup
                                                                    style="color: red;">*</sup></strong></td>
                                                        <td id="model_comment">

                                                        </td>
                                                    </tr>

                                                </tbody>
                                            </table>

                                            <div class="d-flex justify-content-center" id="sub_btn_model">
                                                <input type="submit" id="pen_sub" class="pen_sub_btn">
                                            </div>
                                        </div>

                                    </div>

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



                        <div class="modal fade" id="approveEdit" tabindex="-1" aria-hidden="true">
                            <div class="modal-dialog modal-xl ">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title fw-bold" style="margin-left: auto !important">
                                            Completed Attendance Status</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                    </div>

                                    <div class="modal-body">
                                        <div class="table-responsive">
                                            <table class="table table-bordered">
                                                <thead class=""> <!-- Highlighted Header -->
                                                    <tr>
                                                        <th style="width: 40%;">Field</th>
                                                        <th>Details</th>
                                                    </tr>
                                                </thead>
                                                <tbody>

                                                    <tr style="display:none">
                                                        <td style="display:none"></td>
                                                        <td style="display:none">
                                                            <input type="hidden" value="0" id="status_id_cm">
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td><strong>Applied By</strong></td>
                                                        <td id="full_name"></td>
                                                    </tr>

                                                    <tr>
                                                        <td><strong>Applied On</strong></td>
                                                        <td id="applied_on"></td>
                                                    </tr>

                                                    <tr>
                                                        <td><strong>Location</strong></td>
                                                        <td id="location"></td>
                                                    </tr>

                                                    <tr>
                                                        <td><strong>Rectification Date</strong></td>
                                                        <td id="rectification_data"></td>
                                                    </tr>



                                                    <tr>
                                                        <td><strong>
                                                                Attendance to correct</strong></td>
                                                        <td id="attendance_to_correct_complete"></td>
                                                    </tr>

                                                    <tr style="border-bottom:2px solid #000;">
                                                        <td><strong>Reason</strong></td>
                                                        <td id="reason"></td>
                                                    </tr>

                                                    <!-- Status Display -->
                                                    <tr>
                                                        <td><Strong>Action On</Strong></td>
                                                        <td id="action_on_date"></td>
                                                    </tr>

                                                    <tr>
                                                        <td><strong>Action By</strong></td>
                                                        <td id="action_by_complete"></td>
                                                    </tr>

                                                    <tr>
                                                        <td><strong>Status</strong></td>

                                                        <td id="complete_action_status">

                                                        </td>

                                                    </tr>

                                                    <tr style="border-bottom: 1px solid #000;">
                                                        <td><strong>Comment By Approver</strong></td>
                                                        <td>
                                                            <div id="complete_previos_comment" class="scrollable-div"></div>
                                                        </td>
                                                    </tr>

                                                    <!-- Status Display End -->
                                                    <!-- For role 1 and 5 -->
                                                    <tr id="manager_hod_actiob_icon" style="display:none">
                                                        <td><strong> Approve / Reject</strong></td>

                                                        <td id="approve_reject">

                                                        </td>

                                                    </tr>

                                                    <tr id="manager_approve_reject_comment" style="display:none">
                                                        <td><strong>Comments By Hr <sup
                                                                    style="color: red;">*</sup></strong></td>
                                                        <td id="comment_text">

                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>

                                            <div class="d-flex justify-content-center" id="submit-icon-complete">
                                                <input type="submit" id="complete_sub" class="pen_sub_btn">
                                            </div>
                                        </div>

                                    </div>

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

                    </div>

                    <div class="mb-2">
                        <span class="fw-bold mt-2 ms-2  text-danger" style="font-size: 12px;">Note: if Rejected Kindly
                            Mention
                            your Comments</span>
                    </div>
                </div>

            </section>






            <!-- Remarks Modal -->
            <div class="modal fade" id="remarksModal" tabindex="-1" aria-labelledby="remarksModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <form id="remarksForm">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">Enter Remark</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <textarea class="form-control" id="remarkText" placeholder="Write a comment..."
                                    required></textarea>
                                <input type="hidden" id="remarkId">
                                <input type="hidden" id="remarkStatus">
                            </div>
                             <input type="hidden" id="bulkSelectedIds">
                            <div class="modal-footer">
                                <button type="button" onclick="submit_approved_reject();" class="btn btn-submit">Save</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

    </main>
    @include('layouts.footer')
    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/jquery-ui.js"></script>
    <script src='js/jquery.validate.js'></script>
    <link rel="stylesheet" href="css/jquery.dataTables.min.css">
    <script src="js/jquery.dataTables.min.js"></script>
    <!-- Excel -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>

    <script>
        var sessionHideActionTab = "{{ session('staff_action_view') }}";

        sessionROle = "{{session('role')}}";
        // Hide modals when window is resized to desktop width
        function hideModalsOnResize() {
            if (window.innerWidth > 767) {
                const extraModal = bootstrap.Modal.getInstance(document.getElementById('ExtralargeEdit'));
                const remarksModal = bootstrap.Modal.getInstance(document.getElementById('remarksModal'));

                if (extraModal) extraModal.hide();
                if (remarksModal) remarksModal.hide();

                // Clean up modal-related classes and backdrops
                document.body.classList.remove('modal-open');
                document.querySelectorAll('.modal-backdrop').forEach(el => el.remove());
            }
        }

        window.addEventListener('resize', hideModalsOnResize);
        window.addEventListener('load', hideModalsOnResize);

        $(document).ready(function() {
            checkUserRole = "{{session('role')}}";
            if (checkUserRole == 0) {
                $('#submitAllRemarks').hide();
            }

            if (checkUserRole == 0 || checkUserRole == 3) {
                $('#submitAllRemarks_id').hide();
                $('#submit-icon-complete').hide();
            }

            $('#comment_by_manager_show').hide();
            $('#comment_by_manager_action_icon').hide();



            // Toggle active class for mobile filters
            $('.filter-btn').on('click', function() {
                $('.filter-btn').removeClass('active-filter');
                $(this).addClass('active-filter');
            });

            // Toggle active class for web filters
            $('.filter-tab-btn').on('click', function() {
                $('.filter-tab-btn').removeClass('active-tab');
                $(this).addClass('active-tab');
            });

            // Trigger default mobile tab
            setTimeout(() => {
                $('#filterPending').trigger('click');
            }, 10);


            // Handle web tab filter button clicks
            $("#filterPending_web").on('click', function() {
                $('#pendingTable_web').removeClass('d-none');
                $('#approvedTable_web').addClass('d-none');
                $('#filterPending_web').addClass('active-tab');
                $('#filterApproved_web').removeClass('active-tab');
                fetchPendingData();
                // setTimeout(() => table.columns.adjust().draw(), 0);
            });

            $("#filterApproved_web").on('click', function() {
                $('#approvedTable_web').removeClass('d-none');
                $('#pendingTable_web').addClass('d-none');
                $('#filterApproved_web').addClass('active-tab');
                $('#filterPending_web').removeClass('active-tab');

                // setTimeout(() => table2.columns.adjust().draw(), 0);

                fetchCompleteData();
            });

            // Mobile table toggling
            $('#filterPending').on('click', function() {
                $('#pendingTable').removeClass('d-none');
                $('#approvedTable').addClass('d-none');
                $('#filterPending').addClass('active-filter');
                $('#filterApproved').removeClass('active-filter');

                fetchPendingData();
            });

            $('#filterApproved').on('click', function() {
                $('#approvedTable').removeClass('d-none');
                $('#pendingTable').addClass('d-none');
                $('#filterApproved').addClass('active-filter');
                $('#filterPending').removeClass('active-filter');

                fetchCompleteData();
            });



            // Initially hide both tables, will show via tab click
            $('#pendingTable').addClass('d-none');
            $('#approvedTable').addClass('d-none');

            function activatePendingTab() {
                $('#filterPending, #filterPending_web, #filterPending_mobile').addClass('active');
                $('#filterApproved, #filterApproved_web, #filterApproved_mobile').removeClass('active');

                $('#pendingTable_web, #pendingTable').removeClass('d-none');
                $('#approvedTable_web, #approvedTable').addClass('d-none');

                setTimeout(() => {
                    if (table1) {
                        table1.columns.adjust().draw();
                    }
                }, 0);

                fetchPendingData();
            }


            // Datepicker setup for start and to date
            (function() {
                const today = new Date();
                const lastMonth = new Date(today.getFullYear(), today.getMonth() - 1, 1);

                function getMonthIndex(monthAbbr) {
                    return {
                        Jan: 0,
                        Feb: 1,
                        Mar: 2,
                        Apr: 3,
                        May: 4,
                        Jun: 5,
                        Jul: 6,
                        Aug: 7,
                        Sep: 8,
                        Oct: 9,
                        Nov: 10,
                        Dec: 11
                    } [monthAbbr];
                }

                $("#startDate").datepicker({
                    dateFormat: 'dd-M-yy',
                    changeMonth: true,
                    changeYear: true,
                    minDate: lastMonth,
                    maxDate: today,
                    onClose: function(dateText) {
                        $(this).valid();
                        const parts = dateText.split('-');
                        const selectedStartDate = new Date(parts[2], getMonthIndex(parts[1]), parts[0]);
                        $("#todate").datepicker("option", "minDate", selectedStartDate);
                        $("#todate").datepicker("option", "maxDate", today);
                    }
                });

                $("#todate").datepicker({
                    dateFormat: 'dd-M-yy',
                    changeMonth: true,
                    changeYear: true,
                    minDate: lastMonth,
                    maxDate: today,
                    onClose: function(dateText) {
                        $(this).valid();
                    }
                });
            })();
        });



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

                    fetchPendingWeb(response);
                    fetchPendingDataMobile(response);

                },
                error: function(error) {
                    $('#pageloader').hide();
                    console.log(error);
                },
            })
        }

        // for the complete 

        function fetchCompleteData() {
            var token = '{{ csrf_token() }}';
            $('#pageloader').show();
            $.ajax({
                url: "get_completed_Data_attendance",
                type: "POST",
                data: {
                    _token: token,
                },
                success: function(response) {
                    $('#pageloader').hide();
                    fetchCompleteDataWeb(response);
                    fetchCompleteDataMobile(response);

                },
                error: function(error) {
                    $('#pageloader').hide();
                    console.log(error);
                },

            })
        }

        var role = "{{ session('role') }}";

        var table1, table2;
        var pendingWebData;

        function fetchPendingWeb(response) {
            pendingWebData = response.data;
            let showStatusColumn = response.data.some(item =>
                item.is_approve_by_manager !== 0
            );

            let actionByActionDate = response.data.some(item =>
                item.actionby != null && item.actiondate != null
            );
            let showActionColumns = response.data.some(item => item.actionby != null || item.actiondate != null);

            if ($.fn.DataTable.isDataTable('#itemList')) {
                $('#itemList').DataTable().clear().destroy();
            }

            table1 = $('#itemList').DataTable({
                data: response.data,
                autoWidth: true,
                ordering: true,
                paging: false,
                info: false,
                searching: true,
                lengthChange: false,
                pageLength: 100,
                order: [2, 'desc'],
                dom: '<"top"f>rt',
                columns: [{
                        data: null,
                        title: "Select",
                        visible: sessionHideActionTab == 0,
                        render: function(data, type, row) {
                            if (row.is_approve_by_manager == 0) {
                                return `
                                    <input type="checkbox"
                                        class="rowCheckbox"
                                        value="${row.id}">
                                `;
                            }
                            return '';
                        }
                    },{
                        data: "full_name",
                        title: "Applied By",
                    }, {
                        data: "emp_id",
                        title: "Emp Code",
                    },
                    {
                        data: "timestamp",
                        title: "Applied On",
                        render: function(data) {
                            return formatDateToDDMonYYYY(data);
                        }
                    },
                    {
                        data: "location_name",
                        title: "Location",
                    },
                    {
                        data: "date_to_adjust",
                        title: "Rectification Date",
                        render: function(data) {
                            return formatDateToDDMonYYYY(data);
                        }
                    },{
                        data: "from_time",
                        title: "From Time-To Time",
                        render: function(data, type, row) {
                            let fromTime = formatTimeTo12Hour(row.from_time);
                            let toTime = formatTimeTo12Hour(row.to_time);
                            return '<br><small>' + fromTime + ' - ' + toTime + '</small>';
                        }
                    },
                    {
                        data: "attendance_correction",
                        title: "Rectification To Correct",
                        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";
                            } else if (data == "AT6") {
                                return "SL/PL Consider to Work";
                            }
                        }
                    },
                    {
                        data: "remarks",
                        title: "Reason",
                        render: function(data, row, type) {
                            if (data == undefined || data == '' || data == null) {
                                return `
                            <textarea class="form-control" 
                                style="width:200px; height:80px; overflow-y:auto; resize:none; font-size:12px; position:relative; left:15px;
                                  background-color: transparent !important; outline:none !important; " 
                            readonly>No Reasons</textarea>
                        `;
                            } else {
                                return `
                            <textarea class="form-control" 
                                style="width:200px; height:80px; overflow-y:auto; resize:none; font-size:12px; position:relative; left:15px;
                                  background-color: transparent !important; outline:none !important; " 
                            readonly>${data}</textarea>
                        `;
                            }
                        },
                    },
                    {
                        data: "actionby",
                        title: "Action By",
                        visible: actionByActionDate,
                        render: function(data) {
                            return data ? data : "";
                        }
                    },
                    {
                        data: "actiondate",
                        title: "Action On",
                        visible: actionByActionDate,
                        render: function(data) {
                            return data ? formatDateToDDMonYYYY(data) : "";
                        }
                    },
                    {
                        data: null,
                        title: "status",
                        render: function(data, type, row) {
                            var managerStatus = data.is_approve_by_manager;
                            if (managerStatus == 1) {
                                return `<div class="approved_tab">Approved</div>`;
                            } else if (managerStatus == 2) {
                                return `<div class="dissapprove_tab">Rejected</div>`;
                            } else {
                                return `<div class="pending_tab">Pending</div>`;
                            }
                        }
                    },
                    {
                        data: null,
                        title: "Comment By Approver",
                        visible: showStatusColumn,
                        render: function(data, type, row) {
                            var managerStatus = data.is_approve_by_manager;
                            let comment = "";
                            if (managerStatus == 1 || managerStatus == 2) {
                                comment = data.comment_by_manager;
                            }

                            return `
                            <div style="
                                height: 80px;
                                width: 210px;
                                overflow-y: auto;
                                white-space: wrap;
                                word-break: break-word;
                                border-radius: 4px;
                            
                            " class="scrollable-comment">
                                ${comment ? comment : ""}
                            </div>
                        `;


                        }
                    },

                   {
                        data: null,
                        title: "Approve / Reject",
                        visible: sessionHideActionTab == 0,
                        render: function(data, type, row) {
                            var managerStatus = data.is_approve_by_manager;

                            if (managerStatus == 0) {
                                // 🔹 Pending → show enabled Approve / Reject
                                return `
                                <div>
                                    <i class="bi bi-check-circle-fill text-success fs-4 me-3 open-remark-modal approve-icon" 
                                    data-id="${row.id}" data-status="1" title="Approve"></i>

                                    <i class="bi bi-x-circle-fill text-danger fs-4 open-remark-modal reject-icon" 
                                    data-id="${row.id}" data-status="2" title="Reject"></i>
                                </div>
                                `;
                            }
                            else if (managerStatus == 1) {
                                // 🔹 Approved → show Approved but disabled
                                return `
                                <div>
                                    <i class="bi bi-check-circle-fill text-success fs-4 me-3 disabled" 
                                    title="Approved" style="opacity:0.5; pointer-events:none;"></i>
                                    <span class="text-success fw-bold">Approved</span>
                                </div>
                                `;
                            }
                            else if (managerStatus == 2) {
                                // 🔹 Rejected → show Rejected but disabled
                                return `
                                <div>
                                    <i class="bi bi-x-circle-fill text-danger fs-4 disabled" 
                                    title="Rejected" style="opacity:0.5; pointer-events:none;"></i>
                                    <span class="text-danger fw-bold">Rejected</span>
                                </div>
                                `;
                            }
                        }
                    },


                ],

                initComplete: function() {
                    $('#itemList').DataTable().columns.adjust().draw();
                     $(".sidebar").click(function() {
                        setTimeout(() => table1.columns.adjust().draw(), 300);
                    });
                    // Add Excel icon next to the search box
                    let $searchBox = $('#itemList_filter');
                    $searchBox.css('display', 'flex');
                    $searchBox.css('align-items', 'center');
                    $searchBox.append(`
                            <span style="margin-left: 10px;">
                             <i id="ex_img3" class="fas fa-file-excel" title="Employee_details" onclick="downloadExcel();"></i>
                                          
                                
                            </span>
                        `);

                    setTimeout(() => translateDataTable('itemList'), 300);
                },

                drawCallback: function() {
                    setTimeout(() => translateDataTable('itemList'), 300);
                },

            });
            setTimeout(async () => {

                $('#itemList thead th:first').attr('data-no-translate', 'true');
                $('#selectAllRows').attr('data-no-translate', 'true');

                const modal = document.getElementById('itemList');

                const elements = modal.querySelectorAll(
                    'td, th, label, button, input[placeholder], div, input[search]'
                );

                for (const el of elements) {

                    if ($(el).attr('data-no-translate') === 'true') {
                        continue;
                    }

                    await translateElement(el);
                }

            }, 100);

        }

        //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}`;
        }

        var selectedId = null;
        var selectedStatus = null;

        $(document).on('click', '.open-remark-modal', function() {
            const id = $(this).data('id');
            const status = $(this).data('status');
            $('#remarkId').val(id);
            $('#remarkStatus').val(status);
            $('#remarkText').val('');
            $('#remarksModal').modal('show');
        });


         let remarksArray = [];

        function submit_approved_reject() {
            var remark = $('#remarkText').val().trim();
            var bulkIds = $('#bulkSelectedIds').val();
            var status = $('#remarkStatus').val();
            if (!remark) {
                alert('Please enter a remark before saving.');
                return;
            }
            remarksArray = [];
            if (bulkIds) {
                bulkIds.split(',').forEach(function(id) {
                    remarksArray.push({
                        id: id,
                        status: status,
                        remark: remark
                    });
                });
            } else {
                var id = $('#remarkId').val();
                remarksArray.push({
                    id: id,
                    status: status,
                    remark: remark
                });
            }
            $('#remarksModal').modal('hide');
             $('#pageloader').show();
            $.ajax({
                url: 'update_attendance_status_approve_tab_web',
                type: 'POST',
                 headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    dataValue: remarksArray,
                },
                success: function(res) {
                     $('#pageloader').hide();
                    if(res){
                        alert("Attendance Rectification Updated Successfully");
                    } else {
                         alert("Sorry! There is an error while Update the Data");
                    }
                    remarksArray = []; // clear your array if needed
                    fetchPendingData();
                    fetchCompleteData();
                },
                error: function() {
                    alert('Error updating status.');
                }
            });

        }

          function bulkAction(status) {
            let selectedIds = [];

            $('.rowCheckbox:checked').each(function() {
                selectedIds.push($(this).val());
            });

            if (selectedIds.length == 0) {
                toastr.error("Please select at least one request.");
                return;
            }

            $('#remarkStatus').val(status);
            $('#bulkSelectedIds').val(selectedIds.join(','));

            $('#remarkText').val('');
            $('#remarksModal').modal('show');
        }
        $('#bulkApprove').click(function() {
            bulkAction(1);
        });

        $('#bulkReject').click(function() {
            bulkAction(2);
        });

        $('#submitAllRemarks, #submitAllRemarks_id').on('click', function() {
            if (remarksArray.length === 0) {
                toastr.error("Please select at least one remark.");
                return;
            }

            Swal.fire({
                title: 'Are you sure?',
                text: "Do you want to take action on all selected remarks?",
                icon: 'question',
                iconColor: '#963131cc',
                showCancelButton: true,
                confirmButtonColor: '#963131cc',
                cancelButtonColor: '#44444475',
                confirmButtonText: 'Update',
                cancelButtonText: 'Cancel',
                customClass: {
                    popup: 'swal-responsive-popup',
                    container: 'swal-centered-container'
                },
                backdrop: true,
                allowOutsideClick: false
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: 'update_attendance_status_approve_tab_web',
                        type: 'POST',
                        data: {
                            dataValue: remarksArray,
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(res) {
                            remarksArray = []; // clear your array if needed
                            fetchPendingData();
                            fetchCompleteData();

                            // SweetAlert2 handling
                            if (res.status === 'success') {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Success',
                                    text: res.message,
                                    confirmButtonText: 'OK'
                                });
                            } else if (res.status === 'partial') {
                                Swal.fire({
                                    icon: 'warning',
                                    title: 'Partial Success',
                                    html: `
                                            <p>${res.message}</p>
                                            <ul style="text-align:left;">
                                                ${res.errors.map(err => `<li>${err}</li>`).join('')}
                                            </ul>
                                        `,
                                    confirmButtonText: 'OK'
                                });
                            } else if (res.status === 'error') {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Error',
                                    html: `
                                        <p>${res.message}</p>
                                        <ul style="text-align:left;">
                                            ${res.errors.map(err => `<li>${err}</li>`).join('')}
                                        </ul>
                                    `,
                                    confirmButtonText: 'OK'
                                });
                            }
                        },
                        error: function() {
                            alert('Error updating status.');
                        }
                    });
                }
            });
        });


        var completeData;

        function fetchCompleteDataWeb(response) {


            completeData = response;

            if ($.fn.DataTable.isDataTable('#itemList_new')) {
                $('#itemList_new').DataTable().clear().destroy();
            }

            table2 = $('#itemList_new').DataTable({
                data: response,
                autoWidth: true,
                paging: false,
                ordering: true,
                info: false,
                searching: true,
                lengthChange: false,
                pageLength: 100,
                order: [10, 'desc'],
                dom: '<"top"f>rt',
                columns: [{
                        data: "full_name",
                        title: "Applied By"
                    },
                    {
                        data: "emp_id",
                        title: "Emp Code"
                    },
                    {
                        data: "location_name",
                        title: "Location",
                    },
                    {
                        data: "timestamp",
                        title: "Applied On",
                        render: function(data) {
                            return formatDateToDDMonYYYY(data);
                        }
                    },
                    {
                        data: "date_to_adjust",
                        title: "Rectification Date",
                        render: function(data) {
                            return formatDateToDDMonYYYY(data);
                        }
                    },
                    {
                        data: "from_time",
                        title: "From Time-To Time",
                        render: function(data, type, row) {
                            let fromTime = formatTimeTo12Hour(row.from_time);
                            let toTime = formatTimeTo12Hour(row.to_time);
                            return '<br><small>' + fromTime + ' - ' + toTime + '</small>';
                        }
                    },
                    {
                        data: "attendance_correction",
                        title: "Rectification To Correct",
                        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";
                            } else if (data == "AT6") {
                                return "SL/PL Consider to Work";
                            }
                        }
                    },
                    {
                        data: "remarks",
                        title: "Reason",
                        render: function(data, row, type) {
                                 return `
                            <div style="
                                height: 80px;
                                width: 210px;
                                overflow-y: auto;
                                white-space: wrap;
                                word-break: break-word;
                                border-radius: 4px;
                            
                            " class="scrollable-comment">
                                ${data ? data : "No Reason"}
                            </div>
                        `;
                        },
                    },
                    {
                        data: null,
                        title: "status",
                        render: function(data, type, row) {
                            var managerStatus = data.is_approve_by_manager;
                            if (managerStatus == 1) {
                                return `<div class="approved_tab">Approved</div>`;
                            } else if (managerStatus == 2) {
                                return `<div class="dissapprove_tab">Rejected</div>`;
                            } else {
                                return `<div class="pending_tab">Pending</div>`;
                            }
                        }
                    },


                    {
                        data: null,
                        title: "Comment By Approver",
                        render: function(data, type, row) {
                            var managerStatus = data.is_approve_by_manager;
                            let comment = "";
                            if (managerStatus == 1 || managerStatus == 2) {
                                comment = data.comment_by_manager;
                            }

                            return `
                            <div style="
                                height: 80px;
                                width: 210px;
                                overflow-y: auto;
                                white-space: wrap;
                                word-break: break-word;
                                border-radius: 4px;
                            
                            " class="scrollable-comment">
                                ${comment ? comment : ""}
                            </div>
                        `;


                        }
                    },
                    {
                        data: "actionby",
                        title: "Action By"
                    },
                    {
                        data: "actiondate",
                        title: "Action Date",
                        render: function(data, xhr, row) {
                            return formatDateToDDMonYYYY(data);
                        }
                    },


                ],
                initComplete: function() {
                    // Correct selector for search box
                     $(".sidebar").click(function() {
                        setTimeout(() => table2.columns.adjust().draw(), 300);
                    });
                    let $searchBox = $('#itemList_new_filter');

                    // Style the container
                    $searchBox.css('display', 'flex');
                    $searchBox.css('align-items', 'center');

                    // Append the Excel icon
                    $searchBox.append(`
                    <span style="margin-left: 10px;">
                    <i id="ex_img4" class="fas fa-file-excel" title="Employee_details" onclick="downloadExcelComplete();"></i>
                   
                    </span>
                `);

                    setTimeout(() => translateDataTable('itemList_new'), 300);
                },

                drawCallback: function() {
                    setTimeout(() => translateDataTable('itemList_new'), 300);
                },
            });
             $('#itemList').on('draw.dt', function() {

                if ($('#selectAllRows').length == 0) {

                    $('#itemList thead th:first').html(
                        '<input type="checkbox" id="selectAllRows">'
                    );

                }

            });

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

        }

         $(document).on('change', '#selectAllRows', function() {
            $('.rowCheckbox').prop('checked', this.checked);
        });

        $(document).on('change', '.rowCheckbox', function() {

            let total = $('.rowCheckbox').length;
            let checked = $('.rowCheckbox:checked').length;

            $('#selectAllRows').prop(
                'checked',
                total > 0 && total === checked
            );

        });

              function translateDataTable() {
            // logic
        }
          function translateElement(el) {
            if ($(el).attr('data-no-translate') === 'true') {
                return;
            }
            return el;

        }

        function fetchPendingDataMobile(response) {
            if ($.fn.DataTable.isDataTable('#itemListPending')) {
                $('#itemListPending').DataTable().clear().destroy();
            }



            let showStatusColumn = response.data.some(item =>
                item.is_approve_by_manager !== 0
            );


            $('#itemListPending').DataTable({
                data: response.data,
                autoWidth: true,
                paging: false,
                info: false,
                searching: false,
                lengthChange: false,
                pageLength: 100,
                scrollX: false,
                order: [0, 'desc'],
                columns: [{
                        data: "full_name",
                        title: "Applied By",

                    },
                    {
                        data: "timestamp",
                        title: "Applied On",
                        render: function(data, type, row) {
                            return formatDateToDDMonYYYY(data);
                        }
                    },
                    {
                        data: "location_name",
                        title: "Location"
                    },
                    {
                        data: "id",
                        title: "More",
                        render: function(data) {
                            return `
                            <button class="btn btn-sm btn-primary px-2 py-1 more-btn" data-bs-toggle="modal"
                                data-bs-target="#ExtralargeEdit" style="font-size: 12px;" data-id="${data}">
                                <i class="fa-solid fa-ellipsis-vertical" style="font-size: 10px;"></i>
                            </button>`
                        }
                    }
                ],
                initComplete: function() {
                    setTimeout(() => translateDataTable('itemListPending'), 300);
                },
                drawCallback: function() {
                    setTimeout(() => translateDataTable('itemListPending'), 300);

                },
            });

        }


        function resetData() {
            $('#pen_sub').text('');
            $('#model_full_name').text('');
            $('#designation_pending').text('');
            $('#model_applied_date').text('');
            $('#attendance_to_correct').text('');
            $('#rectification_Date').text('');
            $('#remark').text('');
            $('#model_applied_reject').html('');
            $('#model_comment').html('');
            $('#action_by_pending').text('');
            $('#action_on_pending').text('');
            $('#privous_icon').html('');
            $('#privous_comment').html('');
            $('#model_comment_by_manager').html('');
            $('#model_comment_by_manager_icon').html('');
            $('#comment_by_manager_show').hide();
            $('#comment_by_manager_action_icon').hide();
            $('#action_date').hide();
            $('#action_by_name').hide();
            $('.action_icon_pending_based_on_role_based').show();
            $('#sub_btn_model').show();

        }



        function fetchCompleteDataMobile(response) {
            if ($.fn.DataTable.isDataTable('#itemListApproved')) {
                $('#itemListApproved').DataTable().clear().destroy();
            }

            $('#itemListApproved').DataTable({
                data: response,
                autoWidth: false,
                paging: false,
                info: false,
                searching: false,
                lengthChange: false,
                pageLength: 100,
                scrollX: false,
                order: [0, 'desc'],
                columns: [{
                        data: "full_name",
                        title: "Applied By",

                    },
                    {
                        data: "timestamp",
                        title: "Applied On",
                        render: function(data) {
                            return formatDateToDDMonYYYY(data);
                        }
                    },
                    {
                        data: null,
                        title: "status",
                        render: function(data, type, row) {
                            var managerStatus = data.is_approve_by_manager;
                            if (managerStatus == 1) {
                                return `<div class="approved_tab">Approved</div>`;
                            } else if (managerStatus == 2) {
                                return `<div class="dissapprove_tab">Rejected</div>`;
                            } else {
                                return `<div class="pending_tab">Pending</div>`;
                            }
                        }
                    },
                    {
                        data: "id",
                        title: "More",
                        render: function(data) {
                            return `
                            <button class="btn btn-sm btn-primary px-2 py-1 complete-tab" data-bs-toggle="modal"
                                data-bs-target="#approveEdit" style="font-size: 12px;"  data-id=${data} >
                                <i class="fa-solid fa-ellipsis-vertical" style="font-size: 10px;"></i>
                            </button>`
                        }
                    }
                ],
                initComplete: function() {
                    setTimeout(() => translateDataTable('itemListApproved'), 300);
                },
                drawCallback: function() {
                    setTimeout(() => translateDataTable('itemListApproved'), 300);

                },
            })
        }


        function resetCompleteData() {
            $('#status_id_cm').val(0);
            $('#complete_sub').text('');
            $('#full_name').text('');
            $('#applied_on').text('');
            $('#location').text('');
            $('#rectification_data').text('');
            $('#attendance_to_correct_complete').text('')
            $('#reason').text('');
            $('#action_on_date').text('');
            $('#action_by_complete').text('');

            $('#complete_action_status').html(null);
            $('#complete_previos_comment').text('');
            $('#approve_reject').html(null);
            $('#comment_text').html(null)
            $('#manager_hod_actiob_icon').hide();
            $('#manager_approve_reject_comment').hide();
        }


        function downloadExcel() {
            if (!pendingWebData || pendingWebData.length === 0) {
                toastr.error("You can't download. No data available!");
                return;
            }
            var status = '';
            var managerStatus = '';

            let excelData = pendingWebData.map(item => {
                managerStatus = item.is_approve_by_manager
                if (managerStatus == 1) {
                    status = 'Approved';
                } else if (managerStatus == 2) {
                    status = 'Rejected';
                }

                let comment = "";
                if (managerStatus == 1 || managerStatus == 2) {
                    comment = item.comment_by_manager;
                }

                let att_cor = item.attendance_correction;
                let at_final = "";

                    if (att_cor === "AT1") {
                                at_final = "Login not marked";
                            } else if (att_cor === "AT2") {
                                at_final = "WeekOff not marked";
                            } else if (att_cor === "AT3") {
                                at_final = "WeekOff exchanged to work";
                            } else if (att_cor === "AT4") {
                                at_final = "Work exchanged to WeekOff";
                            } else if (att_cor == "AT5") {
                                return "Marked Absent/Work exchanged to Absent";
                            } else if (att_cor == "AT6") {
                                return "SL/PL Consider to Work";
                            }

                return {
                    "Applied By": item.full_name,
                    "Applied On": formatDateToDDMonYYYY(item.timestamp),
                    "Location": item.location_name,
                    "Rectification Date": formatDateToDDMonYYYY(item.date_to_adjust),
                    "Attendance To Correct": at_final,
                    "Reason": item.remarks,
                    "Action By": item.actionby || "",
                    "Action On": item.actiondate ? formatDateToDDMonYYYY(item.actiondate) : "",
                    "Status": status || '',
                    "Comment": comment || '',
                };
            });

            const columnsToKeep = Object.keys(excelData[0]).filter(col =>
                excelData.some(row => row[col] && row[col].toString().trim() !== "")
            );


            const filteredData = excelData.map(row => {
                let filteredRow = {};
                columnsToKeep.forEach(col => filteredRow[col] = row[col]);
                return filteredRow;
            });


            let ws = XLSX.utils.json_to_sheet(filteredData);

            let colWidths = Object.keys(filteredData[0]).map(key => ({
                wch: key.length + 10
            }));
            ws['!cols'] = colWidths;

            let wb = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(wb, ws, "Pending");

            XLSX.writeFile(wb, "Attendance_Rectification_Application_Requests.xlsx");
        }


        function downloadExcelComplete() {
            if (!completeData || completeData.length === 0) {
                toastr.error("You can't download. No data available!");
                return;
            }
            var status = '';
            var managerStatus = '';
            var hodStatus = '';
            var hrStatus = '';
            var managementStatus = '';


            let excelData = completeData.map(item => {
                managerStatus = item.is_approve_by_manager
                if (managerStatus == 1) {
                    status = 'Approved';
                } else if (managerStatus == 2) {
                    status = 'Rejected';
                }


                let comment = "";
                if (managerStatus == 1 || managerStatus == 2) {
                    comment = item.comment_by_manager;
                }

                 let att_cor = item.attendance_correction;
                let at_final = "";

                    if (att_cor === "AT1") {
                                at_final = "Login not marked";
                            } else if (att_cor === "AT2") {
                                at_final = "WeekOff not marked";
                            } else if (att_cor === "AT3") {
                                at_final = "WeekOff exchanged to work";
                            } else if (att_cor === "AT4") {
                                at_final = "Work exchanged to WeekOff";
                            } else if (att_cor == "AT5") {
                                return "Marked Absent/Work exchanged to Absent";
                            } else if (att_cor == "AT6") {
                                return "SL/PL Consider to Work";
                            }



                return {
                    "Applied By": item.full_name,
                    "Applied On": formatDateToDDMonYYYY(item.timestamp),
                    "Location": item.location_name,
                    "Rectification Date": formatDateToDDMonYYYY(item.date_to_adjust),
                    "Attendance To Correct": at_final,
                    "Reason": item.remarks,
                    "Action By": item.actionby || "",
                    "Action On": item.actiondate ? formatDateToDDMonYYYY(item.actiondate) : "",
                    "Status": status || '',
                    "Comment": comment || '',
                };
            });

            const columnsToKeep = Object.keys(excelData[0]).filter(col =>
                excelData.some(row => row[col] && row[col].toString().trim() !== "")
            );


            const filteredData = excelData.map(row => {
                let filteredRow = {};
                columnsToKeep.forEach(col => filteredRow[col] = row[col]);
                return filteredRow;
            });


            let ws = XLSX.utils.json_to_sheet(filteredData);

            let colWidths = Object.keys(filteredData[0]).map(key => ({
                wch: key.length + 10
            }));
            ws['!cols'] = colWidths;

            let wb = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(wb, ws, "Pending");

            XLSX.writeFile(wb, "Attendance_Rectification_Complete_Details.xlsx");
        }


        function approvedIcon(id) {

            $(`.approve-icon[data-id="${id}"]`).css({
                'border': '2px solid #000'

            });
            $(`.reject-icon[data-id="${id}"]`).css('border', 'none');

        }

        function disapprovedIcon(id) {
            $(`.approve-icon[data-id="${id}"]`).css('border', 'none');
            $(`.reject-icon[data-id="${id}"]`).css({
                'border': '2px solid #000'
            });
        }

        let stautssel = null;

        $(document).on('click', '#approve_btn_1', function() {
            const status = $('#approve_btn_1').attr('value');
            $('#approve_btn_1').addClass('icon-selected');
            $('#reject_btn_1').removeClass('icon-reject');
            console.log()
            $('#status_id').val(status);

        });


        $(document).on('click', '#reject_btn_1', function() {
            const status = $('#reject_btn_1').attr('value');
            $('#reject_btn_1').addClass('icon-reject');
            $('#approve_btn_1').removeClass('icon-selected');
            $('#status_id').val(status);

        });



        $(document).on('click', '#approve_btn_1_cp', function() {
            const status = $('#approve_btn_1_cp').attr('value');
            $('#approve_btn_1_cp').addClass('icon-selected');
            $('#reject_btn_1_cp').removeClass('icon-reject');
            $('#status_id_cm').val(status);

        });


        $(document).on('click', '#reject_btn_1_cp', function() {
            const status = $('#reject_btn_1_cp').attr('value');
            $('#reject_btn_1_cp').addClass('icon-reject');
            $('#approve_btn_1_cp').removeClass('icon-selected');
            $('#status_id_cm').val(status);

        });

        function formatTimeTo12Hour(timeStr) {
            if (!timeStr) return '';

            let timeParts = timeStr.split(':');
            let hours = parseInt(timeParts[0], 10);
            let minutes = timeParts[1];
            let ampm = hours >= 12 ? 'PM' : 'AM';

            hours = hours % 12;
            hours = hours ? hours : 12; // 0 becomes 12

            return (hours < 10 ? '0' + hours : hours) + ':' + minutes + ' ' + ampm;
        }

    </script>

</body>

</html>