@extends('layouts/layoutMaster')
@section('title', 'QR Kodovi')

@section('vendor-style')
<link rel="stylesheet" href="{{asset('assets/vendor/libs/datatables-bs5/datatables.bootstrap5.css')}}" />
<link rel="stylesheet" href="{{asset('assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css')}}" />
<link rel="stylesheet" href="{{asset('assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.css')}}" />
<link rel="stylesheet" href="{{asset('assets/vendor/libs/select2/select2.css')}}" />
<link rel="stylesheet" href="{{asset('assets/vendor/libs/@form-validation/umd/styles/index.min.css')}}" />
@endsection

@section('vendor-script')
<script src="{{asset('assets/vendor/libs/moment/moment.js')}}"></script>
<script src="{{asset('assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js')}}"></script>
<script src="{{asset('assets/vendor/libs/select2/select2.js')}}"></script>
<script src="{{asset('assets/vendor/libs/@form-validation/umd/bundle/popular.min.js')}}"></script>
<script src="{{asset('assets/vendor/libs/@form-validation/umd/plugin-bootstrap5/index.min.js')}}"></script>
<script src="{{asset('assets/vendor/libs/@form-validation/umd/plugin-auto-focus/index.min.js')}}"></script>
<script src="{{asset('assets/vendor/libs/cleavejs/cleave.js')}}"></script>
<script src="{{asset('assets/vendor/libs/cleavejs/cleave-phone.js')}}"></script>
@endsection

@section('page-script')
<script src="{{asset('assets/js/qrcodes/lista.js')}}"></script>
@endsection

@section('content')
<h4 class="py-3 mb-2">
    <span class="text-muted fw-light">QR Code Liste /</span> Sve liste
</h4>


<!-- customers List Table -->
<div class="card">

    <div class="card-datatable table-responsive">
        <table class="datatables-customers table border-top">
            <thead>
                <tr>
                    <th>Naziv</th>
                    <th>Nagradna igra</th>
                    <th>Količina</th>
                    <th>Kreirano</th>
                    <th>Ažurirano</th>
                </tr>
            </thead>
        </table>
    </div>
    <!-- Offcanvas to add new customer -->
    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasEcommerceCustomerAdd"
        aria-labelledby="offcanvasEcommerceCustomerAddLabel">
        <div class="offcanvas-header">
            <h5 id="offcanvasEcommerceCustomerAddLabel" class="offcanvas-title">Generisanje nove liste</h5>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body mx-0 flex-grow-0">
            <form class="klijentNovi pt-0" id="klijentNovi" method="POST" action="{{route('admin.qrcodes.novi')}}"
                onsubmit="return true">
                @csrf
                <div class="ecommerce-customer-add-basic mb-3">
                    <h6 class="mb-3">Osnovne informacije</h6>
                    <div class="mb-3">
                        <label class="form-label" for="naziv_liste">Naziv*</label>
                        <input type="text" class="form-control" id="naziv_liste" placeholder="Testna lista"
                            name="naziv_liste" aria-label="Testna lista" />
                    </div>
                    <div class="mb-3">
                        <label class="form-label" for="id_nagradne_igre">Odaberi nagradnu igru*</label>
                        <input type="text" id="id_nagradne_igre" class="form-control" placeholder="4XXXXXXXXXXX"
                            aria-label="4XXXXXXXXXXX" name="id_nagradne_igre" />
                    </div>
                    <div class="mb-3">
                        <label class="form-label" for="br_bodova">Broj bodova po jednom QR kodu</label>
                        <input type="text" id="br_bodova" class="form-control" placeholder="10" aria-label="10"
                            name="br_bodova" />
                    </div>
                    <div>
                        <label class="form-label" for="kolicina">Unesite broj QR kodova</label>
                        <input type="text" id="kolicina" class="form-control" placeholder="100" aria-label="100"
                            name="kolicina" />
                    </div>
                </div>

                <div class="pt-3">
                    <button type="submit" class="btn btn-primary me-sm-3 me-1 data-submit">Dodaj</button>
                    <button type="reset" class="btn btn-label-danger" data-bs-dismiss="offcanvas">Odustani</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection