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

<!-- <link rel="stylesheet" type="text/css" href="{{asset('jquery.dataTables.min')}}" /> -->
<style>
    /* .section {
        padding: 0px;
        margin: 5px -10px 0px 0px;
    } */

    .sd-CustomSelect {
        display: none;
        visibility: hidden;
    }

    .ms-parent {
        z-index: 1000 !important;
    }

  
    #add_button_label,
    #add_emp_label,
    #multiselect_options {
        margin-top: -11px;
        font-size: 14px;
        z-index: 10000;
    }

    .ms-choice>span.placeholder {
        display: none;
    }


    .sd-CustomSelect+.ms-parent {
        width: 100% !important;
    }


    .sd-CustomSelect+.ms-parent .ms-choice {
        height: calc(3.5rem + 2px);
        padding: 1rem 0.75rem 0 0.75rem;
        border-radius: 0.375rem;
        border: 1px solid #ced4da;
        background-color: #fff;
        display: flex;
        align-items: center;
        font-size: 1rem;
        position: relative;
    }

    .ms-drop input[type="checkbox"],
    .ms-drop input[type="radio"] {
        accent-color: brown;
    }


    .sd-CustomSelect+.ms-parent .ms-choice>span {
        position: relative;
        top: 2px;
        color: #6c757d;
    }


    .sd-CustomSelect+.ms-parent .ms-choice::before,
    .sd-CustomSelect+.ms-parent .ms-choice::after {
        display: none !important;
        content: none !important;
    }


    .sd-CustomSelect+.ms-parent .ms-choice>div {
        background-image: none !important;
    }


    .sd-CustomSelect+.ms-parent .ms-drop {
        z-index: 1050;
        border-radius: 0.375rem;
        border: 1px solid #ced4da;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    }


    .modal-title {
        color: #BA434D;
        font-weight: 900
    }

    #view_master_data_designation_previous,
    #view_master_data_designation_next,
    #view_master_data_department_previous,
    #view_master_data_department_next,
    #agent_table_data_previous,
    #agent_table_data_next,
    #table_separation_mode_previous,
    #table_separation_mode_next,
    #working_days_table_previous,
    #working_days_table_next,
    #beyond_time_table_previous,
    #beyond_time_table_next,
    #shift_type_table_previous,
    #shift_type_table_next,
    #table_outlet_working_information_previous,
    #table_outlet_working_information_next,
    #view_master_data_location_previous,
    #view_master_data_location_next {
        color: #F2E2D2 !important
    }

    .ui-datepicker {
        width: 265px;
        height: 265px;
        color: #963131;
        margin: 5px auto 0;
        font: 12pt Arial, sans-serif;
    }

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

    .ui-datepicker-calendar .ui-state-default {
        background: linear-gradient(#963131, #963131);
        color: #ffffff;
        height: 35px;
        width: 35px;
        border: 1px;
        border-radius: 2px;
    }



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

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

    span.select2-selection.select2-selection--multiple {
        height: 58px !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: 13px;
    }

    .info1 {
        color: brown;
        font-size: 16px;
        font-weight: bold;
    }

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

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

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

    .chosen-container {
        width: 100% !important;
    }

    .chosen-container .chosen-drop {
        width: 100% !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;
        }
    }


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


    .nav-link {
        color: #111;
    }

    .nav-link:hover {
        color: brown;
    }

    .nav-tabs .nav-item.show .nav-link,
    .nav-tabs .nav-link.active {
        border-color: brown;
        color: brown;

    }

    #view_master_data_designation_wrapper {
        margin: 10px;
    }

    /* load page */

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

    #pageloader img {
        left: 60%;
        margin-left: -90px;
        margin-top: -32px;
        position: absolute;
        top: 40%;
        height: 150px;
        border: black;
        border-style: double;
        background-color: antiquewhite;
        border-radius: 20px;
    }

    @media screen and (max-width: 600px) {
        #pageloader img {
            left: 50%;
            margin-left: -90px;
            margin-top: -32px;
            position: absolute;
            top: 50%;
            height: 150px;
            border: black;
            border-style: double;
            background-color: antiquewhite;
            border-radius: 20px;
        }

    }

    /* .ms-choice{
        border:none !important;
    } */

    .icon-caret {
        display: none !important;
    }

    .ms-drop input[type="checkbox"],
    .ms-drop input[type="radio"] {
        accent-color: brown;
    }


    @media only screen and (min-width: 200px) and (max-width: 768px) {}

    #working_days_table_view input {
        text-align: center;
    }

    #working_days_table_edit input {
        text-align: center;
    }

    .mdtp__wrapper[data-theme="blue"] .mdtp__clock .mdtp__am.active,
    .mdtp__wrapper[data-theme="blue"] .mdtp__clock .mdtp__clock_dot,
    .mdtp__wrapper[data-theme="blue"] .mdtp__clock .mdtp__pm.active,
    .mdtp__wrapper[data-theme="blue"] .mdtp__time_holder {
        background-color: #963131 !important;
    }

    .mdtp__button,
    .mdtp__wrapper[data-theme="blue"] .mdtp__button {
        color: maroon !important;
    }

    /* @media screen and (max-width:768px) {

        .section {
            padding: 0px;
            margin: 5px -5px 0px 0px;

        }

    } */
</style>

