@extends('layouts/layoutMaster')


<!-- Vendor Styles -->
@section('vendor-style')
    @vite([
        'resources/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.scss',
        'resources/assets/vendor/libs/select2/select2.scss',
        'resources/assets/vendor/libs/@form-validation/form-validation.scss',
        'resources/assets/vendor/libs/animate-css/animate.scss',
        'resources/assets/vendor/libs/sweetalert2/sweetalert2.scss'
    ])
@endsection

<!-- Vendor Scripts -->
@section('vendor-script')
    @vite([
        'resources/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js',
        'resources/assets/vendor/libs/@form-validation/popular.js',
        'resources/assets/vendor/libs/@form-validation/bootstrap5.js',
        'resources/assets/vendor/libs/@form-validation/auto-focus.js',
        'resources/assets/vendor/libs/sweetalert2/sweetalert2.js',
        'resources/assets/vendor/libs/autosize/autosize.js'
    ])
@endsection

<!-- Page Scripts -->
@section('page-script')

    {{ $dataTable->scripts(attributes: ['type' => 'module']) }}

    @vite([
        'resources/js/extra-management.js',
    ])

@endsection

@section('title', 'Extras')
@section('nav-title')
    <i class="menu-icon tf-icons ri-file-list-3-line text-muted"></i>
    Liste des Extras
@endsection

@section('content')

    <div class="card">

        <div class="card-header d-flex justify-content-end">
            <x-btn-add-item string="Ajouter un Extra" data-bs-target="offcanvasAddItem" />
        </div>

        <div class="card-datatable table-responsive">
            {!! $dataTable->table(['class' => 'table table-sm table-striped dataTable ', 'searching' => false], true) !!}
        </div>

    </div>


    {{-- Component Formulaire de creation / modification associé a son fichier xxx-management.js --}}
    <x-offcanvas-add-item data-bs-target="offcanvasAddItem" >

        <div class="form-floating form-floating-outline mb-5">
            <input type="text" class="form-control" id="nom" placeholder="Nom" name="nom" aria-label="Nom"/>
            <label for="nom">Nom</label>
        </div>

        <div class="input-group mb-5">
            <div class="form-floating form-floating-outline">
                <input type="number" class="form-control" name="prix_part" id="prix_part" placeholder="Prix particulier">
                <label for="prix-part">Prix Particulier</label>
            </div>
            <span class="input-group-text">€</span>
        </div>

        <div class="input-group mb-5">
            <div class="form-floating form-floating-outline">
                <input type="number" class="form-control" name="prix_pro" id="prix_pro" placeholder="Prix professionnel">
                <label for="prix-pro">Prix Pro</label>
            </div>
            <span class="input-group-text">€</span>
        </div>

        <div class="form-floating form-floating-outline mb-5">
            <textarea class="form-control" name="notes" id="notes" placeholder="notes..."></textarea>
            <label for="notes" class="form-control">Notes</label>
        </div>

    </x-offcanvas-add-item>

@endsection