{% include 'partials/header.html.twig' %}
{% set info = get_global_parameters() %}
{% set initials = info.user.prenom|slice(0, 1)|upper ~ info.user.nom|slice(0, 1)|upper %}

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

      <div class="body-wrapper">
        <div class="container-fluid">


    <div class="row">
        <div class="col-lg-6 d-flex align-items-stretch">
            <div class="card w-100 bg-primary-subtle overflow-hidden shadow-none">
            <div class="card-body position-relative">
                <div class="row">
                <div class="col-sm-7">
                    <div class="d-flex align-items-center mb-7">
                    <div class="rounded-circle  me-6">
                        <span class="bg-primary text-white fs-6 round-40 rounded-circle me-n2 border border-2 border-white d-flex align-items-center justify-content-center">
                        {{ initials }}
                        </span>
                    </div>
                    <h5 class="fw-semibold mb-0 fs-5">Bonjour {{ globalVariable.user.prenom }} {{ globalVariable.user.nom }}!</h5>
                    </div>
                    <div class="d-flex align-items-center">
                    <div class="border-end pe-4 border-muted border-opacity-10">
                        
                    </div>
                    <div class="ps-4">
                        
                    </div>
                    </div>
                </div>
                </div>
            </div>
            </div>
        </div>
        <div class="col-sm-6 col-lg-2 d-flex align-items-stretch">
            <div class="card w-100">
            <div class="card-body p-4 text-center">
                <h4 class="fw-semibold">{{info.stats.nbEmployes}}</h4>
                <p class="mb-2 fs-3">Employés</p>
            </div>
            </div>
        </div>
        <div class="col-sm-6 col-lg-2 d-flex align-items-stretch">
            <div class="card w-100">
            <div class="card-body p-4 text-center">
                <h4 class="fw-semibold">{{info.stats.nbChambres}}</h4>
                <p class="mb-2 fs-3">Chambres</p>
            </div>
            </div>
        </div>
        <div class="col-sm-6 col-lg-2 d-flex align-items-stretch">
            <div class="card w-100">
            <div class="card-body p-4 text-center">
                <h4 class="fw-semibold">{{info.stats.nbMaintenancesToday}}</h4>
                <p class="mb-1 fs-3">
                {% if info.stats.nbMaintenancesToday < 2 %}
                    Maintenance planifiée aujourd'hui
                {% else %}
                    Maintenances planifiées aujourd'hui
                {% endif %}
                </p>
            </div>
            </div>
        </div>

        <div class="col-md-12 col-lg-8 d-flex align-items-stretch">
            <div class="card w-100">
            <div class="card-body">
                <div class="d-sm-flex d-block align-items-center justify-content-between mb-3">
                <div class="mb-3 mb-sm-0">
                    <h4 class="card-title fw-semibold">Chambres au planning aujourd'hui</h4>
                </div>
                </div>
                <div class="table-responsive">
                <table class="table align-middle text-nowrap mb-0">
                    <thead>
                    <tr class="text-muted fw-semibold">
                        <th scope="col" class="ps-0">Chambre</th>
                        <th scope="col">Progression</th>
                        <th scope="col">Femme de chambre</th>
                        <th scope="col">Gouvernante</th>
                        <th scope="col">Statut</th>
                    </tr>
                    </thead>
                    <tbody class="border-top">
                    {% for chambre in info.stats.chambres %}
                    <tr>
                        <td class="ps-0">
                        <h6 class="fw-semibold mb-1">{{chambre.chambre.nom}}</h6>
                        </td>
                        <td>
                        {{chambre.suiviMenage}}
                        </td>
                        <td>
                        {% if chambre.valet %}
                            {{chambre.valet.prenom}} {{chambre.valet.nom}}
                        {% endif %}
                        </td>
                        <td>
                        {% if chambre.gouvernante %}
                            {{chambre.gouvernante.prenom}} {{chambre.gouvernante.nom}}
                        {% endif %}
                        </td>
                        <td>
                        {{chambre.statut}}
                        </td>
                    </tr>
                    {% endfor %}
                    
                    </tbody>
                </table>
                <div class="col-lg-12 text-end">
                    <a class="btn btn-primary mt-3" href="">Voir le planning de nettoyage</a>
                </div>
                </div>
            </div>
            </div>
        </div>


        <div class="col-md-6 col-lg-4 d-flex align-items-stretch">
            <div class="card w-100">
            <div class="card-body">
                <h4 class="card-title fw-semibold">Chambres prêtes</h4>
                <div id="sales-overview" class="mb-4" style="min-height: 202.033px;"></div>
            </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="row">

            <div class="col-sm-12 d-flex align-items-stretch">
                <div class="card w-100">
                    <div class="card-body">
                        <div class="mb-3 mb-sm-0">
                            <h4 class="card-title fw-semibold">Employées présents</h4>
                        </div>
                        <p class="mb-0">Liste des salariés sous pointages (si l'option pointage est souscrite et activée)</p>
                        {% if info.stats.userPointage|length == 0 %}
                        <div class="alert alert-warning text-warning" role="alert">
                            Aucun employé n'est sous pointage actuellement
                        </div>
                        {% else %}
                            <table>
                            <thead>
                                <tr>
                                    <th style="width:70%">Employé</th>
                                    <th>Heure d'arrivée</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for result in info.stats.userPointage %}
                                    {% set user = result[0] %}
                                    {% set heureArrivee = result['startTime'] %}
                                    <tr>
                                        <td>{{ user.prenom }} {{ user.nom }}</td>
                                        <td>{{ heureArrivee|date('H:i') }}</td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                        {% endif %}
                    </div>
                </div>
            </div>

            

            <div class="col-sm-12 d-flex align-items-stretch">
                <div class="card w-100">
                <div class="card-body">
                    <div class="mb-3 mb-sm-0">
                        <h4 class="card-title fw-semibold">Employées en retard / absents</h4>
                    </div>
                    <p class="mb-0">Liste des salariés qui ne sont pas sous pointages (si les options pointage et planning sont souscrites et activées)</p>
                    {% if info.stats.userPlanning|length == 0 %}
                    <div class="alert alert-warning text-warning" role="alert">
                        Aucun employé n'est en retard  ou absent! 
                    </div>
                    {% else %}
                        <table>
                        <thead>
                            <tr>
                                <th style="width:70%">Employé</th>
                                <th>Planning</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for result in info.stats.userPlanning %}
                                {% set user = result[0] %}
                                {% set heureDebut = result['heureDebut'] %}
                                {% set heureFin = result['heureFin'] %}
                                <tr>
                                    <td>{{ user.prenom }} {{ user.nom }}</td>
                                    <td>{% if heureDebut is not null %}{{ heureDebut|date('H:i') }} - {% if heureFin is not null %}{{ heureFin|date('H:i') }}{% endif %}{% endif %}</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                    {% endif %}
                </div>
                </div>
            </div>
            </div>
            
        </div>
        
        <div class="col-md-12 col-lg-8 d-flex align-items-stretch">
            <div class="card w-100">
            <div class="card-body">
                <div class="d-sm-flex d-block align-items-center justify-content-between mb-3">
                <div class="mb-3 mb-sm-0">
                    <h4 class="card-title fw-semibold">Maintenances au planning aujourd'hui</h4>
                </div>
                </div>
                <div class="table-responsive">
                <table class="table align-middle text-nowrap mb-0">
                    <thead>
                    <tr class="text-muted fw-semibold">
                        <th scope="col" class="ps-0">Opération</th>
                        <th scope="col">Progression</th>
                        <th scope="col">Mainteneur</th>
                        <th scope="col">Statut</th>
                    </tr>
                    </thead>
                    <tbody class="border-top">
                    {% for maintenance in info.stats.maintenances %}
                    <tr>
                        <td class="ps-0">
                        <h6 class="fw-semibold mb-1">{{maintenance.maintenance.titre}}</h6>
                        <small>
                            {% for chambreM in maintenance.chambres %}
                            / {{chambreM.name}} 
                            {% endfor %}
                        </small>
                        </td>
                        <td>
                        <div class="progress" style="height: 10px">
                            <div class="progress-bar text-bg-success" style="width: {{maintenance.progress}}%" role="progressbar">
                            {{maintenance.progress}}%
                            </div>
                        </div>
                        </td>
                        <td>
                            {% if maintenance.maintenance.assignedUser %}
                            {{maintenance.maintenance.assignedUser.nom}} {{maintenance.maintenance.assignedUser.prenom}}
                        {% endif %}
                        </td>
                        <td>
                        {{maintenance.maintenance.statut}}
                        </td>
                    </tr>
                    {% endfor %}
                    
                    </tbody>
                </table>
                <div class="col-lg-12 text-end">
                    <a class="btn btn-primary mt-3" href="{{path('maintenance_admin')}}">Voir toutes les maintenances</a>
                </div>
                </div>
            </div>
            </div>
        </div>
        
        <div class="col-md-12 col-lg-12 d-flex align-items-stretch">
            <div class="card w-100">
            <div class="card-body">
                <div class="d-sm-flex d-block align-items-center justify-content-between mb-3">
                <div class="mb-3 mb-sm-0">
                    <h4 class="card-title fw-semibold">Tâches au planning aujourd'hui</h4>
                </div>
                </div>
                <div class="table-responsive">
                <table class="table align-middle text-nowrap mb-0">
                    <thead>
                    <tr class="text-muted fw-semibold">
                        <th scope="col" class="ps-0">Tâche</th>
                        <th scope="col">Description</th>
                        <th scope="col">Affectation</th>
                        <th scope="col">Statut</th>
                    </tr>
                    </thead>
                    <tbody class="border-top">
                    {% for tache in info.stats.taches %}
                    <tr>
                        <td class="ps-0">
                            <h6 class="fw-semibold mb-1">{{tache.nom}}</h6>
                        </td>
                        <td>
                            {{tache.description}}
                        </td>
                        <td>
                            {{tache.userPrenom}} {{tache.userNom}}
                        </td>
                        <td>
                            {{tache.statut}}
                        </td>
                    </tr>
                    {% endfor %}
                    
                    </tbody>
                </table>
                <div class="col-lg-12 text-end">
                    <a class="btn btn-primary mt-3" href="{{path('tachehotel_index')}}">Voir toutes les tâches ponctuelles</a>
                </div>
                </div>
            </div>
            </div>
        </div>

        

            
    </div>
      </div>

    </div>

