@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">
                    <li class="nav-item flex-fill" role="presentation">
                        <button class="nav-link w-100 active" id="home-tab" data-bs-toggle="tab" data-bs-target="#bordered-justified-home" type="button" role="tab" aria-controls="home" aria-selected="true">Label Maker</button>
                    </li>

                </ul>
                <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 mb-3">
                                                <select class="selUser form-select" id="item_recipe" data-placeholder="Search/Select an item or recipe" name="item_recipe" aria-label="" onchange="recipe_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="category" name="category" 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">Quantity</label>
                                                <span id="projectIDSelectError4"></span>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-floating mb-3">
                                                <input type="text" class="form-control" id="mfg_date" name="mfg_date" autocomplete="off">
                                                <label for="floatingName">MFG Date</label>
                                                <span id="projectIDSelectError5"></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" style="display: none;">
                                            <div class="form-floating">
                                                <select class="form-select" id="processed_by" name="processed_by" aria-label="" onchange="barcode_change();" required>
                                                    <option value="Vegetarian ">Vegetarian </option>
                                                    <option value="Non Vegetarian ">Non Vegetarian </option>
                                                </select>
                                                <label for="floatingEmail">Category</label>
                                                <span id="projectIDSelectErro"></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>

                    </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">UOM</th>
                                                <!-- <th scope="col">Batch</th> -->
                                                <th scope="col">Qty</th>
                                                <th scope="col">MFG Date</th>
                                                <th scope="col">Shelf Life</th>
                                                <th scope="col">Exp Date</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><!-- 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">Category</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 = {};
        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: '-270',

                    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: '+2',
                    minDate: '-7',
                    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();
            get_items();
        });

        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>');
                        });
                        $("#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();
            $.ajax({
                url: 'get_items_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'];
                    var category = arr[0]['category'];
                    $('#original_qty').val(qty);
                    $('#quantity').val(qty);
                    $('#unit_measure').val(um);
                    $('#category').val(category);
                    $('#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 category = $('#category').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" id="sticker' + i + '">' +
    '<div class="col-12 px-0 label-info-container">' +
    '<table class="table-bordered" id="lable-table">' +
    '<tr style="text-align:center;border:none;"><th colspan="2" style="text-align:center;border:none;font-size:12px" id="sticker_recipe_name' + i + '">' + rcp_name + '</th></tr>' +
    '<tr><td class="color-black">Portion</td><td id="sticker_qty' + i + '">' + quantity + ' ' + unit_measure + '</td></tr>' +
    '<tr><td class="color-black">Category</td><td id="proce_by' + i + '">' + category + '</td></tr>' +
    '<tr><td class="color-black">Prep Date</td><td id="sticker_mgf_date' + i + '">' + mfg_day_year + '</td></tr>' +
    '<tr><td class="color-black">Use By Date</td><td id="proce_by' + i + '">' + exp_day_year + '</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>')

                // if (item_varient == 'Frozen') {
                //     $('#item' + i).append('<label for="item-recipe-dom" class="col-6 color-black exp-label" id="sticker_exp_label' + i + '">AFD:</label>' +
                //         '<p class="col-6 color-black exp" id="sticker_exp' + i + '">' + shelf_life + ' Days</p>');
                // } else {
                //     $('#item' + i).append('<label for="item-recipe-dom" class="col-6 color-black exp-label" id="sticker_exp_label' + i + '">EXP:</label>' +
                //         '<p class="col-6 color-black exp" id="sticker_exp' + i + '">' + exp_day_year + '</p>');
                // }
                
                // if (qty != oqty) {
                //     $(".odd-heading").html("ODD SIZE")
                //     $("#odd_size").val(1)
                // } else {
                //     $(".odd-heading").html("")
                //     $("#odd_size").val(0)
                // }
            }
            $("#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',
                        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_barcode_list();
                                var end = moment();
                                $('#mfg_date').val(end.format('YYYY-MM-DD'));
                            }
                        },
                        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 category = $('#category').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 sticker_exp_label = $('#sticker_exp_label1').text();
            var sticker_exp = $('#sticker_exp1').text();
            var odd_heading = $('#sticker_odd_heading1').html();
            // var processed_by = $('#processed_by').val();
            var data = '';
            for (i = 1; i <= label_qty; i++) {
    data += '<div style="page-break-inside: avoid; display: inline-block; width: 100%; text-align: center;">' +
        '<table style="width:100%; border-collapse: collapse; text-align: center; padding: 5px; table-layout: fixed; max-width: 100%;">' +
        '<tr>' +
        '<td colspan="2" class="bold-uppercase" style="font-weight: bold; font-size: 15px; text-align: center; white-space: normal; word-wrap: break-word; padding: 5px 0; border: none; max-width: 100%;">' + rcp_name + '</td>' +
        '</tr>' +
        '</table>' +
        '<table border="1" style="width:100%; border-collapse: collapse; text-align: center; font-size: 15px;">' +
        '<tr><td class="color-black" style="text-align: left; font-weight: bold; padding: 1px 4px;">Portion</td><td class="color-black" style="text-align: center;">' + quantity + ' ' + unit_measure + '</td></tr>' +
        '<tr><td class="color-black" style="text-align: left; padding: 1px 4px; font-weight: bold;">Category</td><td class="color-black" style="text-align: center;">' + category + '</td></tr>' +
        '<tr><td class="color-black" style="text-align: left; padding: 1px 4px; font-weight: bold;">Prep Date</td><td class="color-black" style="text-align: center;">' + mfg_day_year + '</td></tr>' +
        '<tr><td class="color-black" style="text-align: left; padding: 1px 4px; font-weight: bold;">Use By Date</td><td class="color-black" style="text-align: center;">' + exp_day_year + '</td></tr>' +
        '</table>' +
        '</div>';
}

// Add CSS for print layout
data += '<style>@media print { body { margin: 0; padding: 0; } .color-black { color:black;border: 1px solid black; } table { width: 100%; max-width: 100%; } td { font-size: 12px; } }</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: 50mm 25mm;  margin:10%;} table.print-break {page-break-before: always;}}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;}</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_qr_code_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": "item_name",
                        "title": "Item Name"
                    },
                    {
                        "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": "label_qty_group",
                        "title": "Label Qty"
                    },
                    {
                        "data": "timestamp",
                        "title": "Date & Time"
                    },
				//	{
                  //      "data": "processed_by",
                  //      "title": "Category"
                 //   },

                ],
                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"
                    },

                ],



                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_qr_code_details',
                    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',
                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();
            var end = moment();
            $('#mfg_date').val(end.format('YYYY-MM-DD'));
        }
    </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>