@extends('admin.layout.master')
@section('title','QrCode')
@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;
    }
</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.qr_code')}} {{lt('obs.generate')}}</h4> 
        </div> 
        <div class="card-body pt-2">
            <form method="post" name="barcode_form" id="barcode_form">
                @csrf 
                <div class="row">
                    <div class="col-md-6 col-6 flex-wrap pr-0 mb-2">
                        <label for="qr_header">{{lt('obs.header')}}</label>
                        <textarea name="qr_header" id="qr_header" style="width:100%"></textarea>
                    </div>
                    <div class="col-md-6 col-6 flex-wrap pr-0 mb-2">
                        <label for="qr_footer">{{lt('obs.footer')}}</label>
                        <textarea name="qr_footer" id="qr_footer" style="width:100%"></textarea>
                    </div>
                    @if($type==2)
                        <div class="col-md-4 col-4 flex-wrap pr-0 mb-2">
                            <label for="room_id">{{lt('obs.room_no')}}</label>
                            <select class="select_2 form-control" style="width: 100%" name="room_id" id="room_id">
                            </select>
                        </div>
                        <div class="col-md-4 col-4 flex-wrap pr-0 mb-2">
                            <label for="all_room">{{lt('obs.all')}} {{lt('obs.room')}}</label>
                            <input class="form-check-input cl-form-check-input toggle_btn" type="checkbox" role="switch" id="all_room"/>
                        </div>
                        <input type="hidden" name="prefix" id="prefix" value="{{$prefix}}">
                    @else
                        <div class="col-md-4 col-4 flex-wrap pr-0 mb-2">
                            <label for="prefix">{{lt('obs.text')}}</label>
                            <input class="form-control cl-form-control" type="text" id="prefix" name="prefix"/>
                        </div>
                    @endif
                    <div class="col-md-4 col-4 flex-wrap pr-0 mb-2">
                        <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-4 col-4 flex-wrap pr-0 mb-2">
                        <label for="column">{{lt('obs.qr_code')}} {{lt('obs.per')}} {{lt('obs.row')}}</label>
                        <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 col-4 flex-wrap pr-0 mb-2">
                        <label for="color">{{lt('obs.color')}} </label>
                        <select class="select_2 form-control" style="width: 100%" name="color" id="color">
                            <option value="0, 0, 0, 100">Black</option>
                            <option value="255,255,255, 100">White</option>
                        </select>
                    </div>  
                    <div class="col-md-4 col-4 flex-wrap pr-0 mb-2">
                        <label for="background">{{lt('obs.background')}}</label>
                        <select class="select_2 form-control" style="width: 100%" name="background" id="background">
                            <option value="255,255,255, 100">White</option>
                            <option value="0, 0, 0, 100">Black</option>
                        </select>
                    </div>  
                    <div class="col-md-4 col-4 flex-wrap pr-0 mb-2">
                        <label for="style">{{lt('obs.style')}}</label>
                        <select class="select_2 form-control" style="width: 100%" name="style" id="style">
                            <option value="square">Square</option>
                            <option value="dot">Dot</option>
                            <option value="round">Round</option>
                        </select>
                    </div>  
                    <div class="col-md-4 col-4 flex-wrap pr-0 mb-2">
                        <label for="eye">{{lt('obs.eye')}}</label>
                        <select class="select_2 form-control" style="width: 100%" name="eye" id="eye">
                            <option value="square">Square</option>
                            <option value="circle">Circle</option>
                        </select>
                    </div>  
                    <div class="col-md-4 col-4 flex-wrap pr-0 mb-2">
                        <label for="format">{{lt('obs.format')}}</label>
                        <select class="select_2 form-control" style="width: 100%" name="format" id="format">
                            <option value="png">png</option>
                            <option value="eps">eps</option>
                            <option value="svg">svg</option>
                        </select>
                    </div>  
                </div> 
                <div class="d-flex flex-wrap justify-content-center"> 
                    <div class="col-md-2 col-2 flex-wrap pr-0 text-center pt-2">
                        <button type="submit" class="btn btn-sm btn-outline-success" name="filter" id="filter">
                            <i class="fas fa-qrcode"></i> {{lt('obs.generate')}}
                        </button>
                    </div>
                    <div class="col-md-2 col-2 flex-wrap pr-0 text-center pt-2">
                        {{-- <button type="button" class="btn btn-sm btn-outline-danger" name="remove_row" id="remove_row" onclick="resetView()" type="button"><i class="fas fa-sync-alt" style="font-size: 14px"></i> &nbsp;Reset</button> --}}
                    </div>
                </div>  
            </form>
            <hr>
            <div class="stickybutton rounded-lg" id="btn_print">
                <button class="btn btn-sm btn-primary btn-hover" style="" 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">r</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')}} {{lt('obs.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">  
                            <div class="row d-flex justify-content-left" id="div_modal_data">

                            </div>
                        </section>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-info" onclick="printThis()">{{lt('obs.print')}}</button>
                </div> 
            </div>
        </div>
    </div> --}}
@endsection

@section('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();
                $('#loader').show();
                const setData = (data) => {
                    $('#div_data').html(data);
                    $('#loader').hide();
                }
                ajaxCallV2("{{route('qr_code.generate')}}", 'POST', new FormData(this), setData, ()=>{}, 3);
            });
        })
    </script>
@endsection