@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: 58px !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;
    }



    .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: 2px solid black;
        padding: 11px;
        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,
    .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: 60px;
    }

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


    }

    #main,
    #footer {
        margin-left: 292px;
        margin-right: 1px;
        margin-top: 26px;
    }
</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>Generate Labels</h1>
        </div><!-- End Page Title -->




        <section class="section dashboard">
            <div class="card">
                <div class="card-body">
                    <!-- <h5 class="card-title">Add Employee Details</h5> -->
                    <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" onclick="showHideTableTwo()"
                                data-bs-target="#bordered-home"
                                type="button"
                                role="tab"
                                aria-controls="home"
                                aria-selected="true">Standard</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button
                                class="nav-link"
                                id="profile-tab"
                                data-bs-toggle="tab" onclick="showHideTable()"
                                data-bs-target="#bordered-profile"
                                type="button"
                                role="tab"
                                aria-controls="profile"
                                aria-selected="false">Custom</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" method="POST" id="addBarcode">
                                                <input type="hidden" value="{{csrf_token()}}" name="_token">
                                                <div class="col-lg-3">
                                                    <div class="row mx-0 justify-content-center labels-and-form-container">
                                                        <div class="col-4 px-0 labels-container ">
                                                            <div class="row mx-0 justify-content-center" id="barcode">
                                                                <div id="barcode1"></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-lg-9">
                                                    <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="" onchange="get_item_ingrediant_mapping_data();" required>
                                                                    <!-- <option value=""></option> -->
                                                                </select>
                                                                <span id="projectIDSelectError1"></span>
                                                            </div>
                                                        </div>
                                                        <input type="hidden" class="form-control" id="item_recipe_name" name="item_recipe_name" autocomplete="off" readonly>
                                                        <input type="hidden" class="form-control" id="shelf_life" name="shelf_life" placeholder="Phone" readonly>
                                                        <input type="hidden" class="form-control" id="exp_date" name="exp_date" autocomplete="off" readonly>
                                                        <input type="hidden" class="form-control" id="unit_measure" name="unit_measure" autocomplete="off" readonly>
                                                        <input type="hidden" class="form-control" id="item_id" name="item_id" autocomplete="off" readonly>
                                                        <input type="hidden" class="form-control" id="item_varient" name="item_varient" autocomplete="off" readonly>
                                                        <input type="hidden" class="form-control" id="item_degree" name="item_degree" autocomplete="off" readonly>
                                                        <input type="hidden" class="form-control" id="original_qty" name="original_qty" autocomplete="off" readonly>
                                                        <input type="hidden" class="form-control" id="qr_code_content" name="qr_code_content" autocomplete="off" readonly>
                                                        <input type="hidden" class="form-control" id="odd_size" name="odd_size" autocomplete="off" readonly>

                                                        <!-- <div class="col-md-4">
                                                                    <div class="form-floating mb-3">
                                                                        <input type="number" class="form-control" id="batch" name="batch" autocomplete="off" onkeyup="barcode_change()">
                                                                        <label for="floatingName">Batch</label>
                                                                        <span id="projectIDSelectError3"></span>
                                                                    </div>
                                                                </div> -->
                                                        <!-- <div class="col-md-4">
                                                                    <div class="form-floating mb-3">
                                                                        <input type="text" class="form-control" id="quantity" name="quantity" autocomplete="off" onkeyup="barcode_change()">
                                                                        <label for="floatingName">Item Qty</label>
                                                                        <span id="projectIDSelectError4"></span>
                                                                    </div>
                                                                </div> -->
                                                         <div class="col-md-4">
                                                            <div class="form-floating mb-3">
                                                                <select class="form-select" id="add_label_name" onchange="barcode_change()" data-placeholder="Type" name="add_label_name" aria-label="" required>
                                                                    <option value="Mfg Date">Mfg Date</option>
                                                                     <option value="Packed On">Packed On</option>
                                                                </select>
                                                                <span id="projectIDSelectError122"></span>
                                                            </div>
                                                        </div>
                                                        
                                                        <div class="col-md-4">
                                                            <div class="form-floating mb-3">
                                                                <input type="hidden" class="form-control"  id="hidden_mfg_date" name="hidden_mfg_date" value="">
                                                                <input type="text" class="form-control" id="mfg_date" onchange="barcode_change()" name="mfg_date" autocomplete="off" readonly>
                                                                <label for="floatingName">Date</label>
                                                                <span id="projectIDSelectError5_mfg_date_insert"></span>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-12">
                                                            <div class="form-floating mb-3">
                                                                <input type="text" class="form-control" id="mfg_label_name" name="mfg_label_name" autocomplete="off" value="Best before 30 Days from date of manufacture" onkeyup=" barcode_change()">
                                                                <label for="floatingName">Content</label>
                                                                <span id="projectIDSelectError5_mfg_label_name"></span>
                                                            </div>
                                                        </div>


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

                                                                <input type="text" class="form-control" id="cook_label_name" name="cook_label_name" autocomplete="off" value="INSTRUCTIONS - DO NOT COOK" onkeyup=" barcode_change()">
                                                                <label for="floatingName">Instruction</label>
                                                                <span id="projectIDSelectError5_cook_label_name"></span>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-4">
                                                            <div class="form-floating">
                                                                <input type="number" class="form-control" id="label_qty" name="label_qty" placeholder="Phone" required onkeyup=" barcode_change()">
                                                                <label for="floatingEmail">Label Quantity</label>
                                                                <span id="projectIDSelectError8"></span>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-4 d-none">
                                                            <div class="form-floating">
                                                                <input type="number" class="form-control" id="item_qty_main" name="item_qty_main" placeholder="Phone" value="1" required>
                                                                <label for="floatingEmail">Item Quantity</label>
                                                                <span id="projectIDSelectError8_item_qty"></span>
                                                            </div>
                                                        </div>


                                                        <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">

                                                            </tbody>
                                                        </table>



                                                        <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">Print</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">

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

                                                    <div class="col-lg-4">
                                                        <div class="row mx-0 justify-content-center labels-and-form-container">
                                                            <div class="col-4 px-0 labels-container">
                                                                <div class="row mx-0 justify-content-center" id="barcode">
                                                                    <div id="barcode1_custom"></div>
                                                                    <div id="print_container" style="display: none;"></div>

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

                                                    <div class="col-lg-8">
                                                        <div class="d-flex justify-content-end gap-2 mb-2">

                                                            <div class="col-md-4">
                                                                <div class="form-floating">
                                                                    <input type="number" class="form-control" onchange="update_barcode_display()" id="label_qty_custome" name="label_qty_custome" placeholder="Phone" value="1">
                                                                    <label for="floatingEmail">Label Quantity</label>
                                                                    <span id="projectIDSelectError8_label_qty_custome"></span>
                                                                </div>
                                                            </div>

                                                            <div class="col-md-4">
                                                                <div class="form-floating">
                                                                    <select class="form-select" id="sticker_type_custome" onchange="update_barcode_display()" name="sticker_type_custome" aria-label="" required>
                                                                        <option value="Single Sticker">Single Sticker</option>
                                                                        <option value="Double Sticker">Double Sticker</option>
                                                                    </select>
                                                                    <label for="floatingEmail">Sticker Type</label>
                                                                    <span id="projectIDSelectError8_sticker_type_custome"></span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="row g-3 labels-and-form-container mt-1" style="height: 340px;overflow-y: auto;">

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

                                                                    <div id="input_container_custom"></div>
                                                                </div>

                                                            </div>


                                                        </div>
                                                        <div class="text-center mt-3">
                                                            <button type="button" class="btn btn-primary" onclick="handlePrint()">Print</button>

                                                            <!-- <button type="submit" id="register" class="btn btn-primary">Print</button> -->
                                                            <button type="reset" class="btn btn-primary" onclick="reset_data_custom();">Reset</button>

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

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




        <div class="col-lg-12" id="general_table_data">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Generated Label Details</h5>

                    <ul class="nav nav-tabs nav-tabs-bordered" 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" aria-selected="true" onclick="get_barcode_list();">List</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="card">
                                <div class="card-body" style="overflow-x:auto;">

                                    <h5 class="card-title"></h5>

                                    <!-- Table with stripped rows -->
                                    <table id="barcodeList" class='display dataTable' style="width:100%;">
                                        <thead>
                                            <tr>
                                                <th scope="col">#</th>
                                                <!-- <th scope="col">Action</th> -->
                                                <th scope="col">Item Name</th>
                                                <th scope="col">Ingrediants</th>
                                                <!-- <th scope="col">Ingr QTY</th>
                                                <th scope="col">Ingr UOM</th> -->
                                                <!-- <th scope="col">MFG Date</th>
                                                <th scope="col">Shelf Life</th> -->
                                                <th scope="col">MFG Date</th>
                                                <th scope="col">Label Qty</th>
                                                <th scope="col">Date & Time</th>
                                                <!-- <th scope="col">Processed By</th> -->

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

                </div>
            </div>

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

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

                        <ul class="nav nav-tabs nav-tabs-bordered" id="borderedTab" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="storehome-tab" data-bs-toggle="tab" data-bs-target="#bordered-storehome" type="button" role="tab" aria-controls="storehome" aria-selected="true">View</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="storedelete-tab" data-bs-toggle="tab" data-bs-target="#bordered-storedelete" type="button" role="tab" aria-controls="storedelete" aria-selected="false">Delete</button>
                            </li>
                        </ul>
                        <div class="tab-content pt-2" id="borderedTabContent">
                            <div class="tab-pane fade show active" id="bordered-storehome" role="tabpanel" aria-labelledby="storehome-tab">
                                <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_item_recipe_name" name="view_item_recipe_name" autocomplete="off" readonly value="Onion">
                                            <label for="floatingName">Name</label>
                                        </div>
                                    </div>
                                    <!-- <div class="col-md-4">
                                            <div class="form-floating mb-3">
                                                <input type="number" class="form-control" id="view_batch" name="view_batch" autocomplete="off" value="1" readonly>
                                                <label for="floatingName">Batch</label>
                                            </div>
                                        </div> -->
                                    <div class="col-md-4">
                                        <div class="form-floating mb-3">
                                            <input type="number" class="form-control" id="view_quantity" name="view_quantity" autocomplete="off" value="5" readonly>
                                            <label for="floatingName">Quantity</label>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-floating mb-3">
                                            <input type="text" class="form-control" id="view_mfg_date" name="view_mfg_date" autocomplete="off" value="2024-02-16" readonly>
                                            <label for="floatingName">MFG Date</label>
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <div class="form-floating">
                                            <input type="number" class="form-control" id="view_label_qty" name="view_label_qty" placeholder="Phone" value="2" readonly>
                                            <label for="floatingEmail">Label Quantity</label>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-floating mb-3">
                                            <input type="number" class="form-control" id="view_processed_by" name="view_processed_by" autocomplete="off" value="1" readonly>
                                            <label for="floatingName">Processed By</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-storedelete" role="tabpanel" aria-labelledby="storedelete-tab">
                                <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_item_recipe_name" name="delete_item_recipe_name" autocomplete="off" readonly value="Onion">
                                            <label for="floatingName">Name</label>
                                        </div>
                                    </div>
                                    <!-- <div class="col-md-4">
                                            <div class="form-floating mb-3">
                                                <input type="number" class="form-control" id="delete_batch" name="delete_batch" autocomplete="off" value="1" readonly>
                                                <label for="floatingName">Batch</label>
                                            </div>
                                        </div> -->
                                    <div class="col-md-4">
                                        <div class="form-floating mb-3">
                                            <input type="number" class="form-control" id="delete_quantity" name="delete_quantity" autocomplete="off" value="5" readonly>
                                            <label for="floatingName">Quantity</label>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-floating mb-3">
                                            <input type="text" class="form-control" id="delete_mfg_date" name="delete_mfg_date" autocomplete="off" value="2024-02-16" readonly>
                                            <label for="floatingName">MFG Date</label>
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <div class="form-floating">
                                            <input type="number" class="form-control" id="delete_label_qty" name="delete_label_qty" placeholder="Phone" value="2" readonly>
                                            <label for="floatingEmail">Label Quantity</label>
                                        </div>
                                    </div>


                                    <div class="col-md-4">
                                        <div class="form-floating mb-3">
                                            <input type="text" class="form-control" id="delete_reason" name="delete_reason" placeholder="Phone" required>
                                            <label for="floatingSelect">Reason</label>
                                            <span id="projectIDSelectError401"></span>
                                        </div>
                                    </div>
                                    <div class="text-center">
                                        <button type="button" class="btn btn-primary" onclick="delete_data();">Delete</button>
                                    </div>
                                </form>
                            </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 = {};
           var allIngrediants = @json($ingrediant);
        data['_token'] = '{{ csrf_token() }}';

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


            $('#label_qty').val(1);


            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,
                    minDate: -10,
                    maxDate: +10,

                    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();
                    }
                });
            });

            $('#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",
                    mfg_date: "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",
                      mfg_date: "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 if (element.attr("name") == "mfg_date") {
                        error.appendTo('#projectIDSelectError5_mfg_date_insert');
                    } else {
                        error.insertAfter(element);
                    }
                },

            })

            $('#deleteBarcode').validate({
                rules: {
                    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_reason: "This field is required",
                },
                errorPlacement: function(error, element) {

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

            })
            // $("#pageloader").fadeIn();
             get_barcode_list();
            get_items();
            barcode_add_input();
            $('#hidden_mfg_date').val($('#mfg_date').val());

        });

        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>');
                        $.each(arr, function(key, val) {
                            //  console.log(arr[key]);
                            $('#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);
                    // if (arr[0]['item_varient'] == 'Frozen') {
                    //     var item_name = arr[0]['item_name'] + '(F)';
                    //     var day = arr[0]['afd'];
                    //     $('#shelf_life').val(day);
                    // } else {
                    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: 'get_items_list_by_id',
                type: "POST",
                data: data,
                success: function(returndata) {
                    var arr = jQuery.parseJSON(returndata);
                    var qty = arr[0]['standard_size'];
                    var um = arr[0]['unit_measure'];


                    $('#ing_qty' + index).val(qty);
                    $('#img_uom' + index).val(um);


                    barcode_change();
                }
            });
        }


        // 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();
            let dateObj = new Date(mfgDate);
            let formattedDate = dateObj.toLocaleDateString('en-GB'); // Output: 14/08/2025
            formattedDate = formattedDate.replaceAll('/', '-');   // Output: 14-08-2025

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

            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-6  str-label borderdiv" style="white-space: nowrap">${ingName}</label>
                    <p class="col-6 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; text-align:center;">
                            <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" style="text-align:center;">
                            <p class="col-12 color-black pr-0 pl-2 borderdivbottom" id="item_degree${i}">${add_label_name} ${formattedDate}</p>
                        </div>
                         <div class="row" style="text-align:center;">
                            <p class="col-12 color-black pr-0 pl-2 borderdivbottom" id="mfg_label_name${i}">${mfg_label_name}</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();


            var formData = new FormData(this);
            if ($('#addBarcode').valid()) {



            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 qty = $("#label_qty").val();
                if (confirm("Printing " + qty + " Labels")) {
                    $.ajax({
                        url: 'add_qr_code_details_v2',
                        type: "POST",
                        data: formData,
                        contentType: false,
                        processData: false,
                        success: function(returndata) {
                            // window.location.reload();

                            // console.log(returndata);
                            if (returndata == 0) {
                                alert("Data Already Exist.")
                            } else {

                                print_labels();

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


                            }
                        },
                        error: function() {}
                    });
                }
            }
        })


        //    @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();
             const mfg_label_name = $('#mfg_label_name').val();
             const parts = mfg_date.split('-'); // ["2025", "08", "01"]
            const formattedDate = `${parts[2]}-${parts[1]}-${parts[0]}`;
            const label_qty = parseInt($('#label_qty').val(), 10);


            let addHTML = '';
                let addHTML1 = '';
            let footerlavelHTNL = '';
            if (add_label_name) {
                addHTML = `
              <div class="label-title"> ${add_label_name} ${formattedDate}</div>
            `;
            }

             if (mfg_label_name) {
                addHTML1 = `
              <div class="label-title"> ${mfg_label_name}</div>
            `;
            }

            
                

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




         

            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 rrcp_name">${rcp_name}</div>
            ${addHTML}
             ${addHTML1}
            <table class="label-table">
                ${ingredients}
               
            </table>
           ${footerlavelHTNL}
        </div>`;
            }

            const newWin = window.open();
            newWin.document.open();
            newWin.document.write(`
        <html>
        <head>
            <style>
                @media print {
                    @page { size: 75mm 50mm;box-sizing: border-box; 
                    box-sizing: border-box;
                   
                    }
                  
                }
                body {
                    font-family: Arial, sans-serif;
                     text-align: center;
                    align-items: center;
                    display: flex;
                    flex-direction: column;
                  
                    align-items: center;
              
                    gap:0;
                 
                    box-sizing: border-box
                    
                }
               .label-container22 {
                    border: 3px solid black;
                    width: 100%;
                    page-break-before: always;
               
                }
                   .rrcp_name {
                     text-transform: uppercase;
                    }
                .label-title {
                    border-bottom: 2px solid black;
                    padding-bottom: 2px;
                    text-align: center;
                    font-size: 16px;
                }
                .label-table {
                font-size: 15px;
                    width: 100%;
                    border-collapse: collapse;
                    text-align: center;
                  
                }
                    
                .label-table td {
                    border:1px solid black;
                    padding: 2px 4px; 
                    text-align: center;
                
                }
                .left-cell {
                    width: 50%;
                    text-align: left;
                    white-space: nowrap;
                }
                .right-cell {
                    width: 50%;
                     white-space: nowrap;
                    text-align: left;
                }
               
                .do-not-cook {
                    text-align: center;
                    border-top: 2px solid black;
                    margin-bottom: 2px;
                    padding-top: 3px;
                    font-size: 16px;
                
                }
            </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();
                        get_barcode_list();
                    },
                    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').empty();
            $('#ingrediant_recipe1').val('').trigger('change');
            $('#ing_qty1').val('');
            $('#img_uom1').val('').trigger('change');
            $('#item_recipe').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) {
        const selectedValue = $(`#ingrediant_recipe${i}`).val();
            const ing_qty = $(`#ing_qty${i}`).val();

            if (!selectedValue) {
                alert("Ingrediant is Required");
                return;
            }

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

    removeAddButton(i, '#customizedTable tbody');
    i = i + 1;

    let selectedValues = [];
    $('.ingrediant_recipe').each(function () {
        const val = $(this).val();
        if (val) selectedValues.push(val);
    });

    let options = `<option value="">Select Ingrediant</option>`;
    allIngrediants.forEach(item => {
        if (!selectedValues.includes(item.id.toString())) {
            options += `<option value="${item.id}">${item.ingrediant_name}</option>`;
        }
    });

    const 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}" name="ingrediant_recipe[]" onchange="recipe_change_ing_edit(this);">
                            ${options}
                        </select>
                    </div>
                </div>
            </td>
            <td>
                <input type="number" class="form-control qty inputHeight" id="ing_qty${i}" name="qty[]" onchange="barcode_change();">
            </td>
            <td>
                <input type="text" class="form-control uom inputHeight" id="img_uom${i}" name="uom[]" onchange="barcode_change();">
            </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 seluserexe() {
            $(".selUser").select2();
            $(".selUser3").select2();

        }

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


        function get_item_ingrediant_mapping_data() {
            let itemId = $('#item_recipe').val();
            data['item_id'] = itemId;

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


                    

                    if (arr.length > 0) {

                        $('#item_recipe_name').val(arr[0].item_name);
                        $('#item_id').val(arr[0].item_id);
                        arr.forEach((element, index) => {
                            const i = index + 1;
                            const tr = `
                        <tr id="item-row${i}">
                            <td>
                                <div class="col-md-2">
                                    <div class="form-floating mb-3">
                                        <select class="form-select ingrediant_recipe selUser" style="width: 300px" 
                                                id="ingrediant_recipe${i}" 
                                                name="ingrediant_recipe[]" onchange="recipe_change_ing_edit(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[]" value="${element.qty}">
                            </td>
                            <td>
                                <input type="text" class="form-control uom inputHeight" id="img_uom${i}" name="uom[]" value="${element.uom}" onchange="barcode_change();">
                            </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>
                    `;
                            $('#body-data').append(tr);
                        });

                        arr.forEach((element, index) => {
                            const i = index + 1;
                            $(`#ingrediant_recipe${i}`).val(element.ingrediant_id).trigger('change');
                        });

                    } else {
                        // If no data, append one empty row
                        $('#body-data').html(`
                    <tr id="item-row1">
                        <td>
                            <div class="col-md-2">
                                <div class="form-floating mb-3">
                                    <select class="selUser form-select ingrediant_recipe" style="width: 300px" id="ingrediant_recipe1" name="ingrediant_recipe[]" onchange="recipe_change_ing_edit(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="text" class="form-control qty inputHeight" id="ing_qty1" name="qty[]" onchange="barcode_change();">
                        </td>
                        <td>
                            <input type="text" class="form-control uom inputHeight" id="img_uom1" name="uom[]" onchange="barcode_change();">
                        </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>
                `);
                    }
                    let itemId = $('#item_recipe').val();
                    let itemText = $('#item_recipe option:selected').text();
                    console.log(itemText);
                    console.log(itemId);
                    // let itemId = $('#item_recipe option:selected').text();
                    $('#item_recipe_name').val(itemText);
                    $('#item_id').val(itemId);
                    seluserexe();

                    barcode_change();

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




        function recipe_change_ing_edit(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);
                    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); // works for both native select and select2



                }
            });
        }

        function get_barcode_list() {
            $('#barcodeList').DataTable().destroy();
            var table = $('#barcodeList').DataTable({
                "autoWidth": true,
                "ordering": false,
                "searching": true,
                "order": [0, 'desc'],

                "ajax": {
                    url: "get_qr_code_list_v2", // Ajax request
                    type: "get",
                    data: data,

                },

                "columns": [{
                        "data": "id",
                        "title": "#"
                    },
                    // {
                    //     data: 'reference_id',
                    //     render: function(data, full, type) {

                    //         // return data;
                    //         //  if (type === 'display') {
                    //         return '<input type="hidden" id="table_id"  value="' + data +
                    //             '"></input> <button data-bs-toggle="modal" data-bs-target="#qrModel" type="button" class="btn btn-danger" onclick="viewmodel(\'' + data + '\')"><i class="fa-solid fa-pen-to-square style_actions"></i></button>';

                    //     },
                    //     "title": "Action"
                    // },
                    {
                        "data": "item_name",
                        "title": "Item Name"
                    },
                    {
                        "data": "ing_name",
                        "title": "Ingrediants"
                    },
                    //  {
                    //     "data": "ing_qty",
                    //     "title": "Ingr QTY"
                    // },
                    //  {
                    //     "data": "ing_uom",
                    //     "title": "Ingr UOM"
                    // },
                    {
                        "data": "mfg_date",
                        "title": "MFG Date"
                    },
                    
                    {
                        "data": "label_qty_group",
                        "title": "Label Qty"
                    },
                    {
                        "data": "timestamp",
                        "title": "Date & Time"
                    },
                   

                ],
                columnDefs: [

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

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

                        "searching": true,
                    },
                    {
                        "width": "15%",
                        "targets": [3],
                        "className": "dt-center"
                    },

                ],



                initComplete: function() {
                    $("#pageloader").fadeOut();
                    var api = this.api();

                    $('.filterhead', api.table().header()).each(function(i) {
                        var column = api.column(i);
                        var select = $('<input type="text" class="filter" />').appendTo($(
                                this).empty())
                            .on('keyup change', function() {
                                var val = $.fn.dataTable.util.escapeRegex(
                                    $(this).val()
                                );
                                column
                                    .search(val ? '^' + val + '$' : '', true, false)
                                    .draw();
                            });

                        if (title == '#' || title == '') {
                            $(".filter").attr('type', 'hidden');
                        }
                    });
                }
            });
            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();
        }

    </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>