@extends('layouts.app')

@section('title', 'Caisses')

@section('third_party_stylesheets')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/select/1.3.3/css/select.dataTables.min.css">
@endsection

@section('breadcrumb')
    <ol class="breadcrumb border-0 m-0">
        <li class="breadcrumb-item"><a href="{{ route('home') }}">Tableau de bord</a></li>
        <li class="breadcrumb-item"><a href="{{ route('caisse.index') }}">Caisses</a></li>
        <li class="breadcrumb-item active">Nouvelle caisse</li>
    </ol>
@endsection

@section('content')
    <div class="container-fluid">
        <form id="product-form" action="{{ route('caisse.store') }}" method="POST">
            @csrf
            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="form-row">
                                <!-- USER ID -->
                                <div class="col-md-12 col-sm-12" style="display: none">
                                    <div class="form-group">
                                        <label for="user_id">USER ID <span class="text-danger">*</span></label>
                                        <input type="number" class="form-control" name="user_id" required value="{{ Auth::user()->id }}">
                                    </div>
                                </div>

                                <!-- USER NAME -->
                                <div class="col-md-12 col-sm-12">
                                    <div class="form-group">
                                        <label for="user_name">USER NAME <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" name="user_name" required value="{{ Auth::user()->name }}" readonly>
                                    </div>
                                </div>

                                <!-- Date d'ouverture -->
                                <div class="col-md-6 col-sm-12">
                                    <div class="form-group">
                                        <label for="start">Date d'ouverture <span class="text-danger">*</span></label>
                                        <input type="date" class="form-control @error('caisse_ouverture') is-invalid @enderror" name="start" required value="{{ old('start') }}">
                                        @error('start')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>

                                <!-- Caisse d'ouverture -->
                                <div class="col-md-6 col-sm-12">
                                    <div class="form-group">
                                        <label for="caisse_ouverture">Caisse d'ouverture <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control @error('caisse_ouverture') is-invalid @enderror" name="caisse_ouverture" id="caisse_ouverture" value="{{ old('caisse_ouverture') }}">
                                        @error('caisse_ouverture')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>

                                <div class="col-lg-12 d-flex justify-content-end">
                                    <div class="form-group">
                                        <button class="btn btn-primary">Enregistrer <i class="bi bi-check"></i></button>
                                        <a href="{{ route('caisse.index') }}" class="btn btn-outline-danger">Retour</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection

@push('page_scripts')
    <script type="text/javascript" src="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.24/b-1.7.0/b-html5-1.7.0/b-print-1.7.0/datatables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/select/1.3.3/js/dataTables.select.min.js"></script>
    <script>
        var table = $('#data-table').DataTable({
            dom: "<'row'<'col-md-3'l><'col-md-5 mb-2'B><'col-md-4 justify-content-end'f>>tr<'row'<'col-md-5'i><'col-md-7 mt-2'p>>",
            "buttons": [
                {extend: 'excel',text: '<i class="bi bi-file-earmark-excel-fill"></i> Excel'},
                {extend: 'csv',text: '<i class="bi bi-file-earmark-excel-fill"></i> CSV'},
                {extend: 'print',
                    text: '<i class="bi bi-printer-fill"></i> Imprimer',
                    title: "Caisses",
                    exportOptions: {
                        columns: [ 0, 1, 2, 3, 4 ]
                    },
                    customize: function (win) {
                        $(win.document.body).find('h1').css('font-size', '15pt');
                        $(win.document.body).find('h1').css('text-align', 'center');
                        $(win.document.body).find('h1').css('margin-bottom', '20px');
                        $(win.document.body).css('margin', '35px 25px');
                    }
                },
            ],
            ordering: false,
        });
    </script>
    <script src="{{ asset('js/jquery-mask-money.js') }}"></script>
    <script>
        $(document).ready(function () {
            $('#caisse_ouverture').maskMoney({
                suffix:'{{ settings()->currency->symbol }}',
                thousands:'{{ settings()->currency->thousand_separator }}',
                decimal:'{{ settings()->currency->decimal_separator }}',
            });

            $('#product-form').submit(function () {
                var caisse_ouverture = $('#caisse_ouverture').maskMoney('unmasked')[0];
                $('#caisse_ouverture').val(caisse_ouverture);
            });
        });
    </script>
@endpush