{% 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">Chambre</h4>
            </div>
            <div class="col-3">
                <div class="text-center">
                    <a href="{{ path('chambre_new') }}" class="btn btn-primary">Créer une chambre</a>
                    <a class="btn btn-light" href="{{path('chambre_index')}}"><i class="ti ti-arrow-bar-to-left fs-5"></i></a>
                </div>
            </div>
        </div>
        </div>
    </div>

    <div class="card overflow-hidden">
        <div class="card-body p-0">
            <div class="row align-items-center">
                <div class="col-lg-4 order-lg-1 order-2">
                            
                </div>
                <div class="col-lg-4 mt-n3 order-lg-2 order-1">
                    <div>
                        <div class="d-flex align-items-center justify-content-center mb-2">
                            <div class="d-flex align-items-center justify-content-center round-110">
                            <div class="border border-4 border-white d-flex align-items-center justify-content-center rounded-circle overflow-hidden round-100">
                            </div>
                            </div>
                        </div>
                        <div class="text-center mt-5">
                            <h5 class="mb-0">{{ chambre.nom }}</h5>
                            <p class="mb-0">Etage {{ chambre.etage }}</p>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4 order-last">
                
                </div>
            </div>

            <ul class="nav nav-pills user-profile-tab justify-content-end mt-2 bg-primary-subtle rounded-2 rounded-top-0" id="pills-tab" role="tablist">

                {% set tabs = [
                    {'id': 'chambre', 'icon': 'ti-room', 'label': 'Chambre'},
                    {'id': 'qrcode', 'icon': 'ti-qrcode', 'label': 'QR Code'},
                ] %}

                {% for tab in tabs %}
                    <li class="nav-item" role="presentation">
                        <button class="nav-link hstack gap-2 rounded-0 py-6 {{ loop.first ? 'active' : '' }}" id="pills-{{ tab.id }}-tab"
                                data-bs-toggle="pill" data-bs-target="#pills-{{ tab.id }}" type="button" role="tab"
                                aria-controls="pills-{{ tab.id }}" aria-selected="{{ loop.first ? 'true' : 'false' }}">
                            <i class="ti {{ tab.icon }} fs-5"></i>
                            <span class="d-none d-md-block">{{ tab.label }}</span>
                        </button>
                    </li>
                {% endfor %}

            </ul>
        </div>
    </div>

    <div class="card">    
        <div class="tab-content" id="pills-tabContent">
        
            <div class="tab-pane fade active show" id="pills-chambre" role="tabpanel" aria-labelledby="pills-chambre-tab" tabindex="0">
                <div class="card-body p-4">
                    <h4 class="card-title">Chambre</h4>
                    <p class="card-subtitle mb-4">Editez ici les détails de la chambre</p>
                    <form id="updateChambreForm">
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="mb-3">
                                    <input type="hidden" class="form-control" data-field="id" id="chambreId" value="{{ chambre.id }}">
                                    <label for="exampleInputtext" class="form-label">Numéro de la chambre</label>
                                    <input type="number" class="form-control" data-field="numero" id="numero" value="{{ chambre.numero }}" 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="{{ chambre.nom }}" 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="{{ chambre.etage }}" 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="{{ chambre.capacite }}" 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="taches"
                                        class="select2 form-control"
                                        multiple="multiple"
                                        style="height: 36px; width: 100%"
                                    >
                                        {% for tache in taches %}
                                            <option value="{{tache.id}}" {% if tache in chambre.taches %}selected{% endif %}>{{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="updateChambreForm" data-btn="enregistrer" data-route="{{ path('chambre_update_admin') }}">Enregistrer</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
                    
            <div class="tab-pane fade" id="pills-qrcode" role="tabpanel" aria-labelledby="pills-qrcode-tab" tabindex="0">
                <div class="card-body p-4">
                    <div class="row">
                    <div class="col-lg-9">
                        <h4 class="card-title">QR Code</h4>
                        <p class="card-subtitle mb-4">Imprimez le QR Code de la chambre</p>
                    </div>
                    </div>
                    <button class="btn btn-secondary" onclick="printQRCode()">Imprimer le QR Code</button>
                    <div class="row">
                        <div class="col-lg-12 text-center">
                            {% if chambre.qrCodePath %}
                                <img src="{{ asset('' ~ chambre.qrCodePath) }}" alt="QR Code de la chambre" style="width:400px;" />
                            {% else %}
                            {% endif %}
                        </div>
                    </div>
                </div>   
            </div>

        </div>
    </div>
</div>

<script>
    function printQRCode() {
        const qrCodeWindow = window.open('', '_blank');
        qrCodeWindow.document.write('<html><head><title>QR Code Chambre #{{ chambre.id}} - {{ chambre.nom}}</title></head><body>');
        qrCodeWindow.document.write('<img src="{{ asset('' ~ chambre.qrCodePath) }}" alt="QR Code de la chambre">');
        qrCodeWindow.document.write('</body></html>');
        qrCodeWindow.document.close();
        qrCodeWindow.print();
    }
</script>
<script src="{{ asset('assets/js/bundle/hotel/chambre.js') }}"></script>

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