@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')
    <style>
        .dt-topbar {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            margin-bottom: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
        }

        .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
            color: #888888;
            border-radius: 1rem;
            padding: 0.125rem 0;
            margin-bottom: 0;
        }
    </style>

    <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-4 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 actives</p>
                                <h4 class="mb-0">{{ $nbDemandes }}</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-4 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-times-circle"></i>
                            </span>
                            <div class="media-body">
                                <p class="mb-1">Demandes non traitées</p>
                                <h4 class="mb-0"></h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-4 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">Demandes A rappeler</p>
                                <h4 class="mb-0"></h4>
                            </div>
                        </div>
                    </div>
                </div>
            </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>Client / Chantier</th>
                        <th>Projet</th>
                        <th>Suivi</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 () {
            const $tbody = $('#tableDemandeBody');
            let etatId = 1;

            $.ajax({
                url: `/liste-demande-ajax/${etatId}`,
                method: 'GET',
                dataType: 'json',
                success: function (response) {
                    $tbody.empty(); // on vide le tbody

                    response.data.forEach(function (item) {
                        $tbody.append(item.row); // on ajoute le <tr> déjà tout prêt
                    });

                    // Ensuite, on initialise DataTables normalement SANS ajax
                    $('#tableDemandeCours').DataTable({
                        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 () {

                            // Wrap les deux éléments ensemble
                            let wrapper = $('#tableDemande_wrapper');
                            let length = wrapper.find('.dataTables_length');
                            let filter = wrapper.find('.dataTables_filter');

                            // Créer un conteneur
                            let topbar = $('<div class="dt-topbar"></div>');
                            topbar.append(length).append(filter);

                            // Ajouter en haut
                            wrapper.prepend(topbar);

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

        // 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.querySelectorAll(".open-messages").forEach(button => {
                button.addEventListener("click", function () {
                    currentDemandeId = this.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