<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">Add Master Data</h5>
                        </div>

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

            <section class="section dashboard form-container">
                <div class="card p-0">
                    <div class="card-body p-1">
                        <!-- Bordered Tabs -->
                        <ul class="nav nav-tabs" id="borderedTab" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="home-tab" data-bs-toggle="tab"
                                    data-bs-target="#bordered-home" type="button" role="tab" aria-controls="home" onclick="Load_designation_data()"
                                    aria-selected="true">Designation</button>
                            </li>

                            {{-- <li class="nav-item" role="presentation">
                            <button class="nav-link" id="contact-tab1" data-bs-toggle="tab"
                                data-bs-target="#bordered-contact" type="button" role="tab" aria-controls="contact"
                                aria-selected="false">Division</button>
                        </li> --}}



                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="document-department-tab" data-bs-toggle="tab"
                                    data-bs-target="#department-tab" type="button" role="tab" aria-controls="contact" onclick="Load_data_department()"
                                    aria-selected="false">Department</button>
                            </li>


                            {{-- <li class="nav-item" role="presentation">
                            <button class="nav-link" id="document-reference-location-tab" data-bs-toggle="tab"
                                data-bs-target="#reference-location-tab" type="button" role="tab"
                                aria-controls="reference_location" aria-selected="false">Reference Location</button>
                        </li> --}}

                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="document-agent-tab" data-bs-toggle="tab"
                                    data-bs-target="#agent-tab" type="button" role="tab" aria-controls="agent" onclick="Load_agent_name()"
                                    aria-selected="false">Agent</button>
                            </li>

                            {{-- <li class="nav-item" role="presentation">
                            <button class="nav-link" id="document-hired-by-tab" data-bs-toggle="tab"
                                data-bs-target="#hired_by-tab" type="button" role="tab" aria-controls="agent"
                                aria-selected="false">Hired By</button>
                        </li> --}}

                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="document-mode_of_separation" data-bs-toggle="tab"
                                    data-bs-target="#mode-separate" type="button" role="tab" aria-controls="agent" onclick="Load_mode_of_separation()"
                                    aria-selected="false">Separation Mode</button>
                            </li>



                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="document-mode_out_info" data-bs-toggle="tab"
                                    data-bs-target="#mode-outlet_info" type="button" role="tab" aria-controls="agent" onclick="Load_outlet_info()"
                                    aria-selected="false">Working Hours</button>
                            </li>

                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="document-location-tab" data-bs-toggle="tab"
                                    data-bs-target="#location-tab" type="button" role="tab" aria-controls="contact" onclick="load_buttons_names()"
                                    aria-selected="false">Login Type</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="document-reference-location-tab" data-bs-toggle="tab"
                                    data-bs-target="#reference-location-tab" type="button" role="tab" onclick="load_working_days()"
                                    aria-controls="reference_location" aria-selected="false">Working Days</button>
                            </li>

                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="document-reference-location-tab_exceed_time" data-bs-toggle="tab"
                                    data-bs-target="#beyond-time-tab" type="button" role="tab" onclick="get_beyond_time_data()"
                                    aria-controls="reference_location_exceed_time" aria-selected="false">Outlet Exceed Time</button>
                            </li>


                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="document-reference-location-shift_type" data-bs-toggle="tab"
                                    data-bs-target="#reference_shift_type" type="button" role="tab" onclick="get_shift_type_data()"
                                    aria-controls="reference_shift_type" aria-selected="false">Shift Type</button>
                            </li>

                        </ul>


                        <div class="tab-content pt-2" id="borderedTabContent">
                            <div class="tab-pane fade show active" id="bordered-home" role="tabpanel"
                                aria-labelledby="home-tab">
                                <div class="col-lg-12" id="tcp_table1">
                                    <!-- <div class="col-lg-12"> -->
                                    <div class="card p-0">
                                        <div class="card-body p-1" style="overflow-x:auto;">
                                            <div class="form-floating p-1">
                                                <button type="button"
                                                    class="btn submit-btn btn-reset button-adjust custom-maroon-btn"
                                                    data-bs-toggle="modal" data-bs-target="#verticalycentered1">Add
                                                    Designation
                                                </button>
                                            </div>
                                            <div class="row">
                                            </div>
                                            <div class="modal fade" id="verticalycentered1" tabindex="-1">
                                                <div class="modal-dialog modal-dialog-centered">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h5 class="modal-title">Designation</h5>
                                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                                aria-label="Close"></button>
                                                        </div>

                                                        <div class="modal-body">
                                                            <form class="row g-3" id="designation_data" method="POST">

                                                                <input type="hidden" name="_token"
                                                                    value="{{ csrf_token() }}">
                                                                <div class="col-md-12">
                                                                    <div class="form-floating">
                                                                        <input type="text" class="form-control"
                                                                            id="designation" name="designation"
                                                                            placeholder="Designation" autocomplete="off">
                                                                        <label for="revision">Designation</label>
                                                                        <p id="error6"></p>
                                                                    </div>
                                                                </div>

                                                                <div class="text-center">
                                                                    <button type="submit" class="btn submit-btn"
                                                                        id="submit">Submit</button>
                                                                </div>
                                                            </form>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="tab-content pt-2" id="borderedTabContent">
                                                <div class="tab-pane fade show active" id="bordered-home" role="tabpanel"
                                                    aria-labelledby="home-tab">
                                                    <div class="col-lg-12" id="tcp_table1">
                                                        <!-- <div class="col-lg-12"> -->
                                                        <div class="card p-0">
                                                            <div class="card-body p-1">
                                                                <table id="view_master_data_designation"
                                                                    class='display dataTable m-2' style="width:100%">
                                                                    <thead>
                                                                        <tr>
                                                                            <th scope="col">#</th>

                                                                            <th scope="col">
                                                                                Designation</th>
                                                                            <th scope="col">Action
                                                                            </th>
                                                                        </tr>
                                                                    </thead>

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

                                        </div>


                                    </div>

                                </div>

                            </div>

                            <div class="tab-pane fade" id="bordered-salary-tab" role="tabpanel"
                                aria-labelledby="salary-tab">
                                <div class="col-lg-12" id="tcp_table1">
                                    <div class="card p-0">

                                        <div class="card-body p-1" style="overflow-x:auto;">
                                            <div class="form-floating">
                                                <button type="button"
                                                    class="btn btn-primary btn-reset button-adjust custom-maroon-btn"
                                                    data-bs-toggle="modal" data-bs-target="#verticalycentered4">Add Shift
                                                </button>
                                            </div>
                                            <div class="row m-2">
                                            </div>
                                            <div class="modal fade" id="verticalycentered4" tabindex="-1">
                                                <div class="modal-dialog modal-dialog-centered">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h5 class="modal-title">Shift</h5>
                                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                                aria-label="Close"></button>
                                                        </div>

                                                        <div class="modal-body">
                                                            <form class="row g-3" id="shift_data" method="POST">

                                                                <input type="hidden" name="_token"
                                                                    value="{{ csrf_token() }}">
                                                                <div class="col-md-12">
                                                                    <div class="form-floating">
                                                                        <input type="text" class="form-control" id="shift"
                                                                            name="shift" placeholder="Shift"
                                                                            autocomplete="off">
                                                                        <label for="revision">Shift</label>
                                                                        <p id="error3"></p>
                                                                    </div>
                                                                </div>

                                                                <div class="text-center">
                                                                    <button type="submit" class="btn submit-btn"
                                                                        id="submit">Submit</button>

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



                                            {{-- References --}}

                                            <div class="tab-content pt-2" id="borderedTabContent">
                                                <div class="tab-pane fade show active" id="bordered-home" role="tabpanel"
                                                    aria-labelledby="home-tab">
                                                    <div class="col-lg-12" id="tcp_table1">
                                                        <!-- <div class="col-lg-12"> -->
                                                        <div class="card p-0">
                                                            <div class="card-body p-1">
                                                                <table id="view_master_data_shift" class='display dataTable'
                                                                    style="width:100%">
                                                                    <thead>
                                                                        <tr>
                                                                            <th scope="col">#</th>

                                                                            <th scope="col">
                                                                                Shift</th>
                                                                            <th scope="col">Action
                                                                            </th>
                                                                        </tr>
                                                                    </thead>

                                                                </table>

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


                            {{-- Document Upload --}}
                            <div class="tab-pane fade" id="bordered-document-upload-tab" role="tabpanel"
                                aria-labelledby="document-upload-tab">
                                <div class="col-lg-12" id="tcp_table1">
                                    <div class="card p-0">
                                        <div class="card-body p-1" style="overflow-x:auto;">
                                            <div class="form-floating ">
                                                <button type="button"
                                                    class="btn btn-primary btn-reset button-adjust custom-maroon-btn"
                                                    data-bs-toggle="modal" data-bs-target="#verticalycentered5">Add
                                                    References
                                                </button>
                                            </div>
                                            <div class="row m-2">
                                            </div>
                                            <div class="modal fade" id="verticalycentered5" tabindex="-1">
                                                <div class="modal-dialog modal-dialog-centered">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h5 class="modal-title">References</h5>
                                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                                aria-label="Close"></button>
                                                        </div>

                                                        <div class="modal-body">
                                                            <form class="row g-3" id="references_data">

                                                                <input type="hidden" name="_token"
                                                                    value="{{ csrf_token() }}">
                                                                <div class="col-md-12">
                                                                    <div class="form-floating">
                                                                        <input type="text" class="form-control"
                                                                            id="references" name="references"
                                                                            placeholder="references" autocomplete="off">
                                                                        <label for="revision">Reference</label>
                                                                        <p id="error4"></p>
                                                                    </div>
                                                                </div>
                                                                <div class="text-center">
                                                                    <button type="submit" class="btn submit-btn"
                                                                        id="submit">Submit</button>
                                                                </div>
                                                            </form>

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


                                            <div class="tab-content pt-2" id="borderedTabContent">
                                                <div class="tab-pane fade show active" id="bordered-home" role="tabpanel"
                                                    aria-labelledby="home-tab">
                                                    <div class="col-lg-12" id="tcp_table1">
                                                        <!-- <div class="col-lg-12"> -->
                                                        <div class="card p-0">
                                                            <div class="card-body p-1">
                                                                <table id="view_master_data_references"
                                                                    class='display dataTable' style="width:100%">
                                                                    <thead>
                                                                        <tr>
                                                                            <th scope="col">#</th>

                                                                            <th scope="col">
                                                                                References</th>
                                                                            <th scope="col">Action
                                                                            </th>
                                                                        </tr>
                                                                    </thead>

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

                                        </div>

                                    </div>

                                </div>
                            </div>

                            <!-- login type -->
                            <div class="tab-pane fade" id="location-tab" role="tabpanel"
                                aria-labelledby="document-location-tab">
                                <div class="col-lg-12" id="tcp_table1">

                                    <div class="card p-0">

                                        <div class="card-body p-1" style="overflow-x:auto;">
                                            <div class="form-floating">
                                                <button type="button"
                                                    class="btn submit-btn btn-reset button-adjust custom-maroon-btn"
                                                    data-bs-toggle="modal" data-bs-target="#verticalycentered6">Login Type
                                                </button>
                                            </div>
                                            <div class="row m-2">
                                            </div>
                                            <div class="modal fade" id="verticalycentered6" tabindex="-1">
                                                <div class="modal-dialog modal-dialog-centered">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h5 class="modal-title">Login Type</h5>
                                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                                aria-label="Close"></button>
                                                        </div>

                                                        <div class="modal-body">
                                                            <form class="row g-3" id="define_button_type">
                                                                <input type="hidden" name="_token"
                                                                    value="{{ csrf_token() }}">
                                                                <div class="col-md-12">
                                                                    <div class="form-floating">
                                                                        <select class="sd-CustomSelect" id="add_button_options"
                                                                            name="add_button_options" data-placeholder="Option to Add" multiple="true">
                                                                            <option value="present">Present</option>
                                                                            <option value="absent">Absent</option>
                                                                            <option value="login">Login</option>
                                                                            <option value="logout">Logout</option>
                                                                            <option value="breakin">Breakin</option>
                                                                            <option value="breakout">Breakout</option>
                                                                        </select>
                                                                        <label for="floatingName" id="add_button_label">Option to Add</span></label>
                                                                        <p id="add_button_options_error" style="color:red"></p>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-12">
                                                                    <div class="form-floating">
                                                                        <select class="form-select" id="login_btn_type"
                                                                            name="login_btn_type" placeholder="select type">
                                                                            <option selected disabled>select</option>
                                                                            <option value="0">Present/Absent</option>
                                                                            <option value="1">Full</option>
                                                                        </select>
                                                                        <label for="login_btn_type">Select Login Type</span></label>
                                                                        <p id="login_btn_type_error" style="color:red"></p>
                                                                    </div>
                                                                </div>
                                                                <div class="text-center">
                                                                    <button type="submit" class="btn submit-btn"
                                                                        id="submit">Submit</button>
                                                                </div>
                                                            </form>

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


                                            <div class="tab-content pt-2" id="borderedTabContent">
                                                <div class="tab-pane fade show active" id="bordered-home" role="tabpanel"
                                                    aria-labelledby="home-tab">
                                                    <div class="col-lg-12" id="tcp_table1">
                                                        <!-- <div class="col-lg-12"> -->
                                                        <div class="card p-0">
                                                            <div class="card-body p-1">
                                                                <table id="view_master_data_location"
                                                                    class='display dataTable' style="width:100%">
                                                                    <thead>
                                                                        <tr>
                                                                            <th scope="col">#</th>

                                                                            <th scope="col">
                                                                                Buttons</th>
                                                                            <th scope="col">Action
                                                                            </th>
                                                                        </tr>
                                                                    </thead>

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

                                        </div>

                                    </div>

                                </div>
                            </div>

                            <div class="tab-pane fade" id="department-tab" role="tabpanel"
                                aria-labelledby="document-department-tab">
                                <div class="col-lg-12" id="tcp_table1">

                                    <div class="card p-0">

                                        <div class="card-body p-1" style="overflow-x:auto;">
                                            <div class="form-floating">
                                                <button type="button"
                                                    class="btn submit-btn btn-reset button-adjust custom-maroon-btn"
                                                    data-bs-toggle="modal" data-bs-target="#verticalycentered7">Add
                                                    Department
                                                </button>
                                            </div>
                                            <div class="row m-2">
                                            </div>
                                            <div class="modal fade" id="verticalycentered7" tabindex="-1">
                                                <div class="modal-dialog modal-dialog-centered">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h5 class="modal-title">Department</h5>
                                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                                aria-label="Close"></button>
                                                        </div>

                                                        <div class="modal-body">
                                                            <form class="row g-1" id="department_data">

                                                                <input type="hidden" name="_token"
                                                                    value="{{ csrf_token() }}">
                                                                <div class="col-md-12">
                                                                    <div class="form-floating">
                                                                        <input type="text" class="form-control"
                                                                            id="department" name="department"
                                                                            placeholder="Location" autocomplete="off">
                                                                        <label for="revision">Add Department</label>
                                                                        <p id="error_department"></p>
                                                                    </div>
                                                                </div>
                                                                <div class="text-center">
                                                                    <button type="submit" class="btn submit-btn"
                                                                        id="submit">Submit</button>
                                                                </div>
                                                            </form>

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

                                            <div class="tab-content pt-2" id="borderedTabContent">
                                                <div class="tab-pane fade show active" id="bordered-home" role="tabpanel"
                                                    aria-labelledby="home-tab">
                                                    <div class="col-lg-12" id="tcp_table1">
                                                        <!-- <div class="col-lg-12"> -->
                                                        <div class="card p-0">
                                                            <div class="card-body p-1">
                                                                <table id="view_master_data_department"
                                                                    class='display dataTable' style="width:100%">
                                                                    <thead>
                                                                        <tr>
                                                                            <th scope="col">#</th>

                                                                            <th scope="col">
                                                                                Department</th>
                                                                            <th scope="col">Action
                                                                            </th>
                                                                        </tr>
                                                                    </thead>

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

                                        </div>

                                    </div>

                                </div>
                            </div>

                            <div class="tab-pane fade" id="point-values-tab" role="tabpanel"
                                aria-labelledby="document-department-tab">
                                <div class="col-lg-12" id="tcp_table1">

                                    <div class="card p-0">

                                        <div class="card-body p-1" style="overflow-x:auto;">
                                            <div class="form-floating">
                                                <button type="button"
                                                    class="btn btn-primary btn-reset button-adjust custom-maroon-btn"
                                                    data-bs-toggle="modal" data-bs-target="#verticalycentered8">Add
                                                    Point Values
                                                </button>
                                            </div>
                                            <div class="row m-2">
                                            </div>
                                            <div class="modal fade" id="verticalycentered8" tabindex="-1">
                                                <div class="modal-dialog modal-dialog-centered">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h5 class="modal-title">Point Values</h5>
                                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                                aria-label="Close"></button>
                                                        </div>

                                                        <div class="modal-body">
                                                            <form class="row g-3" id="point_values_master_data">

                                                                <input type="hidden" name="_token"
                                                                    value="{{ csrf_token() }}">
                                                                <div class="col-md-12">
                                                                    <div class="form-floating">
                                                                        <input type="text" class="form-control"
                                                                            id="point_value" name="point_value"
                                                                            placeholder="Point value" autocomplete="off">
                                                                        <label for="revision">Add Point Value</label>
                                                                        <p id="error_point_values"></p>
                                                                    </div>
                                                                </div>
                                                                <div class="text-center">
                                                                    <button type="submit" class="btn submit-btn"
                                                                        id="submit">Submit</button>
                                                                </div>
                                                            </form>

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


                                            <div class="tab-content pt-2" id="borderedTabContent">
                                                <div class="tab-pane fade show active" id="bordered-home" role="tabpanel"
                                                    aria-labelledby="home-tab">
                                                    <div class="col-lg-12" id="tcp_table1">
                                                        <!-- <div class="col-lg-12"> -->
                                                        <div class="card p-0">
                                                            <div class="card-body p-1">
                                                                <table id="point_value_master_table"
                                                                    class='display dataTable' style="width:100%">
                                                                    <thead>
                                                                        <tr>
                                                                            <th scope="col">#</th>

                                                                            <th scope="col">
                                                                                Point Values</th>
                                                                            <th scope="col">Action
                                                                            </th>
                                                                        </tr>
                                                                    </thead>

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

                                        </div>

                                    </div>

                                </div>
                            </div>

                            <div class="tab-pane fade" id="approved-name-tab" role="tabpanel"
                                aria-labelledby="document-approved-name-tab">
                                <div class="col-lg-12" id="tcp_table1">

                                    <div class="card p-0">

                                        <div class="card-body p-1" style="overflow-x:auto;">
                                            <div class="form-floating ">
                                                <button type="button"
                                                    class="btn btn-primary btn-reset button-adjust custom-maroon-btn"
                                                    data-bs-toggle="modal" data-bs-target="#verticalycentered9">Add
                                                    Approver Name
                                                </button>
                                            </div>
                                            <div class="row m-2">
                                            </div>
                                            <div class="modal fade" id="verticalycentered9" tabindex="-1">
                                                <div class="modal-dialog modal-dialog-centered">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h5 class="modal-title">Approver Name</h5>
                                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                                aria-label="Close"></button>
                                                        </div>

                                                        <div class="modal-body">
                                                            <form class="row g-3" id="Approved_name_master_data">

                                                                <input type="hidden" name="_token"
                                                                    value="{{ csrf_token() }}">

                                                                <div class="col-md-12">
                                                                    <div class="form-floating">
                                                                        <input type="text" class="form-control"
                                                                            id="master_approved_name"
                                                                            name="master_approved_name"
                                                                            placeholder="Point value" autocomplete="off">
                                                                        <label for="revision">Add Approver Name</label>
                                                                        <p id="error_approved_name"></p>
                                                                    </div>

                                                                    <div class="form-floating">
                                                                        <input type="hidden" id="hidden_Approved_by_date"
                                                                            name="hidden_Approved_by_date">
                                                                        <input type="text" class="form-control"
                                                                            id="Approved_by_date" name="Approved_by_date"
                                                                            placeholder="From Date" required="" readonly>
                                                                        <label for="floatingEmail">Approved By Date
                                                                        </label>
                                                                        <p id="error_approved_by_date"></p>


                                                                    </div>
                                                                </div>

                                                                <div class="text-center">
                                                                    <button type="submit" class="btn submit-btn"
                                                                        id="submit">Submit</button>
                                                                </div>
                                                            </form>

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


                                            <div class="tab-content pt-2" id="borderedTabContent">
                                                <div class="tab-pane fade show active" id="bordered-home" role="tabpanel"
                                                    aria-labelledby="home-tab">
                                                    <div class="col-lg-12" id="tcp_table1">
                                                        <!-- <div class="col-lg-12"> -->
                                                        <div class="card p-0">
                                                            <div class="card-body p-1">
                                                                <table id="Approver_name_master_table"
                                                                    class='display dataTable' style="width:100%">
                                                                    <thead>
                                                                        <tr>
                                                                            <th scope="col">#</th>

                                                                            <th scope="col">
                                                                                Approver Name</th>
                                                                            <th scope="col">
                                                                                Approved By date</th>
                                                                            <th scope="col">Action
                                                                            </th>
                                                                        </tr>
                                                                    </thead>

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

                                        </div>

                                    </div>

                                </div>
                            </div>

                            <!-- Working Days -->
                            <div class="tab-pane fade" id="reference-location-tab" role="tabpanel"
                                aria-labelledby="document-reference-location-tab">
                                <div class="col-lg-12" id="tcp_table1">
                                    <div class="card p-0">
                                        <div class="card-body p-1" style="overflow-x:auto;">
                                            <div class="form-floating ">
                                                <button type="button"
                                                    class="btn submit-btn btn-reset button-adjust custom-maroon-btn"
                                                    data-bs-toggle="modal" data-bs-target="#verticalycentered11">
                                                    Add Working Days
                                                </button>
                                            </div>
                                            <div class="row m-2">
                                            </div>
                                            <div class="modal fade" id="verticalycentered11" tabindex="-1">
                                                <div class="modal-dialog modal-dialog-centered modal-xl">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h5 class="modal-title">Working Days</h5>
                                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                                aria-label="Close"></button>
                                                        </div>
                                                        <div class="modal-body">
                                                            <form class="row g-3" id="working_days_form">

                                                                <input type="hidden" name="_token"
                                                                    value="{{ csrf_token() }}">
                                                                <div class="col-md-12">
                                                                    <div class="form-floating">
                                                                        <select class="sd-CustomSelect" id="working_employee_id"
                                                                            name="working_employee_id" data-placeholder="Option to Add" multiple="true">

                                                                        </select>
                                                                        <label for="floatingName" id="add_emp_label">Employees</span></label>
                                                                        <p id="working_days_error"></p>
                                                                    </div>
                                                                </div>
                                                                {{-- <div class="col-md-2">
                                                                <div class="form-floating">
                                                                    <input type="text" class="form-control only-number"
                                                                        id="january"
                                                                        name="january"
                                                                        value="0"
                                                                        placeholder="From Date" required="" maxlength="2">
                                                                    <label for="floatingEmail">January
                                                                    </label>
                                                                    <p id="january_error"></p>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-2">
                                                                <div class="form-floating">
                                                                    <input type="text" class="form-control only-number"
                                                                        id="february"
                                                                        name="february"
                                                                        value="0"
                                                                        placeholder="From Date" required="" maxlength="2">
                                                                    <label for="floatingEmail">February
                                                                    </label>
                                                                    <p id="february_error"></p>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-2">
                                                                <div class="form-floating">
                                                                    <input type="text" class="form-control only-number"
                                                                        id="march"
                                                                        name="march"
                                                                        value="0"
                                                                        placeholder="From Date" required="" maxlength="2">
                                                                    <label for="floatingEmail">March
                                                                    </label>
                                                                    <p id="march_error"></p>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-2">
                                                                <div class="form-floating">
                                                                    <input type="text" class="form-control only-number"
                                                                        id="april"
                                                                        name="april"
                                                                        value="0"
                                                                        placeholder="From Date" required="" maxlength="2">
                                                                    <label for="floatingEmail">April
                                                                    </label>
                                                                    <p id="april_error"></p>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-2">
                                                                <div class="form-floating">
                                                                    <input type="text" class="form-control only-number"
                                                                        id="may"
                                                                        name="may"
                                                                        value="0"
                                                                        placeholder="From Date" required="" maxlength="2">
                                                                    <label for="floatingEmail">May</label>
                                                                    <p id="may_error"></p>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-2">
                                                                <div class="form-floating">
                                                                    <input type="text" class="form-control only-number"
                                                                        id="june"
                                                                        name="june"
                                                                        value="0"
                                                                        placeholder="From Date" required="" maxlength="2">
                                                                    <label for="floatingEmail">June</label>
                                                                    <p id="june_error"></p>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-2">
                                                                <div class="form-floating">
                                                                    <input type="text" class="form-control only-number"
                                                                        id="july"
                                                                        name="july"
                                                                        value="0"
                                                                        placeholder="From Date" required="" maxlength="2">
                                                                    <label for="floatingEmail">July</label>
                                                                    <p id="july_error"></p>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-2">
                                                                <div class="form-floating">
                                                                    <input type="text" class="form-control only-number"
                                                                        id="august"
                                                                        name="august"
                                                                        value="0"
                                                                        placeholder="From Date" required="" maxlength="2">
                                                                    <label for="floatingEmail">August</label>
                                                                    <p id="august_error"></p>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-2">
                                                                <div class="form-floating">
                                                                    <input type="text" class="form-control only-number"
                                                                        id="september"
                                                                        name="september"
                                                                        value="0"
                                                                        placeholder="From Date" required="" maxlength="2">
                                                                    <label for="floatingEmail">September</label>
                                                                    <p id="september_error"></p>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-2">
                                                                <div class="form-floating">
                                                                    <input type="text" class="form-control only-number"
                                                                        id="october"
                                                                        name="october"
                                                                        value="0"
                                                                        placeholder="From Date" required="" maxlength="2">
                                                                    <label for="floatingEmail">October</label>
                                                                    <p id="october_error"></p>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-2">
                                                                <div class="form-floating">
                                                                    <input type="text" class="form-control only-number"
                                                                        id="november"
                                                                        name="november"
                                                                        value="0"
                                                                        placeholder="From Date" required="" maxlength="2">
                                                                    <label for="floatingEmail">November</label>
                                                                    <p id="november_error"></p>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-2">
                                                                <div class="form-floating">
                                                                    <input type="text" class="form-control only-number"
                                                                        id="december"
                                                                        name="december"
                                                                        value="0"
                                                                        placeholder="From Date" required="" maxlength="2">
                                                                    <label for="floatingEmail">december</label>
                                                                    <p id="december_error"></p>
                                                                </div>
                                                            </div> --}}




                                                                <div class="table-responsive">
                                                                    <table class="table table-bordered align-middle text-center">
                                                                        <thead class="table-light">
                                                                            <tr>
                                                                                <th>Month</th>
                                                                                <th>Working Days</th>
                                                                                <th style="display: none;">Total Days</th>
                                                                                <th>Weekoff</th>
                                                                                <th>Holidays</th>
                                                                            </tr>
                                                                        </thead>
                                                                        <tbody>
                                                                            @php
                                                                            $months = [
                                                                            'january', 'february', 'march', 'april', 'may', 'june',
                                                                            'july', 'august', 'september', 'october', 'november', 'december'
                                                                            ];
                                                                            @endphp

                                                                            @foreach ($months as $month)
                                                                            <tr>
                                                                                <td>{{ ucfirst($month) }}</td>
                                                                                <td>
                                                                                    <input type="text" class="form-control only-number" id="{{ $month }}" name="{{ $month }}" value="0" maxlength="2">
                                                                                </td>
                                                                                <td style="display: none;">
                                                                                    <input type="text" class="form-control only-number" id="{{ $month }}_days" name="{{ $month }}_days" value="0" maxlength="2">
                                                                                </td>
                                                                                <td>
                                                                                    <input type="text" class="form-control only-number" id="{{ $month }}_weekof" name="{{ $month }}_weekof" value="0" maxlength="2">
                                                                                </td>
                                                                                <td>
                                                                                    <input type="text" class="form-control only-number" id="{{ $month }}_holiday" name="{{ $month }}_holiday" value="0" maxlength="2">
                                                                                </td>
                                                                            </tr>
                                                                            @endforeach
                                                                        </tbody>
                                                                    </table>
                                                                </div>
                                                                <div class="text-center">
                                                                    <button type="submit" class="btn submit-btn"
                                                                        id="submit">Submit</button>
                                                                </div>
                                                            </form>

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


                                            <div class="tab-content pt-2" id="borderedTabContent">
                                                <div class="tab-pane fade show active" id="bordered-home" role="tabpanel"
                                                    aria-labelledby="home-tab">
                                                    <div class="col-lg-12" id="tcp_table1">
                                                        <div class="card p-0">
                                                            <div class="card-body p-1">
                                                                <table id="working_days_table"
                                                                    class='display dataTable' style="width:100%">
                                                                    <thead>
                                                                        <tr>
                                                                            <th scope="col">#</th>
                                                                            <th scope="col"> username</th>
                                                                            <th scope="col">Action
                                                                            </th>
                                                                        </tr>
                                                                    </thead>
                                                                </table>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="tab-pane fade" id="beyond-time-tab" role="tabpanel"
                                aria-labelledby="document-reference-location-tab_exceed_time">
                                <div class="col-lg-12" id="tcp_table1">
                                    <div class="card p-0">
                                        <div class="card-body p-1" style="overflow-x:auto;">
                                            <div class="form-floating">
                                                <button type="button"
                                                    class="btn submit-btn btn-reset button-adjust custom-maroon-btn"
                                                    data-bs-toggle="modal" data-bs-target="#beyondTimeModal">
                                                    Beyond Time
                                                </button>
                                            </div>
                                            <div class="row m-2">
                                            </div>

                                            <div class="modal fade" id="beyondTimeModal" tabindex="-1">
                                                <div class="modal-dialog modal-dialog-centered modal-md">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h5 class="modal-title">Beyond Time</h5>
                                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                                aria-label="Close"></button>
                                                        </div>
                                                        <div class="modal-body">
                                                            <form class="row g-3 pt-3" id="beyond_time_insert_form" method="POST">
                                                                @csrf
                                                                <div class="col-md-12">
                                                                    <div class="form-floating">
                                                                        <input type="text" id="beyond_time"
                                                                            class="form-control" name="beyond_time"
                                                                            placeholder="Enter Minutes" />
                                                                        <label for="beyond_time">Beyond Time (Enter in Minutes)</span></label>
                                                                        <small id="beyond_time_error" style="color:red"
                                                                            class="text-lowercase"></small>
                                                                    </div>
                                                                </div>

                                                                <div class="d-flex justify-content-center gap-2">
                                                                    <button
                                                                        class="btn btn-primary submit-btn">Submit</button>
                                                                    <button class="btn btn-primary reset-btn" type="button"
                                                                        id="beyond_time_reset_btn">Reset</button>
                                                                </div>

                                                            </form>



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


                                            <div class="tab-content pt-2" id="borderedTabContent">
                                                <div class="tab-pane fade show active" id="bordered-home" role="tabpanel"
                                                    aria-labelledby="home-tab">
                                                    <div class="col-lg-12" id="tcp_table1">
                                                        <div class="card p-0">
                                                            <div class="card-body p-1">
                                                                <table id="beyond_time_table" class='display dataTable'
                                                                    style="width:100%">
                                                                    <thead>
                                                                        <tr>
                                                                            <th scope="col">Id</th>
                                                                            <th scope="col">beyond time</th>
                                                                            <th>Action</th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody></tbody>
                                                                </table>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>


                            <div class="tab-pane fade" id="reference_shift_type" role="tabpanel"
                                aria-labelledby="document-reference-location-shift_type">
                                <div class="col-lg-12" id="tcp_table1">
                                    <div class="card p-0">
                                        <div class="card-body p-1" style="overflow-x:auto;">
                                            <div class="form-floating ">
                                                <button type="button"
                                                    class="btn submit-btn btn-reset button-adjust custom-maroon-btn"
                                                    data-bs-toggle="modal" data-bs-target="#verticalycentered16">
                                                    Add Shift Type
                                                </button>
                                            </div>
                                            <div class="row m-2">
                                            </div>

                                            <div class="modal fade" id="verticalycentered16" tabindex="-1">
                                                <div class="modal-dialog modal-dialog-centered modal-xl">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h5 class="modal-title">Shift Type</h5>
                                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                                aria-label="Close"></button>
                                                        </div>
                                                        <div class="modal-body">
                                                            <form class="row g-3 pt-3" id="shift_type_form" method="POST">
                                                                @csrf
                                                                <div class="col-md-4">
                                                                    <div class="form-floating">
                                                                        <select class="form-select " id="outlet"
                                                                            name="outlet" aria-label="" autocomplete="off"
                                                                            style="color:rgb(90, 93, 96)">
                                                                            <option value="">Select</option>
                                                                            @foreach($data as $d)
                                                                            <option value="{{$d->id}}">{{$d->kitchen_name}}
                                                                            </option>
                                                                            @endforeach
                                                                        </select>
                                                                        <label for="floatingName">Outlet</span></label>
                                                                    </div>
                                                                    <small id="outlet_error"
                                                                        style="color:red; display:block; margin-top:4px"
                                                                        class="text-lowercase"></small>
                                                                </div>
                                                                <div class="col-md-4">
                                                                    <div class="form-floating">

                                                                        <select class="form-select " id="shift_type"
                                                                            name="shift_type" aria-label="" autocomplete="off">

                                                                            <option value="1">Morning</option>
                                                                            <option value="2">After Noon</option>
                                                                            <option value="3">Evening</option>
                                                                            <option value="4">Night</option>
                                                                        </select>

                                                                        <label for="shift_type">Shift Type</span></label>
                                                                        <small id="shift_type_error" style="color:red"
                                                                            class="text-lowercase"></small>
                                                                    </div>
                                                                </div>

                                                                <div class="col-md-4" id="d-start">
                                                                    <div class="form-floating timepicker_div_daily_view">
                                                                        <input type="text"
                                                                            class="form-control timepicker_daily_view timepicker"
                                                                            id="d_start_time_daily_view"
                                                                            name="d_start_time_daily_view"
                                                                            placeholder="Start Time" readonly>
                                                                        <label for="start_time">Start Time</label>
                                                                        <small id="start_time_error"
                                                                            style="color:red"></small>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-4" id="d-end">
                                                                    <div class="form-floating timepicker_div_daily_view">
                                                                        <input type="text"
                                                                            class="form-control timepicker_daily_view timepicker"
                                                                            id="d_to_time_daily_view"
                                                                            name="d_to_time_daily_view"
                                                                            placeholder="End Time" readonly>
                                                                        <label for="end_time">End Time</label>
                                                                        <small id="end_time_error"
                                                                            style="color:red"></small>
                                                                    </div>
                                                                </div>

                                                                <div class="d-flex justify-content-center gap-2">
                                                                    <button
                                                                        class="btn  submit-btn">Submit</button>
                                                                    <button class="btn btn-primary reset-btn" type="button"
                                                                        id="shift_type_reset_btn">Reset</button>
                                                                </div>

                                                            </form>



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


                                            <div class="tab-content pt-2" id="borderedTabContent">
                                                <div class="tab-pane fade show active" id="bordered-home" role="tabpanel"
                                                    aria-labelledby="home-tab">
                                                    <div class="col-lg-12" id="tcp_table1">
                                                        <div class="card p-0">
                                                            <div class="card-body p-1">
                                                                <table id="shift_type_table" class='display dataTable'
                                                                    style="width:100%">
                                                                    <thead>
                                                                        <tr>
                                                                            <th scope="col">Id</th>
                                                                            <th scope="col">outlet</th>
                                                                            <th scope="col">shift</th>
                                                                            <th scope="col">Start Time</th>
                                                                            <th scope="col">End Time</th>
                                                                            <th>Action</th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody></tbody>
                                                                </table>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>




                            <div class="tab-pane fade" id="agent-tab" role="tabpanel" aria-labelledby="document-agent-tab">
                                <div class="col-lg-12" id="tcp_table1">
                                    <div class="card p-0">
                                        <div class="card-body p-1" style="overflow-x:auto;">
                                            <div class="form-floating">
                                                <button type="button"
                                                    class="btn submit-btn btn-reset button-adjust custom-maroon-btn"
                                                    data-bs-toggle="modal" data-bs-target="#verticalycentered12">Add Agent
                                                </button>
                                            </div>
                                            <div class="row m-2">
                                            </div>
                                            <div class="modal fade" id="verticalycentered12" tabindex="-1">
                                                <div class="modal-dialog modal-dialog-centered">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h5 class="modal-title">Agent</h5>
                                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                                aria-label="Close"></button>
                                                        </div>

                                                        <div class="modal-body">
                                                            <form class="row g-3" id="agent_data">

                                                                <input type="hidden" name="_token"
                                                                    value="{{ csrf_token() }}">

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


                                                                    <div class="form-floating">

                                                                        <input type="text" class="form-control"
                                                                            id="agent_name" name="agent_name"
                                                                            placeholder="From Date" required="">
                                                                        <label for="floatingEmail">Agent Name
                                                                        </label>
                                                                        <p id="error_agent"></p>

                                                                    </div>

                                                                </div>

                                                                <div class="text-center">
                                                                    <button type="submit" class="btn submit-btn"
                                                                        id="submit">Submit</button>
                                                                </div>
                                                            </form>

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



                                            <div class="tab-content pt-2" id="borderedTabContent">
                                                <div class="tab-pane fade show active" id="bordered-home-agent"
                                                    role="tabpanel" aria-labelledby="home-tab-agent">
                                                    <div class="col-lg-12" id="tcp_table1">
                                                        <!-- <div class="col-lg-12"> -->
                                                        <div class="card p-0">
                                                            <div class="card-body p-1">
                                                                <table id="agent_table_data" class='display dataTable'
                                                                    style="width:100%">
                                                                    <thead>
                                                                        <tr>
                                                                            <th scope="col">#</th>
                                                                            <th scope="col">Agent</th>
                                                                            <th scope="col">Action</th>
                                                                        </tr>
                                                                    </thead>

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

                                        </div>

                                    </div>

                                </div>
                            </div>




                            <div class="tab-pane fade" id="mode-separate" role="tabpanel"
                                aria-labelledby="document-mode_of_separation">
                                <div class="col-lg-12" id="tcp_table1">

                                    <div class="card p-0">

                                        <div class="card-body p-1" style="overflow-x:auto;">
                                            <div class="form-floating">
                                                <button type="button"
                                                    class="btn submit-btn btn-reset button-adjust custom-maroon-btn"
                                                    data-bs-toggle="modal" data-bs-target="#verticalycentered14">Separation
                                                    Mode</button>
                                            </div>
                                            <div class="row m-2">
                                            </div>
                                            <div class="modal fade" id="verticalycentered14" tabindex="-1">
                                                <div class="modal-dialog modal-dialog-centered">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h5 class="modal-title">Mode of Separation</h5>
                                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                                aria-label="Close"></button>
                                                        </div>
                                                        <div class="modal-body">
                                                            <form class="row g-3" id="mode_of_separation">

                                                                <input type="hidden" name="_token"
                                                                    value="{{ csrf_token() }}">

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

                                                                    <div class="form-floating">

                                                                        <input type="text" class="form-control" id="mode"
                                                                            autocomplete="OFF" name="mode"
                                                                            placeholder="Hired By" required="">
                                                                        <label for="floatingEmail">Add Separation Mode
                                                                        </label>
                                                                        <p id="error_mode"></p>

                                                                    </div>

                                                                </div>

                                                                <div class="text-center">
                                                                    <button type="submit" class="btn submit-btn"
                                                                        id="submit">Submit</button>
                                                                </div>
                                                            </form>

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





                                            <div class="tab-content pt-2" id="borderedTabContent">
                                                <div class="tab-pane fade show active" id="bordered-home-agent"
                                                    role="tabpanel" aria-labelledby="home-tab-agent">
                                                    <div class="col-lg-12" id="tcp_table1">
                                                        <!-- <div class="col-lg-12"> -->
                                                        <div class="card p-0">
                                                            <div class="card-body p-1">
                                                                <table id="table_separation_mode" class='display dataTable'
                                                                    style="width:100%">
                                                                    <thead>
                                                                        <tr>
                                                                            <th scope="col">#</th>
                                                                            <th scope="col">Separation Mode</th>
                                                                            <th scope="col">Action</th>
                                                                        </tr>
                                                                    </thead>

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

                                        </div>

                                    </div>

                                </div>
                            </div>



                            <div class="tab-pane fade" id="mode-outlet_info" role="tabpanel"
                                aria-labelledby="document-mode_out_info">
                                <div class="col-lg-12" id="tcp_table1">

                                    <div class="card p-0">

                                        <div class="card-body p-1" style="overflow-x:auto;">
                                            <div class="form-floating">
                                                <button type="button"
                                                    class="btn submit-btn btn-reset button-adjust custom-maroon-btn"
                                                    data-bs-toggle="modal" data-bs-target="#verticalycentered1777">Working Hours</button>
                                            </div>
                                            <div class="row m-2">
                                            </div>
                                            <div class="modal fade" id="verticalycentered1777" tabindex="-1">
                                                <div class="modal-dialog modal-dialog-centered">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h5 class="modal-title">Working Hours Information</h5>
                                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                                aria-label="Close"></button>
                                                        </div>

                                                        <div class="modal-body">
                                                            <form class="row g-3" id="outlet_working_information">

                                                                <input type="hidden" name="_token"
                                                                    value="{{ csrf_token() }}">

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


                                                                    <div id="" class="form-floating mb-3">
                                                                        <select class="form-control time-dropdown" name="outlet_opening_time" id="outlet_opening_time" placeholder="Outlet Opening Hour" required>
                                                                            <option value="" disabled selected>Select Time</option>
                                                                            @for ($i = 0; $i < 24; $i++)
                                                                                @php
                                                                                $hour=$i % 12===0 ? 12 : $i % 12; // Convert 24-hour format to 12-hour format
                                                                                $meridian=$i < 12 ? 'AM' : 'PM' ; // Determine AM or PM
                                                                                @endphp
                                                                                <option value="{{ $i }}:00 {{ $meridian }}">{{ $hour }}:00 {{ $meridian }}</option>
                                                                                <option value="{{ $i }}:30 {{ $meridian }}">{{ $hour }}:30 {{ $meridian }}</option>
                                                                                @endfor
                                                                        </select>
                                                                        <label for="">Outlet Opening Hour</label>
                                                                        <p id="error_mode_outlet_opening_time"></p>
                                                                        {{-- <span class="required-symbol">*</span> --}}
                                                                    </div>

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


                                                                    <div id="" class="form-floating mb-3">
                                                                        <select class="form-control time-dropdown" name="outlet_working_hours" id="outlet_working_hours" placeholder="Outlet Working Hour" required>
                                                                            <option value="" disabled selected>Select Hours</option>
                                                                            @for ($i = 1; $i <= 24; $i++)
                                                                                <option value="{{ $i }}">{{ $i }} Hours</option>
                                                                                @endfor
                                                                        </select>
                                                                        <label for="">Outlet Working Hour</label>
                                                                        <p id="error_outlet_working_hours"></p>
                                                                        {{-- <span class="required-symbol">*</span> --}}
                                                                    </div>

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

                                                                    <div id="" class="form-floating mb-3">
                                                                        <input
                                                                            type="text"
                                                                            class="form-control"
                                                                            name="outlet_closing_hours"
                                                                            id="outlet_closing_hours"
                                                                            placeholder="Outlet Closing Hour"
                                                                            readonly
                                                                            required />
                                                                        <label for="">Outlet Closing Hour </label>
                                                                        <p id="error_outlet_closing_hours"></p>
                                                                        {{-- <span class="required-symbol">*</span> --}}
                                                                    </div>

                                                                </div>


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

                                                                    <div id="" class="form-floating">
                                                                        <select class="form-control time-dropdown" name="shift_type" id="shift_type" placeholder="Shift Type" required>
                                                                            <option value="" disabled selected>Select Shift Type</option>
                                                                            <option value="0">Day Shift</option>
                                                                            <option value="1">Day/Night Shift</option>

                                                                        </select>
                                                                        <label for="">Shift Type</label>
                                                                        <p id="error_shift_type"></p>
                                                                        {{-- <span class="required-symbol">*</span> --}}
                                                                    </div>

                                                                </div>



                                                        </div>

                                                        <div class="text-center mb-3">
                                                            <button type="submit" class="btn submit-btn"
                                                                id="submit">Submit</button>
                                                        </div>
                                                        </form>

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





                                        <div class="tab-content pt-2" id="borderedTabContent">
                                            <div class="tab-pane fade show active" id="bordered-home-outlet_info"
                                                role="tabpanel" aria-labelledby="home-tab-outlet_info">
                                                <div class="col-lg-12" id="tcp_table1">
                                                    <!-- <div class="col-lg-12"> -->
                                                    <div class="card p-0">
                                                        <div class="card-body p-1">
                                                            <table id="table_outlet_working_information" class='display dataTable'
                                                                style="width:100%">
                                                                <thead>
                                                                    <tr>
                                                                        <th scope="col">#</th>
                                                                        <th scope="col">Outlet Opening Hour</th>
                                                                        <th scope="col">Outlet Working Hour</th>
                                                                        <th scope="col">Outlet Closing Hour</th>
                                                                        <th scope="col">Shift Tpe</th>
                                                                        <th scope="col">Action</th>
                                                                    </tr>
                                                                </thead>

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

                                    </div>

                                </div>

                            </div>
                        </div>





                    </div>

                </div>
        </div>




        <div class="modal fade" id="ExtralargeModal_probation" tabindex="-1">
            <div class="modal-dialog  modal-dialog-centered">
                <div class="col-md-12">
                    <div class="modal-content">

                        <div class="modal-header">
                            <h5 class="modal-title">Probation Details</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body">

                            <ul class="nav nav-tabs nav-tabs-bordered" id="borderedTab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="storehome-tab" data-bs-toggle="tab"
                                        data-bs-target="#bordered-storehome" type="button" role="tab"
                                        aria-controls="storehome" aria-selected="true">View</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="storeedit-tab" data-bs-toggle="tab"
                                        data-bs-target="#bordered-storeedit" type="button" role="tab"
                                        aria-controls="storeedit" aria-selected="false">Edit</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="storedelete-tab" data-bs-toggle="tab"
                                        data-bs-target="#bordered-storedelete" type="button" role="tab"
                                        aria-controls="storedelete" aria-selected="false">Delete</button>
                                </li>
                            </ul>
                            <div class="tab-content pt-2" id="borderedTabContent">
                                <div class="tab-pane fade show active" id="bordered-storehome" role="tabpanel"
                                    aria-labelledby="storehome-tab">

                                    <div class="row">
                                        <form class="row" id="add_probation_period_view_master" method="POST">

                                            <input type="hidden" id="id_view" name="id_view">


                                            <div class="col-md-12">
                                                <div class="form-floating">
                                                    <input type="text" class="form-control"
                                                        id="probation_period_view" name="probation_period_view"
                                                        placeholder="Your Name" autocomplete="off" readonly>
                                                    <label for="revision">Add Probation
                                                        Period Date</label>
                                                    <p id="error1"></p>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="bordered-storeedit" role="tabpanel"
                                    aria-labelledby="storeedit-tab">


                                    <div class="row">
                                        <form class="row" id="add_probation_period_update_master" method="POST">

                                            <input type="hidden" id="id_update" name="id_update">
                                            <input type="hidden" id="" name="_token" value="{{ csrf_token() }}">

                                            <div class="col-md-12">
                                                <div class="form-floating">
                                                    <input type="text" class="form-control"
                                                        id="probation_period_update" name="probation_period_update"
                                                        placeholder="Your Name" autocomplete="off">
                                                    <label for="revision">Add Probation
                                                        Period Date</label>
                                                    <p id="error1_update_probation_period"></p>
                                                </div>
                                            </div>

                                            <div class="text-center">
                                                <button type="submit" class="btn update-btn">Update</button>
                                                <button type="reset" onclick="reset_data();"
                                                    class="btn reset-btn">Reset</button>
                                                <input type="hidden" id="edit_reset_id" name="edit_reset_id">
                                            </div>
                                        </form>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="bordered-storedelete" role="tabpanel"
                                    aria-labelledby="storedelete-tab">
                                    <div class="row">
                                        <form class="row" id="add_probation_period_delete_master">
                                            <input type="hidden" id="" name="_token" value="{{ csrf_token() }}">

                                            <input type="hidden" id="id_delete" name="id_delete">


                                            <div class="col-md-12">
                                                <div class="form-floating">
                                                    <input type="text" class="form-control"
                                                        id="probation_period_delete" name="probation_period_delete"
                                                        placeholder="Your Name" autocomplete="off" readonly>
                                                    <label for="revision">Add Probation
                                                        Period Date</label>
                                                    <p id="error1"></p>
                                                </div>
                                            </div>

                                            <div class="text-center">
                                                <button type="button" onclick="delete_probations_data();"
                                                    id="submit_delete" class="btn delete-btn">Delete</button>

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

        <div class="modal fade" id="ExtralargeModal_designation" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
                <div class="col-md-12">
                    <div class="modal-content">

                        <div class="modal-header">
                            <h5 class="modal-title">Designation Details</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body">

                            <ul class="nav nav-tabs nav-tabs-bordered" id="borderedTab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="storehome-tab" data-bs-toggle="tab"
                                        data-bs-target="#bordered-storehome2" type="button" role="tab"
                                        aria-controls="storehome" aria-selected="true">View</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="storeedit-tab" data-bs-toggle="tab"
                                        data-bs-target="#bordered-storeedit2" type="button" role="tab"
                                        aria-controls="storeedit" aria-selected="false">Edit</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="storedelete-tab" data-bs-toggle="tab"
                                        data-bs-target="#bordered-storedelete2" type="button" role="tab"
                                        aria-controls="storedelete" aria-selected="false">Delete</button>
                                </li>
                            </ul>
                            <div class="tab-content pt-2" id="borderedTabContent">
                                <div class="tab-pane fade show active" id="bordered-storehome2" role="tabpanel"
                                    aria-labelledby="storehome-tab">
                                    <div class="row">
                                        <form class="row" id="add_designation_master_view" method="POST">
                                            <input type="hidden" id="view_id" name="view_id">
                                            <div class="col-md-12">
                                                <div class="form-floating p-1">
                                                    <input type="text" class="form-control" id="designation_view"
                                                        name="designation_view" placeholder="Your Name"
                                                        autocomplete="off" readonly>
                                                    <label for="revision">Add Designation</label>
                                                    <p id="error1"></p>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="bordered-storeedit2" role="tabpanel"
                                    aria-labelledby="storeedit-tab">


                                    <div class="row">
                                        <form class="row" id="add_designation_master_update" method="POST">

                                            <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                            <input type="hidden" id="id_update" name="id_update">

                                            <div class="col-md-12">
                                                <div class="form-floating">
                                                    <input type="text" class="form-control" id="designation_update"
                                                        name="designation_update" placeholder="Your Name"
                                                        autocomplete="off">
                                                    <label for="revision">Add Designation</label>
                                                    <p id="error1_update_designation"></p>
                                                </div>
                                            </div>

                                            <div class="text-center">
                                                <button type="submit" class="btn update-btn">Update</button>
                                                <button type="reset" onclick="reset_data_designation();"
                                                    class="btn reset-btn">Reset</button>
                                                <input type="hidden" id="edit_reset_divi_id" name="edit_reset_id">
                                            </div>
                                        </form>
                                    </div>
                                    </form>
                                </div>
                                <div class="tab-pane fade" id="bordered-storedelete2" role="tabpanel"
                                    aria-labelledby="storedelete-tab">


                                    <div class="row">
                                        <form class="row" id="add_designation_master_delete" method="POST">

                                            <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                            <input type="hidden" id="id_delete" name="id_delete">


                                            <div class="col-md-12">
                                                <div class="form-floating">
                                                    <input type="text" class="form-control" id="designation_delete"
                                                        name="designation_delete" placeholder="Your Name"
                                                        autocomplete="off" readonly>
                                                    <label for="revision">Add Designation</label>
                                                    <p id="error1"></p>
                                                </div>
                                            </div>

                                            <div class="text-center">
                                                <button type="button" onclick="delete_designation_data();"
                                                    id="submit_delete" class="btn delete-btn">Delete</button>

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

        <div class="modal fade" id="ExtralargeModal_division" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
                <div class="col-md-12">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">Division Details</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <ul class="nav nav-tabs nav-tabs-bordered" id="borderedTab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="storehome-tab" data-bs-toggle="tab"
                                        data-bs-target="#bordered-storehome3" type="button" role="tab"
                                        aria-controls="storehome" aria-selected="true">View</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="storeedit-tab" data-bs-toggle="tab"
                                        data-bs-target="#bordered-storeedit3" type="button" role="tab"
                                        aria-controls="storeedit" aria-selected="false">Edit</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="storedelete-tab" data-bs-toggle="tab"
                                        data-bs-target="#bordered-storedelete3" type="button" role="tab"
                                        aria-controls="storedelete" aria-selected="false">Delete</button>
                                </li>
                            </ul>
                            <div class="tab-content pt-2" id="borderedTabContent">
                                <div class="tab-pane fade show active" id="bordered-storehome3" role="tabpanel"
                                    aria-labelledby="storehome-tab">
                                    <div class="row">
                                        <form class="row " id="add_division_master_view" method="POST">
                                            <input type="hidden" id="view_id" name="view_id">
                                            <div class="col-md-12">
                                                <div class="form-floating">
                                                    <input type="text" class="form-control" id="division_view"
                                                        name="division_view" placeholder="Your Name"
                                                        autocomplete="off" readonly>
                                                    <label for="revision">Add Division</label>
                                                    <p id="error1"></p>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="bordered-storeedit3" role="tabpanel"
                                    aria-labelledby="storeedit-tab">
                                    <div class="row">
                                        <form class="row" id="add_division_master_update">

                                            <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                            <input type="hidden" id="id_update" name="id_update">

                                            <div class="col-md-12">
                                                <div class="form-floating">
                                                    <input type="text" class="form-control" id="division_update"
                                                        name="division_update" placeholder="Your Name"
                                                        autocomplete="off">
                                                    <label for="revision">Add Division</label>
                                                    <p id="error1_update_division"></p>
                                                </div>
                                            </div>

                                            <div class="text-center">
                                                <button type="submit" class="btn update-btn">Update</button>
                                                <button type="reset" onclick="reset_data_division();"
                                                    class="btn reset-btn">Reset</button>
                                                <input type="hidden" id="edit_reset_desi_id" name="edit_reset_id">
                                            </div>
                                        </form>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="bordered-storedelete3" role="tabpanel"
                                    aria-labelledby="storedelete-tab">
                                    <div class="row">
                                        <form class="row" id="add_division_master_delete" method="POST">

                                            <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                            <input type="hidden" id="id_delete" name="id_delete">

                                            <div class="col-md-12">
                                                <div class="form-floating">
                                                    <input type="text" class="form-control" id="division_delete"
                                                        name="division_delete" placeholder="Your Name"
                                                        autocomplete="off" readonly>
                                                    <label for="revision">Add Division</label>
                                                    <p id="error1"></p>
                                                </div>
                                            </div>

                                            <div class="text-center">
                                                <button type="button" onclick="delete_division_data();"
                                                    id="submit_delete" class="btn delete-btn">Delete</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="modal fade" id="ExtralargeModal_shift" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
                <div class="col-md-12">
                    <div class="modal-content">

                        <div class="modal-header">
                            <h5 class="modal-title">Shift Details</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body">

                            <ul class="nav nav-tabs nav-tabs-bordered" id="borderedTab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="storehome-tab" data-bs-toggle="tab"
                                        data-bs-target="#bordered-storehome4" type="button" role="tab"
                                        aria-controls="storehome" aria-selected="true">View</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="storeedit-tab" data-bs-toggle="tab"
                                        data-bs-target="#bordered-storeedit4" type="button" role="tab"
                                        aria-controls="storeedit" aria-selected="false">Edit</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="storedelete-tab" data-bs-toggle="tab"
                                        data-bs-target="#bordered-storedelete4" type="button" role="tab"
                                        aria-controls="storedelete" aria-selected="false">Delete</button>
                                </li>
                            </ul>
                            <div class="tab-content pt-2" id="borderedTabContent">
                                <div class="tab-pane fade show active" id="bordered-storehome4" role="tabpanel"
                                    aria-labelledby="storehome-tab">
                                    <div class="row">
                                        <form class="row " id="add_shift_master_view" method="POST">
                                            <input type="hidden" id="view_id" name="view_id">
                                            <div class="col-md-12">
                                                <div class="form-floating">
                                                    <input type="text" class="form-control" id="shift_view"
                                                        name="shift_view" placeholder="Your Name" autocomplete="off"
                                                        readonly>
                                                    <label for="revision">Add Shift</label>
                                                    <p id="error1"></p>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="bordered-storeedit4" role="tabpanel"
                                    aria-labelledby="storeedit-tab">
                                    <div class="row">
                                        <form class="row" id="add_shift_master_update">
                                            <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                            <input type="hidden" id="id_update" name="id_update">

                                            <div class="col-md-12">
                                                <div class="form-floating">
                                                    <input type="text" class="form-control" id="shift_update"
                                                        name="shift_update" placeholder="Your Name"
                                                        autocomplete="off">
                                                    <label for="revision">Add Shift</label>
                                                    <p id="error1_update_shift"></p>
                                                </div>
                                            </div>

                                            <div class="text-center">
                                                <button type="submit" class="btn update-btn">Update</button>
                                                <button type="reset" onclick="reset_data_shift();"
                                                    class="btn reset-btn">Reset</button>
                                                <input type="hidden" id="edit_reset_shift_id" name="edit_reset_id">
                                            </div>
                                        </form>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="bordered-storedelete4" role="tabpanel"
                                    aria-labelledby="storedelete-tab">
                                    <div class="row">
                                        <form class="row" id="add_shift_master_delete" method="POST">

                                            <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                            <input type="hidden" id="id_delete" name="id_delete">

                                            <div class="col-md-12">
                                                <div class="form-floating">
                                                    <input type="text" class="form-control" id="shift_delete"
                                                        name="shift_delete" placeholder="Your Name"
                                                        autocomplete="off" readonly>
                                                    <label for="revision">Add Shift</label>
                                                    <p id="error1"></p>
                                                </div>
                                            </div>

                                            <div class="text-center">
                                                <button type="button" onclick="delete_shift_data();"
                                                    id="submit_delete" class="btn delete-btn">Delete</button>

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

        <div class="modal fade" id="ExtralargeModal_references" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
                <div class="col-md-12">
                    <div class="modal-content">

                        <div class="modal-header">
                            <h5 class="modal-title">References Details</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body">

                            <ul class="nav nav-tabs nav-tabs-bordered" id="borderedTab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="storehome-tab" data-bs-toggle="tab"
                                        data-bs-target="#bordered-storehome5" type="button" role="tab"
                                        aria-controls="storehome" aria-selected="true">View</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="storeedit-tab" data-bs-toggle="tab"
                                        data-bs-target="#bordered-storeedit5" type="button" role="tab"
                                        aria-controls="storeedit" aria-selected="false">Edit</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="storedelete-tab" data-bs-toggle="tab"
                                        data-bs-target="#bordered-storedelete5" type="button" role="tab"
                                        aria-controls="storedelete" aria-selected="false">Delete</button>
                                </li>
                            </ul>
                            <div class="tab-content pt-2" id="borderedTabContent">
                                <div class="tab-pane fade show active" id="bordered-storehome5" role="tabpanel"
                                    aria-labelledby="storehome-tab">
                                    <div class="row">
                                        <form class="row " id="add_references_master_view" method="POST">
                                            <input type="hidden" id="view_id" name="view_id">
                                            <div class="col-md-12">
                                                <div class="form-floating">
                                                    <input type="text" class="form-control" id="references_view"
                                                        name="references_view" placeholder="Your Name"
                                                        autocomplete="off" readonly>
                                                    <label for="revision">Add References</label>
                                                    <p id="error1"></p>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="bordered-storeedit5" role="tabpanel"
                                    aria-labelledby="storeedit-tab">
                                    <div class="row">
                                        <form class="row" id="add_references_master_update">

                                            <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                            <input type="hidden" id="id_update" name="id_update">

                                            <div class="col-md-12">
                                                <div class="form-floating">
                                                    <input type="text" class="form-control" id="references_update"
                                                        name="references_update" placeholder="Your Name"
                                                        autocomplete="off">
                                                    <label for="revision">Add References</label>
                                                    <p id="error1_update_references"></p>
                                                </div>
                                            </div>

                                            <div class="text-center">
                                                <button type="submit" class="btn update-btn">Update</button>
                                                <button type="reset" onclick="reset_data_references();"
                                                    class="btn reset-btn">Reset</button>
                                                <input type="hidden" id="edit_reset_references_id"
                                                    name="edit_reset_id">
                                            </div>
                                        </form>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="bordered-storedelete5" role="tabpanel"
                                    aria-labelledby="storedelete-tab">
                                    <div class="row">
                                        <form class="row" id="add_references_master_delete" method="POST">

                                            <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                            <input type="hidden" id="id_delete" name="id_delete">

                                            <div class="col-md-12">
                                                <div class="form-floating">
                                                    <input type="text" class="form-control" id="references_delete"
                                                        name="references_delete" placeholder="Your Name"
                                                        autocomplete="off" readonly>
                                                    <label for="revision">Add References</label>
                                                    <p id="error1"></p>
                                                </div>
                                            </div>

                                            <div class="text-center">
                                                <button type="button" onclick="delete_references_data();"
                                                    id="submit_delete" class="btn delete-btn">Delete</button>

                                            </div>


                                        </form>
                                    </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="ExtralargeModal_location" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
                <div class="col-md-12">
                    <div class="modal-content">

                        <div class="modal-header">
                            <h5 class="modal-title">Login Type Details</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body">

                            <ul class="nav nav-tabs nav-tabs-bordered" id="borderedTab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="storehome-tab" data-bs-toggle="tab"
                                        data-bs-target="#bordered-storehome6" type="button" role="tab"
                                        aria-controls="storehome" aria-selected="true">View</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="storeedit-tab" data-bs-toggle="tab"
                                        data-bs-target="#bordered-storeedit6" type="button" role="tab"
                                        aria-controls="storeedit" aria-selected="false">Edit</button>
                                </li>
                            </ul>
                            <div class="tab-content pt-2" id="borderedTabContent">
                                <div class="tab-pane fade show active" id="bordered-storehome6" role="tabpanel"
                                    aria-labelledby="storehome-tab">


                                    <div class="row">
                                        <form class="row " id="add_location_master_view" method="POST">
                                            <input type="hidden" id="view_id" name="view_id">
                                            <div class="col-md-12">
                                                <div class="form-floating">
                                                    <input type="text" class="form-control" id="view_logintype"
                                                        name="view_logintype" placeholder="Add Location"
                                                        autocomplete="off" readonly>
                                                    <label for="revision">Login Type</label>
                                                    <p id="error1"></p>
                                                </div>
                                            </div>
                                            <div class="col-md-12">
                                                <div class="form-floating">
                                                    <select class="form-select" id="view_login_btn_type"
                                                        name="view_login_btn_type" placeholder="select type" disabled>
                                                        <option selected disabled>select</option>
                                                        <option value="0">Present/Absent</option>
                                                        <option value="1">Full</option>
                                                    </select>
                                                    <label for="view_login_btn_type">Select Login Type</span></label>
                                                    <!-- <p id="edit_login_btn_type_error" style="color:red"></p> -->
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                    </form>
                                </div>
                                <!-- login type edit -->
                                <div class="tab-pane fade" id="bordered-storeedit6" role="tabpanel"
                                    aria-labelledby="storeedit-tab">
                                    <div class="row">
                                        <form class="row" id="add_login_type_update">
                                            <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                            <input type="hidden" id="id_update" name="id_update">
                                            <div class="col-md-12">
                                                <div class="form-floating">
                                                    <select class="sd-CustomSelect" id="edit_add_button_options"
                                                        name="edit_add_button_options" data-placeholder="Option to Add" multiple="true">
                                                        <option value="present">Present</option>
                                                        <option value="absent">Absent</option>
                                                        <option value="login">Login</option>
                                                        <option value="logout">Logout</option>
                                                        <option value="breakin">Breakin</option>
                                                        <option value="breakout">Breakout</option>
                                                    </select>
                                                    <label for="floatingName" id="multiselect_options">Option to Add</span></label>
                                                    <p id="add_button_options_error" style="color:red"></p>
                                                </div>
                                            </div>
                                            <div class="col-md-12">
                                                <div class="form-floating">
                                                    <select class="form-select" id="edit_login_btn_type"
                                                        name="edit_login_btn_type" placeholder="select type">
                                                        <option selected disabled>select</option>
                                                        <option value="0">Present/Absent</option>
                                                        <option value="1">Full</option>
                                                    </select>
                                                    <label for="edit_login_btn_type">Select Login Type</span></label>
                                                    <p id="edit_login_btn_type_error" style="color:red"></p>
                                                </div>
                                            </div>

                                            <div class="text-center">
                                                <button type="submit" class="btn update-btn">Update</button>
                                                <button type="reset" onclick="reset_data_location();"
                                                    class="btn reset-btn">Reset</button>
                                                <input type="hidden" id="edit_reset_location_id"
                                                    name="edit_reset_id">
                                            </div>
                                        </form>
                                    </div>
                                    </form>
                                </div>
                                <!-- <div class="tab-pane fade" id="bordered-storedelete6" role="tabpanel"
                                        aria-labelledby="storedelete-tab">
                                        <div class="row">

                                        </div>
                                        </form>
                                    </div> -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="ExtralargeModal_department" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
                <div class="col-md-12">
                    <div class="modal-content">

                        <div class="modal-header">
                            <h5 class="modal-title">Department Details</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body">

                            <ul class="nav nav-tabs nav-tabs-bordered" id="borderedTab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="storehome-tab" data-bs-toggle="tab"
                                        data-bs-target="#bordered-storehome7" type="button" role="tab"
                                        aria-controls="storehome" aria-selected="true">View</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="storeedit-tab" data-bs-toggle="tab"
                                        data-bs-target="#bordered-storeedit7" type="button" role="tab"
                                        aria-controls="storeedit" aria-selected="false">Edit</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="storedelete-tab" data-bs-toggle="tab"
                                        data-bs-target="#bordered-storedelete7" type="button" role="tab"
                                        aria-controls="storedelete" aria-selected="false">Delete</button>
                                </li>
                            </ul>
                            <div class="tab-content pt-2" id="borderedTabContent">
                                <div class="tab-pane fade show active" id="bordered-storehome7" role="tabpanel"
                                    aria-labelledby="storehome-tab">


                                    <div class="row">
                                        <form class="row " id="add_department_master_view" method="POST">
                                            <input type="hidden" id="view_id" name="view_id">



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

                                                <div class="form-floating">
                                                    <input type="text" class="form-control" id="department_view"
                                                        name="department_view" placeholder="Add Department"
                                                        autocomplete="off" readonly>
                                                    <label for="revision">Add Department</label>
                                                    <p id="error1"></p>
                                                </div>

                                            </div>


                                        </form>



                                    </div>


                                    </form>

                                </div>
                                <div class="tab-pane fade" id="bordered-storeedit7" role="tabpanel"
                                    aria-labelledby="storeedit-tab">


                                    <div class="row">

                                        <form class="row" id="add_department_master_update">

                                            <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                            <input type="hidden" id="id_update" name="id_update">

                                            <div class="col-md-12">
                                                <div class="form-floating">
                                                    <input type="text" class="form-control" id="department_update"
                                                        name="department_update" placeholder="Add department_update"
                                                        autocomplete="off">
                                                    <label for="revision">Add Department</label>
                                                    <p id="error1_update_department"></p>
                                                </div>
                                            </div>

                                            <div class="text-center">
                                                <button type="submit" class="btn update-btn">Update</button>
                                                <button type="reset" onclick="reset_data_department();"
                                                    class="btn reset-btn">Reset</button>
                                                <input type="hidden" id="edit_reset_department_id"
                                                    name="edit_reset_id">
                                            </div>


                                        </form>

                                    </div>

                                    </form>

                                </div>
                                <div class="tab-pane fade" id="bordered-storedelete7" role="tabpanel"
                                    aria-labelledby="storedelete-tab">


                                    <div class="row">
                                        <form class="row" id="add_department_master_delete" method="POST">

                                            <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                            <input type="hidden" id="id_delete" name="id_delete">

                                            <div class="col-md-12">
                                                <div class="form-floating">
                                                    <input type="text" class="form-control" id="department_delete"
                                                        name="department_delete" placeholder="Add Location"
                                                        autocomplete="off" readonly>
                                                    <label for="revision">Add Department</label>
                                                    <p id="error1"></p>
                                                </div>
                                            </div>

                                            <div class="text-center">
                                                <button type="button" onclick="delete_department_data();"
                                                    id="submit_delete" class="btn delete-btn">Delete</button>

                                            </div>


                                        </form>




                                    </div>


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



        <div class="modal fade" id="ExtralargeModal_point_value" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
                <div class="col-md-12">
                    <div class="modal-content">

                        <div class="modal-header">
                            <h5 class="modal-title">Point Value Details</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body">

                            <ul class="nav nav-tabs nav-tabs-bordered" id="borderedTab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="storehome-tab" data-bs-toggle="tab"
                                        data-bs-target="#bordered-storehome8" type="button" role="tab"
                                        aria-controls="storehome" aria-selected="true">View</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="storeedit-tab" data-bs-toggle="tab"
                                        data-bs-target="#bordered-storeedit8" type="button" role="tab"
                                        aria-controls="storeedit" aria-selected="false">Edit</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="storedelete-tab" data-bs-toggle="tab"
                                        data-bs-target="#bordered-storedelete8" type="button" role="tab"
                                        aria-controls="storedelete" aria-selected="false">Delete</button>
                                </li>
                            </ul>
                            <div class="tab-content pt-2" id="borderedTabContent">
                                <div class="tab-pane fade show active" id="bordered-storehome8" role="tabpanel"
                                    aria-labelledby="storehome-tab">


                                    <div class="row">
                                        <form class="row " id="point_value_master_view" method="POST">
                                            <input type="hidden" id="view_id" name="view_id">

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

                                                <div class="form-floating">
                                                    <input type="text" class="form-control" id="point_value_view"
                                                        name="point_value_view" placeholder="Add Point Value"
                                                        autocomplete="off" readonly>
                                                    <label for="revision">Add Point Value</label>
                                                    <p id="error1"></p>
                                                </div>

                                            </div>


                                        </form>



                                    </div>


                                    </form>

                                </div>
                                <div class="tab-pane fade" id="bordered-storeedit8" role="tabpanel"
                                    aria-labelledby="storeedit-tab">

                                    <div class="row">

                                        <form class="row" id="add_point_value_master_update">

                                            <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                            <input type="hidden" id="id_update" name="id_update">

                                            <div class="col-md-12">
                                                <div class="form-floating">
                                                    <input type="text" class="form-control" id="point_value_update"
                                                        name="point_value_update" placeholder="Add point value"
                                                        autocomplete="off">
                                                    <label for="revision">Add Point Value</label>
                                                    <p id="error1_update_point_value"></p>
                                                </div>
                                            </div>

                                            <div class="text-center">
                                                <button type="submit" class="btn update-btn">Update</button>
                                                <button type="reset" onclick="reset_point_values();"
                                                    class="btn reset-btn">Reset</button>
                                                <input type="hidden" id="edit_reset_point_value"
                                                    name="edit_reset_id">
                                            </div>


                                        </form>

                                    </div>

                                    </form>

                                </div>
                                <div class="tab-pane fade" id="bordered-storedelete8" role="tabpanel"
                                    aria-labelledby="storedelete-tab">


                                    <div class="row">
                                        <form class="row" id="add_point_value_master_delete" method="POST">

                                            <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                            <input type="hidden" id="id_delete" name="id_delete">

                                            <div class="col-md-12">
                                                <div class="form-floating">
                                                    <input type="text" class="form-control" id="point_value_delete"
                                                        name="point_value_delete" placeholder="Add Location"
                                                        autocomplete="off" readonly>
                                                    <label for="revision">Add Point Value</label>
                                                    <p id="error1"></p>
                                                </div>
                                            </div>

                                            <div class="text-center">
                                                <button type="button" onclick="delete_point_value_data();"
                                                    id="submit_delete" class="btn delete-btn">Delete</button>

                                            </div>


                                        </form>




                                    </div>


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

        <div class="modal fade" id="ExtralargeModal_approved_name" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
                <div class="col-md-12">
                    <div class="modal-content">

                        <div class="modal-header">
                            <h5 class="modal-title">Approver Name Details</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body">

                            <ul class="nav nav-tabs nav-tabs-bordered" id="borderedTab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="storehome-tab" data-bs-toggle="tab"
                                        data-bs-target="#bordered-storehome9" type="button" role="tab"
                                        aria-controls="storehome" aria-selected="true">View</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="storeedit-tab" data-bs-toggle="tab"
                                        data-bs-target="#bordered-storeedit9" type="button" role="tab"
                                        aria-controls="storeedit" aria-selected="false">Edit</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="storedelete-tab" data-bs-toggle="tab"
                                        data-bs-target="#bordered-storedelete9" type="button" role="tab"
                                        aria-controls="storedelete" aria-selected="false">Delete</button>
                                </li>
                            </ul>
                            <div class="tab-content pt-2" id="borderedTabContent">
                                <div class="tab-pane fade show active" id="bordered-storehome9" role="tabpanel"
                                    aria-labelledby="storehome-tab">


                                    <div class="row">
                                        <form class="row " id="approver_name_master_view" method="POST">
                                            <input type="hidden" id="view_id" name="view_id">

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

                                                <div class="form-floating">
                                                    <input type="text" class="form-control" id="approver_name_view"
                                                        name="approver_name_view" placeholder="Add Point Value"
                                                        autocomplete="off" readonly>
                                                    <label for="revision"> Approver Name</label>
                                                    <p id="error1"></p>
                                                </div>



                                                <div class="form-floating">
                                                    <input type="hidden" id="hidden_approved_by_date_view"
                                                        name="hidden_approved_by_date_view">
                                                    <input type="text" class="form-control"
                                                        id="approved_by_date_view" name="approved_by_date_view"
                                                        placeholder="From Date" required="" readonly>
                                                    <label for="floatingEmail">Approved By Date </label>


                                                </div>


                                            </div>


                                        </form>



                                    </div>


                                    </form>

                                </div>
                                <div class="tab-pane fade" id="bordered-storeedit9" role="tabpanel"
                                    aria-labelledby="storeedit-tab">

                                    <div class="row">

                                        <form class="row" id="add_approver_name_master_update">

                                            <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                            <input type="hidden" id="id_update" name="id_update">

                                            <div class="col-md-12">
                                                <div class="form-floating">
                                                    <input type="text" class="form-control"
                                                        id="approver_name_update" name="approver_name_update"
                                                        placeholder="Add point value" autocomplete="off">
                                                    <label for="revision">Add Approver Name</label>
                                                    <p id="error1_update_approver_name"></p>
                                                </div>

                                                <div class="form-floating">
                                                    <input type="hidden" id="hidden_approved_by_date_update"
                                                        name="hidden_approved_by_date_update">
                                                    <input type="text" class="form-control"
                                                        id="approved_by_date_update" name="approved_by_date_update"
                                                        placeholder="From Date" required="" readonly>
                                                    <label for="floatingEmail">Approved By Date </label>


                                                </div>
                                            </div>

                                            <div class="text-center">
                                                <button type="submit" class="btn update-btn">Update</button>
                                                <button type="reset" onclick="reset_approver_name_update();"
                                                    class="btn reset-btn">Reset</button>
                                                <input type="hidden" id="reset_approver_name" name="edit_reset_id">
                                            </div>


                                        </form>

                                    </div>

                                    </form>

                                </div>
                                <div class="tab-pane fade" id="bordered-storedelete9" role="tabpanel"
                                    aria-labelledby="storedelete-tab">


                                    <div class="row">
                                        <form class="row" id="add_approver_name_master_delete" method="POST">

                                            <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                            <input type="hidden" id="id_delete" name="id_delete">

                                            <div class="col-md-12">
                                                <div class="form-floating">
                                                    <input type="text" class="form-control"
                                                        id="approver_name_delete" name="approver_name_delete"
                                                        placeholder="Add Location" autocomplete="off" readonly>
                                                    <label for="revision">Add Approver Name</label>
                                                    <p id="error1"></p>
                                                </div>

                                                <div class="form-floating">
                                                    <input type="hidden" id="hidden_approved_by_date_delete"
                                                        name="hidden_approved_by_date_delete">
                                                    <input type="text" class="form-control"
                                                        id="approved_by_date_delete" name="approved_by_date_delete"
                                                        placeholder="From Date" required="" readonly>
                                                    <label for="floatingEmail">Approved By Date </label>


                                                </div>
                                            </div>

                                            <div class="text-center">
                                                <button type="button" onclick="delete_approver_name_data();"
                                                    id="submit_delete" class="btn delete-btn">Delete</button>

                                            </div>


                                        </form>




                                    </div>


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


        <div class="modal fade" id="ExtralargeModal_reference_location" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
                <div class="col-md-12">
                    <div class="modal-content">

                        <div class="modal-header">
                            <h5 class="modal-title">Reference Location Details</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body">

                            <ul class="nav nav-tabs nav-tabs-bordered" id="borderedTab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="storehome-tab" data-bs-toggle="tab"
                                        data-bs-target="#bordered-storehome11" type="button" role="tab"
                                        aria-controls="storehome" aria-selected="true">View</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="storeedit-tab" data-bs-toggle="tab"
                                        data-bs-target="#bordered-storeedit11" type="button" role="tab"
                                        aria-controls="storeedit" aria-selected="false">Edit</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="storedelete-tab" data-bs-toggle="tab"
                                        data-bs-target="#bordered-storedelete11" type="button" role="tab"
                                        aria-controls="storedelete" aria-selected="false">Delete</button>
                                </li>
                            </ul>
                            <div class="tab-content pt-2" id="borderedTabContent">
                                <div class="tab-pane fade show active" id="bordered-storehome11" role="tabpanel"
                                    aria-labelledby="storehome-tab">


                                    <div class="row">
                                        <form class="row" id="reference_location_master_view" method="POST">
                                            <input type="hidden" id="view_id" name="view_id">

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


                                                <div class="form-floating">

                                                    <input type="text" class="form-control"
                                                        id="reference_division_view" name="reference_division_view"
                                                        placeholder="From Date" required="" readonly>

                                                    <label for="floatingName">Division</label>

                                                    <p id="error_reference_dividion"></p>
                                                </div>

                                                <div class="form-floating">

                                                    <input type="text" class="form-control"
                                                        id="reference_location_name_view"
                                                        name="reference_location_name_view" placeholder="From Date"
                                                        required="" readonly>
                                                    <label for="floatingEmail">Reference Location
                                                    </label>
                                                    <p id="error_reference_location_name"></p>

                                                </div>




                                            </div>


                                        </form>



                                    </div>


                                    </form>

                                </div>
                                <div class="tab-pane fade" id="bordered-storeedit11" role="tabpanel"
                                    aria-labelledby="storeedit-tab">

                                    <div class="row">

                                        <form class="row" id="reference_location_master_update">

                                            <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                            <input type="hidden" id="id_update" name="id_update">

                                            <div class="col-md-12">
                                                <div class="form-floating">
                                                    <select class="form-select" id="reference_division_update"
                                                        name="reference_division_update" aria-label=""
                                                        autocomplete="off" required="">

                                                    </select>

                                                    <label for="floatingName">Division</label>

                                                    <p id="error_reference_dividion_update"></p>
                                                </div>

                                                <div class="form-floating">

                                                    <input type="text" class="form-control"
                                                        id="reference_location_name_update"
                                                        name="reference_location_name_update"
                                                        placeholder="From Date" required="">
                                                    <label for="floatingEmail">Reference Location
                                                    </label>
                                                    <p id="error_reference_location_name_update"></p>

                                                </div>
                                            </div>

                                            <div class="text-center">
                                                <button type="submit" class="btn update-btn">Update</button>
                                                <button type="reset" onclick="reset_reference_location_update();"
                                                    class="btn reset-btn">Reset</button>
                                                <input type="hidden" id="reset_reference_location"
                                                    name="edit_reset_id">
                                            </div>


                                        </form>

                                    </div>

                                    </form>

                                </div>
                                <div class="tab-pane fade" id="bordered-storedelete11" role="tabpanel"
                                    aria-labelledby="storedelete-tab">


                                    <div class="row">
                                        <form class="row" id="reference_location_master_delete" method="POST">

                                            <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                            <input type="hidden" id="id_delete" name="id_delete">

                                            <div class="col-md-12">
                                                <div class="form-floating">
                                                    <input type="text" class="form-control"
                                                        id="reference_division_delete"
                                                        name="reference_division_delete" placeholder="From Date"
                                                        required="" readonly>


                                                    <label for="floatingName">Division</label>

                                                    <p id="error_reference_dividion_delete"></p>
                                                </div>

                                                <div class="form-floating">

                                                    <input type="text" class="form-control"
                                                        id="reference_location_name_delete"
                                                        name="reference_location_name_delete"
                                                        placeholder="From Date" required="" readonly>
                                                    <label for="floatingEmail">Reference Location
                                                    </label>
                                                    <p id="error_reference_location_name_delete"></p>

                                                </div>
                                            </div>

                                            <div class="text-center">
                                                <button type="button" onclick="delete_reference_location_data();"
                                                    id="submit_delete" class="btn delete-btn">Delete</button>

                                            </div>


                                        </form>




                                    </div>


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


        <div class="modal fade" id="ExtralargeModal_agent_name" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
                <div class="col-md-12">
                    <div class="modal-content">

                        <div class="modal-header">
                            <h5 class="modal-title">Agent Details</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body">

                            <ul class="nav nav-tabs nav-tabs-bordered" id="borderedTab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="storehome-tab-agent" data-bs-toggle="tab"
                                        data-bs-target="#bordered-storehome11-agent" type="button" role="tab"
                                        aria-controls="storehome" aria-selected="true">View</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="storeedit-tab-agent" data-bs-toggle="tab"
                                        data-bs-target="#bordered-storeedit11-agent" type="button" role="tab"
                                        aria-controls="storeedit" aria-selected="false">Edit</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="storedelete-tab-agent" data-bs-toggle="tab"
                                        data-bs-target="#bordered-storedelete11-agent" type="button" role="tab"
                                        aria-controls="storedelete" aria-selected="false">Delete</button>
                                </li>
                            </ul>
                            <div class="tab-content pt-2" id="borderedTabContent">
                                <div class="tab-pane fade show active" id="bordered-storehome11-agent"
                                    role="tabpanel" aria-labelledby="storehome-tab-agent">


                                    <div class="row">
                                        <form class="row" id="agent_master_view" method="POST">
                                            <input type="hidden" id="view_id" name="view_id">

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


                                                <div class="form-floating">

                                                    <input type="text" class="form-control" id="agent_name_view"
                                                        name="agent_name_view" placeholder="From Date" required=""
                                                        readonly>
                                                    <label for="floatingEmail">Agent Name
                                                    </label>
                                                    <p id="error_agent_name_view"></p>

                                                </div>




                                            </div>


                                        </form>



                                    </div>


                                    </form>

                                </div>
                                <div class="tab-pane fade" id="bordered-storeedit11-agent" role="tabpanel"
                                    aria-labelledby="storeedit-tab-agent">

                                    <div class="row">

                                        <form class="row" id="agent_master_update">

                                            <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                            <input type="hidden" id="id_update" name="id_update">

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


                                                <div class="form-floating">

                                                    <input type="text" class="form-control" id="agent_name_update"
                                                        name="agent_name_update" placeholder="From Date"
                                                        required="">
                                                    <label for="floatingEmail">Agent Name
                                                    </label>
                                                    <p id="error_agent_name_update"></p>

                                                </div>
                                            </div>

                                            <div class="text-center">
                                                <button type="submit" class="btn update-btn">Update</button>
                                                <button type="reset" onclick="reset_agent_update();"
                                                    class="btn reset-btn">Reset</button>
                                                <input type="hidden" id="reset_agent" name="edit_reset_id">
                                            </div>


                                        </form>

                                    </div>

                                    </form>

                                </div>
                                <div class="tab-pane fade" id="bordered-storedelete11-agent" role="tabpanel"
                                    aria-labelledby="storedelete-tab-agent">


                                    <div class="row">
                                        <form class="row" id="agent_master_delete" method="POST">

                                            <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                            <input type="hidden" id="id_delete" name="id_delete">

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


                                                <div class="form-floating">

                                                    <input type="text" class="form-control" id="agent_name_delete"
                                                        name="agent_name_delete" placeholder="From Date" required=""
                                                        readonly>
                                                    <label for="floatingEmail">Agent Name
                                                    </label>
                                                    <p id="error_agent_name_delete"></p>

                                                </div>
                                            </div>

                                            <div class="text-center">
                                                <button type="button" onclick="agent_delete_data();"
                                                    id="submit_delete" class="btn delete-btn">Delete</button>

                                            </div>


                                        </form>




                                    </div>


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


        <div class="modal fade" id="ExtralargeModal_hired_name" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
                <div class="col-md-12">
                    <div class="modal-content">

                        <div class="modal-header">
                            <h5 class="modal-title">Hired By Details</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body">

                            <ul class="nav nav-tabs nav-tabs-bordered" id="borderedTab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="storehome-tab-hired" data-bs-toggle="tab"
                                        data-bs-target="#bordered-storehome11-hired" type="button" role="tab"
                                        aria-controls="storehome" aria-selected="true">View</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="storeedit-tab-hired" data-bs-toggle="tab"
                                        data-bs-target="#bordered-storeedit11-hired" type="button" role="tab"
                                        aria-controls="storeedit" aria-selected="false">Edit</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="storedelete-tab-hired" data-bs-toggle="tab"
                                        data-bs-target="#bordered-storedelete11-hired" type="button" role="tab"
                                        aria-controls="storedelete" aria-selected="false">Delete</button>
                                </li>
                            </ul>
                            <div class="tab-content pt-2" id="borderedTabContent">
                                <div class="tab-pane fade show active" id="bordered-storehome11-hired"
                                    role="tabpanel" aria-labelledby="storehome-tab-hired">


                                    <div class="row">
                                        <form class="row" id="hired_by_name_master_view" method="POST">
                                            <input type="hidden" id="view_id" name="view_id">

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


                                                <div class="form-floating">

                                                    <input type="text" class="form-control" id="hired_name_view"
                                                        name="hired_name_view" placeholder="From Date" required=""
                                                        readonly>
                                                    <label for="floatingEmail">Hired By Name
                                                    </label>
                                                    <p id="error_hired_name_view"></p>

                                                </div>




                                            </div>


                                        </form>



                                    </div>


                                    </form>

                                </div>
                                <div class="tab-pane fade" id="bordered-storeedit11-hired" role="tabpanel"
                                    aria-labelledby="storeedit-tab-hired">

                                    <div class="row">

                                        <form class="row" id="hired_by_name_master_update">

                                            <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                            <input type="hidden" id="id_update" name="id_update">

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


                                                <div class="form-floating">

                                                    <input type="text" class="form-control" id="hired_name_update"
                                                        name="hired_name_update" autocomplete="off"
                                                        placeholder="From Date" required="">
                                                    <label for="floatingEmail">Hired By Name
                                                    </label>
                                                    <p id="error_hired_name_update"></p>

                                                </div>
                                            </div>

                                            <div class="text-center">
                                                <button type="submit" class="btn update-btn">Update</button>
                                                <button type="reset" onclick="reset_hired_by_name_update();"
                                                    class="btn reset-btn">Reset</button>
                                                <input type="hidden" id="reset_hired_name" name="reset_hired_name">
                                            </div>


                                        </form>

                                    </div>

                                    </form>

                                </div>
                                <div class="tab-pane fade" id="bordered-storedelete11-hired" role="tabpanel"
                                    aria-labelledby="storedelete-tab-hired">


                                    <div class="row">
                                        <form class="row" id="hired_by_name_master_delete" method="POST">

                                            <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                            <input type="hidden" id="id_delete" name="id_delete">

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


                                                <div class="form-floating">

                                                    <input type="text" class="form-control" id="hired_name_delete"
                                                        name="hired_name_delete" placeholder="From Date" required=""
                                                        readonly>
                                                    <label for="floatingEmail">Hired By Name
                                                    </label>
                                                    <p id="error_hired_name_delete"></p>

                                                </div>
                                            </div>

                                            <div class="text-center">
                                                <button type="button" onclick="hired_by_name_delete_data();"
                                                    id="submit_delete" class="btn delete-btn">Delete</button>

                                            </div>


                                        </form>




                                    </div>


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


        <div class="modal fade" id="ExtralargeModal_separation_mode" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
                <div class="col-md-12">
                    <div class="modal-content">

                        <div class="modal-header">
                            <h5 class="modal-title">Separation Mode Details</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body">

                            <ul class="nav nav-tabs nav-tabs-bordered" id="borderedTab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="storehome-tab-separation_mode"
                                        data-bs-toggle="tab" data-bs-target="#bordered-storehome11-separation-data"
                                        type="button" role="tab" aria-controls="storehome"
                                        aria-selected="true">View</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="storeedit-tab-separation-mode-edit"
                                        data-bs-toggle="tab"
                                        data-bs-target="#bordered-storeedit11-edit_separation_mode" type="button"
                                        role="tab" aria-controls="storeedit" aria-selected="false">Edit</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="storedelete-tab-separation_delete_data"
                                        data-bs-toggle="tab"
                                        data-bs-target="#bordered-storedelete11-separation_delete" type="button"
                                        role="tab" aria-controls="storedelete" aria-selected="false">Delete</button>
                                </li>
                            </ul>
                            <div class="tab-content pt-2" id="borderedTabContent">
                                <div class="tab-pane fade show active" id="bordered-storehome11-separation-data"
                                    role="tabpanel" aria-labelledby="storehome-tab-separation_mode">


                                    <div class="row">
                                        <form class="row" id="hired_by_name_master_view" method="POST">
                                            <input type="hidden" id="view_id" name="view_id">

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


                                                <div class="form-floating">

                                                    <input type="text" class="form-control"
                                                        id="separation_mode_view" name="separation_mode_view"
                                                        placeholder="From Date" required="" readonly>
                                                    <label for="floatingEmail">Separation Mode
                                                    </label>
                                                    <p id="error_separation_mode_view"></p>

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

                                </div>
                                <div class="tab-pane fade" id="bordered-storeedit11-edit_separation_mode"
                                    role="tabpanel" aria-labelledby="storeedit-tab-separation-mode-edit">

                                    <div class="row">

                                        <form class="row" id="separation_mode_master_update">

                                            <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                            <input type="hidden" id="id_update" name="id_update">

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


                                                <div class="form-floating">

                                                    <input type="text" class="form-control"
                                                        id="separation_mode_update" name="separation_mode_update"
                                                        autocomplete="off" placeholder="From Date" required="">
                                                    <label for="floatingEmail">Separation Mode
                                                    </label>
                                                    <p id="error_separation_mode_update"></p>

                                                </div>
                                            </div>

                                            <div class="text-center">
                                                <button type="submit" class="btn update-btn">Update</button>
                                                <button type="reset" onclick="reset_separation_mode_update();"
                                                    class="btn reset-btn">Reset</button>
                                                <input type="hidden" id="reset_separation_id"
                                                    name="reset_separation_id">
                                            </div>


                                        </form>

                                    </div>

                                    </form>

                                </div>
                                <div class="tab-pane fade" id="bordered-storedelete11-separation_delete"
                                    role="tabpanel" aria-labelledby="storedelete-tab-separation_delete_data">


                                    <div class="row">
                                        <form class="row" id="hired_by_name_master_delete" method="POST">

                                            <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                            <input type="hidden" id="id_delete" name="id_delete">

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


                                                <div class="form-floating">

                                                    <input type="text" class="form-control"
                                                        id="separation_mode_delete" name="separation_mode_delete"
                                                        placeholder="From Date" required="" readonly>
                                                    <label for="floatingEmail">Separation Mode
                                                    </label>
                                                    <p id="error_separation_mode_delete"></p>

                                                </div>
                                            </div>

                                            <div class="text-center">
                                                <button type="button" onclick="separation_mode_delete_data();"
                                                    id="submit_delete" class="btn delete-btn">Delete</button>

                                            </div>


                                        </form>




                                    </div>


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


        <div class="modal fade" id="ExtralargeModal_working_info" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
                <div class="col-md-12">
                    <div class="modal-content">

                        <div class="modal-header">
                            <h5 class="modal-title">Working Hours Details</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body">

                            <ul class="nav nav-tabs nav-tabs-bordered" id="borderedTab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="storehome-tab-separation_mode11"
                                        data-bs-toggle="tab" data-bs-target="#bordered-storehome1111-separation-data"
                                        type="button" role="tab" aria-controls="storehome"
                                        aria-selected="true">View</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="storeedit-tab-separation-mode-edit11"
                                        data-bs-toggle="tab"
                                        data-bs-target="#bordered-storeedit11-edit_separation_mode11" type="button"
                                        role="tab" aria-controls="storeedit" aria-selected="false">Edit</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="storedelete-tab-separation_delete_data11"
                                        data-bs-toggle="tab"
                                        data-bs-target="#bordered-storedelete11-separation_delete11" type="button"
                                        role="tab" aria-controls="storedelete" aria-selected="false">Delete</button>
                                </li>
                            </ul>
                            <div class="tab-content pt-2" id="borderedTabContent">
                                <div class="tab-pane fade show active" id="bordered-storehome1111-separation-data"
                                    role="tabpanel" aria-labelledby="storehome-tab-separation_mode11">


                                    <div class="row">
                                        <form class="row" id="outlet_working_master_view" method="POST">
                                            <input type="hidden" id="view_id" name="view_id">
                                            <div class="col-md-12">


                                                <div id="" class="form-floating mb-3">
                                                    <select class="form-control time-dropdown" name="view_outlet_opening_time" id="view_outlet_opening_time" placeholder="Outlet Opening Hour" required disabled>
                                                        <option value="" disabled selected>Select Time</option>
                                                        @for ($i = 0; $i < 24; $i++)
                                                            @php
                                                            $hour=$i % 12===0 ? 12 : $i % 12; // Convert 24-hour format to 12-hour format
                                                            $meridian=$i < 12 ? 'AM' : 'PM' ; // Determine AM or PM
                                                            @endphp
                                                            <option value="{{ $i }}:00 {{ $meridian }}">{{ $hour }}:00 {{ $meridian }}</option>
                                                            <option value="{{ $i }}:30 {{ $meridian }}">{{ $hour }}:30 {{ $meridian }}</option>
                                                            @endfor
                                                    </select>
                                                    <label for="">Outlet Opening Hour</label>
                                                    <p id="error_view_outlet_opening_time"></p>
                                                    {{-- <span class="required-symbol">*</span> --}}
                                                </div>

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


                                                <div id="" class="form-floating mb-3">
                                                    <select class="form-control time-dropdown" name="view_outlet_working_hours" id="view_outlet_working_hours" placeholder="Outlet Working Hour" required disabled>
                                                        <option value="" disabled selected>Select Hours</option>
                                                        @for ($i = 1; $i <= 24; $i++)
                                                            <option value="{{ $i }}">{{ $i }} Hours</option>
                                                            @endfor
                                                    </select>
                                                    <label for="">Outlet Working Hour</label>
                                                    <p id="error_view_outlet_working_hours"></p>
                                                    {{-- <span class="required-symbol">*</span> --}}
                                                </div>

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

                                                <div id="" class="form-floating mb-3">
                                                    <input
                                                        type="text"
                                                        class="form-control"
                                                        name="view_outlet_closing_hours"
                                                        id="view_outlet_closing_hours"
                                                        placeholder="Outlet Closing Hour"
                                                        readonly
                                                        required />
                                                    <label for="">Outlet Closing Hour </label>
                                                    <p id="error_view_outlet_closing_hours"></p>
                                                    {{-- <span class="required-symbol">*</span> --}}
                                                </div>

                                            </div>


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

                                                <div id="" class="form-floating">
                                                    <select class="form-control time-dropdown" name="view_shift_type" id="view_shift_type" placeholder="Shift Type" required disabled>
                                                        <option value="" disabled selected>Select Shift Type</option>
                                                        <option value="0">Day Shift</option>
                                                        <option value="1">Day/Night Shift</option>

                                                    </select>
                                                    <label for="">Shift Type</label>
                                                    <p id="error_view_shift_type"></p>
                                                    {{-- <span class="required-symbol">*</span> --}}
                                                </div>

                                            </div>

                                        </form>
                                    </div>

                                </div>
                                <div class="tab-pane fade" id="bordered-storeedit11-edit_separation_mode11"
                                    role="tabpanel" aria-labelledby="storeedit-tab-separation-mode-edit11">

                                    <div class="row">

                                        <form class="row" id="outlet_working_master_update">

                                            <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                            <input type="hidden" id="id_update" name="id_update">
                                            <div class="col-md-12">


                                                <div id="" class="form-floating mb-3">
                                                    <select class="form-control time-dropdown" name="edit_outlet_opening_time" id="edit_outlet_opening_time" placeholder="Outlet Opening Hour" required>
                                                        <option value="" disabled selected>Select Time</option>
                                                        @for ($i = 0; $i < 24; $i++)
                                                            @php
                                                            $hour=$i % 12===0 ? 12 : $i % 12; // Convert 24-hour format to 12-hour format
                                                            $meridian=$i < 12 ? 'AM' : 'PM' ; // Determine AM or PM
                                                            @endphp
                                                            <option value="{{ $i }}:00 {{ $meridian }}">{{ $hour }}:00 {{ $meridian }}</option>
                                                            <option value="{{ $i }}:30 {{ $meridian }}">{{ $hour }}:30 {{ $meridian }}</option>
                                                            @endfor
                                                    </select>
                                                    <label for="">Outlet Opening Hour</label>
                                                    <p id="error_edit_outlet_opening_time"></p>
                                                    {{-- <span class="required-symbol">*</span> --}}
                                                </div>

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


                                                <div id="" class="form-floating mb-3">
                                                    <select class="form-control time-dropdown" name="edit_outlet_working_hours" id="edit_outlet_working_hours" placeholder="Outlet Working Hour" required>
                                                        <option value="" disabled selected>Select Hours</option>
                                                        @for ($i = 1; $i <= 24; $i++)
                                                            <option value="{{ $i }}">{{ $i }} Hours</option>
                                                            @endfor
                                                    </select>
                                                    <label for="">Outlet Working Hour</label>
                                                    <p id="error_edit_outlet_working_hours"></p>
                                                    {{-- <span class="required-symbol">*</span> --}}
                                                </div>

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

                                                <div id="" class="form-floating mb-3">
                                                    <input
                                                        type="text"
                                                        class="form-control"
                                                        name="edit_outlet_closing_hours"
                                                        id="edit_outlet_closing_hours"
                                                        placeholder="Outlet Closing Hour"
                                                        readonly
                                                        required />
                                                    <label for="">Outlet Closing Hour </label>
                                                    <p id="error_edit_outlet_closing_hours"></p>
                                                    {{-- <span class="required-symbol">*</span> --}}
                                                </div>

                                            </div>


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

                                                <div id="" class="form-floating">
                                                    <select class="form-control time-dropdown" name="edit_shift_type" id="edit_shift_type" placeholder="Shift Type" required>
                                                        <option value="" disabled selected>Select Shift Type</option>
                                                        <option value="0">Day Shift</option>
                                                        <option value="1">Day/Night Shift</option>

                                                    </select>
                                                    <label for="">Shift Type</label>
                                                    <p id="error_edit_shift_type"></p>
                                                    {{-- <span class="required-symbol">*</span> --}}
                                                </div>

                                            </div>


                                            <div class="text-center">
                                                <button type="submit" class="btn update-btn">Update</button>
                                                <button type="reset" onclick="reset_outlet_wotking_information();"
                                                    class="btn reset-btn">Reset</button>
                                                <input type="hidden" id="reset_outlet_working_id"
                                                    name="reset_outlet_working_id">
                                            </div>


                                        </form>

                                    </div>

                                    </form>

                                </div>
                                <div class="tab-pane fade" id="bordered-storedelete11-separation_delete11"
                                    role="tabpanel" aria-labelledby="storedelete-tab-separation_delete_data11">


                                    <div class="row">
                                        <form class="row" id="outlet_working_master_delete" method="POST">

                                            <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                            <input type="hidden" id="id_delete" name="id_delete">

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


                                                <div id="" class="form-floating mb-3">
                                                    <select class="form-control time-dropdown" name="delete_outlet_opening_time" id="delete_outlet_opening_time" placeholder="Outlet Opening Hour" required disabled>
                                                        <option value="" disabled selected>Select Time</option>
                                                        @for ($i = 0; $i < 24; $i++)
                                                            @php
                                                            $hour=$i % 12===0 ? 12 : $i % 12; // Convert 24-hour format to 12-hour format
                                                            $meridian=$i < 12 ? 'AM' : 'PM' ; // Determine AM or PM
                                                            @endphp
                                                            <option value="{{ $i }}:00 {{ $meridian }}">{{ $hour }}:00 {{ $meridian }}</option>
                                                            <option value="{{ $i }}:30 {{ $meridian }}">{{ $hour }}:30 {{ $meridian }}</option>
                                                            @endfor
                                                    </select>
                                                    <label for="">Outlet Opening Hour</label>
                                                    <p id="error_delete_outlet_opening_time"></p>

                                                </div>

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


                                                <div id="" class="form-floating mb-3">
                                                    <select class="form-control time-dropdown" name="delete_outlet_working_hours" id="delete_outlet_working_hours" placeholder="Outlet Working Hour" required disabled>
                                                        <option value="" disabled selected>Select Hours</option>
                                                        @for ($i = 1; $i <= 24; $i++)
                                                            <option value="{{ $i }}">{{ $i }} Hours</option>
                                                            @endfor
                                                    </select>
                                                    <label for="">Outlet Working Hour</label>
                                                    <p id="error_delete_outlet_working_hours"></p>
                                                    {{-- <span class="required-symbol">*</span> --}}
                                                </div>

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

                                                <div id="" class="form-floating mb-3">
                                                    <input
                                                        type="text"
                                                        class="form-control"
                                                        name="delete_outlet_closing_hours"
                                                        id="delete_outlet_closing_hours"
                                                        placeholder="Outlet Closing Hour"
                                                        readonly
                                                        required />
                                                    <label for="">Outlet Closing Hour </label>
                                                    <p id="error_delete_outlet_closing_hours"></p>
                                                    {{-- <span class="required-symbol">*</span> --}}
                                                </div>

                                            </div>


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

                                                <div id="" class="form-floating">
                                                    <select class="form-control time-dropdown" name="delete_shift_type" id="delete_shift_type" placeholder="Shift Type" required disabled>
                                                        <option value="" disabled selected>Select Shift Type</option>
                                                        <option value="0">Day Shift</option>
                                                        <option value="1">Day/Night Shift</option>

                                                    </select>
                                                    <label for="">Shift Type</label>
                                                    <p id="error_delete_shift_type"></p>
                                                </div>

                                            </div>


                                            <div class="text-center">
                                                <button type="button" onclick="master_outlet_working_information_delete_data();"
                                                    id="submit_delete" class="btn delete-btn">Delete</button>

                                            </div>


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




        <div class="modal fade" id="ExtralargeModal_working_days" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered modal-xl">
                <div class="col-md-12">
                    <div class="modal-content">

                        <div class="modal-header">
                            <h5 class="modal-title">Working Days Details</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <ul class="nav nav-tabs nav-tabs-bordered" id="borderedTab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="storehome-tab-separation_mode"
                                        data-bs-toggle="tab" data-bs-target="#view_working_days"
                                        type="button" role="tab" aria-controls="storehome"
                                        aria-selected="true">View</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="storeedit-tab-separation-mode-edit"
                                        data-bs-toggle="tab"
                                        data-bs-target="#edit_working_days" type="button"
                                        role="tab" aria-controls="storeedit" aria-selected="false">Edit</button>
                                </li>

                            </ul>
                            <div class="tab-content pt-2" id="borderedTabContent">
                                <div class="tab-pane fade show active" id="view_working_days"
                                    role="tabpanel" aria-labelledby="storehome-tab-separation_mode">
                                    <div class="row">
                                        <form class="row g-3" id="working_days_view_form">

                                            <input type="hidden" name="_token"
                                                value="{{ csrf_token() }}">
                                            <div class="col-md-6">
                                                <div class="form-floating">
                                                    <input type="text" class="form-control"
                                                        id="view_working_days_name"
                                                        name="view_working_days_name"
                                                        placeholder="From Date" required="" maxlength="2" disabled>
                                                    <label for="floatingEmail">Name
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="col-md-6"></div>

                                            <table class="table table-bordered text-center" id="working_days_table_view">
                                                <thead>
                                                    <tr>
                                                        <th>Month</th>
                                                        <th>Working Days</th>
                                                        <th>Weekoff</th>
                                                        <th>Holiday</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @php
                                                    $months = [
                                                    'january', 'february', 'march', 'april', 'may', 'june',
                                                    'july', 'august', 'september', 'october', 'november', 'december'
                                                    ];
                                                    @endphp
                                                    @foreach($months as $month)
                                                    <tr>
                                                        <td>{{ ucfirst($month) }}</td>
                                                        <td>
                                                            <input type="text" style="text-align:center;" name="{{ $month }}[working]" id="view_working_{{ $month }}" class="form-control only-number" value="0" readonly>
                                                        </td>
                                                        <td>
                                                            <input type="text" style="text-align:center;" name="{{ $month }}[weekoff]" id="view_weekoff_{{ $month }}" class="form-control only-number" value="0" readonly>
                                                        </td>
                                                        <td>
                                                            <input type="text" style="text-align:center;" name="{{ $month }}[holiday]" id="view_holiday_{{ $month }}" class="form-control only-number" value="0" readonly>
                                                        </td>
                                                    </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>

                                            <!-- <div class="col-md-2">
                                                    <div class="form-floating">
                                                        <input type="text" class="form-control only-number"
                                                            id="view_january"
                                                            name="view_january"
                                                            disabled
                                                            placeholder="From Date" required="" maxlength="2">
                                                        <label for="floatingEmail">January</label>
                                                    </div>
                                                </div>
                                                <div class="col-md-2">
                                                    <div class="form-floating">
                                                        <input type="text" class="form-control only-number"
                                                            id="view_february"
                                                            name="view_february"
                                                            disabled
                                                            placeholder="From Date" required="" maxlength="2">
                                                        <label for="floatingEmail">February</label>
                                                    </div>
                                                </div>
                                                <div class="col-md-2">
                                                    <div class="form-floating">
                                                        <input type="text" class="form-control only-number"
                                                            id="view_march"
                                                            name="view_march"
                                                            disabled
                                                            placeholder="From Date" required="" maxlength="2">
                                                        <label for="floatingEmail">March</label>
                                                    </div>
                                                </div>
                                                <div class="col-md-2">
                                                    <div class="form-floating">
                                                        <input type="text" class="form-control only-number"
                                                            id="view_april"
                                                            name="view_april"
                                                            disabled
                                                            placeholder="From Date" required="" maxlength="2">
                                                        <label for="floatingEmail">April</label>
                                                    </div>
                                                </div>
                                                <div class="col-md-2">
                                                    <div class="form-floating">
                                                        <input type="text" class="form-control only-number"
                                                            id="view_may"
                                                            name="view_may"
                                                            disabled
                                                            placeholder="From Date" required="" maxlength="2">
                                                        <label for="floatingEmail">May</label>
                                                    </div>
                                                </div>
                                                <div class="col-md-2">
                                                    <div class="form-floating">
                                                        <input type="text" class="form-control only-number"
                                                            id="view_june"
                                                            name="view_june"
                                                            disabled
                                                            placeholder="From Date" required="" maxlength="2">
                                                        <label for="floatingEmail">June</label>
                                                    </div>
                                                </div>
                                                <div class="col-md-2">
                                                    <div class="form-floating">
                                                        <input type="text" class="form-control only-number"
                                                            id="view_july"
                                                            name="view_july"
                                                            disabled
                                                            placeholder="From Date" required="" maxlength="2">
                                                        <label for="floatingEmail">July</label>
                                                    </div>
                                                </div>
                                                <div class="col-md-2">
                                                    <div class="form-floating">
                                                        <input type="text" class="form-control only-number"
                                                            id="view_august"
                                                            name="view_august"
                                                            disabled
                                                            placeholder="From Date" required="" maxlength="2">
                                                        <label for="floatingEmail">August</label>
                                                    </div>
                                                </div>
                                                <div class="col-md-2">
                                                    <div class="form-floating">
                                                        <input type="text" class="form-control only-number"
                                                            id="view_september"
                                                            name="view_september"
                                                            disabled
                                                            placeholder="From Date" required="" maxlength="2">
                                                        <label for="floatingEmail">September</label>
                                                    </div>
                                                </div>
                                                <div class="col-md-2">
                                                    <div class="form-floating">
                                                        <input type="text" class="form-control only-number"
                                                            id="view_october"
                                                            name="view_october"
                                                            disabled
                                                            placeholder="From Date" required="" maxlength="2">
                                                        <label for="floatingEmail">October</label>
                                                    </div>
                                                </div>
                                                <div class="col-md-2">
                                                    <div class="form-floating">
                                                        <input type="text" class="form-control only-number"
                                                            id="view_november"
                                                            name="view_november"
                                                            disabled
                                                            placeholder="From Date" required="" maxlength="2">
                                                        <label for="floatingEmail">November</label>
                                                    </div>
                                                </div>
                                                <div class="col-md-2">
                                                    <div class="form-floating">
                                                        <input type="text" class="form-control only-number"
                                                            id="view_december"
                                                            name="view_december"
                                                            disabled
                                                            placeholder="From Date" required="" maxlength="2">
                                                        <label for="floatingEmail">december</label>
                                                    </div>
                                                </div> -->
                                        </form>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="edit_working_days"
                                    role="tabpanel" aria-labelledby="storeedit-tab-separation-mode-edit">

                                    <div class="row">
                                        <form class="row g-3" id="working_days_edit_form">

                                            <input type="hidden" name="_token"
                                                value="{{ csrf_token() }}">
                                            <input type="hidden" id="edit_working_days_id">
                                            <div class="col-md-6">
                                                <div class="form-floating">
                                                    <input type="text" class="form-control"
                                                        id="edit_working_days_name"
                                                        name="edit_working_days_name"
                                                        placeholder="From Date" required="" maxlength="2" disabled>
                                                    <label for="floatingEmail">Name</label>
                                                </div>
                                            </div>
                                            <div class="col-md-6"></div>
                                            <!-- <div class="col-md-2">
                                                    <div class="form-floating">
                                                        <input type="text" class="form-control only-number"
                                                            id="edit_january"
                                                            name="edit_january"
                                                            placeholder="From Date" required="" maxlength="2">
                                                        <label for="floatingEmail">January</label>
                                                        <p id="edit_january_error"></p>
                                                    </div>
                                                </div>
                                                <div class="col-md-2">
                                                    <div class="form-floating">
                                                        <input type="text" class="form-control only-number"
                                                            id="edit_february"
                                                            name="edit_february"
                                                            placeholder="From Date" required="" maxlength="2">
                                                        <label for="floatingEmail">February</label>
                                                        <p id="edit_february_error"></p>
                                                    </div>
                                                </div>
                                                <div class="col-md-2">
                                                    <div class="form-floating">
                                                        <input type="text" class="form-control only-number"
                                                            id="edit_march"
                                                            name="edit_march"

                                                            placeholder="From Date" required="" maxlength="2">
                                                        <label for="floatingEmail">March</label>
                                                        <p id="edit_march_error"></p>
                                                    </div>
                                                </div>
                                                <div class="col-md-2">
                                                    <div class="form-floating">
                                                        <input type="text" class="form-control only-number"
                                                            id="edit_april"
                                                            name="edit_april"

                                                            placeholder="From Date" required="" maxlength="2">
                                                        <label for="floatingEmail">April</label>
                                                        <p id="edit_april_error"></p>
                                                    </div>
                                                </div>
                                                <div class="col-md-2">
                                                    <div class="form-floating">
                                                        <input type="text" class="form-control only-number"
                                                            id="edit_may"
                                                            name="edit_may"

                                                            placeholder="From Date" required="" maxlength="2">
                                                        <label for="floatingEmail">May</label>
                                                        <p id="edit_may_error"></p>
                                                    </div>
                                                </div>
                                                <div class="col-md-2">
                                                    <div class="form-floating">
                                                        <input type="text" class="form-control only-number"
                                                            id="edit_june"
                                                            name="edit_june"
                                                            placeholder="From Date" required="" maxlength="2">
                                                        <label for="floatingEmail">June</label>
                                                        <p id="edit_june_error"></p>
                                                    </div>
                                                </div>
                                                <div class="col-md-2">
                                                    <div class="form-floating">
                                                        <input type="text" class="form-control only-number"
                                                            id="edit_july"
                                                            name="edit_july"
                                                            placeholder="From Date" required="" maxlength="2">
                                                        <label for="floatingEmail">July</label>
                                                        <p id="july_error"></p>
                                                    </div>
                                                </div>
                                                <div class="col-md-2">
                                                    <div class="form-floating">
                                                        <input type="text" class="form-control only-number"
                                                            id="edit_august"
                                                            name="edit_august"
                                                            placeholder="From Date" required="" maxlength="2">
                                                        <label for="floatingEmail">August</label>
                                                        <p id="edit_august_error"></p>
                                                    </div>
                                                </div>
                                                <div class="col-md-2">
                                                    <div class="form-floating">
                                                        <input type="text" class="form-control only-number"
                                                            id="edit_september"
                                                            name="edit_september"
                                                            placeholder="From Date" required="" maxlength="2">
                                                        <label for="floatingEmail">September</label>
                                                        <p id="edit_september_error"></p>
                                                    </div>
                                                </div>
                                                <div class="col-md-2">
                                                    <div class="form-floating">
                                                        <input type="text" class="form-control only-number"
                                                            id="edit_october"
                                                            name="edit_october"

                                                            placeholder="From Date" required="" maxlength="2">
                                                        <label for="floatingEmail">October</label>
                                                        <p id="edit_october_error"></p>
                                                    </div>
                                                </div>
                                                <div class="col-md-2">
                                                    <div class="form-floating">
                                                        <input type="text" class="form-control only-number"
                                                            id="edit_november"
                                                            name="edit_november"

                                                            placeholder="From Date" required="" maxlength="2">
                                                        <label for="floatingEmail">November</label>
                                                        <p id="edit_november_error"></p>
                                                    </div>
                                                </div>
                                                <div class="col-md-2">
                                                    <div class="form-floating">
                                                        <input type="text" class="form-control only-number"
                                                            id="edit_december"
                                                            name="edit_december"
                                                            placeholder="From Date" required="" maxlength="2">
                                                        <label for="floatingEmail">december</label>
                                                        <p id="edit_december_error"></p>
                                                    </div>
                                                </div> -->




                                            <table class="table table-bordered text-center" id="working_days_table_edit">
                                                <thead>
                                                    <tr>
                                                        <th>Month</th>
                                                        <th>Working Days</th>
                                                        <th>Weekoff</th>
                                                        <th>Holiday</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @php
                                                    $months = [
                                                    'january', 'february', 'march', 'april', 'may', 'june',
                                                    'july', 'august', 'september', 'october', 'november', 'december'
                                                    ];
                                                    @endphp
                                                    @foreach($months as $month)
                                                    <tr>
                                                        <td>{{ ucfirst($month) }}</td>
                                                        <td>
                                                            <input type="text" style="text-align:center;" name="{{ $month }}[working]" id="edit_working_{{ $month }}" class="form-control only-number" value="0" maxlength="2">
                                                        </td>
                                                        <td>
                                                            <input type="text" style="text-align:center;" name="{{ $month }}[weekoff]" id="edit_weekoff_{{ $month }}" class="form-control only-number" value="0" maxlength="2">
                                                        </td>
                                                        <td>
                                                            <input type="text" style="text-align:center;" name="{{ $month }}[holiday]" id="edit_holiday_{{ $month }}" class="form-control only-number" value="0" maxlength="2">
                                                        </td>
                                                    </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                            <div class="text-center">
                                                <button type="submit" class="btn submit-btn" id="submit">Submit</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="bordered-storedelete11-separation_delete"
                                    role="tabpanel" aria-labelledby="storedelete-tab-separation_delete_data">


                                    <div class="row">

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




        <div class="modal fade" id="ExtralargeModal_beyond_time" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">

                    <div class="modal-header">
                        <h5 class="modal-title">Beyond Time Details</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>

                    <div class="modal-body">

                        <!-- Nav Tabs -->
                        <ul class="nav nav-tabs nav-tabs-bordered" id="borderedTab" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="view-beyond-tab" data-bs-toggle="tab"
                                    data-bs-target="#view-beyond-time-tab" type="button" role="tab"
                                    aria-controls="storehome" aria-selected="true">View</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="view-edit-beyond-tab" data-bs-toggle="tab"
                                    data-bs-target="#view-edit-beyond-time-tab" type="button" role="tab"
                                    aria-controls="storeedit" aria-selected="false">Edit</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="view-delete-beyond-tab" data-bs-toggle="tab"
                                    data-bs-target="#view-delete-beyond-time-tab" type="button" role="tab"
                                    aria-controls="storedelete" aria-selected="false">Delete</button>
                            </li>
                        </ul>

                        <!-- Tab Content -->
                        <div class="tab-content pt-2" id="borderedTabContent">
                            <!-- View Tab -->
                            <div class="tab-pane fade show active" id="view-beyond-time-tab" role="tabpanel"
                                aria-labelledby="view-shift-type">
                                <form id="view_shift_type_form" method="POST">
                                    <input type="hidden" id="view_beyond_time_id" name="view_beyond_time_id">
                                    <div class="form-floating mt-3">
                                        <input type="text" class="form-control" id="view_beyond_time" name="view_beyond_time"
                                            placeholder="Enter minutes" autocomplete="off" readonly>
                                        <label for="view_beyond_time">beyond time</label>
                                    </div>

                                </form>
                            </div>

                            <!-- Edit Tab -->
                            <div class="tab-pane fade" id="view-edit-beyond-time-tab" role="tabpanel"
                                aria-labelledby="view-edit-shift-type">
                                <form id="view_edit_beyond_time_form">
                                    @csrf
                                    <input type="hidden" id="edit_beyond_time_id" name="edit_beyond_time_id" />
                                    <input type="hidden" name="_updatecsrftoken" value="{{ csrf_token() }}">

                                    <div class="form-floating mt-3">
                                        <input type="text" class="form-control" id="edit_beyond_time"
                                            name="edit_beyond_time" placeholder="Enter minutes" autocomplete="off" style="color:rgb(90, 93, 96)">
                                        <label for="edit_beyond_time">beyond time (Enter in Minutes)</label>
                                        <small id="edit_beyond_time_error"></small>
                                    </div>
                                    <div class="text-center mt-3">
                                        <button type="button" class="btn update-btn"
                                            onclick="update_beyond_time_data();">Update</button>
                                        <button type="button" class="btn reset-btn"
                                            id="update_beyond_time_reset_button">Reset</button>
                                    </div>
                                </form>
                            </div>

                            <!-- Delete Tab -->
                            <div class="tab-pane fade" id="view-delete-beyond-time-tab" role="tabpanel"
                                aria-labelledby="storedelete-tab">
                                <form id="view_delete_beyond_time_form" method="POST">
                                    @csrf
                                    <input type="hidden" id="view_delete_beyond_id" name="id" />
                                    <input type="hidden" name="_deletecsrftoken" value="{{ csrf_token() }}">
                                    <div class="form-floating mt-3">
                                        <input type="text" class="form-control" id="view_delete_beyond_time"
                                            name="view_delete_beyond_time" placeholder="beyond Time" autocomplete="off"
                                            readonly>
                                        <label for="view_delete_beyond_time">beyond time</label>

                                    </div>
                                    <div class="text-center mt-3">
                                        <button type="button" onclick="delete_beyond_time_data()" id="submit_delete"
                                            class="btn delete-btn">
                                            Delete
                                        </button>
                                    </div>
                                </form>
                            </div>

                        </div>
                    </div>

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


        <div class="modal fade" id="ExtralargeModal_shift_type" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">

                    <div class="modal-header">
                        <h5 class="modal-title">Shift Type Details</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>

                    <div class="modal-body">

                        <!-- Nav Tabs -->
                        <ul class="nav nav-tabs nav-tabs-bordered" id="borderedTab" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="view-shift-tab" data-bs-toggle="tab"
                                    data-bs-target="#view-shift-type" type="button" role="tab"
                                    aria-controls="storehome" aria-selected="true">View</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="view-edit-tab" data-bs-toggle="tab"
                                    data-bs-target="#view-edit-shift-type" type="button" role="tab"
                                    aria-controls="storeedit" aria-selected="false">Edit</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="view-delete-tab" data-bs-toggle="tab"
                                    data-bs-target="#view-delete-shift-type" type="button" role="tab"
                                    aria-controls="storedelete" aria-selected="false">Delete</button>
                            </li>
                        </ul>

                        <!-- Tab Content -->
                        <div class="tab-content pt-2" id="borderedTabContent">
                            <!-- View Tab -->
                            <div class="tab-pane fade show active" id="view-shift-type" role="tabpanel"
                                aria-labelledby="view-shift-type">
                                <form id="view_shift_type_form" method="POST">
                                    <input type="hidden" id="view_id" name="view_id">
                                    <div class="form-floating mt-3">
                                        <input type="text" class="form-control" id="view_outlet" name="view_outlet"
                                            placeholder="outlet" autocomplete="off" readonly>
                                        <label for="view_outlet">outlet</label>
                                        <p id="error1"></p>
                                    </div>
                                    <div class="form-floating mt-3">

                                        <select class="form-select " id="view_shift_type-input" name="view_shift_type-input" aria-label="" autocomplete="off" disabled>

                                            <option value="1">Morning</option>
                                            <option value="2">After Noon</option>
                                            <option value="3">Evening</option>
                                            <option value="4">Night</option>
                                        </select>

                                        <label for="view_shift_type-input">shift type</label>
                                        <p id="error1"></p>
                                    </div>
                                    <div class="form-floating mt-3">
                                        <input type="text" class="form-control  " id="view_start_time"
                                            name="view_start_time" placeholder="Add Department" autocomplete="off"
                                            readonly>
                                        <label for="view_start_time">start time</label>
                                        <p id="error1"></p>
                                    </div>
                                    <div class="form-floating mt-3">
                                        <input type="text" class="form-control " id="view_end_time"
                                            name="view_end_time" placeholder="End time" autocomplete="off" readonly>
                                        <label for="view_end_time">end time</label>
                                        <p id="error1"></p>
                                    </div>
                                </form>
                            </div>

                            <!-- Edit Tab -->
                            <div class="tab-pane fade" id="view-edit-shift-type" role="tabpanel"
                                aria-labelledby="view-edit-shift-type">
                                <form id="view_edit_shift_type_form">
                                    @csrf
                                    <input type="hidden" id="edit_id" name="id" />
                                    <input type="hidden" id="kitchen_id" name="kitchen_id" />

                                    <div class="form-floating mt-3">
                                        <input type="text" class="form-control" id="view_edit_outlet"
                                            name="view_outlet" placeholder="outlet" autocomplete="off" readonly>
                                        <label for="view_outlet">outlet</label>
                                        <small id="view_edit_outlet_error"></small>
                                    </div>
                                    <div class="form-floating mt-3">

                                        <select class="form-select " id="view_edit_shift_type" name="view_edit_shift_type" aria-label="" autocomplete="off">

                                            <option value="1">Morning</option>
                                            <option value="2">After Noon</option>
                                            <option value="3">Evening</option>
                                            <option value="4">Night</option>
                                        </select>

                                        <label for="view_shift_type">shift type</label>
                                        <small id="view_edit_shift_type_error"></small>
                                    </div>
                                    <div class="form-floating mt-3">
                                        <input type="text" class="form-control timepicker" id="view_edit_start_time"
                                            name="view_edit_start_time" placeholder="Start Time" autocomplete="off">
                                        <label for="view_start_time">start time</label>
                                        <small id="view_edit_start_time_error"></small>
                                    </div>
                                    <div class="form-floating mt-3">
                                        <input type="text" class="form-control timepicker" id="view_edit_end_time"
                                            name="view_edit_end_time" placeholder="End time" autocomplete="off">
                                        <label for="view_end_time">end time</label>
                                        <small id="view_edit_end_time_error"></small>
                                    </div>

                                    <div class="text-center mt-3">
                                        <button type="button" class="btn update-btn"
                                            onclick="update_status_type();">Update</button>
                                        <button type="button" class="btn reset-btn"
                                            id="update_reset_button">Reset</button>
                                        <input type="hidden" id="edit_reset_shift_id" name="edit_reset_id">
                                    </div>
                                </form>
                            </div>

                            <!-- Delete Tab -->
                            <div class="tab-pane fade" id="view-delete-shift-type" role="tabpanel"
                                aria-labelledby="storedelete-tab">
                                <form id="add_department_master_delete" method="POST">
                                    <input type="hidden" id="delete_id" name="id" />
                                    <input type="hidden" name="_deletecsrftoken" value="{{ csrf_token() }}">
                                    <div class="form-floating mt-3">
                                        <input type="text" class="form-control" id="view_delete_outlet"
                                            name="view_delete_outlet" placeholder="outlet" autocomplete="off"
                                            readonly>
                                        <label for="view_outlet">outlet</label>
                                        <p id="error1"></p>
                                    </div>
                                    <div class="form-floating mt-3">

                                        <select class="form-select " id="view_delete_shift_type" name="view_delete_shift_type" aria-label="" autocomplete="off" disabled>

                                            <option value="1">Morning</option>
                                            <option value="2">After Noon</option>
                                            <option value="3">Evening</option>
                                            <option value="4">Night</option>
                                        </select>

                                        <label for="view_shift_type">shift type</label>
                                        <p id="error1"></p>
                                    </div>
                                    <div class="form-floating mt-3">
                                        <input type="text" class="form-control" id="view_delete_start_time"
                                            name="view_delete_start_time" placeholder="Add Department"
                                            autocomplete="off" readonly>
                                        <label for="view_start_time">start time</label>
                                        <p id="error1"></p>
                                    </div>
                                    <div class="form-floating mt-3">
                                        <input type="text" class="form-control" id="view_delete_end_time"
                                            name="view_delete_end_time" placeholder="End time" autocomplete="off"
                                            readonly>
                                        <label for="view_end_time">end time</label>
                                        <p id="error1"></p>
                                    </div>
                                    <div class="text-center mt-3">
                                        <button type="button" onclick="delete_shift_type();" id="submit_delete"
                                            class="btn delete-btn">
                                            Delete
                                        </button>
                                    </div>
                                </form>
                            </div>

                        </div>
                    </div>

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







        </section>
        </div>
    </main><!-- End #main -->




    @include('layouts.footer');


    <link rel="stylesheet" href="//cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"
        integrity="sha512-rstIgDs0xPgmG6RX1Aba4KV5cWJbAMcvRCVmglpam9SoHZiUCyQVDdH2LPlxoHtrv17XWblE/V/PP+Tr04hbtA=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/additional-methods.min.js"
        integrity="sha512-6S5LYNn3ZJCIm0f9L6BCerqFlQ4f5MwNKq+EthDXabtaJvg3TuFLhpno9pcm+5Ynm6jdA9xfpQoMz2fcjVMk9g=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="//cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>


    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
    <link rel="stylesheet" href="\assets\css\clock.css">
    <script src="\assets\js\clock.js"></script>
    <link rel="stylesheet" href="\assets\js\multi-select-css.css">
    <script src="\assets\js\multi-select.js"></script>

    <script>
        var data = {};
        var arr = {};
        data['_token'] = "{{csrf_token()}}";
        arr['_token'] = "{{csrf_token()}}";

        $('.category_table').hide();


        // function reload() {
        //     location.reload();
        // }
        // SUBMIT HANDLER FUNCTION
        $(document).ready(function(e) {
            // $(".chosen-select").chosen();
            // $(".chosen-select2").chosen();

            $(".sd-CustomSelect").multipleSelect({
                selectAll: true,
                filter: true,
                minimumCountSelected: 1,
                onOptgroupClick: function(view) {
                    $(view).parents("label").addClass("selected-optgroup");
                }
            });
            //  $("#add_button_options").multipleSelect('checkAll');
            $(".sd-CustomSelect").css({
                display: "block",
                visibility: "visible"
            });




            $('#designation_data').validate({
                rules: {
                    designation: "required",
                },
                messages: {
                    designation: "This field is required",
                },
                highlight: function(element) {
                    $(element).addClass('error-border');
                    $(element).removeClass('success-border');
                },
                unhighlight: function(element) {
                    $(element).removeClass('error-border');
                    $(element).addClass('success-border');
                },
                errorPlacement: function(error, element) {
                    if (element.attr("name") == "designation") {
                        error.appendTo('#error6');
                    } else {
                        error.insertAfter(element);
                    }
                },

            })

            $.validator.addMethod("checkSelectedOptions", function(value, element) {
                alert()
                return $("#add_button_options").val().length > 0; // Ensure at least one option is selected
            }, "Please select at least one option.");


            $('#define_button_type').validate({
                rules: {
                    add_button_options: {
                        required: true,
                        checkSelectedOptions: true // Apply the custom validator
                    },
                    login_btn_type: "required"
                },
                messages: {
                    add_button_options: {
                        required: "This field is required",
                        checkSelectedOptions: "Please select at least one option."
                    },
                    login_btn_type: "This field is required",
                },
                highlight: function(element) {
                    $(element).addClass('error-border');
                    $(element).removeClass('success-border');
                },
                unhighlight: function(element) {
                    $(element).removeClass('error-border');
                    $(element).addClass('success-border');
                },
                errorPlacement: function(error, element) {
                    if (element.attr("name") == "add_button_options") {
                        error.appendTo('#add_button_options_error');
                    } else if (element.attr("name") == "login_btn_type") {
                        error.appendTo('#login_btn_type_error');
                    } else {
                        error.insertAfter(element);
                    }
                },

            })


            $('#department_data').validate({
                rules: {
                    department: "required",
                },
                messages: {
                    department: "This field is required",
                },
                highlight: function(element) {
                    $(element).addClass('error-border');
                    $(element).removeClass('success-border');
                },
                unhighlight: function(element) {
                    $(element).removeClass('error-border');
                    $(element).addClass('success-border');
                },
                errorPlacement: function(error, element) {
                    if (element.attr("name") == "department") {
                        error.appendTo('#error_department');
                    } else {
                        error.insertAfter(element);
                    }
                },

            })


            $('#agent_data').validate({
                rules: {
                    agent_name: "required",

                },
                messages: {
                    agent_name: "This field is required",

                },
                highlight: function(element) {
                    $(element).addClass('error-border');
                    $(element).removeClass('success-border');
                },
                unhighlight: function(element) {
                    $(element).removeClass('error-border');
                    $(element).addClass('success-border');
                },
                errorPlacement: function(error, element) {
                    if (element.attr("name") == "agent_name") {
                        error.appendTo('#error_agent');
                    } else {
                        error.insertAfter(element);
                    }
                },

            })



            // edit



            $('#add_login_type_update').validate({
                rules: {
                    edit_login_btn_type: "required",
                },
                messages: {
                    edit_login_btn_type: "This field is required",
                },
                highlight: function(element) {
                    $(element).addClass('error-border');
                    $(element).removeClass('success-border');
                },
                unhighlight: function(element) {
                    $(element).removeClass('error-border');
                    $(element).addClass('success-border');
                },
                errorPlacement: function(error, element) {
                    if (element.attr("name") == "edit_login_btn_type") {
                        error.appendTo('#edit_login_btn_type_error');
                    } else {
                        error.insertAfter(element);
                    }
                },

            })



            $('#add_designation_master_update').validate({
                rules: {
                    designation_update: "required",
                },
                messages: {
                    designation_update: "This field is required",
                },
                highlight: function(element) {
                    $(element).addClass('error-border');
                    $(element).removeClass('success-border');
                },
                unhighlight: function(element) {
                    $(element).removeClass('error-border');
                    $(element).addClass('success-border');
                },
                errorPlacement: function(error, element) {
                    if (element.attr("name") == "designation_update") {
                        error.appendTo('#error1_update_designation');
                    } else {
                        error.insertAfter(element);
                    }
                },

            })


            $('#add_department_master_update').validate({
                rules: {
                    department_update: "required",
                },
                messages: {
                    department_update: "This field is required",
                },
                highlight: function(element) {
                    $(element).addClass('error-border');
                    $(element).removeClass('success-border');
                },
                unhighlight: function(element) {
                    $(element).removeClass('error-border');
                    $(element).addClass('success-border');
                },
                errorPlacement: function(error, element) {
                    if (element.attr("name") == "department_update") {
                        error.appendTo('#error1_update_department');
                    } else {
                        error.insertAfter(element);
                    }
                },

            })


            $('#agent_master_update').validate({
                rules: {
                    agent_name_update: "required",

                },
                messages: {
                    agent_name_update: "This field is required",

                },
                highlight: function(element) {
                    $(element).addClass('error-border');
                    $(element).removeClass('success-border');
                },
                unhighlight: function(element) {
                    $(element).removeClass('error-border');
                    $(element).addClass('success-border');
                },
                errorPlacement: function(error, element) {
                    if (element.attr("name") == "agent_name_update") {
                        error.appendTo('#error_agent_name_update');
                    } else {
                        error.insertAfter(element);
                    }
                },

            })

            $('#outlet_working_information').validate({
                rules: {
                    outlet_opening_time: "required",
                    outlet_working_hours: "required",
                    outlet_closing_hours: "required",
                    shift_type: "required",

                },
                messages: {

                    outlet_opening_time: "This field is required",
                    outlet_working_hours: "This field is required",
                    outlet_closing_hours: "This field is required",
                    shift_type: "This field is required",

                },
                highlight: function(element) {
                    $(element).addClass('error-border');
                    $(element).removeClass('success-border');
                },
                unhighlight: function(element) {
                    $(element).removeClass('error-border');
                    $(element).addClass('success-border');
                },
                errorPlacement: function(error, element) {
                    if (element.attr("name") == "outlet_opening_time") {
                        error.appendTo('#error_mode_outlet_opening_time');
                    } else if (element.attr("name") == "outlet_working_hours") {
                        error.appendTo('#error_outlet_working_hours');
                    } else if (element.attr("name") == "outlet_closing_hours") {
                        error.appendTo('#error_outlet_closing_hours');
                    } else if (element.attr("name") == "shift_type") {
                        error.appendTo('#error_shift_type');
                    } else {
                        error.insertAfter(element);
                    }
                },

            })


            $('#outlet_working_master_update').validate({
                rules: {
                    edit_outlet_opening_time: "required",
                    edit_outlet_working_hours: "required",
                    edit_outlet_closing_hours: "required",
                    edit_shift_type: "required",

                },
                messages: {

                    edit_outlet_opening_time: "This field is required",
                    edit_outlet_working_hours: "This field is required",
                    edit_outlet_closing_hours: "This field is required",
                    edit_shift_type: "This field is required",

                },
                highlight: function(element) {
                    $(element).addClass('error-border');
                    $(element).removeClass('success-border');
                },
                unhighlight: function(element) {
                    $(element).removeClass('error-border');
                    $(element).addClass('success-border');
                },
                errorPlacement: function(error, element) {
                    if (element.attr("name") == "edit_outlet_opening_time") {
                        error.appendTo('#error_edit_outlet_opening_time');
                    } else if (element.attr("name") == "edit_outlet_working_hours") {
                        error.appendTo('#error_edit_outlet_working_hours');
                    } else if (element.attr("name") == "edit_outlet_closing_hours") {
                        error.appendTo('#error_edit_outlet_closing_hours');
                    } else if (element.attr("name") == "edit_shift_type") {
                        error.appendTo('#error_edit_shift_type');
                    } else {
                        error.insertAfter(element);
                    }
                },

            })








            function calculateClosingTime() {
                const openingTime = $("#outlet_opening_time").val();
                const workingHours = parseInt($("#outlet_working_hours").val());

                if (openingTime && workingHours) {

                    const [openingHour, openingMinute] = openingTime.split(":").map(Number);
                    let [hour, minute] = openingTime.split(':');
                    var formatted = minute.replace(/(AM|PM)$/i, '').trim();


                    const closingHour = (openingHour + workingHours) % 24;
                    const meridian = closingHour < 12 ? "AM" : "PM";
                    const closing12Hour = closingHour % 12 === 0 ? 12 : closingHour % 12;

                    const closingTime = `${closing12Hour}:${formatted} ${meridian}`;

                    $("#outlet_closing_hours").val(closingTime);
                }
            }

            $("#outlet_opening_time, #outlet_working_hours").on("change", function() {
                calculateClosingTime();
            });



            function calculateClosingTimeEdit() {
                const openingTime = $("#edit_outlet_opening_time").val();
                const workingHours = parseInt($("#edit_outlet_working_hours").val());

                if (openingTime && workingHours) {

                    const [openingHour, openingMinute] = openingTime.split(":").map(Number);
                    let [hour, minute] = openingTime.split(':');
                    var formatted = minute.replace(/(AM|PM)$/i, '').trim();

                    const closingHour = (openingHour + workingHours) % 24;
                    const meridian = closingHour < 12 ? "AM" : "PM";
                    const closing12Hour = closingHour % 12 === 0 ? 12 : closingHour % 12;

                    const closingTime = `${closing12Hour}:${formatted} ${meridian}`;


                    $("#edit_outlet_closing_hours").val(closingTime);
                }
            }

            $("#edit_outlet_opening_time, #edit_outlet_working_hours").on("change", function() {
                calculateClosingTimeEdit();
            });

            $(".only-number").on("input", function() {
                this.value = this.value.replace(/[^0-9]/g, ''); // Removes non-numeric characters
            });

            // 

            $('#working_days_form').validate({
                rules: {
                    january: "required",
                    february: "required",
                    march: "required",
                    april: "required",
                    may: "required",
                    june: "required",
                    july: "required",
                    august: "required",
                    september: "required",
                    october: "required",
                    november: "required",
                    december: "required",

                },
                messages: {
                    january: "This field is required",
                    february: "This field is required",
                    march: "This field is required",
                    april: "This field is required",
                    may: "This field is required",
                    june: "This field is required",
                    july: "This field is required",
                    august: "This field is required",
                    september: "This field is required",
                    october: "This field is required",
                    november: "This field is required",
                    december: "This field is required"
                },
                highlight: function(element) {
                    $(element).addClass('error-border');
                    $(element).removeClass('success-border');
                },
                unhighlight: function(element) {
                    $(element).removeClass('error-border');
                    $(element).addClass('success-border');
                },
                errorPlacement: function(error, element) {
                    if (element.attr("name") == "january") {
                        error.appendTo('#january_error');
                    } else if (element.attr("name") == "february") {
                        error.appendTo('#february');
                    } else if (element.attr("name") == "march") {
                        error.appendTo('#march_error');
                    } else if (element.attr("name") == "april") {
                        error.appendTo('#april');
                    } else if (element.attr("name") == "may") {
                        error.appendTo('#may_error');
                    } else if (element.attr("name") == "june") {
                        error.appendTo('#june_error');
                    } else if (element.attr("name") == "july") {
                        error.appendTo('#july_error');
                    } else if (element.attr("name") == "august") {
                        error.appendTo('#august_error');
                    } else if (element.attr("name") == "september") {
                        error.appendTo('#september_error');
                    } else if (element.attr("name") == "october") {
                        error.appendTo('#october_error');
                    } else if (element.attr("name") == "november") {
                        error.appendTo('#november_error');
                    } else if (element.attr("name") == "december") {
                        error.appendTo('#december_error');
                    } else {
                        error.insertAfter(element);
                    }
                },

            })

            $('#working_days_edit_form').validate({
                rules: {
                    edit_january: "required",
                    edit_february: "required",
                    edit_march: "required",
                    edit_april: "required",
                    edit_may: "required",
                    edit_june: "required",
                    edit_july: "required",
                    edit_august: "required",
                    edit_september: "required",
                    edit_october: "required",
                    edit_november: "required",
                    edit_december: "required",

                },
                messages: {
                    edit_january: "This field is required",
                    edit_february: "This field is required",
                    edit_march: "This field is required",
                    edit_april: "This field is required",
                    edit_may: "This field is required",
                    edit_june: "This field is required",
                    edit_july: "This field is required",
                    edit_august: "This field is required",
                    edit_september: "This field is required",
                    edit_october: "This field is required",
                    edit_november: "This field is required",
                    edit_december: "This field is required"
                },
                highlight: function(element) {
                    $(element).addClass('error-border');
                    $(element).removeClass('success-border');
                },
                unhighlight: function(element) {
                    $(element).removeClass('error-border');
                    $(element).addClass('success-border');
                },
                errorPlacement: function(error, element) {
                    if (element.attr("name") == "edit_january") {
                        error.appendTo('#edit_january_error');
                    } else if (element.attr("name") == "edit_february") {
                        error.appendTo('#edit_february');
                    } else if (element.attr("name") == "edit_march") {
                        error.appendTo('#edit_march_error');
                    } else if (element.attr("name") == "edit_april") {
                        error.appendTo('#edit_april');
                    } else if (element.attr("name") == "edit_may") {
                        error.appendTo('#edit_may_error');
                    } else if (element.attr("name") == "edit_june") {
                        error.appendTo('#edit_june_error');
                    } else if (element.attr("name") == "edit_july") {
                        error.appendTo('#edit_july_error');
                    } else if (element.attr("name") == "edit_august") {
                        error.appendTo('#edit_august_error');
                    } else if (element.attr("name") == "edit_september") {
                        error.appendTo('#edit_september_error');
                    } else if (element.attr("name") == "edit_october") {
                        error.appendTo('#edit_october_error');
                    } else if (element.attr("name") == "edit_november") {
                        error.appendTo('#edit_november_error');
                    } else if (element.attr("name") == "edit_december") {
                        error.appendTo('#edit_december_error');
                    } else {
                        error.insertAfter(element);
                    }
                },

            })






            //beyond time validaion start 
            $('#beyond_time_insert_form').validate({
                rules: {
                    beyond_time: {
                        required: true,
                    }
                },
                messages: {
                    beyond_time: {
                        required: "Enter Minutes"
                    }
                },
                errorPlacement: function(error, element) {
                    if (element.attr('name') == 'beyond_time') {
                        error.appendTo('#beyond_time_error');
                    }
                }
            })
            //beyond time validation end

            //beyond time update validaion start 
            $('#view_edit_beyond_time_form').validate({
                rules: {
                    edit_beyond_time: {
                        required: true,
                    }
                },
                messages: {
                    edit_beyond_time: {
                        required: "Enter Minutes"
                    }
                },
                errorPlacement: function(error, element) {
                    if (element.attr('name') == 'edit_beyond_time') {
                        error.appendTo('#edit_beyond_time_error');
                    }
                }
            })
            //beyond time update validation end












            $('#view_edit_shift_type_form').validate({
                rules: {
                    view_edit_outlet: {
                        required: true
                    },
                    view_edit_shift_type: {
                        required: true
                    },
                    view_edit_start_time: {
                        required: true
                    },
                    view_edit_end_time: {
                        required: true
                    }
                },
                messages: {
                    view_edit_outlet: {
                        required: "Select outlet"
                    },
                    view_edit_shift_type: {
                        required: "Enter Shift "
                    },
                    view_edit_start_time: {
                        required: "choose start time"
                    },
                    view_edit_end_time: {
                        required: "choose end time"
                    }
                },
                errorPlacement: function(error, element) {
                    if (element.attr('name') == 'view_edit_outlet') {
                        error.appendTo('#view_edit_outlet_error')
                    } else if (element.attr('name') == "view_edit_shift_type") {
                        error.appendTo('#view_edit_shift_type_error')
                    } else if (element.attr('name') == 'view_edit_start_time') {
                        error.appendTo('#view_edit_start_time_error')
                    } else if (element.attr('name') == 'view_edit_end_time') {
                        error.appendTo('#view_edit_end_time_error')
                    }
                }
            })


            // shift form validation start
            $('#shift_type_form').validate({
                rules: {
                    outlet: {
                        required: true
                    },
                    shift_type: {
                        required: true
                    },
                    d_start_time_daily_view: {
                        required: true
                    },
                    d_to_time_daily_view: {
                        required: true
                    }


                },
                messages: {
                    outlet: {
                        required: "Select outlet"
                    },
                    shift_type: {
                        required: "Enter Shift "
                    },
                    d_start_time_daily_view: {
                        required: "choose start time"
                    },
                    d_to_time_daily_view: {
                        required: "choose end time"
                    },

                },
                errorPlacement: function(error, element) {
                    if (element.attr('name') == 'outlet') {
                        error.appendTo('#outlet_error')

                    } else if (element.attr('name') == "shift_type") {
                        error.appendTo('#shift_type_error')
                    } else if (element.attr('name') == 'd_start_time_daily_view') {
                        error.appendTo('#start_time_error')
                    } else if (element.attr('name') == 'd_to_time_daily_view') {
                        error.appendTo('#end_time_error')
                    }
                }
            })

            get_shift_type_data();

            $('.timepicker').mdtimepicker();


















            $("#pageloader").fadeIn();
            Load_designation_data();
            // $("#pageloader").fadeIn();
            // load_buttons_names();
            $("#pageloader").fadeIn();
            Load_data_department();
            $("#pageloader").fadeIn();
            Load_agent_name();
            $("#pageloader").fadeIn();
            Load_mode_of_separation();
            $("#pageloader").fadeIn();
            Load_outlet_info();
            load_buttons_names();
            getemployeeList();
            load_working_days();

            get_beyond_time_data();


        });



        $('#beyond_time,#edit_beyond_time').on('input', function() {
            this.value = this.value.replace(/[^0-9]/g, '');
        });
        //only numbes allowed in beyond time input end


        // add designation


        $('#designation_data').submit(function(e) {
            e.preventDefault();
            if ($('#designation_data').valid()) {
                var data = {};
                var designation = $("#designation").val();
                data['designation'] = designation;
                data['_token'] = "{{ csrf_token() }}";
                $.ajax({
                    url: 'add_designation_master',
                    type: "POST",
                    data: data,
                    success: function(returndata) {
                        var obj = jQuery.parseJSON(returndata);
                        if (obj == 'Exist') {
                            alert(' Data already Exist!');
                            $("#designation").val('');
                        } else {
                            alert('Designation Inserted Successfully');
                            $("#designation").val('');
                            $(".btn-close").click();
                            Load_designation_data();
                            reset();
                        }
                    },

                });

            }
        })




        function Load_designation_data() {
            $('#view_master_data_designation').DataTable().destroy();
            var table = $('#view_master_data_designation').DataTable({
                "ordering": true,
                "order": [0, 'desc'],
                "scrollY": "400px",
                "scrollX": true,
                "scrollCollapse": true,
                "bPaginate": false,
                "responsive": true,
                "ajax": {
                    url: "get_master_designation", // Ajax request
                    type: "get",
                    dataSrc: data,
                },

                "columns": [{
                        "data": "id",
                        "title": "#"
                    },

                    {
                        "data": "designation",
                        "title": "designation"
                    },
                    {
                        data: 'id',
                        render: function(data, full, type) {
                            return '<input type="hidden" id="table_id"   value="' + data +
                                '"></input> <button style="background: #d9a441 !important;color:#F2E2D2;border: 1px solid #d9a441;" data-bs-toggle="modal" data-bs-target="#ExtralargeModal_designation" type="button" class="btn" onclick="viewmodel_designation(' +
                                data +
                                ')"><i class="fa-solid fa-pen-to-square style_actions"></i></button>';

                        },
                        "title": "Action"
                    }



                ],
                columnDefs: [

                    {
                        "width": "5%",
                        "targets": [0],
                        "orderable": false,
                        "className": "dt-center",
                        "searching": true,
                    }, // data alignments  
                    {
                        "width": "10%",
                        "targets": [1],
                        "className": "dt-center"
                    },

                    {
                        "width": "5%",
                        "targets": [2],
                        "className": "dt-center",

                        "searching": true,
                    },


                ],

                initComplete: function() {

                    $("#pageloader").fadeOut();

                }
            });
            table.on('order.dt search.dt', function() {
                let i = 1;

                table.cells(null, 0, {
                    search: 'applied',
                    order: 'applied'
                }).every(function(cell) {
                    this.data(i++);
                });
            }).draw();

             $(".toggle-sidebar-icon").click(function() {
                setTimeout(function() {
                    table.columns.adjust().draw();
                }, 300);
            });

        }



        function reset_data_designation() {
            var id = $("#edit_reset_desi_id").val();
            // $("#edit_reason").val('');
            viewmodel_designation(id);
        }


        function viewmodel_designation(id) {


            var data = {};
            data['id'] = id;
            data['_token'] = "{{ csrf_token() }}";

            $("#edit_reset_desi_id").val(id);
            $("#add_designation_master_update")[0].reset();
            $("#id_update").val(id);


            $.ajax({
                type: 'post',
                url: "retrive_designation_for_edit_update_delete",
                data: data,
                success: function(returnData) {
                    console.log(returnData);
                    var obj = jQuery.parseJSON(returnData);

                    // VIEW
                    $('#view_id').val(obj[0]['id']);
                    $('#designation_view').val(obj[0]['designation']);


                    // Update
                    $('#id_update').val(obj[0]['id']);
                    $('#designation_update').val(obj[0]['designation']);


                    // delete
                    $('#id_delete').val(obj[0]['id']);
                    $('#designation_delete').val(obj[0]['designation']);


                }
            });


        }

        function delete_designation_data() {

            var data = {};
            var id_delete = $('#id_delete').val();
            data['id_delete'] = id_delete;
            data['_token'] = "{{ csrf_token() }}";
            $.ajax({
                type: 'post',
                url: 'delete_designation_masters',
                data: data,
                success: function(returnData) {

                    var data = jQuery.parseJSON(returnData);
                    if (data == 'deleted') {
                        alert("Designation Deleted Successfully");
                        $("#add_designation_master_delete")[0].reset();
                        $(".btn-close").click();
                        Load_designation_data();
                    }
                }
            })

        }



        $('#add_designation_master_update').submit(function(e) {
            e.preventDefault();
            if ($('#add_designation_master_update').valid()) {

                var data = {};
                var id_update = $('#id_update').val();
                var designation_update = $("#designation_update").val();


                data['id_update'] = id_update;
                data['designation_update'] = designation_update;

                data['_token'] = "{{ csrf_token() }}";

                $.ajax({
                    type: 'POST',
                    url: 'update_designation_master_data',
                    data: data,
                    success: function(result) {
                        var obj = jQuery.parseJSON(result);

                        if (obj == 'Exist') {
                            alert(' Data already Exist!');
                            $("#designation_update").val('');

                        } else {
                            $(".btn-close").click();
                            alert('Designation Updated Successfully');
                            $("#designation_update").val('');
                            Load_designation_data();

                        }
                    }
                })
            }
        })

        // Login type
        $('#define_button_type').submit(function(e) {
            e.preventDefault();
            if ($('#define_button_type').valid()) {
                let data = {};
                var buttons = $("#add_button_options").val();
                var login_type = $("#login_btn_type").val();
                if (buttons.length <= 0) {
                    alert("Seelct Correct Options")
                    return;
                }
                data['_token'] = "{{ csrf_token() }}";
                data['buttons'] = buttons;
                data['login_type'] = login_type;
                $.ajax({
                    url: 'add_login_buttons_type',
                    type: "POST",
                    data: data,
                    success: function(returndata) {
                        var obj = jQuery.parseJSON(returndata);
                        if (obj.message == 'exist') {
                            alert(' Data already Exist!');
                            $("#add_button_options").val('');
                            return;
                        }
                        alert('Buttons Inserted Successfully');
                        $("#add_button_options").val('');
                        $(".btn-close").click();
                        load_buttons_names();
                        reset();

                    },

                });

            }
        })

        function load_buttons_names() {
            $('#view_master_data_location').DataTable().destroy();
            var table = $('#view_master_data_location').DataTable({
                "ordering": true,
                "order": [0, 'desc'],
                "scrollY": "400px",
                "scrollX": true,
                "scrollCollapse": true,
                "bPaginate": false,
                "responsive": true,
                "ajax": {
                    url: "get_button_type_Names", // Ajax request
                    type: "get",
                    dataSrc: data,
                },

                "columns": [{
                        "data": "id",
                        "title": "#"
                    },

                    {
                        "data": "button_name",
                        "title": "button Names"
                    },
                    {
                        data: 'id',
                        render: function(data, full, type) {
                            return '<input type="hidden" id="table_id"  value="' + data +
                                '"></input> <button data-bs-toggle="modal" style="background: #d9a441 !important;color:#F2E2D2;border: 1px solid #d9a441;" data-bs-target="#ExtralargeModal_location" type="button" class="btn" onclick="viewmodel_location(' +
                                data +
                                ')"><i class="fa-solid fa-pen-to-square style_actions"></i></button>';

                        },
                        "title": "Action"
                    }

                ],
                columnDefs: [

                    {
                        "width": "5%",
                        "targets": [0],
                        "orderable": false,
                        "className": "dt-center",
                        "searching": true,
                    }, // data alignments  
                    {
                        "width": "10%",
                        "targets": [1],
                        "className": "dt-center"
                    },

                    {
                        "width": "5%",
                        "targets": [2],
                        "className": "dt-center",

                        "searching": true,
                    },


                ],

                initComplete: function() {

                    $("#pageloader").fadeOut();

                }
            });
            table.on('order.dt search.dt', function() {
                let i = 1;

                table.cells(null, 0, {
                    search: 'applied',
                    order: 'applied'
                }).every(function(cell) {
                    this.data(i++);
                });
            }).draw();

             $(".toggle-sidebar-icon").click(function() {
                setTimeout(function() {
                    table.columns.adjust().draw();
                }, 300);
            });
        }

        function reset_data_location() {
            var id = $("#edit_reset_location_id").val();
            // $("#edit_reason").val('');
            viewmodel_location(id);
        }



        function viewmodel_location(id) {
            let data = {};
            data['id'] = id;
            data['_token'] = "{{ csrf_token() }}";
            $("#edit_reset_location_id").val(id);
            $("#add_login_type_update")[0].reset();
            $("#id_update").val(id);
            $.ajax({
                type: 'post',
                url: "get_buttons_type",
                data: data,
                success: function(returnData) {
                    let info = JSON.parse(returnData)
                    var options = info[0]['button_name'];
                    $("#view_logintype").val(options)
                    $("#view_login_btn_type").val(info[0]['login_type'])

                    // edit
                    var cleaned_ids = options.split('|');
                    $("#id_update").val(info[0]['id'])

                    $('#edit_add_button_options').multipleSelect('setSelects', cleaned_ids);
                    // $('.chosen-select').val(cleaned_ids).trigger('chosen:updated');
                    $("#edit_login_btn_type").val(info[0]['login_type'])
                }
            });
        }

        function delete_location_data() {

            var data = {};
            var id_delete = $('#id_delete').val();
            data['id_delete'] = id_delete;
            data['_token'] = "{{ csrf_token() }}";
            $.ajax({
                type: 'post',
                url: 'delete_location_masters',
                data: data,
                success: function(returnData) {

                    var data = jQuery.parseJSON(returnData);
                    if (data == 'delete') {
                        alert("Location Deleted Successfully");
                        $("#add_location_master_delete")[0].reset();
                        $(".btn-close").click();
                        load_buttons_names();
                    }
                }
            })

        }

        $('#add_login_type_update').submit(function(e) {
            e.preventDefault();
            if ($('#add_login_type_update').valid()) {

                var data = {};
                var id_update = $('#id_update').val();
                var edit_add_button_options = $("#edit_add_button_options").val();
                // alert(edit_add_button_options)
                var login_type = $("#edit_login_btn_type").val();
                if (edit_add_button_options.length <= 0) {
                    alert("Select Correct Options");
                    return;
                }
                data['id_update'] = id_update;
                data['edit_buttons'] = edit_add_button_options;
                data['login_type'] = login_type;
                data['_token'] = "{{ csrf_token() }}";

                $.ajax({
                    type: 'POST',
                    url: 'update_add_login_type',
                    data: data,
                    success: function(result) {
                        var obj = jQuery.parseJSON(result);
                        alert('Buttons Updated Successfully');
                        $(".btn-close").click();
                        load_buttons_names();
                    }
                })
            }
        })


        // department




        $('#department_data').submit(function(e) {
            e.preventDefault();
            if ($('#department_data').valid()) {
                var data = {};
                var department = $("#department").val();
                data['department'] = department;
                data['_token'] = "{{ csrf_token() }}";
                $.ajax({
                    url: 'add_department_master_data',
                    type: "POST",
                    data: data,
                    success: function(returndata) {
                        var obj = jQuery.parseJSON(returndata);
                        if (obj == 'exist') {
                            alert(' Data already Exist!');
                            $("#department").val('');
                        } else {
                            alert('Department Inserted Successfully');
                            $("#department").val('');
                            $(".btn-close").click();
                            Load_data_department();
                            reset();
                        }
                    },

                });

            }
        })


        function Load_data_department() {
            $('#view_master_data_department').DataTable().destroy();
            var table = $('#view_master_data_department').DataTable({
                "ordering": true,
                "order": [0, 'desc'],
                "scrollY": "400px",
                "scrollX": true,
                "scrollCollapse": true,
                "bPaginate": false,
                "responsive": true,
                "ajax": {
                    url: "get_department_data", // Ajax request
                    type: "get",
                    dataSrc: data,
                },

                "columns": [{
                        "data": "id",
                        "title": "#"
                    },

                    {
                        "data": "department",
                        "title": "Department"
                    },
                    {
                        "data": "id",
                        render: function(data, full, type) {
                            return '<button data-bs-toggle="modal" style="background: #d9a441 !important;color:#F2E2D2;border: 1px solid #d9a441;" data-bs-target="#ExtralargeModal_department" type="submit" class="btn" onclick="viewmodel_department(\'' +
                                data +
                                '\')"><i class="fa-solid fa-pen-to-square style_actions"></i></button>';
                        }
                    }

                ],
                columnDefs: [

                    {
                        "width": "2%",
                        "targets": [0],
                        "orderable": true,
                        "className": "dt-center",
                        "searching": false
                    },
                    {
                        "width": "15%",
                        "targets": [1],
                        "className": "dt-center"
                    },
                    {
                        "width": "20%",
                        "targets": [2],
                        "className": "dt-center"
                    }



                ],

                initComplete: function() {
                    $("#pageloader").fadeOut();

                }

            });
            table.on('order.dt search.dt', function() {
                let i = 1;

                table.cells(null, 0, {
                    search: 'applied',
                    order: 'applied'
                }).every(function(cell) {
                    this.data(i++);
                });
            }).draw();

             $(".toggle-sidebar-icon").click(function() {
                setTimeout(function() {
                    table.columns.adjust().draw();
                }, 300);
            });

        }


        function reset_data_department() {
            var id = $("#edit_reset_department_id").val();
            // $("#edit_reason").val('');
            viewmodel_department(id);
        }



        function viewmodel_department(id) {


            var data = {};
            data['id'] = id;
            data['_token'] = "{{ csrf_token() }}";

            $("#edit_reset_department_id").val(id);
            $("#add_department_master_update")[0].reset();
            $("#id_update").val(id);


            $.ajax({
                type: 'post',
                url: "retrive_per_department_for_edit_update_delete",
                data: data,
                success: function(returnData) {
                    console.log(returnData);
                    var obj = jQuery.parseJSON(returnData);

                    // VIEW
                    $('#id_view').val(obj[0]['id']);
                    $('#department_view').val(obj[0]['department']);


                    // Update
                    $('#id_update').val(obj[0]['id']);
                    $('#department_update').val(obj[0]['department']);


                    // delete
                    $('#id_delete').val(obj[0]['id']);
                    $('#department_delete').val(obj[0]['department']);


                }
            });


        }


        // update
        $('#add_department_master_update').submit(function(e) {
            e.preventDefault();
            if ($('#add_department_master_update').valid()) {

                var data = {};
                var id_update = $('#id_update').val();
                var department_update = $("#department_update").val();


                data['id_update'] = id_update;
                data['department_update'] = department_update;

                data['_token'] = "{{ csrf_token() }}";

                $.ajax({
                    type: 'POST',
                    url: 'update_department',
                    data: data,
                    success: function(result) {
                        var obj = jQuery.parseJSON(result);

                        if (obj == 'Exist') {
                            alert(' Data already Exist!');
                            $("#department_update").val('');

                        } else {
                            alert('Department Updated Successfully');
                            $(".btn-close").click();
                            Load_data_department();
                            // reset_data_department();
                            $('#id_update').val('');
                            $("#department_update").val('');

                        }
                    }
                })
            }
        })

        function delete_department_data() {

            var data = {};
            var id_delete = $('#id_delete').val();
            data['id_delete'] = id_delete;
            data['_token'] = "{{ csrf_token() }}";
            $.ajax({
                type: 'post',
                url: 'delete_department_masters',
                data: data,
                success: function(returnData) {

                    var data = jQuery.parseJSON(returnData);
                    if (data == 'delete') {
                        alert("Department  Deleted Successfully");
                        $("#add_department_master_delete")[0].reset();
                        $(".btn-close").click();
                        Load_data_department();
                    }
                }
            })

        }

        // add agent




        $('#agent_data').submit(function(e) {
            e.preventDefault();
            if ($('#agent_data').valid()) {
                var data = {};

                var agent_name = $('#agent_name').val();
                data['agent_name'] = agent_name;

                data['_token'] = "{{ csrf_token() }}";
                $.ajax({
                    url: 'add_agent_data',
                    type: "POST",
                    data: data,
                    success: function(returndata) {
                        var obj = jQuery.parseJSON(returndata);
                        if (obj == 'exist') {
                            alert('Data already Exist!');
                            $("#agent_name").val('');


                        } else {
                            alert('Agent Added Successfully');
                            $(".btn-close").click();
                            $("#agent_name").val('');

                            Load_agent_name();
                            // reset();
                        }
                    },

                });

            }
        })


        function Load_agent_name() {
            $('#agent_table_data').DataTable().destroy();
            var table = $('#agent_table_data').DataTable({
                "ordering": true,
                "order": [0, 'desc'],
                "scrollY": "400px",
                "scrollX": true,
                "scrollCollapse": true,
                "bPaginate": false,
                "responsive": true,
                "ajax": {
                    url: "get_agent_data", // Ajax request
                    type: "get",
                    data: data,


                },

                "columns": [{
                        "data": "id",
                        "title": "#"
                    },
                    {
                        "data": "agent_name",
                        "title": "Agent Name"
                    },
                    {
                        "data": "id",
                        render: function(data, full, type) {
                            return '<button data-bs-toggle="modal" style="background: #d9a441 !important;color:#F2E2D2;border: 1px solid #d9a441;" data-bs-target="#ExtralargeModal_agent_name" type="submit" class="btn" onclick="viewmodel_agent(\'' +
                                data +
                                '\')"><i class="fa-solid fa-pen-to-square style_actions"></i></button>';
                        }
                    }

                ],
                columnDefs: [

                    {
                        "width": "2%",
                        "targets": [0],
                        "orderable": true,
                        "className": "dt-center",
                        "searching": false
                    },
                    {
                        "width": "15%",
                        "targets": [1],
                        "className": "dt-center"
                    },
                    {
                        "width": "20%",
                        "targets": [2],
                        "className": "dt-center"
                    }



                ],

                initComplete: function() {

                    $("#pageloader").fadeOut();

                }

            });
            table.on('order.dt search.dt', function() {
                let i = 1;

                table.cells(null, 0, {
                    search: 'applied',
                    order: 'applied'
                }).every(function(cell) {
                    this.data(i++);
                });
            }).draw();

             $(".toggle-sidebar-icon").click(function() {
                setTimeout(function() {
                    table.columns.adjust().draw();
                }, 300);
            });

        }


        function reset_agent_update() {
            var id = $("#reset_agent").val();
            // $("#edit_reason").val('');
            viewmodel_agent(id);
        }


        function viewmodel_agent(id) {
            var data = {};
            data['id'] = id;
            data['_token'] = "{{ csrf_token() }}";

            $("#reset_agent").val(id);
            $("#agent_master_update")[0].reset();
            $("#id_update").val(id);
            $.ajax({
                type: 'post',
                url: "retrive_agent_for_edit_update_delete",
                data: data,
                success: function(returnData) {

                    var obj = jQuery.parseJSON(returnData);


                    // VIEW
                    $('#id_view').val(obj[0]['id']);
                    $('#agent_name_view').val(obj[0]['agent_name']);

                    // Update
                    $('#id_update').val(obj[0]['id']);
                    $('#agent_name_update').val(obj[0]['agent_name']);


                    // delete
                    $('#id_delete').val(obj[0]['id']);
                    $('#agent_name_delete').val(obj[0]['agent_name']);


                }
            });
        }


        function agent_delete_data() {

            var data = {};
            var id_delete = $('#id_delete').val();
            data['id_delete'] = id_delete;
            data['_token'] = "{{ csrf_token() }}";
            $.ajax({
                type: 'post',
                url: 'delete_agent_data',
                data: data,
                success: function(returnData) {
                    var data = jQuery.parseJSON(returnData);
                    if (data == 'delete') {
                        alert("Agent Name Deleted Successfully");
                        $("#agent_master_delete")[0].reset();
                        $(".btn-close").click();
                        Load_agent_name();
                    }

                }
            })

        }


        $('#agent_master_update').submit(function(e) {
            e.preventDefault();
            if ($('#agent_master_update').valid()) {

                var data = {};
                var id_update = $('#id_update').val();
                var agent_name_update = $("#agent_name_update").val();


                data['id_update'] = id_update;
                data['agent_name_update'] = agent_name_update;


                data['_token'] = "{{ csrf_token() }}";

                $.ajax({
                    type: 'POST',
                    url: 'update_agent_data',
                    data: data,
                    success: function(result) {
                        var obj = jQuery.parseJSON(result);

                        if (obj == 'Exist') {
                            alert(' Data already Exist!');
                            $("#reference_division_update").val('');
                            $('#reference_location_name_update').val('');

                        } else {
                            alert('Agent Name Updated Successfully');
                            Load_agent_name();
                            $(".btn-close").click();
                            // reset_approver_name_update();

                        }
                    }
                })
            }
        })

        // seperation mode


        $('#mode_of_separation').submit(function(e) {
            e.preventDefault();
            if ($('#mode_of_separation').valid()) {
                var data = {};

                var mode = $('#mode').val();
                data['mode'] = mode;

                data['_token'] = "{{ csrf_token() }}";
                $.ajax({
                    url: 'insert_mode_of_separation',
                    type: "POST",
                    data: data,
                    success: function(returndata) {
                        var obj = jQuery.parseJSON(returndata);
                        if (obj == 'Exist') {
                            alert('Data already Exist!');
                            $("#mode").val('');
                        } else {
                            alert('Inserted Successfully');
                            $(".btn-close").click();
                            $("#mode").val('');

                            Load_mode_of_separation();
                            // reset();
                        }
                    },

                });

            }
        })


        function Load_mode_of_separation() {
            $('#table_separation_mode').DataTable().destroy();
            var table = $('#table_separation_mode').DataTable({
                "ordering": true,
                "order": [0, 'desc'],
                "scrollY": "400px",
                "scrollX": true,
                "scrollCollapse": true,
                "bPaginate": false,
                "responsive": true,
                "ajax": {
                    url: "retrive_separation_data", // Ajax request
                    type: "get",
                    data: data,

                },

                "columns": [{
                        "data": "id",
                        "title": "#"
                    },
                    {
                        "data": "separation_mode",
                        "title": "Separation Mode"
                    },
                    {
                        "data": "id",
                        render: function(data, full, type) {
                            return '<button data-bs-toggle="modal" style="background: #d9a441 !important;color:#F2E2D2;border: 1px solid #d9a441;" data-bs-target="#ExtralargeModal_separation_mode" type="submit" class="btn" onclick="viewmodel_separation_mode(\'' +
                                data +
                                '\')"><i class="fa-solid fa-pen-to-square style_actions"></i></button>';
                        }
                    }

                ],
                columnDefs: [

                    {
                        "width": "2%",
                        "targets": [0],
                        "orderable": true,
                        "className": "dt-center",
                        "searching": false
                    },
                    {
                        "width": "15%",
                        "targets": [1],
                        "className": "dt-center"
                    },
                    {
                        "width": "20%",
                        "targets": [2],
                        "className": "dt-center"
                    }
                ],

                initComplete: function() {

                }

            });
            table.on('order.dt search.dt', function() {
                let i = 1;

                table.cells(null, 0, {
                    search: 'applied',
                    order: 'applied'
                }).every(function(cell) {
                    this.data(i++);
                });
            }).draw();

             $(".toggle-sidebar-icon").click(function() {
                setTimeout(function() {
                    table.columns.adjust().draw();
                }, 300);
            });

        }

        function reset_separation_mode_update() {
            var id = $("#reset_separation_id").val();
            // $("#edit_reason").val('');
            viewmodel_separation_mode(id);
        }


        function viewmodel_separation_mode(id) {
            var data = {};
            data['id'] = id;
            data['_token'] = "{{ csrf_token() }}";

            $("#reset_separation_id").val(id);
            $("#separation_mode_master_update")[0].reset();
            $("#id_update").val(id);
            $.ajax({
                type: 'post',
                url: "retrive_seperation_mode_for_edit_update_delete",
                data: data,
                success: function(returnData) {
                    var obj = jQuery.parseJSON(returnData);
                    // VIEW
                    $('#id_view').val(obj[0]['id']);
                    $('#separation_mode_view').val(obj[0]['separation_mode']);
                    // Update
                    $('#id_update').val(obj[0]['id']);
                    $('#separation_mode_update').val(obj[0]['separation_mode']);
                    // delete
                    $('#id_delete').val(obj[0]['id']);
                    $('#separation_mode_delete').val(obj[0]['separation_mode']);
                }
            });
        }


        function separation_mode_delete_data() {

            var data = {};
            var id_delete = $('#id_delete').val();
            data['id_delete'] = id_delete;
            data['_token'] = "{{ csrf_token() }}";
            $.ajax({
                type: 'post',
                url: 'delete_separation_mode_by_id',
                data: data,
                success: function(returnData) {
                    var data = jQuery.parseJSON(returnData);
                    if (data == 'delete') {
                        alert(" Deleted Successfully");
                        $("#hired_by_name_master_delete")[0].reset();
                        $(".btn-close").click();
                        Load_mode_of_separation();
                    }

                }
            })

        }

        $('#separation_mode_master_update').submit(function(e) {
            e.preventDefault();
            if ($('#separation_mode_master_update').valid()) {
                var data = {};
                var id_update = $('#id_update').val();
                var separation_mode_update = $("#separation_mode_update").val();
                data['id_update'] = id_update;
                data['separation_mode_update'] = separation_mode_update;
                data['_token'] = "{{ csrf_token() }}";
                $.ajax({
                    type: 'POST',
                    url: 'update_seperation_mode_by_id',
                    data: data,
                    success: function(result) {
                        var obj = jQuery.parseJSON(result);

                        if (obj == 'Exist') {
                            alert(' Data already Exist!');
                            $("#id_update").val('');
                            $('#separation_mode_update').val('');

                        } else {
                            alert('Updated Successfully');
                            Load_mode_of_separation();
                            $(".btn-close").click();


                        }
                    }
                })
            }
        })






        function reset() {
            $("#designation").val('');
            $("#probation_period").val('');
            // ("#division").val('');
            $("#shift").val('');

        }


        // outlet information

        $('#outlet_working_information').submit(function(e) {
            e.preventDefault();
            if ($('#outlet_working_information').valid()) {
                var data = {};

                data['outlet_opening_time'] = $('#outlet_opening_time').val();
                data['outlet_working_hours'] = $('#outlet_working_hours').val();
                data['outlet_closing_hours'] = $('#outlet_closing_hours').val();
                data['shift_type'] = $('#shift_type').val();

                data['_token'] = "{{ csrf_token() }}";
                $.ajax({
                    url: 'insert_outlet_working_information',
                    type: "POST",
                    data: data,
                    success: function(returndata) {
                        var obj = jQuery.parseJSON(returndata);
                        if (obj == 'Exist') {
                            alert('Data already Exist!');
                            $("#mode").val('');
                        } else {
                            alert('Inserted Successfully');
                            $(".btn-close").click();
                            $("#mode").val('');
                            $('#outlet_opening_time').val('');
                            $('#outlet_working_hours').val('');
                            $('#outlet_closing_hours').val('');
                            $('#shift_type').val('');
                            Load_outlet_info();
                            // reset();
                        }
                    },

                });

            }
        })


        function convertTo12HourFormat(time) {
            // Extract the hour and minute parts
            let [hour, minute] = time.split(':');

            // Convert the hour from 24-hour format to 12-hour format
            let period = 'AM';
            hour = parseInt(hour, 10);
            if (hour >= 12) {
                period = 'PM';
                if (hour > 12) {
                    hour -= 12;
                }
            }
            if (hour === 0) {
                hour = 12;
            }

            return `${hour}:${minute.toString().padStart(2, '0')} `;
        }

        function Load_outlet_info() {
            $('#table_outlet_working_information').DataTable().destroy();
            var table = $('#table_outlet_working_information').DataTable({
                "ordering": true,
                "order": [0, 'desc'],
                "scrollY": "400px",
                "scrollX": true,
                "scrollCollapse": true,
                "bPaginate": false,
                "responsive": true,
                "ajax": {
                    url: "retrive_outlet_working_information", // Ajax request
                    type: "get",
                    data: data,

                },

                "columns": [{
                        "data": "id",
                        "title": "#"
                    },
                    {
                        "data": "outlet_opening_hour",
                        "title": "Outlet Opening Hour",
                        "render": function(data, type, row) {
                            return convertTo12HourFormat(data);
                        }

                    },
                    {
                        "data": "outlet_working_hour",
                        "title": "Outlet Working Hour",
                        "render": function(data, type, row) {
                            return data + " Hours";
                        }
                    },
                    {
                        "data": "outlet_closing_hour",
                        "title": "Outlet Closing Hour",

                    },
                    {
                        "data": "shift_type",
                        "title": "Shift Typer",
                        "render": function(data, type, row) {
                            if (data == 0) {
                                return "Day Shift"
                            } else {
                                return "Day/Night Shift"

                            }


                        }
                    },
                    {
                        "data": "id",
                        render: function(data, full, type) {
                            return '<button data-bs-toggle="modal" style="background: #d9a441 !important;color:#F2E2D2;border: 1px solid #d9a441;" data-bs-target="#ExtralargeModal_working_info" type="submit" class="btn" onclick="viewmodel_outlet_working_information(\'' +
                                data +
                                '\')"><i class="fa-solid fa-pen-to-square style_actions"></i></button>';
                        }
                    }

                ],
                columnDefs: [

                    {
                        "width": "2%",
                        "targets": [0],
                        "orderable": true,
                        "className": "dt-center",
                        "searching": false
                    },
                    {
                        "width": "10%",
                        "targets": [1],
                        "className": "dt-center"
                    },
                    {
                        "width": "10%",
                        "targets": [2],
                        "className": "dt-center"
                    },
                    {
                        "width": "10%",
                        "targets": [3],
                        "className": "dt-center"
                    },
                    {
                        "width": "10%",
                        "targets": [4],
                        "className": "dt-center"
                    },
                    {
                        "width": "10%",
                        "targets": [5],
                        "className": "dt-center"
                    }
                ],

                initComplete: function() {

                }

            });
            table.on('order.dt search.dt', function() {
                let i = 1;

                table.cells(null, 0, {
                    search: 'applied',
                    order: 'applied'
                }).every(function(cell) {
                    this.data(i++);
                });
            }).draw();

             $(".toggle-sidebar-icon").click(function() {
                setTimeout(function() {
                    table.columns.adjust().draw();
                }, 300);
            });

        }




        function reset_outlet_wotking_information() {
            var id = $("#reset_outlet_working_id").val();
            // $("#edit_reason").val('');
            viewmodel_outlet_working_information(id);
        }


        function viewmodel_outlet_working_information(id) {
            var data = {};
            data['id'] = id;
            data['_token'] = "{{ csrf_token() }}";

            $("#reset_outlet_working_id").val(id);
            $("#outlet_working_master_update")[0].reset();
            $("#id_update").val(id);
            $.ajax({
                type: 'post',
                url: "retrive_outlet_information_for_edit_update_delete",
                data: data,
                success: function(returnData) {
                    var obj = jQuery.parseJSON(returnData);
                    // VIEW
                    $('#id_view').val(obj[0]['id']);
                    $('#view_outlet_opening_time').val(obj[0]['outlet_opening_hour']);
                    $('#view_outlet_working_hours').val(obj[0]['outlet_working_hour']);
                    $('#view_outlet_closing_hours').val(obj[0]['outlet_closing_hour']);
                    $('#view_shift_type').val(obj[0]['shift_type']);

                    // Update
                    $('#id_update').val(obj[0]['id']);
                    $('#edit_outlet_opening_time').val(obj[0]['outlet_opening_hour']);
                    $('#edit_outlet_working_hours').val(obj[0]['outlet_working_hour']);
                    $('#edit_outlet_closing_hours').val(obj[0]['outlet_closing_hour']);
                    $('#edit_shift_type').val(obj[0]['shift_type']);
                    // delete
                    $('#id_delete').val(obj[0]['id']);
                    $('#delete_outlet_opening_time').val(obj[0]['outlet_opening_hour']);
                    $('#delete_outlet_working_hours').val(obj[0]['outlet_working_hour']);
                    $('#delete_outlet_closing_hours').val(obj[0]['outlet_closing_hour']);
                    $('#delete_shift_type').val(obj[0]['shift_type']);
                }
            });
        }


        $('#outlet_working_master_update').submit(function(e) {
            e.preventDefault();
            if ($('#outlet_working_master_update').valid()) {
                var data = {};

                data['id_update'] = $('#id_update').val();
                data['edit_outlet_opening_time'] = $('#edit_outlet_opening_time').val();
                data['edit_outlet_working_hours'] = $('#edit_outlet_working_hours').val();
                data['edit_outlet_closing_hours'] = $('#edit_outlet_closing_hours').val();
                data['edit_shift_type'] = $('#edit_shift_type').val();

                data['_token'] = "{{ csrf_token() }}";
                $.ajax({
                    type: 'POST',
                    url: 'update_outlet_working_info_master_by_id',
                    data: data,
                    success: function(result) {
                        var obj = jQuery.parseJSON(result);

                        if (obj == 'Exist') {
                            alert(' Data already Exist!');
                            $("#id_update").val('');


                        } else {
                            alert('Updated Successfully');
                            Load_outlet_info();

                            $('#edit_outlet_opening_time').val('');
                            $('#edit_outlet_working_hours').val('');
                            $('#edit_outlet_closing_hours').val('');
                            $('#edit_shift_type').val('');
                            $(".btn-close").click();


                        }
                    }
                })
            }
        })




        function master_outlet_working_information_delete_data() {

            var data = {};
            var id_delete = $('#id_delete').val();
            data['id_delete'] = id_delete;
            data['_token'] = "{{ csrf_token() }}";
            $.ajax({
                type: 'post',
                url: 'delete_outlet_master_working_information_by_id',
                data: data,
                success: function(returnData) {
                    var data = jQuery.parseJSON(returnData);
                    if (data == 'delete') {
                        alert(" Deleted Successfully");
                        $("#hired_by_name_master_delete")[0].reset();
                        $(".btn-close").click();
                        Load_outlet_info();
                    }
                }
            })

        }

        function getemployeeList() {
            $.ajax({
                type: 'get',
                url: 'get_working_employee_list',
                success: function(returnData) {
                    var obj = jQuery.parseJSON(returnData);
                    var html = '';
                    obj.forEach(function(value) {
                        //  html += '<option value="' + value['user_id'] + '">' + value['user_name'] + '</option>';
                        $('#working_employee_id').append('<option value="' + value['user_id'] + '">' + value['user_name'] + '</option>');
                    })
                    //  $('#working_employee_id').html(html);
                    $('#working_employee_id').multipleSelect('refresh');
                    // $('#working_employee_id').chosen({
                    //     width: "100%"
                    // });
                    // $('#working_employee_id').trigger("chosen:updated");
                    $(".sd-CustomSelect").css({
                        display: "block",
                        visibility: "visible"
                    });
                }
            })
        }
        $('#working_days_form').submit(function(e) {
            e.preventDefault();
            if ($('#working_days_form').valid()) {
                let working_employee_id = $('#working_employee_id').val();
                if (working_employee_id.length === 0) {
                    alert("Please select employee");
                    return false;
                }

                const months = [
                    'january', 'february', 'march', 'april', 'may', 'june',
                    'july', 'august', 'september', 'october', 'november', 'december'
                ];

                let data = {
                    _token: "{{ csrf_token() }}",
                    working_employee_id: working_employee_id,
                    months: {}
                };

                months.forEach(function(month) {
                    data.months[month] = {
                        working: $('#' + month).val(),
                        days: $('#' + month + '_days').val(),
                        weekof: $('#' + month + '_weekof').val(),
                        holiday: $('#' + month + '_holiday').val()
                    };
                });

                $.ajax({
                    type: 'POST',
                    url: 'add_working_days_master',
                    data: data,
                    success: function(result) {
                        if (result) {
                            alert('Added Successfully');
                            $('#working_employee_id').multipleSelect('refresh');
                            $("#working_days_form")[0].reset();
                            $(".btn-close").click();
                            load_working_days();
                            getemployeeList();
                        }
                    }
                });
            }
        });


        function load_working_days() {
            $('#working_days_table').DataTable().destroy();
            var table = $('#working_days_table').DataTable({
                "ordering": true,
                "order": [0, 'asc'],
                "scrollY": "400px",
                "scrollX": true,
                "scrollCollapse": true,
                "bPaginate": false,
                "responsive": true,
                "ajax": {
                    url: "get_workingdays_master_users_list", // Ajax request
                    type: "get",
                    data: data,
                },
                "columns": [{
                        "data": null,
                        "title": "#",
                        render: function(data, type, row, meta) {
                            return meta.row + 1;
                        }
                    },
                    {
                        "data": "user_name",
                        "title": "User Name"
                    },
                    {
                        "data": "user_id",
                        render: function(data, full, type) {
                            return '<button data-bs-toggle="modal"  style="background: #d9a441 !important;color:#F2E2D2;border: 1px solid #d9a441;" data-bs-target="#ExtralargeModal_working_days" type="submit" class="btn" onclick="viewmodel_working_days(\'' +
                                data +
                                '\')"><i class="fa-solid fa-pen-to-square style_actions"></i></button>';
                        }
                    }
                ],
                columnDefs: [

                    {
                        "width": "2%",
                        "targets": [0],
                        "orderable": true,
                        "className": "dt-center",
                        "searching": false
                    },
                    {
                        "width": "15%",
                        "targets": [1],
                        "className": "dt-center"
                    },
                    {
                        "width": "20%",
                        "targets": [2],
                        "className": "dt-center"
                    }
                ],

                initComplete: function() {

                }

            });
            table.on('order.dt search.dt', function() {
                let i = 1;

                table.cells(null, 0, {
                    search: 'applied',
                    order: 'applied'
                }).every(function(cell) {
                    this.data(i++);
                });
            }).draw();

             $(".toggle-sidebar-icon").click(function() {
                setTimeout(function() {
                    table.columns.adjust().draw();
                }, 300);
            });

        }

        function viewmodel_working_days(id) {
            $.ajax({
                type: "post",
                url: "get_working_days_by_user_id",
                data: {
                    user_id: id,
                    "_token": "{{ csrf_token() }}"
                },
                success: function(returnData) {
                    var obj = jQuery.parseJSON(returnData);
                    let uid = obj[0]['client_user_id']
                    let uname = obj[0]['user_name']
                    $("#working_days_view_form")[0].reset();
                    $("#working_days_edit_form")[0].reset();
                    $('#view_working_days_name').val(uname);
                    $('#edit_working_days_name').val(uname);
                    $('#edit_working_days_id').val(uid);
                    // obj.forEach(function(value) {
                    //     $(`#view_${value.month}`).val(value.working_days);
                    //     $(`#edit_${value.month}`).val(value.working_days);
                    // })


                    obj.forEach(function(item) {
                        let month = item.month;

                        $(`#view_working_${month}`).val(item.working_days ?? 0);
                        $(`#view_weekoff_${month}`).val(item.week_off ?? 0);
                        $(`#view_holiday_${month}`).val(item.holiday ?? 0);

                        $(`#edit_working_${month}`).val(item.working_days ?? 0);
                        $(`#edit_weekoff_${month}`).val(item.week_off ?? 0);
                        $(`#edit_holiday_${month}`).val(item.holiday ?? 0);
                    });


                }
            })
        }

        $('#working_days_edit_form').submit(function(e) {
            e.preventDefault();

            if ($(this).valid()) {
                let data = {};
                data['_token'] = '{{ csrf_token() }}';
                data['working_employee_id'] = $('#edit_working_days_id').val();

                let months = [
                    'january', 'february', 'march', 'april', 'may', 'june',
                    'july', 'august', 'september', 'october', 'november', 'december'
                ];

                data['months'] = {};

                months.forEach(function(month) {
                    data['months'][month] = {
                        working: $(`#edit_working_${month}`).val() ?? 0,
                        weekoff: $(`#edit_weekoff_${month}`).val() ?? 0,
                        holiday: $(`#edit_holiday_${month}`).val() ?? 0
                    };
                });

                $.ajax({
                    type: 'POST',
                    url: 'update_working_days_master',
                    data: data,
                    success: function(result) {
                        if (result) {
                            alert('Updated Successfully');
                            $("#working_days_edit_form")[0].reset();
                            $(".btn-close").click();
                            // load_working_days();
                        }
                    }
                });
            }
        });

        //beyond


        $('#beyond_time_insert_form').submit(function(e) {
            e.preventDefault()
            if ($('#beyond_time_insert_form').valid()) {
                let formData = new FormData(this);
                $.ajax({
                    url: 'insert_beyond_time',
                    method: 'post',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(res) {
                        console.log(res)
                        let data = JSON.parse(res)
                        get_beyond_time_data();
                        if (data.status === true) {
                            alert(data.message)
                            $('#beyond_time_insert_form')[0].reset()
                            $('.btn-close').click()

                        } else {
                            alert(data.message)
                        }
                    },
                    error: function(res) {
                        console.log(res);
                    }
                })
            }
        })

        ///get beyond time by id 
        function view_model_beyond_time(id) {
            console.log("beyond time id", id)
            $.ajax({
                type: "post",
                url: "get_beyond_time_by_user_id",
                data: {
                    user_id: id,
                    "_token": "{{ csrf_token() }}"
                },
                success: function(returnData) {

                    var obj = JSON.parse(returnData);
                    console.log("obj", obj);
                    let uid = obj[0]['id']

                    // console.log(uid);
                    let beyondTime = obj[0]['beyond_time']

                    let parts = beyondTime.split(":");
                    let hours = parseInt(parts[0], 10);
                    let minutes = parseInt(parts[1], 10);
                    let totalMinutes = (hours * 60) + minutes;

                    // $("#view_shift_type_form")[0].reset();
                    // $("#view_edit_shift_type_form")[0].reset();

                    //view
                    $('#view_beyond_time').val(totalMinutes);
                    //edit

                    $('#edit_beyond_time_id').val(uid);
                    $('#edit_beyond_time').val(totalMinutes);

                    //delete
                    $('#view_delete_beyond_id').val(uid);
                    $('#view_delete_beyond_time').val(totalMinutes);
                }
            })


        }

        function delete_beyond_time_data() {
            let userId = $('#view_delete_beyond_id').val()
            let csrfToken = $('input[name="_deletecsrftoken"]').val();
            $.ajax({
                url: "delete_beyond_time_By_id",
                method: "post",
                data: {
                    userid: userId,
                    _token: csrfToken,
                },
                success: function(res) {
                    let data = JSON.parse(res)
                    get_beyond_time_data();
                    if (data.status == true) {
                        $('.btn-close').click()
                        alert(data.message)
                    } else {
                        $('.btn-close').click()
                        alert(data.message)
                    }
                },

                error: function(res) {
                    $('.btn-close').click();
                    $('small').text("")
                }
            })
        }

        function update_beyond_time_data() {
            if ($('#view_edit_beyond_time_form').valid()) {
                let userId = $('#edit_beyond_time_id').val()
                let beyondTime = $('#edit_beyond_time').val()
                let csrfToken = $('input[name="_updatecsrftoken"]').val();
                $.ajax({
                    url: "update_beyond_time_By_id",
                    method: "post",
                    data: {
                        userid: userId,
                        beyond_time: beyondTime,
                        _token: csrfToken,
                    },
                    success: function(res) {
                        let data = JSON.parse(res)
                        get_beyond_time_data();
                        if (data.status == true) {
                            $('.btn-close').click()
                            alert(data.message)
                        } else {
                            $('.btn-close').click()
                            alert(data.message)
                        }
                    },

                    error: function(res) {
                        alert("OOps! Something went wrong.")
                        $('small').text("")
                    }
                })
            }
        }

        $('#beyond_time_reset_btn').click(function() {
            $('#beyond_time_insert_form')[0].reset()
            $('small').text("")
        })

        $('.btn-close').click(function() {
            $('small').text("")
            $('#beyond_time_insert_form')[0].reset()
        })

        $('#update_beyond_time_reset_button').click(function() {
            let id = $('#edit_beyond_time_id').val()
            view_model_beyond_time(id)
            $('small').text("")
        })





        function get_beyond_time_data() {
            // Destroy existing DataTable instance before re-initializing
            $('#beyond_time_table').DataTable().destroy();
            // Initialize DataTable
            var table = $('#beyond_time_table').DataTable({
                ordering: true,
                // order: [
                //     [0, 'asc']
                // ],
                "scrollY": "400px",
                "scrollX": true,
                "scrollCollapse": true,
                "bPaginate": false,
                "responsive": true,
                ajax: {
                    url: "get_beyond_time_data",
                    type: "get",
                    // Optional: Remove `data` unless you are sending parameters
                    // data: { }, 
                    dataSrc: function(json) {
                        console.log("✅ Data received from server:", json.data); // Print in console
                        return json.data; // Important: return the actual array
                    }
                },
                columns: [{
                        data: "id",
                        title: "id",
                        render: function(data, type, row, meta) {
                            return meta.row + 1;
                        }
                    },
                    {
                        data: "beyond_time",
                        title: "beyond time"
                    },
                    {
                        data: "id",
                        title: "Action",
                        render: function(data) {
                            return `
                        <button 
                            data-bs-toggle="modal" 
                            data-bs-target="#ExtralargeModal_beyond_time" 
                            style="background: #d9a441 !important;color:#F2E2D2;border: 1px solid #d9a441;"
                            type="button" 
                            class="btn"
                            onclick="view_model_beyond_time('${data}')">
                            <i class="fa-solid fa-pen-to-square style_actions"></i>
                        </button>`;
                        }
                    }
                ],
                columnDefs: [{
                        targets: 0,
                        width: "2%",
                        orderable: true,
                        className: "dt-center",
                        searchable: false
                    },
                    {
                        targets: 1,
                        width: "20%",
                        className: "dt-center"
                    },
                    {
                        targets: 2,
                        width: "10%",
                        className: "dt-center"
                    }
                ],
                initComplete: function() {
                    console.log("✅ DataTable initialized successfully.");
                }
            });

            // Re-number rows after sorting/filtering
            table.on('order.dt search.dt', function() {
                let i = 1;
                table.cells(null, 0, {
                        search: 'applied',
                        order: 'applied'
                    })
                    .every(function(cell) {
                        this.data(i++);
                    });
            }).draw();

             $(".toggle-sidebar-icon").click(function() {
                setTimeout(function() {
                    table.columns.adjust().draw();
                }, 300);
            });
        }





        //shift type


        function get_shift_type_data() {
            // Destroy existing DataTable instance before re-initializing
            $('#shift_type_table').DataTable().destroy();
            // Initialize DataTable
            var table = $('#shift_type_table').DataTable({
                ordering: true,
                // order: [
                //     [0, 'asc']
                // ],
                "scrollY": "400px",
                "scrollX": true,
                "scrollCollapse": true,
                "bPaginate": false,
                "responsive": true,
                ajax: {
                    url: "get_shift_type_data",
                    type: "get",
                    // Optional: Remove `data` unless you are sending parameters
                    // data: { }, 
                    dataSrc: function(json) {
                        // Print in console
                        return json.data; // Important: return the actual array
                    }
                },
                columns: [{
                        data: "id",
                        title: "id",
                        render: function(data, type, row, meta) {
                            return meta.row + 1;
                        }
                    },
                    {
                        data: "kitchen_name",
                        title: "Outlet"
                    },
                    {
                        data: "shift_type",
                        title: "Shift",
                        render: function(data) {
                            if (data == 1) {
                                return 'Morning';
                            } else if (data == 2) {
                                return 'After Noon';
                            } else if (data == 3) {
                                return 'Evening';
                            } else if (data == 4) {
                                return 'Night';
                            }


                        }
                    },
                    {
                        data: "start_time",
                        title: "Start Time",
                        render: function(data) {
                            var res = formatTimeToAMPM(data);
                            return res;
                        }
                    },
                    {
                        data: "end_time",
                        title: "End Time",
                        render: function(data) {
                            var res = formatTimeToAMPM(data);
                            return res;
                        }
                    },
                    {
                        data: "id",
                        title: "Action",
                        render: function(data) {
                            return `
                        <button 
                        style="background: #d9a441 !important;color:#F2E2D2;border: 1px solid #d9a441;"
                            data-bs-toggle="modal" 
                            data-bs-target="#ExtralargeModal_shift_type" 
                            type="button" 
                            class="btn"
                            onclick="view_model_shift_type('${data}')" >
                            <i class="fa-solid fa-pen-to-square style_actions"></i>
                        </button>`;
                        }
                    }
                ],
                columnDefs: [{
                        targets: 0,
                        width: "2%",
                        orderable: true,
                        className: "dt-center",
                        searchable: false
                    },
                    {
                        targets: 1,
                        width: "20%",
                        className: "dt-center"
                    },
                    {
                        targets: 2,
                        width: "10%",
                        className: "dt-center"
                    },
                    {
                        targets: 3,
                        width: "10%",
                        className: "dt-center"
                    },
                    {
                        targets: 4,
                        width: "20%",
                        className: "dt-center"
                    },
                    {
                        targets: 5,
                        width: "20%",
                        className: "dt-center"
                    }
                ],
                initComplete: function() {
                    console.log("✅ DataTable initialized successfully.");
                }
            });

            // Re-number rows after sorting/filtering
            table.on('order.dt search.dt', function() {
                let i = 1;
                table.cells(null, 0, {
                        search: 'applied',
                        order: 'applied'
                    })
                    .every(function(cell) {
                        this.data(i++);
                    });
            }).draw();

             $(".toggle-sidebar-icon").click(function() {
                setTimeout(function() {
                    table.columns.adjust().draw();
                }, 300);
            });
        }

        // shift type data table end



        // shift form validation end

        $('#shift_type_form').submit(function(e) {

            e.preventDefault()
            if ($(this).valid()) {

                let formData = new FormData(this);
                $.ajax({
                    url: "insert_shift_type",
                    method: "post",
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(res) {
                        console.log(res)
                        let data = JSON.parse(res)
                        console.log(data)
                        if (data.status == true) {
                            alert(data.message)
                            $('#shift_type_form')[0].reset()
                            $('.btn-close').click()
                            get_shift_type_data()
                        } else {
                            alert(data.message)
                            // $('#shift_type_form')[0].reset()
                            // $('.btn-close').click()
                            // get_shift_type_data()

                        }
                    },
                    error: function(res) {
                        alert(data.messsage)
                        console.error(res);
                        // $('#shift_type_form')[0].reset()
                        // $('.btn-close').click()
                        // get_shift_type_data()
                    }
                })
            }
        })
        $('#shift_type_reset_btn').click(function() {
            $('#shift_type_form')[0].reset()
            $('.timepicker').val("")
            $('small').text("")
        })

        function formatTimeToAMPM(timeStr) {
            const [hours, minutes] = timeStr.split(':');
            const date = new Date();
            date.setHours(parseInt(hours));
            date.setMinutes(parseInt(minutes));

            let options = {
                hour: 'numeric',
                minute: '2-digit',
                hour12: true
            };
            return date.toLocaleTimeString('en-US', options);
        }

        function view_model_shift_type(id) {

            console.log("id", id)
            $.ajax({
                type: "post",
                url: "get_shift_type_by_user_id",
                data: {
                    user_id: id,
                    "_token": "{{ csrf_token() }}"
                },
                success: function(returnData) {

                    var obj = JSON.parse(returnData);
                    console.log("obj", obj);
                    let uid = obj[0]['id']
                    let kitchenName = obj[0]['kitchen_name']
                    let view_shift_type = obj[0]['shift_type']
                    let start_time_val = obj[0]['start_time']
                    let end_time_val = obj[0]['end_time']

                    let kitchenId = obj[0]['kitchen_id']
                    let convertStartTime = formatTimeToAMPM(start_time_val);
                    let convertEndTime = formatTimeToAMPM(end_time_val);

                    $("#view_shift_type_form")[0].reset();
                    $("#view_edit_shift_type_form")[0].reset();
                    //view
                    $('#view_outlet').val(kitchenName);
                    $('#view_shift_type-input').val(view_shift_type)
                    $('#view_start_time').val(convertStartTime)
                    $('#view_end_time').val(convertEndTime)
                    //edit

                    $('#edit_id').val(uid);
                    $('#view_edit_outlet').val(kitchenName);
                    $('#kitchen_id').val(kitchenId)
                    $('#view_edit_shift_type').val(view_shift_type)
                    $('#view_edit_start_time').val(convertStartTime)
                    $('#view_edit_end_time').val(convertEndTime)
                    //delete
                    $('#delete_id').val(uid);

                    $('#view_delete_outlet').val(kitchenName);
                    $('#view_delete_shift_type').val(view_shift_type)
                    $('#view_delete_start_time').val(convertStartTime)
                    $('#view_delete_end_time').val(convertEndTime)


                }
            })

        }



        function update_status_type() {
            if ($('#view_edit_shift_type_form').valid()) {


                let formData = new FormData($('#view_edit_shift_type_form')[0])
                $.ajax({
                    url: '/update_shift_type_by_id',
                    method: "post",
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(res) {
                        let data = JSON.parse(res)
                        if (data.status == true) {
                            get_shift_type_data();
                            alert(data.message)
                            $('.btn-close').click()

                        } else {
                            alert(data.message)
                            $('.btn-close').click()

                        }
                    },
                    error: function(res) {
                        alert("OOps! Something went wrong.")
                        // $('.btn-close').click()

                    }
                })
            }
        }
        $('#update_reset_button').click(function() {
            let id = $('#edit_id').val()
            console.log("edit", id)
            view_model_shift_type(id)
            $('small').text("")
        })

        //delete offer status start
        function delete_shift_type() {
            let userId = $('#delete_id').val()
            let csrfToken = $('input[name="_deletecsrftoken"]').val();
            console.log(csrfToken)
            $.ajax({
                url: "delete_shift_type_By_id",
                method: "post",
                data: {
                    user_id: userId,
                    _token: csrfToken,
                },
                success: function(res) {
                    let data = JSON.parse(res)
                    get_shift_type_data();
                    if (data.status == true) {
                        $('.btn-close').click()
                    } else {
                        $('.btn-close').click()
                    }
                },

                error: function(res) {
                    $('.btn-close').click();
                    $('small').text("")
                }
            })

        }

        $('.btn-close').click(function() {
            $('small').text("")
            $('#shift_type_form')[0].reset()
            $('.timepicker').val("")
        })

        $('button[data-bs-toggle="tab"]').on('shown.bs.tab', function () {
    $.fn.dataTable.tables({ visible: true, api: true })
        .columns.adjust()
        .draw();
});
    </script>
    <!--  -->
    <link rel='stylesheet' href='https://harvesthq.github.io/chosen/chosen.css'>
    <script src='//harvesthq.github.io/chosen/chosen.jquery.js'></script>

</body>

</html>