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

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

    .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: 24mm;
        max-width: 50mm;
    }

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

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


    }
</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 Formatted Labels</h1>
        </div><!-- End Page Title -->

        <div class="card">
            <div class="card-body">
                <!-- Bordered Tabs Justified -->
                <br>
                <ul class="nav nav-tabs nav-tabs-bordered d-flex" id="borderedTabJustified" role="tablist">
                    <div class="col-sm-6">
                        <h5 class="card-title">Add Brand And Items</h5>
                    </div>
                    <div class="col-sm-6 text-end">
                        <button type="button" class="btn btn-primary button-adjust m-2" data-bs-toggle="modal"
                            data-bs-target="#brand_modal">Add Brand</button>
                        <button type="button" class="btn btn-primary button-adjust m-2" data-bs-toggle="modal"
                            data-bs-target="#item_modal">Add Item</button>
                    </div>

                </ul>

                <!-- .................................add brand form............................................. -->
                <div class="modal fade" id="brand_modal" tabindex="-1">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">Add Brand</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" id="add_cat"
                                    aria-label="Close"></button>
                            </div>
                            <div class="modal-body">

                                <!-- Floating Labels Form -->
                                <form class="row g-3" id="brand_form" method="POST">

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

                                    <div class="col-md-12">
                                        <div class="form-floating">
                                            <input type="text" class="form-control" id="brand_name"
                                                name="brand_name" placeholder="Brand Name" autocomplete="off">
                                            <label for="revision">Brand Name</label>
                                            <p id="ErrorID_01" style="color:red"></p>

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

                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- ............................................................................................. -->

                <!-- .................................add Item form............................................. -->
                <div class="modal fade" id="item_modal" tabindex="-1">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">Add Item</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" id="add_catt"
                                    aria-label="Close"></button>
                            </div>
                            <div class="modal-body">

                                <!-- Floating Labels Form -->
                                <form class="row g-3" id="label_item_form" method="POST">

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

                                    <div class="col-md-12">
                                        <div class="form-floating">
                                            <input type="text" class="form-control" id="label_item_name"
                                                name="label_item_name" placeholder="Item Name" autocomplete="off">
                                            <label for="revision">Item Name</label>
                                            <p id="ErrorID_01" style="color:red"></p>

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

                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- ............................................................................................. -->


                <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-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"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-8">
                                    <div class="row g-3">
                                    <div class="col-md-4">
                                            <div class="form-floating">
                                                <select class="selUser form-select" id="processed_by" data-placeholder="Select Brand" name="processed_by" aria-label="" onchange="barcode_change();" required>
                                                    <option value=""></option>
                                                </select>
                                                <span id="projectIDSelectError1"></span>
                                            </div>
                                        </div>
                                        <input type="hidden" class="form-control" id="brand_label_name" name="brand_label_name" autocomplete="off" readonly>

                                        <input type="hidden" class="form-control" id="brand_id" name="brand_id" autocomplete="off" readonly>
                                        
                                        <div class="col-md-4">
                                            <div class="form-floating mb-3">
                                                <select class="selUser form-select" id="item_recipe" data-placeholder="Select an Items" name="item_recipe" aria-label="" onchange="item_change();" 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">
                                                <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">
                                            <div class="form-floating mb-3">
                                                <input type="hidden" class="form-control" id="quantity" name="quantity" autocomplete="off" onkeyup="barcode_change()">
                                                <!-- <label for="floatingName">Quantity</label> -->
                                                <span id="projectIDSelectError4"></span>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-floating mb-3">
                                                <input type="hidden" class="form-control" id="mfg_date" name="mfg_date" autocomplete="off">
                                                <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="col-lg-12">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Generated Label Details</h5>
                    <!-- Bordered Tabs -->
                    <ul class="nav nav-tabs nav-tabs-bordered" id="borderedTab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="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>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="home-tab" data-bs-toggle="tab" data-bs-target="#brand_datatable" type="button" role="tab" aria-controls="home" aria-selected="true" onclick="Brand_list();">Brand</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="home-tab" data-bs-toggle="tab" data-bs-target="#Item_table" type="button" role="tab" aria-controls="home" aria-selected="true" onclick="item_list();">Items</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">Label Qty</th>
                                                <th scope="col">Date & Time</th>
                                                <th scope="col">Category</th>

                                            </tr>
                                        </thead>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="brand_datatable" 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="brand_list" class='display dataTable' style="width:100%;">
                                        <thead>
                                            <tr>
                                                <th scope="col">#</th>
                                                <th scope="col">Action</th>
                                                <th scope="col">Brand Name</th>
                                               


                                            </tr>
                                        </thead>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="Item_table" 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="itemlist" class='display dataTable' style="width:100%;">
                                        <thead>
                                            <tr>
                                                <th scope="col">#</th>
                                                <th scope="col">Action</th>
                                                <th scope="col">Item Name</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_processed_by" name="view_processed_by" autocomplete="off" value="1" readonly>
                                            <label for="floatingName">Brand</label>
                                        </div>
                                    </div>
                                    <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">Item Name</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_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="hidden" 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="hidden" class="form-control" id="view_mfg_date" name="view_mfg_date" autocomplete="off" value="2024-02-16" readonly>

                                        </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="hidden" 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="hidden" class="form-control" id="delete_mfg_date" name="delete_mfg_date" autocomplete="off" value="2024-02-16" readonly>

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

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

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

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

                            <div class="tab-content pt-2" id="borderedTabContent">
                                <div class="tab-pane fade show active" id="bordered-storehome9" role="tabpanel"
                                    aria-labelledby="storehome-tab">


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

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

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





                                            </div>


                                        </form>



                                    </div>


                                    </form>

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

                                    <div class="row">

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

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

                                            <div class="col-md-12">
                                                <div class="form-floating">
                                                    <input type="text" class="form-control" id="update_brand"
                                                        name="update_brand" placeholder="Section"
                                                        autocomplete="off">
                                                    <label for="revision">Brand</label>
                                                    <p id="error1_update_section"></p>
                                                </div>


                                            </div>

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


                                        </form>

                                    </div>

                                    </form>

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


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

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

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


                                            </div>

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

                                            </div>


                                        </form>




                                    </div>


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


        <!-- ......................................item deit update view delete modal............................. -->


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

                    <div class="modal-header">
                        <h5 class="modal-title">Item 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="borderedTabUnique" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="storeViewTab" data-bs-toggle="tab"
                                    data-bs-target="#borderedStoreView" type="button" role="tab"
                                    aria-controls="borderedStoreView" aria-selected="true">View</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="storeEditTab" data-bs-toggle="tab"
                                    data-bs-target="#borderedStoreEdit" type="button" role="tab"
                                    aria-controls="borderedStoreEdit" aria-selected="false">Edit</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="storeDeleteTab" data-bs-toggle="tab"
                                    data-bs-target="#borderedStoreDelete" type="button" role="tab"
                                    aria-controls="borderedStoreDelete" aria-selected="false">Delete</button>
                            </li>
                        </ul>

                        <div class="tab-content pt-2" id="borderedTabContentUnique">
                            <!-- View Tab -->
                            <div class="tab-pane fade show active" id="borderedStoreView" role="tabpanel"
                                aria-labelledby="storeViewTab">
                                <form class="row g-3" id="labelItemFormUnique">
                                    <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 mb-3">
                                                    <input type="text" class="form-control" id="viewLabelItemName" 2
                                                        name="viewLabelItemName" autocomplete="off" readonly>
                                                    <label for="viewLabelItemName">Item Name</label>
                                                    <span id="viewErrorName"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

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

                            <!-- Edit Tab -->
                            <div class="tab-pane fade" id="borderedStoreEdit" role="tabpanel" aria-labelledby="storeEditTab">
                                <form class="row g-3" id="editItemForm">
                                    <input type="hidden" id="editItemId" name="editItemId">
                                    <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 mb-3">
                                                    <input type="text" class="form-control" id="editLabelItemName"
                                                        name="editLabelItemName" autocomplete="off">
                                                    <label for="editLabelItemName">Item Name</label>
                                                    <span id="editErrorName"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-lg-12 text-center">
                                        <button type="submit" id="editUser" class="btn btn-primary">Update</button>
                                        <button type="reset" onclick="resetData();" class="btn btn-primary">Reset</button>
                                        <input type="hidden" id="editItemResetId" name="editItemResetId">
                                    </div>
                                </form>
                            </div>

                            <!-- Delete Tab -->
                            <div class="tab-pane fade" id="borderedStoreDelete" role="tabpanel"
                                aria-labelledby="storeDeleteTab">
                                <form class="row g-3" id="deleteItemForm">
                                    <input type="hidden" id="deleteItemId" name="deleteItemId">
                                    <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 mb-3">
                                                    <input type="text" class="form-control" id="deleteLabelItemName"
                                                        name="deleteLabelItemName" autocomplete="off" readonly>
                                                    <label for="deleteLabelItemName">Item Name</label>
                                                    <span id="deleteErrorName"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-lg-12 text-center">
                                        <button type="button" onclick="delete_label_item();" class="btn btn-danger">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 = {};
        data['_token'] = '{{ csrf_token() }}';

        $(document).ready(function(e) {
            $(".selUser").select2();
            var end = moment();
            $('#mfg_date').val(end.format('YYYY-MM-DD'));
            $("#mfg_date").keypress(function(event) {
                event.preventDefault();
            });
            $(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 != '') {
                            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",
                },

                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",
                },
                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 {
                        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);
                    }
                },

            })
            get_barcode_list();
            Brand_list();
            get_items();
            get_brand_list();
        });

        function get_items() {
            $('#item_recipe').empty().append('');
            $("#item_recipe").trigger("chosen:updated");
            var data = {};
            data['_token'] = '{{csrf_token()}}';
            $.ajax({
                url: 'get_label_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>');
                        });
                        $("#item_recipe").trigger("chosen:updated");
                    } else {
                        $('#item_recipe').empty().append('');
                        $("#item_recipe").trigger("chosen:updated");
                    }

                }
            })
        }
        //............................................get item list by ajax......................................
        function get_brand_list() {
            $('#processed_by').empty().append('');
            $("#processed_by").trigger("chosen:updated");
            var data = {};
            data['_token'] = '{{csrf_token()}}';
            $.ajax({
                url: 'get_brand_details_labels',
                type: "GET",
                data: data,
                success: function(returndata) {
                    if (returndata != 0) {
                        var arr = jQuery.parseJSON(returndata);
                        $('#processed_by').append('<option value=""></option>');
                        $.each(arr, function(key, val) {
                            //  console.log(arr[key]);
                            $('#processed_by').append('<option value="' + arr[key]['brand_name'] + '">' + arr[key]['brand_name'] + '</option>');
                        });
                        $("#processed_by").trigger("chosen:updated");
                    } else {
                        $('#processed_by').empty().append('');
                        $("#processed_by").trigger("chosen:updated");
                    }

                }
            })
        }

        //................................................................................................
        function brand_change() {
            var data = {};
            data['_token'] = '{{csrf_token()}}';
            data['id'] = $('#processed_by').val();
            $.ajax({
                url: 'get_brand_by_id',
                type: "POST",
                data: data,
                success: function(returndata) {
                    var arr = jQuery.parseJSON(returndata);

                    var brand_name = arr[0]['brand_name'];

                    $('#brand_label_name').val(brand_name);
                    $('#brand_id').val(arr[0]['id']);


                    barcode_change();
                }
            })

        }


        //............................................................................
        function item_change() {
            var data = {};
            data['_token'] = '{{csrf_token()}}';
            data['id'] = $('#item_recipe').val();
            $.ajax({
                url: 'get_label_list_by_id',
                type: "POST",
                data: data,
                success: function(returndata) {
                    var arr = jQuery.parseJSON(returndata);
                    // var mfg_date = $('#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);
                    // $('#item_varient').val(arr[0]['item_varient']);
                    // $('#item_degree').val(arr[0]['item_degree']);
                    // $('#batch').val(0);

                    barcode_change();
                }
            })

        }


        function barcode_change() {
            $('#barcode1').remove();
            $('.qr_ref').remove();
            $('#qr_code_id').val("");
            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 batch = $('#batch').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();
            var mfg_date = moment($('#mfg_date').val());
            var exp_date = moment($('#exp_date').val());
            var shelf_life = $('#shelf_life').val();
            var mfg_day_year = mfg_date.format('DD' + '.' + 'MM' + '.' + 'YYYY');
            var exp_day_year = exp_date.format('DD' + '.' + 'MM' + '.' + 'YYYY');
            var oqty = $('#original_qty').val();
            var unit_measure = $('#unit_measure').val();
            var processed_by = $('#processed_by').val();
            $('#barcode').append('<div id="barcode1"></div>');
            if (label_qty > 10) {
                $("#pageloader").fadeIn();
            }
            for (i = 1; i <= label_qty; i++) {
                var unix = new Date().getTime();
                var now = new moment();
                var n = now.format("HH:mm:ss");
                var random = Math.floor(Math.random() * 9000) + 1000;
                var userInput = item_id + '#' + unix + '-' + random;

                // Generate QR code
                $('#barcode1').append('<div id="new-ticket' + i + '">' +
                    '<div class="row mx-5 label-container text-center" id="sticker' + i + '">' +
                    '<div class="col-12 px-0 label-info-container">' +
                    '<table class="w-100" id="lable-table" style="border-collapse: collapse;">' +
                    '<tr><td id="proce_by' + i + '" style="font-size: 12px; padding: 10px;">' + processed_by + '</td></tr>' +
                    '<tr><td id="sticker_mgf_date' + i + '" style="font-size: 12px; padding: 10px;">' + rcp_name + '</td></tr>' +
                    '</table>' +
                    '</div>' +
                    '</div>' +
                    '</br>');

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

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

        $('#addBarcode').submit(function(e) {
            e.preventDefault();
            var formData = new FormData(this);
            if ($('#addBarcode').valid()) {
                var qty = $("#label_qty").val();
                if (confirm("Printing " + qty + " Labels")) {
                    $.ajax({
                        url: 'add_qr_code_details_temp',
                        type: "POST",
                        data: formData,
                        contentType: false,
                        processData: false,
                        success: function(returndata) {
                            // console.log(returndata);
                            if (returndata == 0) {
                                alert("Data Already Exist.")
                            } else {
                                print_labels();
                                $('#barcode1').remove();
                                $("#addBarcode")[0].reset();
                                get_items();
                                get_brand_list()
                                get_barcode_list();
                                Brand_list();
                                var end = moment();
                                $('#mfg_date').val(end.format('YYYY-MM-DD'));
                            }
                        },
                        error: function() {}
                    });
                }
            }
        })

        $('#brand_form').submit(function(e) {
            e.preventDefault();
            var formData = new FormData(this);

            if ($('#brand_form').valid()) {
                $.ajax({
                    url: 'add_brand',
                    type: "POST",
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function(result) {
                        // console.log(returndata);
                        if (result == 0) {
                            alert("Brand Alredy Exists");
                        } else {
                            alert("Brand Added Successfully");
                            $("#brand_form")[0].reset();
                            $(".btn-close").click();
                            Brand_list();
                            get_brand_list();


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

            }
        })

        $('#label_item_form').submit(function(e) {
            e.preventDefault();
            var formData = new FormData(this);
            if ($('#label_item_form').valid()) {
                $.ajax({
                    url: 'add_label_item',
                    type: "POST",
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function(result) {
                        // console.log(returndata);
                        if (result == 0) {
                            alert("Item Alredy Exists");
                        } else {
                            alert("Item Added Successfully");
                            $("#label_item_form")[0].reset();
                            $(".btn-close").click();
                            item_list();
                            get_items();
                            get_brand_list();


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

            }
        })

        function print_labels() {
            var rcp_name = $('#item_recipe_name').val();
            var batch = $('#batch').val();
            var quantity = $('#quantity').val();
            var unit_measure = $('#unit_measure').val();
            var item_varient = $('#item_varient').val();
            var item_degree = $('#item_degree').val();
            var label_qty = $('#label_qty').val();
            var m_date = $('#mfg_date').val();
            var e_date = $('#exp_date').val();
            var mfg_date = moment($('#mfg_date').val());
            var exp_date = moment($('#exp_date').val());
            var mfg_day_year = mfg_date.format('DD-MM-YYYY');
            var exp_day_year = exp_date.format('DD-MM-YYYY');
            var processed_by = $('#processed_by').val();
            var data = '';
            for (i = 1; i <= label_qty; i++) {
                data += '<div style="page-break-inside: avoid; display: flex; justify-content: center; align-items: center; width: 100%; text-align: center; padding: 5px;">' +
                    '<table style="border-collapse: collapse; width: 100%; text-align: center; font-size: 18px; table-layout: fixed;">' +
                    '<tr>' +
                    '<td class="color-black" style="text-align: center; padding: 5px; border: none; word-wrap: break-word; overflow-wrap: break-word;">' + processed_by + '</td>' +
                    '</tr>' +
                    '<tr>' +
                    '<td class="color-black" style="text-align: center; padding: 5px; border: none; word-wrap: break-word; overflow-wrap: break-word;">' + rcp_name + '</td>' +
                    '</tr>' +
                    '</table>' +
                    '</div>';
            }

            // Add CSS for print layout with increased sticker size and content fitting within a single page
            data += '<style>@media print { body { margin: 0; padding: 0; }' +
                'table { width: 100%; max-width: 100%; border-collapse: collapse; table-layout: fixed; }' +
                'td { font-size: clamp(12px, 5vw, 15px); border: none; padding: 5px; text-align: center; word-wrap: break-word; overflow-wrap: break-word; max-width: 100%; }' +
                '}</style>';

            var 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: 70mm 40mm; margin: 5%; }' +
                'tr { padding-bottom: 0px; }' +
                '.odd-heading { background: #000; color: #fff; font-weight: bold; text-align: center; text-transform: uppercase; font-family: Helvetica; }' +
                '.bold-uppercase { font-family: Helvetica; font-weight: bold; text-transform: uppercase; }' +
                'table { border-collapse: collapse; table-layout: fixed; width: 100%; }' +
                'td { border: none; padding: 5px; text-align: center; word-wrap: break-word; overflow-wrap: break-word; max-width: 100%; font-size: clamp(10px, 3vw, 14px); }' +
                '}</style></head><body onload="window.print()">' +
                '<div style="display:block;">' + data + '</div></body></html>');

            newWin.document.close();
            setTimeout(function() {
                newWin.close();
            }, 500);




        }


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

                "ajax": {
                    url: "get_label_list", // 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": "processed_by",
                        "title": "Brand"
                    },
                    // {
                    //     "data": "uom",
                    //     "title": "UOM"
                    // },
                    // {
                    //     "data": "qty",
                    //     "title": "Qty"
                    // },
                    // {
                    //     "data": "mfg_date",
                    //     "title": "MFG Date"
                    // },
                    // {
                    //     "data": "shelf_life",
                    //     render: function(data, full, row) {
                    //         if (data == null) {
                    //             return '';
                    //         } else {
                    //             return data + ' Days';
                    //         }
                    //     },
                    //     "title": "Shelf Life"
                    // },
                    // {
                    //     "data": "exp_date",
                    //     "title": "EXP Date"
                    // },
                    {
                        "data": "item_name",
                        "title": "Item Name",
                        render: function(data, row) {
                            console.log(data);
                            return data;
                        }
                    },
                    {
                        "data": "timestamp",
                        "title": "Date & Time"
                    },
                    {
                        "data": "label_qty_group",
                        "title": "Label Qty"
                    },
                ],
                columnDefs: [

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

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

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


                ],



                initComplete: function() {
                    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();
        }

        //................................brand data tables.................................................
        function Brand_list() {
            $('#brand_list').DataTable().destroy();
            var table = $('#brand_list').DataTable({
                "autoWidth": true,
                "ordering": false,
                "searching": true,
                "order": [0, 'desc'],

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

                },

                "columns": [{
                        "data": "id",
                        "title": "#"
                    },
                    {
                        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="#Brandmodal" type="button" class="btn btn-danger" onclick="brandviewmodel(\'' + data + '\')"><i class="fa-solid fa-pen-to-square style_actions"></i></button>';

                        },
                        "title": "Action"
                    },
                    {
                        "data": "brand_name",
                        "title": "Brand Name"
                    },




                ],
                columnDefs: [

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

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

                        "searching": true,
                    },
                   

                ],



                initComplete: function() {
                    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();
        }

        //................................Items data tables.................................................
        function item_list() {
            $('#itemlist').DataTable().destroy();
            var table = $('#itemlist').DataTable({
                "autoWidth": true,
                "ordering": false,
                "searching": true,
                "order": [0, 'desc'],

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

                },

                "columns": [{
                        "data": "id",
                        "title": "#"
                    },
                    {
                        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="#itemviewmodal" type="button" class="btn btn-danger" onclick="itemviewmodel(\'' + data + '\')"><i class="fa-solid fa-pen-to-square style_actions"></i></button>';

                        },
                        "title": "Action"
                    },
                    {
                        "data": "item_name",
                        "title": "Item Name"
                    },


                ],
                columnDefs: [

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

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

                        "searching": true,
                    },
                  

                ],



                initComplete: function() {
                    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();
        }


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

            }
        }
        //testttttttttttttttttt
        function viewmodel(mid) {
            data['reference_id'] = mid;
            $.ajax({
                type: 'post',
                url: 'get_brand_list_by_id',
                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]['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]['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();
            get_brand_list();
            var end = moment();
            $('#mfg_date').val(end.format('YYYY-MM-DD'));
        }
        //.................................................brand view.....................................................
        function brandviewmodel(mid) {
            $("#edit_reset_id").val(mid);
            data['id'] = mid;
            $.ajax({
                type: 'post',
                url: 'view_brands',
                data: data,
                success: function(json) {
                    var obj = jQuery.parseJSON(json);
                    console.log(obj);

                    $('#brand_name_view').val(obj[0]['brand_name']);



                    $("#edit_id").val(obj[0]['id']);
                    $('#update_brand').val(obj[0]['brand_name']);




                    $("#id_delete").val(obj[0]['id']);
                    $('#delete_brand').val(obj[0]['brand_name']);




                }

            })
        }

        function reset_data() {
            var mid = $("#edit_reset_id").val();
            $("#edit_reason").val('');
            brandviewmodel(mid);
        }

        //.................................item view modal..................................................




        function itemviewmodel(mid) {
            $("#editItemResetId").val(mid);
            data['id'] = mid;
            $.ajax({
                type: 'post',
                url: 'view_items_list',
                data: data,
                success: function(json) {
                    var obj = jQuery.parseJSON(json);
                    console.log(obj);

                    $('#viewLabelItemName').val(obj[0]['item_name']);



                    $("#editItemId").val(obj[0]['id']);
                    $('#editLabelItemName').val(obj[0]['item_name']);




                    $("#deleteItemId").val(obj[0]['id']);
                    $('#deleteLabelItemName').val(obj[0]['item_name']);




                }

            })
        }




        // editItemResetId
        // itemviewmodel
        // $('#viewLabelItemName').val(obj[0]['label_item_name']);
        // $("#editItemId").val(obj[0]['id']);
        // $('#editLabelItemName').val(obj[0]['label_item_name']);
        // $("#deleteItemId").val(obj[0]['id']);
        // $('#deleteLabelItemName').val(obj[0]['label_item_name']);





        //..................................update delete brand..................................................
        function delete_item() {
            if ($('#brand_master_delete').valid()) {
                var data = {};
                data['_token'] = '{{ csrf_token() }}';
                data['id_delete'] = $("#id_delete").val();

                $.ajax({
                    url: 'delete_brand',
                    type: "POST",
                    data: data,
                    success: function(returndata) {
                        // console.log(returndata);
                        if (returndata == 0) {
                            // Swal.fire({
                            //     position: "top",
                            //     icon: 'warning',
                            //     text: 'Error While Deleting the Item',
                            // })
                            alert("Error While Deleting");
                        } else {
                            // Swal.fire({
                            //     position: "top",
                            //     icon: 'success',
                            //     text: 'Item Delete Successfully',
                            // })
                            // setTimeout(function() {
                            //     Swal.close()
                            // }, 1000);
                            alert("Item Deleted Successfully");
                            $(".btn-close").click();
                            Brand_list();
                        }
                    },
                    error: function() {}
                });

            }
        }

        //........................................delete item.......................................................

        function delete_label_item() {
            if ($('#deleteItemForm').valid()) {
                var data = {};
                data['_token'] = '{{ csrf_token() }}';
                data['id'] = $("#deleteItemId").val();

                $.ajax({
                    url: 'delete_items',
                    type: "POST",
                    data: data,
                    success: function(returndata) {
                        // console.log(returndata);
                        if (returndata == 0) {
                            // Swal.fire({
                            //     position: "top",
                            //     icon: 'warning',
                            //     text: 'Error While Deleting the Item',
                            // })
                            alert("Error While Deleting");
                        } else {
                            // Swal.fire({
                            //     position: "top",
                            //     icon: 'success',
                            //     text: 'Item Delete Successfully',
                            // })
                            // setTimeout(function() {
                            //     Swal.close()
                            // }, 1000);
                            alert("Item Deleted Successfully");
                            $(".btn-close").click();
                            item_list();
                        }
                    },
                    error: function() {}
                });

            }
        }

        $('#brand_update').submit(function(e) {
            e.preventDefault();
            var formData = new FormData(this);
            if ($('#brand_update').valid()) {
                $.ajax({
                    url: 'brand_update',
                    type: "POST",
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function(returndata) {
                        // console.log(returndata);
                        if (returndata == 0) {
                            // Swal.fire({
                            //     position: "top",
                            //     icon: 'warning',
                            //     text: 'Item Already Exist.',
                            // })
                            alert("Item Already Exist.");
                        } else {

                            // Swal.fire({
                            //     position: "top",
                            //     icon: 'success',
                            //     text: 'Item Updated Successfully',
                            // })
                            // setTimeout(function() {
                            //     Swal.close()
                            // }, 1000);
                            alert("Item Updated Successfully");
                            $(".btn-close").click();
                            Brand_list();
                        }
                    },
                    error: function() {}
                });

            }
        })

        $('#editItemForm').submit(function(e) {
            e.preventDefault();
            var formData = new FormData(this);
            if ($('#editItemForm').valid()) {
                $.ajax({
                    url: 'edit_Item_Form',
                    type: "POST",
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function(returndata) {
                        // console.log(returndata);
                        if (returndata == 0) {
                            // Swal.fire({
                            //     position: "top",
                            //     icon: 'warning',
                            //     text: 'Item Already Exist.',
                            // })
                            alert("Item Already Exist.");
                        } else {

                            // Swal.fire({
                            //     position: "top",
                            //     icon: 'success',
                            //     text: 'Item Updated Successfully',
                            // })
                            // setTimeout(function() {
                            //     Swal.close()
                            // }, 1000);
                            alert("Item Updated Successfully");
                            $(".btn-close").click();
                            item_list();
                        }
                    },
                    error: function() {}
                });

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