<script>
        document.addEventListener("DOMContentLoaded", function () {

    var options = {
        color: "#adb5bd",
        series: [{{info.stats.chambreLibre}}, {{info.stats.chambreMaintenance}},{{info.stats.chambreMenage}}, {{info.stats.chambreNePasDeranger}}],
        labels: ["Libre", "Maintenance", "Ménage en cours", "Ne pas déranger"],
        chart: {
            type: "donut",
            fontFamily: "inherit",
            foreColor: "#adb0bb",
        },
        plotOptions: {
            pie: {
                donut: {
                    size: '88%',
                    background: 'transparent',
                    labels: {
                        show: true,
                        name: {
                            show: true,
                            offsetY: 7,
                        },
                        value: {
                            show: false,
                        },
                        total: {
                            show: true,
                            color: '#7C8FAC',
                            fontSize: '26px',
                            fontWeight: "600",
                            label: '{{info.stats.pourcentage}}%',
                        },
                    },
                },
            },
        },
        stroke: {
            show: false,
        },
        dataLabels: {
            enabled: false,
        },

        legend: {
            show: false,
        },
        colors: ["var(--bs-primary)", "var(--bs-warning)", "var(--bs-success)", "var(--bs-secondary)" ],

        tooltip: {
            theme: "dark",
            fillSeriesColor: false,
        },
    };

    var chart = new ApexCharts(document.querySelector("#sales-overview"), options);
    chart.render();

        });
    </script>

    <div class="modal" id="societeConnectModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false" role="dialog" aria-labelledby="societeConnectModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="societeConnectModalLabel">Sélectionnez une société</h5>
                </div>
                <div class="modal-body">
                    <form method="post" action="{{ path('admin_connect_societe', {'id': 0}) }}" id="societeConnectForm">
                        <div class="form-group">
                            <select class="form-control" id="societeConnect" name="societeConnect">
                                {% for societe in societes %}
                                    <option value="{{ societe.id }}">{{ societe.nom }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" onclick="connectSociete()">Se connecter</button>
                </div>
            </div>
        </div>
    </div>

<script>
      
        function connectSociete() {
            let selectedSocieteId = document.getElementById('societeConnect').value;
            let form = document.getElementById('societeConnectForm');
            form.action = form.action.replace('0', selectedSocieteId);
            form.submit();
        }
    </script>
{% if showSelectModal %}
    <script src="{{ asset('assets/libs/bootstrap/dist/js/bootstrap.bundle.min.js') }}"></script>
    <script>
    console.log('jQuery version:', $.fn.jquery);
console.log('Bootstrap modal:', typeof $.fn.modal);
        document.addEventListener('DOMContentLoaded', function() {
            $('#societeConnectModal').modal('show');
        });  
    </script>

{% endif %}

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