@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_no" autocomplete="off" value="1" 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>