@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">{{__('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-4 col-4 flex-wrap pr-0">
                        <label for="product_id">{{__('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'=> ['all_product'=> 1]])
                    </div>
                    {{-- <div class="col-md-4 col-4 flex-wrap pr-0">
                        <label for="color_id">{{__('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">{{__('obs.sizes')}}</label>
                        <select class="select_2 form-control" style="width: 100%" name="size_id" id="size_id"></select>
                    </div> --}}
                    <div class="col-md-4 col-4 flex-wrap pr-0">
                        <label for="quantity">{{__('obs.quantity')}}</label>
                        <input type="text" value="{{ request()->quantity ?? 1 }}" class="form-control" name="quantity" id="quantity" required>
                    </div>
                    <div class="col-md-4 col-4 flex-wrap pr-0">
                        <label for="code_format">{{__('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-4 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">
                                    {{__('obs.append_barcode_in_new_row')}}
                            </label>
                        </div>
                    </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> {{__('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;{{__('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>{{__('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; {{__('obs.reset_purchase')}}
                </button>
            </div>  
            <hr>
            <div class="stickybutton rounded-lg mb-3" id="btn_print">
                <button class="btn btn-primary btn-hover" style="" onclick="$('#printThis').printThis();" type="button">
                    <b>{{__('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">{{__('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)">{{__('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', false);
            // 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);
            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);
        }
    </script>
@endsection