{% include 'partials/header.html.twig' %}

    <script src="{{ asset('assets/libs/select2/js/select2.full.min.js') }}"></script>
    <script src="{{ asset('assets/libs/select2/js/select2.min.js') }}"></script>
    <link rel="stylesheet" href="{{ asset('assets/libs/select2/css/select2.min.css') }}">

<div class="body-wrapper">

    <div class="container-fluid">
        <div class="card bg-primary-subtle shadow-none position-relative overflow-hidden mb-4">
            <div class="card-body px-4 py-3">
                <div class="row align-items-center">
                    <div class="col-9">
                        <h4 class="fw-semibold mb-8">Nouvelle chambre</h4>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="card overflow-hidden">
            <div class="card-body p-4">
                <h4 class="card-title">Caractéristiques</h4>
                <p class="card-subtitle mb-4">Ajoutez ici les caractéristiques de votre nouvelle chambre</p>

                <form id="addChambreForm">
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="mb-3">
                                <label for="exampleInputtext" class="form-label">Numéro de la chambre</label>
                                <input type="number" class="form-control" data-field="numero" id="numero" value="" required="">
                                <small id="chambre_numero_error" class="text-danger" style="display:none;">Ce numéro de chambre existe déjà pour cet hôtel.</small>
                            </div>
                            
                            <div class="mb-3">
                                <label for="exampleInputtext1" class="form-label">Nom de la chambre</label>
                                <input type="text" class="form-control" data-field="nom" id="nom" value="" required="">
                                <small id="chambre_nom_error" class="text-danger" style="display:none;">Ce nom de chambre existe déjà pour cet hôtel.</small>
                            </div>

                            <div class="mb-3">
                                <label for="etages" class="form-label">Etage</label>
                                <input type="number" class="form-control" data-field="etage" id="etage" min="0" max="{{societe.nbEtage}} "value="0" required="">
                            </div>

                            <div class="mb-3">
                                <label for="exampleInputtext1" class="form-label">Capacité</label>
                                <input type="number" class="form-control" data-field="capacite" id="capacite" min="1" value="1" required="">
                            </div>

                        </div>
                        <div class="col-lg-6">
                            <div class="mb-3">
                                <label for="taches" class="form-label">Tâche(s)</label>
                                <select
                                    id="tachesSelect"
                                    data-field="tacheSelect"
                                    class="select2 form-control"
                                    multiple="multiple"
                                    style="height: 36px; width: 100%"
                                >
                                    {% for tache in taches %}
                                        <option value="{{tache.id}}">{{tache.nom}}</option>
                                    {% endfor %}

                                </select>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="d-flex align-items-center justify-content-end mt-4 gap-6">
                                <button id="btnSave" type="button" class="btn btn-primary" data-form="addChambreForm" data-btn="enregistrer" data-route="{{ path('chambre_save') }}">Enregistrer</button></form>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
</div>

<script src="{{ asset('assets/js/bundle/hotel/chambre.js') }}"></script>
{% include 'partials/footer.html.twig' %}