@include('layouts.header');


<link href='css/jquery-ui.css' rel='stylesheet'>
@include('layouts.sidebar');

<style>
    /* 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 {
        height: 52px !important;
        margin-bottom: -13px;
    }

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

    #main,
    #footer {
        margin-left: 292px;
        margin-right: 1px;
        margin-top: 26px;
    }

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

    div.dt-buttons {
        position: relative;
        float: right !important;
        margin-left: 10px;

    }

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

    .ui-datepicker-header {
        background: #963131;
        color: #963131;
        font-family: 'Times New Roman';
        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;
    }

    .label-container {
        align-items: center;
        background-color: #fff !important;
        border: 1px solid #fff;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        margin-bottom: 5px;
        max-height: auto;
        max-width: 75mm;
    }

    .label-container {
        border: 1px solid black;
        padding: 10px;
        box-sizing: border-box;
        background-color: #fff;
    }

    .label-info-container {
        color: #000;
        font-family: Verdana;
        font-size: 50%;
        font-weight: 700;
        max-height: auto;
    }

    #customizedTable {
        /* border: 1px solid black; */
    }

    .labels-container {
        float: left;
        height: 270px;
        margin-top: 10px;
        overflow-y: scroll;
        max-height: 260px;
        position: relative;
        width: 100%;
    }

    .odd-heading {
        background: #000;
        color: #fff;
        font-size: 1vh;
        font-weight: bolder;
        margin-bottom: 0;
        padding: 0;
        text-align: center;
    }

    .qr-image {
        height: 69px;
        margin-left: 0;
        margin-right: 0;
        margin-top: 0;
        max-height: 100%;
        padding-left: 0;
        padding-right: 0;
        width: 100%;
    }

    .exp,
    .mfg,
    .qty,
    .recipe-name {
        color: #000;
        line-height: 1.2;
        margin: 0 !important;
        padding-right: 0 !important;
        text-transform: uppercase;
    }

    @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%;
    }

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

    .pie {
        display: flex;
        align-items: center;
        flex-direction: column
    }

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


    }


    /* #barcode1 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    } */





    .borderdiv {
        /* border: 1px solid #00000014; */

        border: 1px solid black;
    }

    .borderdivbottom {
        border-bottom: 2px solid black;


    }

    .borderdivtop {
        border-top: 2px solid black;


    }


    .odd-heading {
        font-weight: bold;
        padding: 5px 0;
    }

    .color-black {
        color: #000;
    }

    .label-info-container p,
    .label-info-container label {
        margin-bottom: 0;
    }

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

    }


    .nav-link {
        color: #111;
    }

    .nav-link:hover {
        color: #963131;
    }

    .input-group {
        gap: 10px;
    }

    #barcode1_custom {
        font-size: 12px;
        font-weight: 800;
    }


    /* @media (min-width: 992px) {
        .col-lg-8 {
            flex: 0 0 auto;
            width: 60.666667% 799.578px;
        }
    }

    @media (min-width: 992px) {
        .col-lg-4 {
            flex: 0 0 auto;
            width: 39.333333%;
        }
    } */


    .close-mark {
        font-size: 30px;
        /* position: absolute; */
        color: #ba434d;
        /* margin: 30px; */
    }

    .close-mark {
        color: maroon !important;
    }

    #customizedTable th,
    #customizedTable td {
        width: 25%;
        /* text-align: center; */
        /* optional */
        vertical-align: middle;
        /* optional */
    }

    .inputHeight {
        height: 52px;
    }

    #item_recipe-error {
        padding-top: 13px;
    }



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


    }

    #extralarge_emergency_model .modal-body {
        overflow: visible;
    }
</style>
</head>

