@extends('layout.index')

@section('uploadBarcode', 'active')

@section('styles')

@endsection

@section('contents')
    <div class="content-wrapper mb-3">
        <input type="text" id="api-labellary" value="{{ env('API_LABELLARY') }}" hidden>
        <div class="container-fluid p-2">
            <div class="content-header">
                <div class="">
                    <div>
                        <h4 class="">ZPL Maintenance</h4>
                        <p class="text-muted font-weight-light">
                            Centralized ZPL barcode management for streamlined uploading, customization, and transactions.
                        </p>
                    </div>

                    <form action="" id="zpl-form">
                        @csrf
                        <input type="text" id="id" name="id" value="" hidden>
                        <div class="row">
                            <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
                                <div class="form-group">
                                    <select class="form-control" id="select-template" name="template"></select>
                                    <textarea class="form-control text-left mt-3" id="zpl-layout" name="zpl_layout" rows="20">@include('layout.zplLayout')</textarea>
                                </div>

                                <div class="form-row">
                                    <div class="form-group col-lg-6 col-md-6">
                                        <h6 class="" for="">Print Density</h6>
                                        <select class="form-control" id="print-density" name="print_density" required>
                                            <option value="6dpmm">6 dpmm</option>
                                            <option value="8dpmm" selected>8 dpmm</option>
                                            <option value="12dpmm">12 dpmm</option>
                                            <option value="24dpmm">24 dpmm</option>
                                        </select>
                                    </div>

                                    <div class="form-group col-lg-3 col-md-3">
                                        <h6 class="" for="">Width</h6>
                                        <input type="text" class="form-control" value="4" id="width"
                                            name="width" required>
                                    </div>

                                    <div class="form-group col-lg-3 col-md-3">
                                        <h6 class="" for="">Height</h6>
                                        <input type="text" class="form-control" value="4.5" id="height"
                                            name="height" required>
                                    </div>

                                    <div class="form-group col-lg-6 col-md-4">
                                        <h6 class="" for="">Barcode Label</h6>
                                        <input type="text" class="form-control" id="label" name="label" required>
                                        <span class="invalid-feedback" id="label-invalid">

                                        </span>
                                    </div>

                                    <div class="form-group col-lg-3 col-md-3">
                                        <h6 class="" for="">Entity</h6>
                                        <select class="form-control" id="entity_id" name="entity_id" required>
                                            <option value="" disabled selected>Select Brands</option>
                                        </select>
                                    </div>

                                    <div class="form-group col-lg-3 col-md-3">
                                        <h6 class="" for="">Brands</h6>
                                        <select class="form-control" id="brand_id" name="brand_id" required>
                                            <option value="" disabled selected>Select Brands</option>
                                        </select>
                                    </div>
                                </div>

                                <button class="btn btn-light border mt-2" type="button" id="generate-preview">Generate
                                    Preview</button>
                                <button class="btn btn-primary mt-2" type="submit"> Submit</button>
                            </div>

                            <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 mt-xl-0 mt-lg-0 mt-md-0 mt-sm-3 mt-3">
                                <img id="barcode-label"
                                    src="https://api.labelary.com/v1/printers/8dpmm/labels/4x4.5/0/%5EXA%20%5EFX%20Top%20section%20with%20logo,%20name%20and%20address.%20%5ECF0,60%20%5EFO50,50%5EGB100,100,100%5EFS%20%5EFO75,75%5EFR%5EGB100,100,100%5EFS%20%5EFO93,93%5EGB40,40,40%5EFS%20%5EFO220,50%5EFDIntershipping,%20Inc.%5EFS%20%5ECF0,30%20%5EFO220,115%5EFD1000%20Shipping%20Lane%5EFS%20%5EFO220,155%5EFDShelbyville%20TN%2038102%5EFS%20%5EFO220,195%5EFDUnited%20States%20(USA)%5EFS%20%5EFO50,250%5EGB700,3,3%5EFS%20%5EFX%20Second%20section%20with%20recipient%20address%20and%20permit%20information.%20%5ECFA,30%20%5EFO50,300%5EFDJohn%20Doe%5EFS%20%5EFO50,340%5EFD100%20Main%20Street%5EFS%20%5EFO50,380%5EFDSpringfield%20TN%2039021%5EFS%20%5EFO50,420%5EFDUnited%20States%20(USA)%5EFS%20%5ECFA,15%20%5EFO600,300%5EGB150,150,3%5EFS%20%5EFO638,340%5EFDPermit%5EFS%20%5EFO638,390%5EFD123456%5EFS%20%5EFO50,500%5EGB700,3,3%5EFS%20%5EFX%20Third%20section%20with%20bar%20code.%20%5EBY5,2,270%20%5EFO100,550%5EBC%5EFD12345678%5EFS%20%5EXZ"
                                    class="card-img-top border" alt="...">
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="{{ asset('assets/js/uploadBarcode.js') }}"></script>
    <script src="{{ asset('assets/js/selectEntityBarcode.js') }}"></script>
@endsection