@extends('admin.layout.master')
@section('title','BARCODE')
@section ('content')
<style> 
    .table th,
    .table td {
        padding: 0rem;
        padding-left: 0.35rem;
        /* padding-right: 0.35rem;
        padding-top: 0.35rem;
        padding-bottom: 0.35rem; */
    }
    .table th {
        background: #ab3535;
        padding: 5px !important;
        color: white !important;
    }
    .custom-td {
        white-space:pre-wrap;
        word-wrap:break-word;
    }
    .stickybutton {
        top: calc(110px + 25%);
        box-shadow: none;
    }
</style>
    <div class="card sina-card">
        <div class="card-header card-header-s d-flex flex-wrap align-items-center">
            <h4 class="col-6 pl-0">Barcode Generator</h4> 
        </div> 
        <div class="card-body pt-2">
            <form method="post" name="barcode_form" id="barcode_form"> {{-- action="{{ route('barcode.index') }}" --}}
                @csrf 
                <div class="d-flex flex-wrap">
                    <div class="col-md-12 col-6 flex-wrap pr-0 mb-2">
                        <label for="product_id">Product</label>
                        <div class="row">
                            <div class="col-md-8">
                                <select class="product_live form-control" style="width: 100%" name="product_id" id="product_id" required>
                                    {{-- @if ($product)
                                        <option value="{{ $product->id }}">{{ $product->name_eng }}</option>
                                    @endif --}}
                                </select>
                            </div>
                            <div class="col-md-4">
                                <input type="checkbox" name="print_name" id="print_name" value="1" {{ request()->print_name ? 'checked' : '' }}>
                                <label for="print_name">Print Product Name</label>
                            </div>
                        </div>
                    </div> 
                </div> 
                <div class="d-flex flex-wrap"> 
                    <div class="col-md-12 col-6 flex-wrap pr-0 mb-2">
                        <label for="quantity">Quantity</label>
                        <div class="row">
                            <div class="col-md-8"> 
                                <input type="text" value="{{ request()->quantity ?? 1 }}" class="form-control" name="quantity" id="quantity" required>
                            </div>
                            <div class="col-md-4">
                                <input type="checkbox" name="print_price" id="print_price" value="1" {{ request()->print_price ? 'checked' : '' }}>
                                <label for="print_price">Print Product Price</label>
                            </div>
                        </div>
                    </div>  
                </div>
                <div class="d-flex flex-wrap"> 
                    <div class="col-md-12 col-6 flex-wrap pr-0 mb-2">
                        <label for="code_format">Barcode Per Column</label>
                        <div class="row">
                            <div class="col-md-8">
                                <select class="select_2 form-control" style="width: 100%" name="column" id="column">
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3" selected>3</option>
                                    <option value="4">4</option>
                                    <option value="6">6</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <input type="checkbox" name="print_barcode" id="print_barcode" value="1" {{ request()->print_barcode ? 'checked' : '' }}>
                                <label for="print_barcode">Print Barcode Number</label>
                            </div>
                        </div>
                    </div>  
                </div> 
                <div class="d-flex flex-wrap justify-content-center"> 
                    <div class="col-md-4 col-4 flex-wrap pr-0 text-center pt-2">
                        <button type="submit" class="btn btn-sm btn-outline-info font-weight-bold d-flex" name="filter" id="filter"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-filter pt-1" viewBox="0 0 16 16">
                            <path d="M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
                        </svg>&nbsp;Filter</button>
                    </div>
                </div>  
            </form>
            <hr>  
             {{-- @if (request()->quantity && $product)  --}}
                <div class="stickybutton rounded-lg" id="btn_print">
                    <button class="btn btn-sm btn-warning btn-hover" style="font-size: 15px" onclick="$('#printThis').printThis();" type="button"><b>Print</b> &nbsp;<svg aria-hidden="true" style="height: 15px" focusable="false" data-prefix="far" data-icon="print" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-print fa-w-16"><path fill="currentColor" d="M400 264c-13.25 0-24 10.74-24 24 0 13.25 10.75 24 24 24s24-10.75 24-24c0-13.26-10.75-24-24-24zm32-88V99.88c0-12.73-5.06-24.94-14.06-33.94l-51.88-51.88c-9-9-21.21-14.06-33.94-14.06H110.48C93.64 0 80 14.33 80 32v144c-44.18 0-80 35.82-80 80v128c0 8.84 7.16 16 16 16h64v96c0 8.84 7.16 16 16 16h320c8.84 0 16-7.16 16-16v-96h64c8.84 0 16-7.16 16-16V256c0-44.18-35.82-80-80-80zM128 48h192v48c0 8.84 7.16 16 16 16h48v64H128V48zm256 416H128v-64h256v64zm80-112H48v-96c0-17.64 14.36-32 32-32h352c17.64 0 32 14.36 32 32v96z" class=""></path></svg></button>
                </div>
                <div class="row d-flex justify-content-left" id="div_data">
                    {{-- @for ($i = 0; $i < request()->quantity; $i++)
                        <div class="card-deck col-{{12/request()->column}}">
                            <div class="card">
                                <div class="card-body">
                                    {!! $head !!}
                                    <div style="text-align:justify">