@extends('layout.index')

@section('printBarcode', 'active')

@section('styles')
    <link rel="stylesheet" href="{{ asset('assets/css/printBarcode.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/spinner.css') }}">
@endsection

@section('contents')
    <div class="content-wrapper mb-3">
        <div class="container-fluid p-2">
            <div class="content-header">
                <div class="">
                    <div>
                        <h4 class="">ZPL Printing</h4>
                        <p class="text-muted font-weight-light">users maintenance. Manage and perform various transactions
                            related to
                            users here.</p>
                    </div>
                </div>

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

                    <div class="form-group col-xl-4 col-lg-4 col-md-4">
                        <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 class="form-group col-xl-4 col-lg-4 col-md-4">
                        <h6 class="" for="">Templates </h6>
                        <select class="form-control" id="select_template" name="template" required>
                            <option value="" disabled selected>Select Template</option>
                        </select>
                    </div>

                    <div class="form-group col-lg-12 col-md-3">
                        <button class="btn btn-light border" id="load-table">Load Table</button>
                        <button class="btn btn-primary" id="print-labels">Print Labels</button>
                        <span class="ml-2" id="error-badge"></span>
                    </div>
                </div>

                <hr>

                <div class="mt-2">
                    <div class="form-row align-items-center" id="search-input" hidden>
                        <div class="col-auto">
                            <input type="text" class="form-control mb-2" id="searchInput" placeholder="Search">
                        </div>
                        <div class="col-auto">
                            <button class="btn btn-primary mb-2" id="searchButton">Search</button>
                        </div>
                    </div>

                    <table id="datatable" class="table table-hover border bg-white" style="width: 100%; height: 100%;">
                        <thead>
                            <tr class="bg-white font-weight-light"></tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

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