@extends('layouts/layoutMaster')
@section('title', 'Proizvodi')

@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/proizvodi/lista.js')}}"></script>
@endsection

@section('content')
<h4 class="py-3 mb-2">
    <span class="text-muted fw-light">Proizvodi /</span> Svi proizvodi
</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>Cijena</th>
                    <th>Kategorija</th>
                    <th>Količina na stanju</th>
                    <th>Kreirano</th>
                    <th>Akcije</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">Dodavanje novog proizvoda</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.proizvodi.novi')}}"
                onsubmit="return true" enctype="multipart/form-data">
                @csrf
                <div class="ecommerce-customer-add-basic mb-3">
                    <h6 class="mb-3">Informacije o proizvodu</h6>
                    <div class="mb-3">
                        <label class="form-label" for="naziv">Naziv proizvoda*</label>
                        <input type="text" class="form-control" id="naziv" placeholder="Coca Cola" name="naziv"
                            aria-label="Coca Cola" />
                    </div>
                    <div class="mb-3">
                        <label class="form-label" for="cijena">Cijena (KM)*</label>
                        <input type="text" id="cijena" class="form-control" placeholder="3.0" aria-label="3.0"
                            name="cijena" />
                    </div>
                    <div class="mb-3">
                        <label class="form-label" for="kategorija">Kategorija</label>
                        <select class="form-select" name="kategorija" id="kategorija">
                            <option value="topli napitci">Nargile</option>
                            <option value="topli napitci">Topli napitci</option>
                            <option value="bezalkoholna">Bezalkoholna pića</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label" for="kolicina">Početno stanje</label>
                        <input type="text" id="kolicina" class="form-control" placeholder="10" aria-label="10"
                            name="kolicina" />
                    </div>
                    <div>
                        <label class="form-label" for="slika">Slika proizvoda</label>
                        <input type="file" id="slika" class="form-control" name="slika" />
                    </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