@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: var(--tableHeader);
        padding: 5px !important;
        color: white !important;
    }
    .custom-td {
        white-space:pre-wrap;
        word-wrap:break-word;
    }
    .stickybutton {
        top: calc(110px + 25%);
        box-shadow: none;
    }

    /* .barcode_parent {
        container-type: inline-size;
    }
    .barcode_parent .card-body {
        padding: 4cqw;
    }
    .barcode_title   {
        font-size: 9cqw;
    }
    .barcode_subtitle   {
        font-size: 7cqw;
    }
    .barcode_text   {
        font-size: 8cqw;
    } */
</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">{{lt('obs.barcode_generate')}}</h4> 
        </div> 
        <div class="card-body">
            <form method="post" name="barcode_form" id="barcode_form"> {{-- action="{{ route('barcode.index') }}" --}}
                @csrf 
                <div class="row gx-3">
                    <div class="col-md-3 col-4 flex-wrap pr-0">
                        <label for="product_id">{{lt('obs.product')}}</label>
                        {{-- <select class="product_live form-control" style="width: 100%" name="product_id" id="product_id" onchange="checkColorSize(this.value)" required> </select> --}}
                        @include('v2.inventory.global.product_live_dd', [
                            'skip_add_new'=> true,
                            'event'=> 'onchange=checkColorSize(this.value);',
                            'reqParam'=> [
                                'parent_only'=> 1,
                                'from_quick_sales'=> 1
                            ]
                        ])
                    </div>
                    {{-- <div class="col-md-4 col-4 flex-wrap pr-0">
                        <label for="color_id">{{lt('obs.colors')}}</label>
                        <select class="select_2 form-control" style="width: 100%" name="color_id" id="color_id"></select>
                    </div>
                    <div class="col-md-4 col-4 flex-wrap pr-0">
                        <label for="size_id">{{lt('obs.sizes')}}</label>
                        <select class="select_2 form-control" style="width: 100%" name="size_id" id="size_id"></select>
                    </div> --}}
                    <div class="col-md-3 col-4 flex-wrap pr-0">
                        <label for="quantity">{{lt('obs.quantity')}}</label>
                        <input type="text" value="{{ request()->quantity ?? 1 }}" class="form-control" name="quantity" id="quantity" required>
                    </div>
                    <div class="col-md-3 col-4 flex-wrap pr-0">
                        <label for="code_format">{{lt('obs.barcode__row')}}</label>
                        <select class="select_2 form-control" style="width: 100%" name="column" id="column">
                            <option value="12">1</option>
                            <option value="6">2</option>
                            <option value="4">3</option>
                            <option value="3">4</option>
                            <option value="2p4">5</option>
                            <option value="2" selected>6</option>
                            <option value="1p7">7</option>
                            <option value="1p5">8</option>
                            <option value="1p3">9</option>
                            <option value="1p2">10</option>
                            <option value="1">12</option>
                        </select>
                    </div>  
                    <div class="col-md-3 col-4 flex-wrap pr-0">
                        <label for="" class="d-block">&nbsp;</label>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="skip_product_name" id="skip_product_name">
                            <label class="form-check-label" for="skip_product_name">
                                    {{lt('obs.append_barcode_in_new_row')}}
                            </label>
                        </div>
                    </div>
                    <div class="col-md-3 col-4 flex-wrap pr-0">
                        <label for="" class="d-block">Child</label>
                        <select class="select_2 form-control" style="width: 100%" name="child_product_id" id="child_id">
                            <option value="">Choose Child</option>
                        </select>
                    </div>

                    <div class="col-md-3 col-4 flex-wrap pr-0">
                        <label for="product_id">{{lt('obs.invoice')}}(Opening)</label>
                        <select class="form-control select_2" name="opening_invoice_id" id="opening_invoice_id">
                            <option value="">Choose One</option>
                            @foreach ($opening_invoices as $invoice)
                                <option value="{{ $invoice->id }}">{{$invoice->invoice_no}}</option>
                            @endforeach
                        </select>
                    </div>
                </div> 
                <div class="d-flex flex-wrap justify-content-center mt-3" style="gap: 10px;"> 
                    <button type="submit" class="btn btn-outline-success" name="filter" id="filter">
                        <i class="fas fa-barcode me-2"></i> {{lt('obs.generate')}}
                    </button>
                    <button type="button" class="btn btn-outline-danger" name="remove_row" id="remove_row" onclick="resetView()" type="button">
                        <i class="fas fa-sync-alt me-2"></i> &nbsp;{{lt('obs.reset')}}
                    </button>
                </div>
            </form>
            <hr>
            <div class="d-flex flex-wrap justify-content-center" style="gap: 10px;">
                <button type="submit" class="btn btn-outline-success" onclick="purchaseWiseBarcode()">
                    <i class="fas fa-barcode me-2"></i>{{lt('obs.generate_from_purchase')}}
                </button>
                <button type="button" class="btn btn-outline-danger" onclick="if (confirm('Are you sure, want to Reset this?')) purchaseWiseBarcode(1);" type="button">
                    <i class="fas fa-sync-alt me-2"></i> &nbsp; {{lt('obs.reset_purchase')}}
                </button>
            </div>  
            <div class="d-flex flex-wrap justify-content-center mt-3" style="gap: 10px;">
                <button type="submit" class="btn btn-outline-success" onclick="openingWiseBarcode()">
                    <i class="fas fa-barcode me-2"></i>{{lt('obs.generate_from_opening_stock')}}
                </button>
            </div>  
            <hr>
            <div class="stickybutton rounded-lg mb-3" id="btn_print">
                <button class="btn btn-primary btn-hover" style="" onclick="printThis();" type="button">
                    <b>{{lt('obs.print')}}</b> <i class="bi bi-printer ms-2"></i>
                </button>
            </div>
            <div class="row g-2 d-flex justify-content-left" id="div_data"></div>
            @include('admin.global.loader')
        </div>
    </div> 
    <!--Print Modal -->
    
    <div class="modal fade bd-example-modal-lg" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalLabel">{{lt('obs.purchase_invoice')}}</h5>
                    <button type="button" class="close" data-dismiss="modal" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div> 
                <div class="modal-body">
                    <div class="col-md-12"> 
                        <!-- Container -->
                        <section class="container invoice-container" id="printThis">  
                            <style>
                                @media print{
                                    /* .barcode_parent {
                                        container-type: inline-size;
                                    }
                                    .barcode_parent .card-body {
                                        padding: 4cqw;
                                    }
                                    .barcode_title   {
                                        font-size: 9cqw;
                                    }
                                    .barcode_subtitle   {
                                        font-size: 7cqw;
                                    }
                                    .barcode_text   {
                                        font-size: 8cqw;
                                    } */
                                }
                            </style>
                            <div class="row g-2" id="div_modal_data">
                               
                            </div>
                        </section>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-info" onclick="printThis(1200)">{{lt('obs.print')}}</button>
                </div> 
            </div>
        </div>
    </div>
@endsection

@section('script')
<script>
    const store_setting = @json(store_info());
</script>
    {{-- <script type="text/javascript" src="{{ asset('inventory/blade_js/common.js') }}"></script>  --}}
    <script>
        $(document).ready(function() {
            select2('select_2', 'Select', true);
            // productSearch('product_live');
            $('#barcode_form').on('submit', function(event) {
                event.preventDefault();
                var d = $('#barcode_form').serializeArray();
                $('#btn_print').hide("slow"); 
                $('#tbl_data').html('');
                $('#loader').show();
                
                ajaxCallV2('/generate-code', 'POST', new FormData(this), setData, ()=>{}, 3);
            });
        })

        const setData = (data) => {
            $('#div_data').append(data);
            $('#div_modal_data').append(data); 
            $('#btn_print').show("slow");
            // fitText(document.querySelectorAll("h3"), 0.48);
            $('#loader').hide();
        }

        const checkColorSize = async pro_id => {
            const pro = await searchedItemById(pro_id);
            let childs = pro.childs.map(chd=> `<option value="${chd.id}">${chd.name_eng}</option>`);
            $('#child_id').html('<option value="">Choose Child</option>' + childs.join(' '));

            // if (pro.color_id > 0 || pro.size_id > 0) {
            //     ajaxCallV2('get-color-size', 'GET', {color_id: pro.color_id, size_id: pro.size_id}, (data)=> {
            //         let colors = data.colors.map(clr=> `<option value="${clr.id}">${clr.name}</option>`);
            //         let sizes = data.sizes.map(sz=> `<option value="${sz.id}">${sz.name}</option>`);
            //         $('#color_id').html(colors.join(' '));
            //         $('#size_id').html(sizes.join(' '));

            //         $('#loader').hide();
            //     });
            // }
        }

        const resetView = () => {
            if (confirm("Are you sure, want to Reset this?")) {
                $('#div_data').empty();
                $('#div_modal_data').empty();
            }
        }

        const purchaseWiseBarcode = (reset = null) => {
            $('#btn_print').hide("slow"); 
            $('#tbl_data').html('');
            $('#loader').show();
            
            ajaxCallV2('/purchasewise-barcode-generate', 'GET', {column: $('#column').val(), reset: reset}, setData);
        }
        const openingWiseBarcode = (reset = null) => {
            $('#btn_print').hide("slow"); 
            $('#tbl_data').html('');
            $('#loader').show();
            
            ajaxCallV2('/openingwise-barcode-generate', 'GET', {opening_invoice_id: $('#opening_invoice_id').val(), reset: reset, 'product_id': $('#product_id').val()}, setData);
        }
    </script>
@endsection