@extends('layouts.app')

@section('title', 'Liste des demandes de poses en cours - L\'unique Création')

@push('styles')
    <link href="{{ asset('/assets/vendor/datatables/css/jquery.dataTables.min.css') }}" rel="stylesheet">
    <link href="{{ asset('/assets/vendor/datatables/responsive/responsive.css') }}" rel="stylesheet">
@endpush

@section('content')
    <div class="container-fluid">
        <div class="d-flex align-items-center mb-4 flex-wrap">
            <h3 class="me-auto">Tableau des demandes de poses en cours</h3>
        </div>
        <div class="row">
            <div class="col-xl-3 col-lg-6 col-sm-6">
                <div class="widget-stat card">
                    <div class="card-body p-4">
                        <div class="media ai-icon">
                            <span class="me-3 bgl-danger text-danger">
                               <i class="fa-solid fa-chart-column"></i>
                            </span>
                            <div class="media-body">
                                <p class="mb-1">Demandes de poses en cours</p>
                                <h4 class="mb-0">{{ $nbDemandes }}</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-lg-6 col-sm-6">
                <div class="widget-stat card">
                    <div class="card-body p-4">
                        <div class="media ai-icon">
                            <span class="me-3 bgl-primary text-primary">
                                <i class="fa-solid fa-signature"></i>
                            </span>
                            <div class="media-body">
                                <p class="mb-1">Devis de poses signées</p>
                                <h4 class="mb-0">{{ $nbDevisSignes }}</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-lg-6 col-sm-6">
                <div class="widget-stat card">
                    <div class="card-body p-4">
                        <div class="media ai-icon">
                            <span class="me-3 bgl-warning text-warning">
                                <i class="fa-solid fa-calendar-days"></i>
                            </span>
                            <div class="media-body">
                                <p class="mb-1">Poses planifiées</p>
                                <h4 class="mb-0">{{ $nbPosesPlanifiees }}</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-lg-6 col-sm-6">
                <div class="widget-stat card">
                    <div class="card-body p-4">
                        <div class="media ai-icon">
                            <span class="me-3 bgl-success text-success">
                                <i class="fa-solid fa-check"></i>
                            </span>
                            <div class="media-body">
                                <p class="mb-1">Poses effectuées</p>
                                <h4 class="mb-0">{{ $nbPosesEffectuees }}</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mb-3">
            <div class="col-md-2">
                <label for="selectCommercial">Filtrer par commercial :</label>
                <select id="selectCommercial" class="form-control">
                    <option value="">Tous les commerciaux</option>
                    @foreach($commerciaux as $commercial)
                        <option value="{{ $commercial->id }}">{{ $commercial->prenom }} {{ $commercial->nom }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <label for="selectStatus">Filtrer par status :</label>
                <select id="selectStatus" class="form-control">
                    <option value="">Tous les status</option>
                    @foreach($etats as $etat)
                        <option value="{{ $etat->id }}">{{ $etat->libelle }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <label for="selectPriseCote">Prise de côte :</label>
                <select id="selectPriseCote" class="form-control">
                    <option value="">Toutes</option>
                    <option value="1">Oui</option>
                    <option value="0">Non</option>
                </select>
            </div>
            <div class="col-md-2 d-flex align-items-end offset-4">
                <button id="resetFilters" class="btn btn-secondary w-100">
                    <i class="fa-solid fa-rotate-left"></i> Réinitialiser les filtres
                </button>
            </div>
        </div>

        <div class="row">
            <div class="col-xl-12">

                <table class="table display mb-4 dataTablesCard job-table table-responsive-xl card-table" id="tableDemande">
                    <thead>
                    <tr>
                        <th>Id</th>
                        <th>Info. BGB</th>
                        <th>Client / Chantier</th>
                        <th>Projet</th>
                        <th>Status demande</th>
                        <th>S. Livraison</th>
                        <th>Livraison</th>
                        <th>Actions</th>
                    </tr>
                    </thead>
                    <tbody id="tableDemandeBody">
                    <!-- On injectera ici les <tr> depuis Ajax -->
                    </tbody>
                </table>

            </div>
        </div>

    </div>


    <!-- Modal Messagerie -->
    <div class="modal fade" id="messageModal" tabindex="-1" aria-labelledby="messageModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="messageModalLabel">
                        📩 Messagerie - Demande #<span id="demandeIdDisplay"></span>
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
                </div>
                <div class="modal-body">
                    <!-- Zone d'affichage des messages -->
                    <div id="messageContainer" style="height: 400px; overflow-y: auto;">
                        <p class="text-muted text-center">Chargement des messages...</p>
                    </div>
                </div>
                <div class="modal-footer">
                    <!-- Zone de saisie et envoi du message -->
                    <div class="input-group">
                        <textarea id="messageInput" class="form-control" placeholder="Écrire un message..." rows="3"></textarea>
                        <button id="sendMessage" class="btn btn-primary">
                            <i class="fa-solid fa-paper-plane"></i> Envoyer
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection


@push('scripts')
    <!-- Datatable -->
    <script src="{{ asset('/assets/vendor/datatables/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('/assets/vendor/datatables/responsive/responsive.js') }}"></script>
    <script src="{{ asset('/assets/js/plugins-init/datatables.init.js') }}"></script>
    <script>

        // Gestion du Datatable en Ajax
        $(document).ready(function () {

            // Fonction pour charger les demandes avec les filtres
            function loadDemandes() {
                const $tbody = $('#tableDemandeBody');
                let etatId = 2;
                const statusId = $('#selectStatus').val();
                const commercialId = $('#selectCommercial').val();
                const priseCote = $('#selectPriseCote').val();

                console.log('Params envoyés :', {
                    commercial_id: commercialId,
                    prise_cote: priseCote,
                    status_id: statusId
                });

                $.ajax({
                    url: `/liste-demande-ajax/${etatId}`,
                    method: 'GET',
                    data: {
                        commercial_id: commercialId,
                        prise_cote: priseCote,
                        status_id: statusId
                    },
                    dataType: 'json',
                    success: function (response) {
                        console.log('Réponse reçue :', response);

                        // Détruire DataTable s'il existe déjà
                        if ($.fn.DataTable.isDataTable('#tableDemande')) {
                            $('#tableDemande').DataTable().destroy();
                        }

                        // Vider et remplir
                        $tbody.empty();
                        response.data.forEach(function (item) {
                            $tbody.append(item.row);
                        });


                        $('#tableDemande').DataTable({
                            order: [[1, 'desc']],
                            ordering: true,
                            paging: true,
                            info: true,
                            searching: true,
                            language: {
                                search: "Rechercher une demande :",
                                lengthMenu: "Afficher _MENU_ demandes",
                                paginate: {
                                    next: '<i class="fa fa-angle-double-right"></i>',
                                    previous: '<i class="fa fa-angle-double-left"></i>'
                                },
                                info: "Affichage de _START_ à _END_ sur _TOTAL_ entrées",
                                infoEmpty: "Affichage de 0 à 0 sur 0 entrées",
                                infoFiltered: "(filtré de _MAX_ entrées totales)",
                                zeroRecords: "Aucune demande trouvée"
                            },
                            initComplete: function () {
                                let wrapper = $('#tableDemande_wrapper');
                                let length = wrapper.find('.dataTables_length');
                                let filter = wrapper.find('.dataTables_filter');

                                let topbar = $('<div class="dt-topbar"></div>');
                                topbar.append(length).append(filter);
                                wrapper.prepend(topbar);

                                $('.dataTables_length select')
                                    .addClass('default-select form-control wide')
                                    .selectpicker();
                            }
                        });
                    },
                    error: function (xhr, status, error) {
                        console.error('Erreur lors du chargement des demandes :', error);
                    }
                });
            }

            // Appel initial
            loadDemandes();

            // Rafraîchit à chaque changement de filtre
            $('#selectCommercial, #selectStatus, #selectPriseCote').on('change', function () {
                loadDemandes();
            });

            // Gestion du bouton "Réinitialiser les filtres"
            $('#resetFilters').on('click', function () {
                $('#selectCommercial').val('');
                $('#selectStatus').val('');
                $('#selectPriseCote').val('');
                loadDemandes();
            });
        });

        // Gestion des messages d'une demande
        document.addEventListener("DOMContentLoaded", function () {
            let messageModal = new bootstrap.Modal(document.getElementById("messageModal"));
            let messageContainer = document.getElementById("messageContainer");
            let messageInput = document.getElementById("messageInput");
            let sendMessageBtn = document.getElementById("sendMessage");
            let currentDemandeId = null;
            let demandeIdDisplay = document.getElementById("demandeIdDisplay");

            // 📨 Ouvrir la modale et charger les messages
            document.addEventListener("click", function (e) {
                if (e.target.closest(".open-messages")) {
                    const button = e.target.closest(".open-messages");
                    currentDemandeId = button.getAttribute("data-demande-id");
                    demandeIdDisplay.textContent = currentDemandeId;
                    fetchMessages(currentDemandeId);
                    messageModal.show();
                }
            });


            // 📩 Affichage des messages dans le conteneur
            function displayMessages(messages) {
                messageContainer.innerHTML = ""; // Vide la zone avant d'ajouter les nouveaux messages

                if (messages.length === 0) {
                    messageContainer.innerHTML = "<p class='text-muted text-center'>Aucun message pour cette demande.</p>";
                    return;
                }

                messages.forEach(message => {
                    let messageElement = document.createElement("div");
                    let isCurrentUser = message.source === "luc"; // Vérifie si l'expéditeur est l'utilisateur actuel

                    messageElement.classList.add("px-3", "py-2", "mb-3", "w-auto", "d-inline-block");

                    if (isCurrentUser) {
                        // 📩 Messages de l'utilisateur connecté (L'unique) → Aligné à droite
                        messageElement.style.marginLeft = "auto";
                        messageElement.style.textAlign = "right";
                    } else {
                        // 📩 Messages de BGB → Aligné à gauche
                        messageElement.style.marginRight = "auto";
                    }

                    messageElement.innerHTML = `
                        <p class="mb-1 fw-bold ${isCurrentUser ? 'text-primary' : 'text-secondary'}">${message.sender_name}</p>
                        <p class="mb-1">${message.content}</p>
                        <small class="text-muted">${new Date(message.created_at).toLocaleString('fr-FR')}</small>
                    `;

                    let wrapper = document.createElement("div");
                    wrapper.classList.add("d-flex", "flex-column", "mb-2");

                    if (isCurrentUser) {
                        wrapper.classList.add("align-items-end"); // Aligné à droite si c'est l'utilisateur
                    } else {
                        wrapper.classList.add("align-items-start"); // Aligné à gauche sinon
                    }

                    wrapper.appendChild(messageElement);
                    messageContainer.appendChild(wrapper);
                });

                // Scroll automatique vers le bas pour voir les derniers messages
                messageContainer.scrollTop = messageContainer.scrollHeight;
            }

            // 📩 Récupérer les messages d'une demande
            function fetchMessages(demandeId) {
                fetch(`/messages/${demandeId}`, {
                    method: "GET",
                    headers: {
                        "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').getAttribute("content")
                    }
                })
                    .then(response => response.json())
                    .then(messages => {
                        console.log("🔍 Messages reçus :", messages);
                        displayMessages(messages);
                    })
                    .catch(error => console.error("❌ Erreur lors de la récupération des messages :", error));
            }

            // 📤 Envoyer un message
            sendMessageBtn.addEventListener("click", function () {
                let message = messageInput.value.trim();
                if (!message || !currentDemandeId) return;

                fetch("/messages", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                        "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').getAttribute("content")
                    },
                    body: JSON.stringify({ demande_id: currentDemandeId, content: message })
                })
                    .then(response => response.json())
                    .then(data => {
                        if (data.message) {
                            fetchMessages(currentDemandeId); // Recharge les messages
                            messageInput.value = ""; // Vide le champ après envoi
                        }
                    });
            });
        });
    </script>
@endpush