<body>




    @include ('layouts.head')
    <div class="col-lg-12" id="pageloader">
        <img src="images/256x256.gif">
    </div>
    <main id="main" class="main">

        <div class="pagetitle">
            <h1>Item -Ingrediant Mapping</h1>
        </div><!-- End Page Title -->


        <!-- Bordered Tabs Justified -->
        <!-- <br> -->
        <!-- <ul class="nav nav-tabs nav-tabs-bordered d-flex" id="borderedTabJustified" role="tablist">
                    <li class="nav-item flex-fill" role="presentation">
                        <button class="nav-link w-100 active" id="home-tab" data-bs-toggle="tab" data-bs-target="#bordered-justified-home" type="button" role="tab" aria-controls="home" aria-selected="true">Label Maker</button>
                    </li>
                </ul> -->


        <section class="section dashboard">
            <div class="card">
                <div class="card-body">

                    <ul class="nav nav-tabs mt-2" 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="showHideItemIngrediantMapping()"
                                aria-selected="true">Item-Ingrediant Mapping</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button
                                class="nav-link"
                                id="profile-tab"
                                data-bs-toggle="tab"
                                data-bs-target="#bordered-profile"
                                type="button"
                                role="tab"
                                aria-controls="profile" onclick="showHideIngTable()"
                                aria-selected="false">Add Ingrediant</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="tab-content pt-2" id="borderedTabJustifiedContent">
                                    <div class="tab-pane fade show active" id="bordered-justified-home" role="tabpanel" aria-labelledby="home-tab">
                                        <div class="col-lg-12">
                                            {{-- <h5 class="card-title"></h5> --}}
                                            <form class="row g-3 mt-1" method="POST" id="addBarcode">
                                                <input type="hidden" value="{{csrf_token()}}" name="_token">

                                                <div class="col-lg-12">
                                                    <div class="row g-3">
                                                        <div class="col-md-4">
                                                            <div class="form-floating mb-3">
                                                                <select class="selUser form-select" id="item_recipe" data-placeholder="Select Item" name="item_recipe" aria-label="" required>
                                                                    <!-- <option value=""></option> -->
                                                                </select>
                                                                <span id="projectIDSelectError1"></span>
                                                            </div>
                                                        </div>


                                                        <div class="col-md-12">
                                                            <table id="customizedTable" class="table table-bordered">
                                                                <thead>
                                                                    <tr>
                                                                        <th style="width: 30%;">Ingredient</th>
                                                                        <th style="width: 30%;">Qty</th>
                                                                        <th style="width: 30%;">UOM</th>
                                                                        <th style="width: 10%;">Action</th>
                                                                    </tr>
                                                                </thead>
                                                                <tbody id="body-data">
                                                                    <tr id="item-row1">
                                                                        <td>
                                                                            <div class=" col-md-2">
                                                                                <div class="form-floating mb-3">
                                                                                    <select class="selUser form-select ingrediant_recipe seluserheight" style="width: 300px" id="ingrediant_recipe1" data-placeholder="Select Ingrediant" name="ingrediant_recipe[]" onchange="recipe_change_ing(this);">

                                                                                        <option value="">Select Ingrediant</option>
                                                                                        @foreach ($ingrediant as $item)
                                                                                        <option value="{{ $item->id }}">{{ $item->ingrediant_name }}</option>
                                                                                        @endforeach
                                                                                </div>
                                                                            </div>
                                                                        </td>
                                                                        <td>

                                                                            <input type="number" class="form-control qty inputHeight" id="ing_qty1" name="qty[]">
                                                                        </td>
                                                                        <td>
                                                                            <div class=" col-md-2">
                                                                                <div class="form-floating mb-3">
                                                                                    <select class="selUser form-select  uom inputHeight seluserheight" style="width: 300px" id="img_uom1" data-placeholder="Select UOM" name="uom[]">
                                                                                        <option value="">Select</option>
                                                                                        @foreach ($uom as $item)
                                                                                        <option value="{{$item->uom}}">{{$item->uom}}</option>
                                                                                        @endforeach
                                                                                    </select>

                                                                                </div>
                                                                            </div>
                                                                            <!-- <input type="text" class="form-control uom inputHeight" id="img_uom1" name="uom[]"> -->
                                                                        </td>

                                                                        <td>
                                                                            <div class="d-flex justify-content-center" style="gap:20px">
                                                                                <span class="close-mark" id="close1" onclick="removeRow(1);">
                                                                                    <i class="bi bi-file-x-fill"></i>
                                                                                </span>
                                                                                <span class="close-mark " id="add1" onclick="input_change_ing(1);">
                                                                                    <i class="bi bi-plus bi-bi-file-fill"></i>
                                                                                </span>

                                                                            </div>

                                                                        </td>

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



                                                        <div class="col-md-4">
                                                            <div class="form-floating mb-3">
                                                                <input type="text" class="form-control" id="processed_by" name="processed_by" autocomplete="off" hidden>
                                                                <label for="floatingName"></label>
                                                                <span id="projectIDSelectError5"></span>
                                                            </div>
                                                        </div>

                                                        <div class="text-center">
                                                            <button type="submit" id="register" class="btn btn-primary">Submit</button>
                                                            <button type="reset" class="btn btn-primary" onclick="reset_data();">Reset</button>
                                                        </div>
                                                    </div>

                                                </div>


                                            </form>

                                        </div>
                                    </div>

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


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


                                <!-- <h5 class="card-title"></h5> -->
                                <form class="row g-3 mt-1" method="POST" id="master_ingrediant_data">
                                    <input type="hidden" value="{{ csrf_token() }}" name="_token">

                                    <div class="col-lg-12">
                                        <div class="row">
                                            <div class="col-md-4">
                                                <div class="form-floating">
                                                    <input type="text" class="form-control" id="ingrediant_name_master" name="ingrediant_name_master" placeholder="Phone" required>
                                                    <label for="floatingEmail">Ingrediant Name</label>
                                                    <span id="projectIDSelectError8_ingrediant_name_master"></span>
                                                </div>
                                            </div>

                                            <div class="col-md-4">
                                                <div class="form-floating">
                                                    <select class="form-select" id="uom_data" name="uom_data" required>
                                                        <option value="">Select UOM</option>

                                                    </select>
                                                    <label for="uom_data">UOM</label>
                                                    <span id="projectIDSelectError8_uom_data"></span>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Submit/Reset Buttons -->
                                        <div class="text-center mt-3">
                                            <button type="submit" id="register" class="btn btn-primary">Submit</button>
                                            <button type="reset" class="btn btn-secondary" onclick="reset_data_custom();">Reset</button>
                                        </div>
                                    </div>
                                </form>




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




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

                                <div class="modal-header">
                                    <h5 class="modal-title">Ingrediant 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-tab11" data-bs-toggle="tab" data-bs-target="#bordered-storehome11" type="button" role="tab" aria-controls="storehome11" aria-selected="true">View</button>
                                        </li>
                                        <li class="nav-item" role="presentation">
                                            <button class="nav-link" id="storehome-edit-ing-tab11" data-bs-toggle="tab" data-bs-target="#bordered-edit-ingrediant11" type="button" role="tab" aria-controls="editIngrediant11" aria-selected="true">Edit</button>
                                        </li>
                                        <li class="nav-item" role="presentation">
                                            <button class="nav-link" id="storedelete-tab11" data-bs-toggle="tab" data-bs-target="#bordered-storedelete11" type="button" role="tab" aria-controls="storedelete11" 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-tab11">
                                            <form class="row g-3" method="POST" id="viewBarcode" action="">
                                                <input type="hidden" id="view_id" name="view_id">
                                                <div class="col-md-4">
                                                    <div class="form-floating mb-3">
                                                        <input type="text" class="form-control" id="view_ing_name" name="view_ing_name" autocomplete="off" readonly>
                                                        <label for="floatingName">Ingrediant Name</label>
                                                    </div>
                                                </div>

                                                <div class="col-md-4">
                                                    <div class="form-floating mb-3">
                                                        <input type="text" class="form-control" id="view_uom" name="view_uom" autocomplete="off" readonly>
                                                        <label for="floatingName">UOM</label>
                                                    </div>
                                                </div>

                                                <div class="text-center">
                                                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal" aria-label="Close">Close</button>
                                                </div>
                                            </form>
                                        </div>


                                        <div class="tab-pane fade" id="bordered-edit-ingrediant11" role="tabpanel" aria-labelledby="storehome-edit-ing-tab11">
                                            <form class="row g-3" method="POST" id="editBarcode" action="">
                                                <input type="hidden" id="id_update" name="id_update">
                                                <div class="col-md-4">
                                                    <div class="form-floating mb-3">
                                                        <input type="text" class="form-control" id="edit_ing_name" name="edit_ing_name" autocomplete="off">
                                                        <label for="floatingName">Ingrediant Name</label>
                                                        <span id="projectIDSelectError8_edit_ing_name"></span>
                                                    </div>
                                                </div>

                                                <div class="col-md-4">
                                                    <div class="form-floating mb-3">
                                                        <!-- <input type="text" class="form-control" id="edit_uom" name="edit_uom" autocomplete="off"> -->

                                                        <select class="form-select" id="edit_uom" name="edit_uom" required>
                                                            <option value="">Select UOM</option>
                                                            <!-- Add UOM options dynamically or statically -->
                                                        </select>
                                                        <label for="floatingName">UOM</label>
                                                        <span id="projectIDSelectError8_edit_uom"></span>
                                                    </div>
                                                </div>


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

                                            </form>
                                        </div>

                                        <div class="tab-pane fade" id="bordered-storedelete11" role="tabpanel" aria-labelledby="storedelete-tab11">
                                            <form class="row g-3" method="POST" id="deleteBarcode" action="">
                                                <input type="hidden" id="delete_id" name="delete_id">
                                                <div class="col-md-4">
                                                    <div class="form-floating mb-3">
                                                        <input type="text" class="form-control" id="delete_ing_name" name="delete_ing_name" autocomplete="off" readonly>
                                                        <label for="floatingName">Ingrediant Name</label>
                                                    </div>
                                                </div>

                                                <div class="col-md-4">
                                                    <div class="form-floating mb-3">
                                                        <input type="text" class="form-control" id="delete_uom" name="delete_uom" autocomplete="off" readonly>
                                                        <label for="floatingName">UOM</label>
                                                    </div>
                                                </div>

                                                <div class="text-center">
                                                    <button type="button" class="btn btn-primary" onclick="delete_ingrediant_data();">Delete</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
        </section>




        <div class="col-lg-12" id="hidden_ing_item_map_table">

            <div class="tab-content pt-2" id="borderedTabContent">
                <div class="tab-pane fade show active" id="bordered-home" role="tabpanel" aria-labelledby="home-tab" style="margin-top: -15px;">
                    <div class="card">
                        <div class="card-body" style="overflow-x:auto;">

                            <h5 class="card-title">Item-Ingrediant Mapped Details</h5>

                            <!-- Table with stripped rows -->
                            <table id="barcodeList" class='display dataTable' style="width:100%;">
                                <thead>
                                    <tr>
                                        <th scope="col">#</th>
                                        <th scope="col">Item Name</th>
                                        <th scope="col">Action</th>


                                    </tr>
                                </thead>

                            </table>
                        </div>
                    </div>
                </div>
            </div><!-- End Bordered Tabs -->



        </div>


        <div class="col-lg-12" id="hidden_ing_table">
            <div class="tab-content pt-2" id="borderedTabContent">
                <div class="tab-pane fade show active" id="bordered-home" role="tabpanel" aria-labelledby="home-tab" style="margin-top: -15px;">
                    <div class="card">
                        <div class="card-body" style="overflow-x: auto;">
                            <h5 class="card-title">Ingrediant Details</h5>

                            <table id="barcodeList_ingrediant" class="display dataTable" style="width:100%;">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Action</th>
                                        <th>Ingrediant Name</th>
                                        <th>UOM</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>

                        </div>
                    </div>
                </div>
            </div> <!-- End tab-content -->

        </div>



        <div class="modal fade" id="extralarge_emergency_model" tabindex="-1" style="margin-top: -15px;">
            <div class="modal-dialog modal-xl modal-dialog-centered">
                <div class="col-md-12">
                    <div class="modal-content">

                        <div class="modal-header">
                            <h5 class="modal-title">Item-Ingrediant Mapped 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="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-storeedit11-agent" role="tabpanel" aria-labelledby="storeedit-tab-agent">

                                    <div class="row">

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

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


                                            <div class="row m-3">
                                                <div class="col-md-4">
                                                    <div class="form-floating mb-3">
                                                        <select class="form-select" id="edit_item_recipe" data-placeholder="Select Item" name="edit_item_recipe" aria-label="" required disabled>

                                                        </select>
                                                        <label>Item Name</label>
                                                        <span id="projectIDSelectError1_edit_item"></span>
                                                    </div>
                                                </div>

                                                <div class="col-md-12" style="overflow: auto;">

                                                    <table id="custom-table3" style="width: 100%;" class="table table-bordered">


                                                        <thead>
                                                            <tr>
                                                                <th style="width: 30%;">Ingredient</th>
                                                                <th style="width: 30%;">Qty</th>
                                                                <th style="width: 30%;">UOM</th>
                                                                <th style="width: 10%;">Action</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody id="edit_body-data">
                                                            <tr id="tr_body"></tr>

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



                                            </div>


                                            <div class="text-center">
                                                <button type="submit" class="btn btn-primary">Update</button>
                                                <button type="reset" onclick="reset_mapped_item_ingrediant();" class="btn btn-primary">Reset</button>
                                                <input type="hidden" id="reset_mappend_edit_data" name="reset_mappend_edit_data">
                                            </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="delete_mapped_data_form" method="POST">

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


                                            <div class="row m-3">

                                                <div class="col-md-4 mb-3">
                                                    <div class="form-floating">


                                                        <input type="text" class="form-control" id="delete_item_name" name="delete_item_name" placeholder=" Date" required="" readonly>
                                                        <label for="floatingEmail">Item Name</label>
                                                        <p id="error_current_delete_item_name"></p>
                                                    </div>
                                                </div>
                                                <div class="col-md-12 mb-3">
                                                    <div class="form-floating">
                                                        <textarea class="form-control" id="delete_reason" name="delete_reason" required style="height: 100px"></textarea>
                                                        <label for="delete_item_name">Reason</label>
                                                        <p id="error_current_delete_reason"></p>
                                                    </div>
                                                </div>






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

                                                </div>


                                        </form>




                                    </div>


                                    </form>
                                </div>

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






    </main><!-- End #main -->
    <link rel="stylesheet" href="css/jquery.dataTables.min.css">
    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/jquery-ui.js"></script>
    <script src="js/jquery.dataTables.min.js"></script>
    <script src='js/jquery.validate.js'></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <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>
        var data = {};
        data['_token'] = '{{ csrf_token() }}';
        var globalIngrediantArray = [];
        $(document).ready(function(e) {


            $('#hidden_ing_item_map_table').show();
            $('#hidden_ing_table').hide();

            const entity = "{{ session('connect') }}";


            $('#general_table_data').show();

            $(".selUser").select2();
            var end = moment();
            $('#mfg_date').val(end.format('YYYY-MM-DD'));
            $("#mfg_date").keypress(function(event) {
                event.preventDefault();

            });

            // Set hidden_mfg_date value when mfg_date changes
            $('#mfg_date').on('change', function() {
                var mfgDateValue = $(this).val();
                $('#hidden_mfg_date').val(mfgDateValue);
            });

            $(function() {
                $("#mfg_date").datepicker({
                    dateFormat: "yy-mm-dd",
                    changeMonth: true,
                    changeYear: true,
                    maxDate: '0',
                    minDate: '-2',

                    onClose: function(selectedDate) {
                        var someDate = new Date(selectedDate);
                        var day = $('#shelf_life').val();
                        if (day != '' && !isNaN(someDate.getTime())) {
                            someDate.setDate(someDate.getDate() + parseInt(day - 1));
                            var dateFormated = someDate.toISOString().substr(0, 10);
                            $("#exp_date").val(dateFormated);

                            barcode_change();
                        }
                    }
                });

            });

            $("#edit_mfg_date").keypress(function(event) {
                event.preventDefault();
            });
            $(function() {
                $("#edit_mfg_date").datepicker({
                    dateFormat: "yy-mm-dd",
                    changeMonth: true,
                    changeYear: true,
                    maxDate: '0',
                    minDate: '-2',
                    onClose: function(selectedDate) {
                        var someDate = new Date(selectedDate);
                        var day = $('#edit_shelf_life').val();
                        someDate.setDate(someDate.getDate() + parseInt(day));
                        var dateFormated = someDate.toISOString().substr(0, 10);
                        $("#edit_exp_date").val(dateFormated);
                        edit_barcode_change();
                    }
                });
            });


            $('#master_ingrediant_data').validate({
                rules: {
                    ingrediant_name_master: "required",
                    uom_data: "required",


                },

                highlight: function(element) {
                    $(element).addClass('error-border');
                    $(element).removeClass('success-border');
                },
                unhighlight: function(element) {
                    $(element).removeClass('error-border');
                    $(element).addClass('success-border');
                },
                messages: {
                    ingrediant_name_master: "This field is required",
                    uom_data: "This field is required",
                },
                errorPlacement: function(error, element) {

                    if (element.attr("name") == "ingrediant_name_master") {
                        error.appendTo('#projectIDSelectError8_ingrediant_name_master');
                    } else if (element.attr("name") == "uom_data") {
                        error.appendTo('#projectIDSelectError8_uom_data');
                    } else {
                        error.insertAfter(element);
                    }
                },

            })

            $('#editBarcode').validate({
                rules: {
                    edit_ing_name: "required",
                    edit_uom: "required",


                },

                highlight: function(element) {
                    $(element).addClass('error-border');
                    $(element).removeClass('success-border');
                },

                unhighlight: function(element) {
                    $(element).removeClass('error-border');
                    $(element).addClass('success-border');
                },

                messages: {
                    edit_uom: "This field is required",
                    edit_ing_name: "This field is required",
                },

                errorPlacement: function(error, element) {

                    if (element.attr("name") == "edit_ing_name") {
                        error.appendTo('#projectIDSelectError8_edit_ing_name');
                    } else if (element.attr("name") == "edit_uom") {
                        error.appendTo('#projectIDSelectError8_edit_uom');
                    } else {
                        error.insertAfter(element);
                    }
                },

            })

            $('#addBarcode').validate({
                rules: {
                    item_recipe: "required",
                    item_recipe_name: "required",
                    batch: "required",
                    // quantity: "required",
                    // mfg_date: "required",
                    shelf_life: "required",
                    exp_date: "required",
                    label_qty: "required",

                    item_qty: "required",
                },

                highlight: function(element) {
                    $(element).addClass('error-border');
                    $(element).removeClass('success-border');
                },
                unhighlight: function(element) {
                    $(element).removeClass('error-border');
                    $(element).addClass('success-border');
                },
                messages: {
                    item_recipe: "This field is required",
                    item_recipe_name: "This field is required",
                    batch: "This field is required",
                    // quantity: "This field is required",
                    // mfg_date: "This field is required",
                    shelf_life: "This field is required",
                    exp_date: "This field is required",
                    label_qty: "This field is required",

                    item_qty: "This field is required",
                },
                errorPlacement: function(error, element) {

                    if (element.attr("name") == "item_recipe") {
                        error.appendTo('#projectIDSelectError1');
                    } else if (element.attr("name") == "item_recipe_name") {
                        error.appendTo('#projectIDSelectError2');
                    } else if (element.attr("name") == "batch") {
                        error.appendTo('#projectIDSelectError3');
                    }
                    // else if (element.attr("name") == "quantity") {
                    //     error.appendTo('#projectIDSelectError4');
                    // }
                    //  else if (element.attr("name") == "mfg_date") {
                    //     error.appendTo('#projectIDSelectError5');
                    // }
                    else if (element.attr("name") == "shelf_life") {
                        error.appendTo('#projectIDSelectError6');
                    } else if (element.attr("name") == "exp_date") {
                        error.appendTo('#projectIDSelectError7');
                    } else if (element.attr("name") == "label_qty") {
                        error.appendTo('#projectIDSelectError8');
                    } else if (element.attr("name") == "item_qty_main") {
                        error.appendTo('#projectIDSelectError8_item_qty');
                    } else {
                        error.insertAfter(element);
                    }
                },

            })

            $('#master_ingrediant_data').validate({
                rules: {
                    ingrediant_name_master: "required",
                },

                highlight: function(element) {
                    $(element).addClass('error-border');
                    $(element).removeClass('success-border');
                },
                unhighlight: function(element) {
                    $(element).removeClass('error-border');
                    $(element).addClass('success-border');
                },
                messages: {
                    ingrediant_name_master: "This field is required",
                },
                errorPlacement: function(error, element) {

                    if (element.attr("name") == "ingrediant_name_master") {
                        error.appendTo('#projectIDSelectError8_ingrediant_name_master');
                    } else {
                        error.insertAfter(element);
                    }
                },

            })


            $('#edit_form_item_ingrediant_mapping').validate({
                rules: {
                    edit_item_recipe: "required",
                },

                highlight: function(element) {
                    $(element).addClass('error-border');
                    $(element).removeClass('success-border');
                },
                unhighlight: function(element) {
                    $(element).removeClass('error-border');
                    $(element).addClass('success-border');
                },
                messages: {
                    edit_item_recipe: "This field is required",
                },
                errorPlacement: function(error, element) {

                    if (element.attr("name") == "edit_item_recipe") {
                        error.appendTo('#projectIDSelectError1_edit_item');
                    } else {
                        error.insertAfter(element);
                    }
                },

            })


            $('#delete_mapped_data_form').validate({
                rules: {
                    delete_item_name: "required",
                    delete_reason: "required",
                },

                highlight: function(element) {
                    $(element).addClass('error-border');
                    $(element).removeClass('success-border');
                },
                unhighlight: function(element) {
                    $(element).removeClass('error-border');
                    $(element).addClass('success-border');
                },
                messages: {
                    delete_item_name: "This field is required",
                    delete_reason: "This field is required",
                },
                errorPlacement: function(error, element) {

                    if (element.attr("name") == "delete_item_name") {
                        error.appendTo('#error_current_delete_item_name');
                    } else if (element.attr("name") == "delete_reason") {
                        error.appendTo('#error_current_delete_reason');
                    } else {
                        error.insertAfter(element);
                    }
                },

            })

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

            get_items();
            barcode_add_input();

            load_mapped_item();
            getIngrediants();

            load_uom();

            load_ingrediant_data();
            $('#hidden_mfg_date').val($('#mfg_date').val());

        });


        // function handleIngrediantMaster(){
        // }

        function get_items() {
            $('#item_recipe').empty().append('');
            $("#item_recipe").trigger("chosen:updated");
            var data = {};
            data['_token'] = '{{csrf_token()}}';
            $.ajax({
                url: 'get_items_details',
                type: "GET",
                data: data,
                success: function(returndata) {
                    if (returndata != 0) {
                        var arr = jQuery.parseJSON(returndata);
                        $('#item_recipe').append('<option value=""></option>');
                        $('#edit_item_recipe').append('<option value=""></option>');


                        $.each(arr, function(key, val) {
                            //  console.log(arr[key]);
                            $('#item_recipe').append('<option value="' + arr[key]['id'] + '">' + arr[key]['item_name'] + '</option>');

                            $('#edit_item_recipe').append('<option value="' + arr[key]['id'] + '">' + arr[key]['item_name'] + '</option>');
                            // $('.ingrediant_recipe').append('<option value="' + arr[key]['id'] + '">' + arr[key]['item_name'] + '</option>');
                        });
                        $("#item_recipe").trigger("chosen:updated");
                    } else {
                        $('#item_recipe').empty().append('');
                        $("#item_recipe").trigger("chosen:updated");
                    }

                }
            })
        }

        function recipe_change() {
            var data = {};
            data['_token'] = '{{csrf_token()}}';
            data['id'] = $('#item_recipe').val();
            $("#pageloader").fadeIn();
            $.ajax({
                url: 'get_items_list_by_id',
                type: "POST",
                data: data,
                success: function(returndata) {
                    $("#pageloader").fadeOut();
                    var arr = jQuery.parseJSON(returndata);
                    var mfg_date = $('#mfg_date').val();
                    var hidden_mfg_date = $('#hidden_mfg_date').val();


                    var someDate = new Date(mfg_date);

                    var item_name = arr[0]['item_name'];
                    var day = arr[0]['shelf_life'];
                    $('#shelf_life').val(day);
                    var day_cal = parseInt(day);
                    var correct_day = day_cal - 1;
                    someDate.setDate(someDate.getDate() + correct_day);
                    var exp_date = someDate.toISOString().substr(0, 10);
                    $('#item_recipe_name').val(item_name);
                    $('#item_id').val(arr[0]['id']);
                    var qty = arr[0]['standard_size'];
                    var um = arr[0]['unit_measure'];
                    $('#original_qty').val(qty);
                    $('#quantity').val(qty);
                    $('#unit_measure').val(um);
                    $('#label_qty').val(1);
                    $('#exp_date').val(exp_date);
                    $('#exp_date_label').val(exp_date);
                    $('#hidden_exp_date_label').val(exp_date);
                    $('#item_varient_label').val(arr[0]['item_varient']);
                    $('#hidden_item_varient_label').val(arr[0]['item_varient']);
                    $('#uom_name_label').val(arr[0]['unit_measure']);
                    $('#standard_size_label').val(arr[0]['standard_size']);


                    $('#item_varient').val(arr[0]['item_varient']);
                    $('#item_degree').val(arr[0]['item_degree']);
                    $('#batch').val(0);

                    barcode_change();
                }
            })

        }


        function recipe_change_ing(selectElement) {


            var index = selectElement.id.replace('ingrediant_recipe', '');
            var data = {};
            var item_names = $('#' + selectElement.id).val();
            data['id'] = item_names;
            data['_token'] = "{{ csrf_token() }}";

            var data = {
                '_token': '{{csrf_token()}}',
                'id': $(selectElement).val()
            };

            $.ajax({
                url: 'retrive_ingrediant_master_data_by_id',
                type: "POST",
                data: data,
                success: function(returndata) {
                    var arr = jQuery.parseJSON(returndata);
                    if (arr.length > 0) {
                        var qty = arr[0]['standard_size'];
                        var um = arr[0]['uom'];


                        $('#ing_qty' + index).val(qty);
                        // $('#img_uom' + index).val(um);
                        $('#img_uom' + index).val(um).trigger('change'); // works for both native select and select2

                    }

                }
            });
        }

        function recipe_change_ing_edit(selectElement) {


            var index = selectElement.id.replace('edit_ingrediant_recipe', '');
            var data = {};
            var item_names = $('#' + selectElement.id).val();
            data['id'] = item_names;
            data['_token'] = "{{ csrf_token() }}";

            var data = {
                '_token': '{{csrf_token()}}',
                'id': $(selectElement).val()
            };

            $.ajax({
                url: 'retrive_ingrediant_master_data_by_id',
                type: "POST",
                data: data,
                success: function(returndata) {
                    var arr = jQuery.parseJSON(returndata);
                    var qty = arr[0]['standard_size'];
                    var um = arr[0]['uom'];


                    //     $('#ing_qty' + index).val(qty);
                    // $('#img_uom' + index).val(um);
                    $('#edit_img_uom' + index).val(um).trigger('change'); // works for both native select and select2



                }
            });
        }


        // function removeRow(btn) {
        //     $(btn).closest('tr').remove();
        // }





        let barcodeInputs = [];



        function barcode_add_input() {
            const index = barcodeInputs.length;
            barcodeInputs.push('');
            render_all_inputs();
        }

        function barcode_update_value(index, value) {
            barcodeInputs[index] = value.trim();
            update_barcode_display();
        }

        function barcode_remove_input(index) {
            barcodeInputs.splice(index, 1); // Remove the value from array
            render_all_inputs(); // Re-render all input fields
        }

        function render_all_inputs() {
            $('#input_container_custom').empty();

            // If barcodeInputs is empty, add one empty input
            if (barcodeInputs.length === 0) {
                barcodeInputs.push('');
            }

            barcodeInputs.forEach((val, index) => {
                const isLast = index === barcodeInputs.length - 1;
                const addBtn = isLast ?
                    `<button class="btn btn-danger" type="button" onclick="barcode_add_input()" title="Add">
                   +
               </button>` :
                    '';

                $('#input_container_custom').append(`
            <div class="input-group mb-2 align-items-center" id="barcode_input_group_${index}">
                <input type="text" class="form-control barcode-dynamic-input"
                       oninput="barcode_update_value(${index}, this.value)"
                       value="${val}" placeholder="Enter label text">
                <button class="btn btn-danger" type="button" onclick="barcode_remove_input(${index})" title="Remove">
                    &times;
                </button>
                ${addBtn}
            </div>
        `);
            });

            update_barcode_display();
        }

        function update_barcode_display() {
            const label_qty = parseInt($('#label_qty_custome').val()) || 1;
            const sticker_type = $('#sticker_type_custome').val();
            const inputText = barcodeInputs.join('<br>'); // Combine all user input lines

            $('#barcode1_custom').empty(); // Clear preview

            if (!inputText.trim()) return;

            if (sticker_type === 'Double Sticker') {
                // Each row contains 2 labels, so divide total by 2 and loop accordingly
                const rows = Math.ceil(label_qty / 2);
                for (let i = 0; i < rows; i++) {
                    $('#barcode1_custom').append(`
                <div class="d-flex gap-2 mb-2">
                    <div class="label-table border p-2 w-50">
                        <div class="text-content" style="font-weight:bold;font-size:14px">${inputText}</div>
                    </div>
                    ${
                        (i * 2 + 1) < label_qty
                            ? `<div class="label-table border p-2 w-50">
                                   <div class="text-content" style="font-weight:bold;font-size:14px">${inputText}</div>
                               </div>`
                            : `<div class="label-table border p-2 w-50 invisible"></div>` // blank if odd number
                    }
                </div>
            `);
                }
            } else {
                // Single label per row
                for (let i = 0; i < label_qty; i++) {
                    $('#barcode1_custom').append(`
                <div class="label-table border p-2 mb-2">
                    <div class="text-content" style="font-weight:bold;font-size:14px">${inputText}</div>
                </div>
            `);
                }
            }
        }



        // function update_barcode_display() {
        //     $('#barcode1_custom').empty();

        //     const labelQty = parseInt($('#label_qty_custome').val(), 10) || 1; // Default to 1 if not set

        //     for (let i = 0; i < labelQty; i++) {
        //         barcodeInputs.forEach(val => {
        //             if (val && val !== '') {
        //                 $('#barcode1_custom').append(`<div class="text-center mb-2">${$('<div>').text(val).html()}</div>`);
        //             }
        //         });
        //     }
        // }


        function reset_data_custom() {
            barcodeInputs = [];
            $('#barcode1_custom').empty();
            render_all_inputs(); // Re-render default input
        }





        function handlePrint() {
            const label_qty = parseInt($('#label_qty_custome').val()) || 1;
            const sticker_type = $('#sticker_type_custome').val();
            const inputText = barcodeInputs.filter(val => val.trim() !== '').join('<br>');

            if (!inputText) return;

            let data = '';

            if (sticker_type === 'Double Sticker') {
                const rows = Math.ceil(label_qty / 2);
                for (let i = 0; i < rows; i++) {
                    const col1 = `<div class="label-table"><div class="bold-uppercase">${inputText}</div></div>`;
                    const col2 = (i * 2 + 1 < label_qty) ?
                        `<div class="label-table"><div class="bold-uppercase">${inputText}</div></div>` :
                        `<div class="label-table" style="visibility: hidden;"></div>`;
                    data += `${col1}${col2}`;
                }
            } else {
                for (let i = 0; i < label_qty; i++) {
                    data += `
            <div class="label-table full-width">
                <div class="bold-uppercase">${inputText}</div>
            </div>
            `;
                }
            }

            const containerClass = (sticker_type === 'Single Sticker') ? 'label-container single-label' : 'label-container';

            const newWin = window.open();
            newWin.document.open();
            newWin.document.write(`
        <html>
        <head>
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
            <style>
                @media print {
                    @page { size: auto; margin: 17mm; }
                    .label-container { display: flex; flex-wrap: wrap; justify-content: flex-start; }
                    .label-table {
                        box-sizing: border-box;
                        padding: 5px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        text-align: center;
                        height: 100px; /* Fixed height for vertical centering */
                        page-break-inside: avoid;
                    }
                    .label-container.single-label .label-table {
                        width: 100%;
                    }
                    .label-container:not(.single-label) .label-table {
                        width: 50%;
                    }
                }
                .label-container {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: flex-start;
                }
                .label-table {
                    padding: 5px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    text-align: center;
                    height: 100px; /* Fixed height for vertical centering */
                }
                .bold-uppercase {
                    font-family: Arial, sans-serif;
                    font-weight: bold;
                    text-transform: uppercase;
                    font-size: 20px;
                    padding: 10px;
                }
                .full-width { width: 100%; }
            </style>
        </head>
        <body onload="window.print()">
            <div class="${containerClass}">${data}</div>
        </body>
        </html>
    `);
            newWin.document.close();

            setTimeout(() => {
                newWin.close();
                reset_data_custom(); // <-- Call it here after closing the window
            }, 500);
        }



        $(document).on('change input', '.ingrediant_recipe, .qty, .uom', function() {
            barcode_change();
        });



        function barcode_change() {
            $('#barcode1').remove();
            $('.qr_ref').remove();
            $('#qr_code_id').val("");
            const entity = "{{ session('connect') }}";
            var item_varient = $('#item_varient').val();
            var item_degree = $('#item_degree').val();
            var item_id = $('#item_id').val();
            var rcp_name = $('#item_recipe_name').val();
            var mfgDate = $('#mfg_date').val();
            var batch = $('#batch').val();


            var add_label_name = $('#add_label_name').val();
            var cook_label_name = $('#cook_label_name').val();
            // var quantity = $('#quantity').val();
            // var qty = quantity.replace(/\D/g, '');
            var label_qty = $('#label_qty').val();

            console.log(label_qty);
            var m_date = $('#mfg_date').val();
            var e_date = $('#exp_date').val();

            $('#barcode').append('<div id="barcode1"></div>');

            if (label_qty > 10) {
                $("#pageloader").fadeIn();
            }
            let footerHTML = '';
            if (cook_label_name) {

                footerHTML += `
                
                 <div class="row" style="margin-bottom: -8px;">
                            <p class="col-12 color-black pr-0 pl-2 recipe-name text-center borderdivtop" style="padding-top:1px" id="sticker_recipe_nam_1">${cook_label_name}</p>
                        </div>
                `;

            }

            for (let i = 1; i <= label_qty; i++) {
                var unix = new Date().getTime();
                var now = moment();
                var n = now.format("HH:mm:ss");
                var random = Math.floor(Math.random() * 9000) + 1000;
                var userInput = item_id + '#' + unix + '-' + random;


                // 🔁 Build ingredients block dynamically
                let ingredientHTML = '';
                $('#customizedTable tbody tr').each(function() {
                    var ingName = $(this).find('.ingrediant_recipe option:selected').text().trim() || '';
                    var qty = $(this).find('.qty').val() || '';
                    var uom = $(this).find('.uom').val() || '';

                    if (ingName && qty && uom) {
                        ingredientHTML += `
                <div class="row">
                    <label class="col-7 color-black str-label borderdiv" style="white-space: nowrap">${ingName}:</label>
                    <p class="col-5 color-black mfg stg borderdiv">${qty} ${uom}</p>
                </div>`;
                    }
                });


                $('#barcode1').append(`
            <div id="new-ticket${i}">
                <div class="row mx-0 label-container" id="sticker${i}">
                    <div class="col-12 px-0 label-info-container">
                       
                        <div class="row" style="margin-top: -7px;">
                            <p class="col-12 color-black pr-0 pl-2 recipe-name borderdivbottom" id="sticker_recipe_name${i}">${rcp_name}</p>
                        </div>
                        <div class="row">
                            <label class="col-7 color-black str-label borderdiv" style="white-space: nowrap">${add_label_name}</label>
                            <p class="col-5 color-black mfg stg borderdiv" id="item_degree${i}">${mfgDate}</p>
                        </div>
                           ${ingredientHTML}
                             ${footerHTML}
                        

                
                    </div>
                </div>
            </div>
        `);

                $('#addBarcode').append(`
            <input type="hidden" class="form-control qr_ref" id="qr_code_id${i}" name="qr_code_id[]" value="${unix}-${random}" readonly>
            <input type="hidden" class="form-control qr_ref" id="qr_code_content${i}" name="qr_code_content[]" value="${userInput}" readonly>
        `);


            }

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

        }


        $('#exp_date_label').on('input', function() {
            if ($(this).val().trim() === "") {
                $('.exp-label, .exp').remove();
                $('#exp_date').val('');
            }
        });

        $('#mfg_date').on('input', function() {

            if ($(this).val().trim() === "") {
                $('.mfg-label, .mfgLabels').remove();
            }
        });

        $('#item_varient_label').on('input', function() {
            // if ($(this).val().trim() === "") {
            //     $('.str-label').each(function () {
            //     $(this).closest('.row').find('.stg').text('');
            // });
            // }
            if ($(this).val().trim() === "") {
                $('.str-label, .stg').remove();
            }
        });

        $('#quantity').on('input', function() {

            if ($(this).val().trim() === "" && $('#uom_name_label').val().trim() == "") {
                $('.qty-label, .qtyLabel').remove();
                $('#uom_name_label').val('');
            }
        });



        $('#batch_no').on('input', function() {

            if ($(this).val().trim() === "") {
                $('.batch-label, .batchLabel').remove();

            }
        });





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


            if (!$('#addBarcode').valid()) {
                return;
            }

            let hasError = false;
            let errorMsg = "";

            $('#customizedTable tbody tr').each(function(index, row) {
                let i = index + 1;

                let ingrediantVal = $(this).find(`[id^="ingrediant_recipe"]`).val();
                let qtyVal = $(this).find(`[id^="ing_qty"]`).val();

                if (!ingrediantVal || ingrediantVal === '') {
                    errorMsg = "Ingredient is Required in Row " + i;
                    hasError = true;
                    return false;
                }

                if (!qtyVal || qtyVal.trim() === '') {
                    errorMsg = "Quantity is Required in Row " + i;
                    hasError = true;
                    return false;
                }
            });

            if (hasError) {
                alert(errorMsg);
                return;
            }
            var formData = new FormData(this);

            $.ajax({
                url: 'add_item_ingrediant_mapping_data',
                type: "POST",
                data: formData,
                contentType: false,
                processData: false,
                success: function(returndata) {
                    if (returndata == 0) {
                        alert("Data Already Exist.");
                    } else {
                        alert("Data Inserted Successfully");
                        // load_mapped_item();
                        // window.location.reload();
                        reset_data();

                        load_mapped_item();
                        // getIngrediants();
                    }
                },
            });
        });



        //    @page { size: 75mm 50mm; margin: 2mm; }


        function print_labels() {
            const rcp_name = $('#item_recipe_name').val();
            const mfg_date = $('#mfg_date').val();

            const add_label_name = $('#add_label_name').val();
            const cook_label_name = $('#cook_label_name').val();



            let addHTML = '';
            let footerlavelHTNL = '';
            if (add_label_name) {
                addHTML = `
             <td class="left-cell">${add_label_name}</td>
            `;
            }

            if (cook_label_name) {
                footerlavelHTNL = `
                  <div class="do-not-cook">${cook_label_name}</div>
               
           
            `;
            }




            const parts = mfg_date.split('-'); // ["2025", "08", "01"]
            const formattedDate = `${parts[2]}-${parts[1]}-${parts[0].slice(2)}`;
            const label_qty = parseInt($('#label_qty').val(), 10);

            let data = '';
            for (let i = 1; i <= label_qty; i++) {
                let ingredients = '';
                $('#customizedTable tbody tr').each(function() {
                    const ingName = $(this).find('.ingrediant_recipe option:selected').text().trim();
                    const qty = $(this).find('.qty').val().trim();
                    const uom = $(this).find('.uom').val().trim();

                    if (ingName && qty && uom) {
                        ingredients += `
                    <tr>
                        <td class="left-cell">${ingName}</td>
                        <td class="right-cell">${qty} ${uom}</td>
                    </tr>`;
                    }
                });

                data += `
        <div class="label-container22">
            <div class="label-title">${rcp_name}</div>
            <table class="label-table">
                <tr>
                      ${addHTML}
                    <td class="right-cell handwritten">${formattedDate}</td>
                 
                    </tr>
                ${ingredients}
               
            </table>
           ${footerlavelHTNL}
        </div>`;
            }

            const newWin = window.open();
            newWin.document.open();
            newWin.document.write(`
        <html>
        <head>
            <style>
                @media print {
                    @page { size: 75mm 50mm;margin: 10%;padding:0;box-sizing: border-box;}
                  
                }
                body {
                    font-family: Arial, sans-serif;
                    margin: 0;
                    padding: 0;
                  
                    align-items: center;
              
                    gap:0;
                    height: 100vh;
                    box-sizing: border-box
                    
                }
                .label-container22 {
                    border: 3px solid black;
                    width: 90%;
                    margin:20px 0;
                    padding: 0px;
                    font-size: 18px;
                    
                }
                .label-title {
                    font-weight: bold;
                 
                    border-bottom: 2px solid black;
                    padding-bottom: 2px;
              
                    text-align: left;
                     font-weight: bold;
                    padding-left: 2px;
                }
                .label-table {
                font-size: 15px;
                    width: 100%;
                    border-collapse: collapse;
                  
                }
                    
                .label-table td {
                    border:1px solid black;
                    padding: 2px 4px; 
                
                }
                .left-cell {
                    width: 60%;
                  
                    text-align: left;
                }
                .right-cell {
                    width: 40%;
                  
                    text-align: left;
                }
               
                .do-not-cook {
                    text-align: center;
                    border-top: 2px solid black;
                
                    padding-top: 3px;
                    font-weight: bold;
                
                }
            </style>
        </head>
        <body onload="window.print()">
            ${data}
        </body>
        </html>
    `);
            newWin.document.close();

            setTimeout(() => {
                newWin.close();
                window.location.reload();

            }, 500);


        }







        function delete_data() {
            data['reference_id'] = $("#delete_id").val();
            data['delete_reason'] = $("#delete_reason").val();
            if ($('#deleteBarcode').valid()) {
                $.ajax({
                    url: 'delete_qr_code_details_v2',
                    type: "POST",
                    data: data,
                    success: function(returndata) {
                        // console.log(returndata);
                        alert("Data Deleted Sucssefully")
                        $(".btn-close").click();

                    },
                    error: function() {}
                })

            }
        }

        function viewmodel(mid) {
            data['reference_id'] = mid;
            $.ajax({
                type: 'post',
                url: 'get_qr_code_list_by_id_v2',
                data: data,
                success: function(json) {
                    var obj = jQuery.parseJSON(json)
                    // VIEW 
                    $('#view_item_recipe_name').val(obj[0]['item_name'])
                    $('#view_quantity').val(obj[0]['item_qty'])
                    $('#view_mfg_date').val(obj[0]['mfg_date'])
                    $('#view_label_qty').val(obj[0]['label_qty_group'])
                    $('#view_processed_by').val(obj[0]['processed_by'])
                    // DELETE
                    $('#delete_id').val(obj[0]['reference_id'])
                    $('#delete_item_recipe_name').val(obj[0]['item_name'])
                    $('#delete_quantity').val(obj[0]['item_qty'])
                    $('#delete_mfg_date').val(obj[0]['mfg_date'])
                    $('#delete_label_qty').val(obj[0]['label_qty_group'])

                }

            })
        }

        function reset_data() {
            $('#barcode1').remove();
            $("#addBarcode")[0].reset();
            get_items();
            var end = moment();
            $('#mfg_date').val(end.format('YYYY-MM-DD'));



            $("#body-data tr").not("#item-row1").remove();


            $('#ingrediant_recipe1').val('').trigger('change');
            $('#ing_qty1').val('');
            $('#img_uom1').val('').trigger('change');
        }


        function showHideTable() {
            $('#general_table_data').hide();
        }

        function showHideTableTwo() {
            $('#general_table_data').show();
        }

        // function change_label_type() {
        //     const sticker_type = $('#sticker_type').val();

        //     if (sticker_type === 'Double Sticker') {

        //         $('#barcode1').css({
        //             'display': 'grid',
        //             'grid-template-columns': '1fr 1fr',
        //             'gap': '10px'
        //         });
        //     } else {

        //         $('#barcode1').css({
        //             'display': '',
        //             'grid-template-columns': '',
        //             'gap': '10px'
        //         });
        //     }
        // }


        //
        function input_change_ing(i) {


            var selectedValue = $(`#ingrediant_recipe${i}`).val();
            var ing_qty = $(`#ing_qty${i}`).val();
            console.log(ing_qty);
            if (!selectedValue) {
                alert("Ingrediant is Required");

                return;
            }

            if (!ing_qty) {
                alert("Quantity is Required");

                return;
            }
            // dont contunue


            removeAddButton(i, '#body-data');

            i = i + 1;
            var newRow = `
    <tr id="item-row${i}">
        <td>
            <div class="col-md-2">
                <div class="form-floating mb-3">
                    <select class="selUser form-select ingrediant_recipe" style="width: 300px" id="ingrediant_recipe${i}" data-placeholder="Select Ingrediant" name="ingrediant_recipe[]" onchange="recipe_change_ing(this);">
                    <option value="">Select</option>    
                    @foreach ($ingrediant as $item)
                            <option value="{{ $item->id }}">{{ $item->ingrediant_name }}</option>
                        @endforeach
                    </select>
                   
                </div>
            </div>
        </td>
        <td>
            <input type="number" class="form-control qty inputHeight" id="ing_qty${i}" name="qty[]">
        </td>
      

         <td>
            <div class=" col-md-2">
                <div class="form-floating mb-3">
                    <select class="selUser form-select  uom inputHeight" style="width: 300px" id="img_uom${i}" data-placeholder="Select UOM" name="uom[]">
                        <option value="">Select</option>
                        @foreach ($uom as $item)
                        <option value="{{$item->uom}}">{{$item->uom}}</option>
                        @endforeach
                    </select>
                    
                </div>
            </div>
            <!-- <input type="text" class="form-control uom inputHeight" id="img_uom1" name="uom[]"> -->
        </td>
        <td>
            <div class="d-flex justify-content-center" style="gap:20px">
                <span class="close-mark" id="close${i}" onclick="removeRow(${i});">
                    <i class="bi bi-file-x-fill"></i>
                </span>
                <span class="close-mark" id="add${i}" onclick="input_change_ing(${i});">
                    <i class="bi bi-plus bi-bi-file-fill"></i>
                </span>
            </div>
        </td>
    </tr>
    `;

            $('#customizedTable tbody').append(newRow);
            showAddButtonOnLastRow('#customizedTable tbody');
            seluserexe();

        }


        function removeRow(i) {

            if (i != 1) {


                $('#item-row' + i).remove();
                showAddButtonOnLastRow('#body-data');
                barcode_change();
            }

        }

        function removeAddButton(i, tableId) {

            $(tableId + ' #add' + i).hide();


        }



        function showAddButtonOnLastRow(tableId) {
            $(tableId + ' .close-mark[id^="add"]').hide();
            var lastRow = $(tableId + ' tr:last');
            lastRow.find('.close-mark[id^="add"]').show();
        }

        function load_mapped_item() {
            $('#barcodeList').DataTable().destroy();
            var table = $('#barcodeList').DataTable({
                "ordering": true,
                "order": [0, 'desc'],
                "ajax": {
                    url: "retrive_item_ing_mapped_data", // Ajax request
                    type: "get",
                    data: data,
                },

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

                    {
                        "data": "item_name",
                        "title": "Item Name"
                    },
                    {
                        data: 'item_id',
                        render: function(data, full, type) {
                            return '<input type="hidden" id="table_id"  value="' + data +
                                '"></input> <button data-bs-toggle="modal" data-bs-target="#extralarge_emergency_model" type="button" class="btn btn-danger" onclick="view_model_mapped_data(' +
                                data +
                                ')"><i class="fa-solid fa-pen-to-square style_actions"></i></button>';

                        },
                        "title": "Action"
                    }



                ],
                columnDefs: [

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

                    {
                        "width": "10%",
                        "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();

        }

        function buildIngrediantOptionsHtml(selectedId = '') {
            let html = '<option value="">Select</option>';
            globalIngrediantArray.forEach(item => {
                const selected = item.id == selectedId ? 'selected' : '';
                html += `<option value="${item.id}" ${selected}>${item.ingrediant_name}</option>`;
            });
            return html;
        }

        // function buildIngrediantOptionsHtml2() {
        //     let html = '<option value="">Select Ingrediant</option>';
        //     globalIngrediantArray.forEach(item => {
        //         html += `<option value="${item.id}">${item.ingrediant_name}</option>`;
        //     });
        //     return html;
        // }

        function buildIngrediantOptionsHtml2() {
            let html = '<option value="">Select Ingrediant</option>';
            globalIngrediantArray.slice().reverse().forEach(item => {
                html += `<option value="${item.id}">${item.ingrediant_name}</option>`;
            });
            return html;
        }



        var ingrediantOptionHtml = `{!! collect($ingrediant)->map(function($item){
        return "<option value='{$item->id}'>{$item->ingrediant_name}</option>";
    })->implode('') !!}`;


        function view_model_mapped_data(itemId) {
            $("#reset_mappend_edit_data").val(itemId);
            $('#id_delete').val(itemId);
            $('#id_update').val(itemId);

            data['item_id'] = itemId;

            $.ajax({
                type: 'post',
                url: 'get_mapped_data_by_item_id',
                data: data,
                success: function(json) {
                    let arr = jQuery.parseJSON(json);


                    $('#edit_item_recipe').val(arr[0].item_id);

                    $('#delete_item_name').val(arr[0].item_name);


                    $('#edit_body-data').empty();

                    let i = 1;

                    arr.forEach(element => {
                        let tr = `
                    <tr id="tr_body${i}">
                        <td>
                            <div class="col-md-2">
                                <div class="form-floating mb-3">
                                    <select class="form-select edit_ingrediant_recipe select2-init" style="width: 300px" 
                                            id="edit_ingrediant_recipe${i}" 
                                            name="edit_ingrediant_recipe[]" onchange="recipe_change_ing_edit(this);">
                                        
                                        ${buildIngrediantOptionsHtml2()}
                                    </select>
                                </div>
                            </div>
                        </td>
                        <td>
                            <input type="number" class="form-control edit_qty inputHeight" id="edit_ing_qty${i}" name="edit_ing_qty[]" value="${element.qty}">
                        </td>
                        <td>
                            <div class="col-md-2">
                                <div class="form-floating mb-3">
                                    <select class="form-select edit_uom inputHeight select2-init" style="width: 300px" 
                                            id="edit_img_uom${i}" 
                                            name="edit_img_uom[]">
                                        <option value="">Select</option>
                                        ${uomOptionHtml}
                                    </select>
                                </div>
                            </div>
                        </td>
                        <td>
                            <div class="d-flex justify-content-center" style="gap:20px">
                                <span class="close-mark" id="close${i}" onclick="editremoveRow(${i});">
                                    <i class="bi bi-file-x-fill"></i>
                                </span>
                                <span class="close-mark" id="add${i}" onclick="edit_input_change_ing(${i});">
                                    <i class="bi bi-plus bi-bi-file-fill"></i>
                                </span>
                            </div>
                        </td>
                    </tr>
                `;

                        $('#edit_body-data').append(tr);

                        // Set selected values
                        $(`#edit_ingrediant_recipe${i}`).val(element.ingrediant_id);
                        $(`#edit_img_uom${i}`).val(element.uom);

                        // Initialize select2 on these fields with dropdownParent set to modal content
                        $(`#edit_ingrediant_recipe${i}`).select2({
                            dropdownParent: $('#extralarge_emergency_model .modal-content'),
                            width: 'resolve'
                        });

                        $(`#edit_img_uom${i}`).select2({
                            dropdownParent: $('#extralarge_emergency_model .modal-content'),
                            width: 'resolve'
                        });

                        i++;
                    });

                    showAddButtonOnLastRow('#edit_body-data');
                }
            });
        }


        // These are populated on page render from Blade


        var uomOptionHtml = `{!! collect($uom)->map(function($item){
        return "<option value='{$item->uom}'>{$item->uom}</option>";
    })->implode('') !!}`;

        function seluserexe() {
            $(".selUser").select2();
            $(".selUser3").select2();
            $(".selUser2").select2();

        }

        function editremoveRow(i) {
            if (i != 1) {
                $('#tr_body' + i).remove();
                showAddButtonOnLastRow('#edit_body-data');
            }
        }

        function edit_input_change_ing(index) {
            // console.log(index);

            // console.log(globalIngrediantArray);
            // console.log(buildIngrediantOptionsHtml2());
            var selectedValue = $(`#edit_ingrediant_recipe${index}`).val();
            var ing_qty = $(`#edit_ing_qty${index}`).val();
            console.log(ing_qty);
            if (!selectedValue) {

                return;
            }

            if (!ing_qty) {
                return;
            }
            const newIndex = $('#edit_body-data tr').length + 1;

            let tr = `
        <tr id="tr_body${newIndex}">
            <td>
                <div class="col-md-2">
                    <div class="form-floating mb-3">
                        <select class="form-select edit_ingrediant_recipe select2-init" style="width: 300px" 
                                id="edit_ingrediant_recipe${newIndex}" 
                                name="edit_ingrediant_recipe[]" onchange="recipe_change_ing_edit(this);">
                           
                            ${buildIngrediantOptionsHtml2()}
                        </select>
                    </div>
                </div>
            </td>
            <td>
                <input type="number" class="form-control edit_qty inputHeight" id="edit_ing_qty${newIndex}" name="edit_ing_qty[]" value="">
            </td>
            <td>
                <div class="col-md-2">
                    <div class="form-floating mb-3">
                        <select class="form-select edit_uom inputHeight select2-init" style="width: 300px" 
                                id="edit_img_uom${newIndex}" 
                                name="edit_img_uom[]">
                            <option value="">Select UOM</option>
                            ${uomOptionHtml}
                        </select>
                    </div>
                </div>
            </td>
            <td>
                <div class="d-flex justify-content-center" style="gap:20px">
                    <span class="close-mark" id="close${newIndex}" onclick="editremoveRow(${newIndex});">
                        <i class="bi bi-file-x-fill"></i>
                    </span>
                    <span class="close-mark" id="add${newIndex}" onclick="edit_input_change_ing(${newIndex});">
                        <i class="bi bi-plus bi-bi-file-fill"></i>
                    </span>
                </div>
            </td>
        </tr>
    `;

            $('#edit_body-data').append(tr);

            // Re-initialize Select2 for new selects with dropdownParent
            $(`#edit_ingrediant_recipe${newIndex}`).select2({
                dropdownParent: $('#extralarge_emergency_model .modal-content'),
                width: 'resolve'
            });

            $(`#edit_img_uom${newIndex}`).select2({
                dropdownParent: $('#extralarge_emergency_model .modal-content'),
                width: 'resolve'
            });

            // Ensure only the last row has the add button
            showAddButtonOnLastRow('#edit_body-data');
        }


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


                var formData = new FormData(this);
                formData.append('item_recipe', $('#id_update').val());

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

                $.ajax({
                    type: 'POST',
                    url: 'update_item_ingrediant_mapping',
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function(result) {
                        var obj = jQuery.parseJSON(result);
                        if (obj == 'Exist') {
                            alert(' Data already Exist!');
                        } else {
                            alert('Data Updated Successfully');
                            load_mapped_item();
                            $(".btn-close").click();
                            // reset_approver_name_update();

                        }
                    }
                })
            }
        })

        function reset_mapped_item_ingrediant() {
            var itemId = $('#reset_mappend_edit_data').val();
            view_model_mapped_data(itemId);
        }

        function delete_item_ingrediant_data() {
            if ($('#delete_mapped_data_form').valid()) {


                var data = {};
                data['_token'] = '{{csrf_token()}}';
                data['id_delete'] = $('#id_delete').val();
                data['delete_reason'] = $('#delete_reason').val();

                $.ajax({
                    type: 'POST',
                    url: 'delete_item_ingrediant_mapping',
                    data: data,
                    success: function(result) {
                        var obj = jQuery.parseJSON(result);
                        if (obj == 'Exist') {
                            alert(' Data already Exist!');
                        } else {
                            alert('Data Deleted Successfully');
                            load_mapped_item();
                            $(".btn-close").click();
                            // reset_approver_name_update();

                        }
                    }
                })
            }

        }

        function load_uom() {

            $.ajax({
                type: 'post',
                url: "retrive_uom",
                data: data,
                success: function(data) {

                    var arr = jQuery.parseJSON(data);

                    $('#uom_data').empty();
                    $('#edit_uom').empty();

                    var s = '<option value="">select UOM</option>';
                    $('#uom_data').append(s);

                    var s = '<option value="">select UOM</option>';
                    $('#edit_uom').append(s);


                    $.each(arr, function(key, val) {
                        $('#uom_data').append('<option value = "' + val.uom + '">' + val
                            .uom +
                            '</option>');


                        $('#edit_uom').append('<option value = "' + val.uom + '">' + val
                            .uom +
                            '</option>');

                    });

                }
            });

        }


        $('#master_ingrediant_data').submit(function(e) {
            e.preventDefault();
            if ($('#master_ingrediant_data').valid()) {
                var data = {};
                data['ingrediant_name_master'] = $("#ingrediant_name_master").val();
                data['uom'] = $("#uom_data").val();
                data['_token'] = "{{ csrf_token() }}";
                $.ajax({
                    url: 'add_ingrediant_master',
                    type: "POST",
                    data: data,
                    success: function(returndata) {
                        var obj = jQuery.parseJSON(returndata);
                        if (obj == 'Exist') {
                            alert(' Data already Exist!');
                            $("#ingrediant_name_master").val('');
                            $("#uom_data").val('');
                        } else {
                            alert('Ingrediant Inserted Successfully');
                            $("#ingrediant_name_master").val('');
                            $("#uom_data").val('');
                            // $(".btn-close").click();
                            load_ingrediant_data();
                            getIngrediants();

                        }
                    },

                });

            }
        })

        // because of selUser for class ingrediant_name the retrive_ingrediant_data not rendering 

        function load_ingrediant_data() {
            $.ajax({
                type: 'get',
                url: "retrive_ingrediant_data",
                data: data,
                success: function(data) {

                    let arr = typeof data === 'string' ? JSON.parse(data) : data;

                    arr.sort((a, b) => a.id - b.id);;
                    globalIngrediantArray = arr;

                    $('.ingrediant_recipe').each(function() {
                        let $select = $(this);
                        $select.empty();
                        $select.append('<option value="">Select Ingredient</option>');

                        arr.slice().reverse().forEach(val => {
                            $select.append(`<option value="${val.id}">${val.ingrediant_name}</option>`);
                        });
                    });

                }
            });
        }


        function getIngrediants() {
            $('#barcodeList_ingrediant').DataTable().destroy();
            var table = $('#barcodeList_ingrediant').DataTable({
                "ordering": true,
                "order": [0, 'desc'],
                "ajax": {
                    url: "fetch_ingrediant_all_data", // Ajax request
                    type: "get",
                    data: data,
                },

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

                    {
                        "data": "ingrediant_name",
                        "title": "Ingrediant Name"
                    },
                    {
                        "data": "uom",
                        "title": "UOM"
                    },
                    {
                        data: 'id',
                        render: function(data, full, type) {
                            return '<input type="hidden" id="table_id"  value="' + data +
                                '"></input> <button data-bs-toggle="modal" data-bs-target="#IngrediantMaster" type="button" class="btn btn-danger" onclick="viewmodel_data(' +
                                data +
                                ')"><i class="fa-solid fa-pen-to-square style_actions"></i></button>';

                        },
                        "title": "Action"
                    }



                ],
                columnDefs: [

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

                    {
                        "width": "10%",
                        "targets": [2],
                        "className": "dt-center"
                    },
                    {
                        "width": "10%",
                        "targets": [3],
                        "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();

        }

        function showHideItemIngrediantMapping() {

            $('#hidden_ing_item_map_table').show();
            $('#hidden_ing_table').hide();
        }


        function showHideIngTable() {

            $('#hidden_ing_item_map_table').hide();
            $('#hidden_ing_table').show();

            $("#body-data tr").not("#item-row1").remove();

            $('#ingrediant_recipe1').val('').trigger('change');
            $('#ing_qty1').val('');
            $('#img_uom1').val('').trigger('change');
            $('#item_recipe').val('').trigger('change');



        }


        function reset_ing_edit_data() {
            var id = $("#reset_ingrediant_id_table").val();
            // $("#edit_reason").val('');
            viewmodel_data(id);
        }

        function viewmodel_data(id) {

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

            $("#reset_ingrediant_id_table").val(id);
            $("#editBarcode")[0].reset();
            $("#id_update").val(id);


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

                    // VIEW
                    $('#view_id').val(obj[0]['id']);
                    $('#view_ing_name').val(obj[0]['ingrediant_name']);
                    $('#view_uom').val(obj[0]['uom']);


                    // Update
                    $('#id_update').val(obj[0]['id']);
                    $('#edit_ing_name').val(obj[0]['ingrediant_name']);
                    $('#edit_uom').val(obj[0]['uom']);



                    // delete
                    $('#delete_id').val(obj[0]['id']);
                    $('#delete_ing_name').val(obj[0]['ingrediant_name']);
                    $('#delete_uom').val(obj[0]['uom']);



                }
            });

        }

        function delete_ingrediant_data() {

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

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

        }

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

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


                data['id_update'] = id_update;
                data['edit_ing_name'] = edit_ing_name;
                data['edit_uom'] = edit_uom;

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

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

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

                        } else {
                            $(".btn-close").click();
                            alert('Ingrediant Data Updated Successfully');
                            $('#id_update').val('');
                            $('#edit_ing_name').val('');
                            $("#edit_uom").val('');
                            load_ingrediant_data();
                            getIngrediants();
                        }
                    }
                })
            }
        })
    </script>
    <link rel='stylesheet' href='https://harvesthq.github.io/chosen/chosen.css'>
    <script src='//harvesthq.github.io/chosen/chosen.jquery.js'></script>
    @include('layouts.footer');
</body>

</html>