@extends('layouts.master')

@section('title', 'Besoins budgétaires')

@section('content')
<div class="container-fluid">

    <!-- Bouton Ajouter -->
    <div class="d-flex justify-content-end mb-4">
        <a href="#collapseBesoin" class="btn btn-sm btn-primary shadow-sm" data-toggle="collapse">
            <i class="fas fa-plus fa-sm text-white-50"></i> Ajouter un besoin
        </a>
    </div>

    <!-- FORMULAIRE DE SAISIE -->
    <div class="row">
        <div class="col-sm-10 offset-sm-1">
            <div class="card shadow mb-4 collapse" id="collapseBesoin">
                <div class="card-body">

                    <form method="POST" action="{{ route('besoinsbudgetaires.store') }}">
                        @csrf

                        {{-- Exercice / Responsable --}}
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label">Exercice</label>
                                <select name="exercice_id" class="form-control">
                                    @foreach($exercices as $exercice)
                                        <option value="{{ $exercice->id }}">{{ $exercice->libelle }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">Responsable</label>
                                <input type="text"
                                    class="form-control"
                                    value="{{ $responsable->nom }} {{ $responsable->prenoms }}"
                                    readonly>

                                <input type="hidden" name="responsable_id" value="{{ $responsable->id }}">
                            </div>

                        </div>

                        {{-- Direction / Objet --}}
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label">Direction / Antenne</label>
                                <input type="text"
                                    class="form-control"
                                    value="{{ $responsable->direction->libelle }}"
                                    readonly>

                                <input type="hidden" name="direction_id" value="{{ $responsable->direction_id }}">
                            </div>


                            <div class="col-md-6">
                                <label class="form-label">Objet du besoin</label>
                                <input type="text" name="objet" class="form-control" required>
                            </div>
                        </div>

                        {{-- Commentaire général --}}
                        <div class="mb-3">
                            <label class="form-label">Commentaire général</label>
                            <textarea name="commentaire_general" class="form-control" rows="3"></textarea>
                        </div>

                        {{-- Lignes de besoins --}}
                        <div class="mb-3">
                            <h6 class="fw-bold">Lignes de besoins</h6>

                            <table class="table table-bordered align-middle">
                                <thead class="table-dark text-center">
                                    <tr>
                                        <th>Activité</th>
                                        <th>Sous-activité</th>
                                        <th>Coût estimé</th>
                                        <th>Priorité</th>
                                        <th>Commentaire</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody id="besoinslignes">
                                    <tr>
                                        <td><input name="activite[]" class="form-control form-control-sm" required></td>
                                        <td><input name="sous_activite[]" class="form-control form-control-sm"></td>
                                        <td><input type="number" name="cout_estime[]" class="form-control form-control-sm" required></td>
                                        <td>
                                            <select name="priorite[]" class="form-select form-select-sm">
                                                <option value="Haute">Haute</option>
                                                <option value="Moyenne">Moyenne</option>
                                                <option value="Basse">Basse</option>
                                            </select>
                                        </td>
                                        <td><input name="commentaire[]" class="form-control form-control-sm"></td>
                                        <td class="text-center">
                                            <button type="button" class="btn btn-sm btn-danger" onclick="supprimerLigne(this)">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>

                            <button type="button" class="btn btn-sm btn-outline-primary" onclick="ajouterLigne()">
                                <i class="fas fa-plus"></i> Ajouter une ligne
                            </button>
                        </div>

                        {{-- Actions --}}
                        <div class="text-end">
                            <button type="submit" name="action" value="brouillon" class="btn btn-secondary">
                                Enregistrer brouillon
                            </button>
                            <button type="submit" name="action" value="transmettre" class="btn btn-primary">
                                Transmettre
                            </button>
                        </div>

                    </form>

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

    <!-- TABLEAU DES BESOINS -->
    <div class="card shadow mt-4">
        <div class="card-header">
            <h6 class="m-0 fw-bold text-primary">Besoins budgétaires enregistrés</h6>
        </div>
        <div class="card-body table-responsive">
            <table class="table table-bordered table-hover align-middle">
                <thead class="table-light text-center">
                    <tr>
                        <th>Exercice</th>
                        <th>Direction</th>
                        <th>Responsable</th>
                        <th>Objet</th>
                        <th>Total estimé</th>
                        <th>Détails</th>
                        <th>Actions</th>
                        <th>Motif Si Retour</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($besoinsbudgetaires as $besoinsbudgetaire)
                        <tr class="text-center">
                            <td>{{ $besoinsbudgetaire->exercice->libelle ?? '' }}</td>
                            <td>{{ $besoinsbudgetaire->responsable->direction->libelle ?? '' }}</td>
                            <td>{{ $besoinsbudgetaire->responsable->nom }} {{ $besoinsbudgetaire->responsable->prenoms }}</td>
                            <td>{{ $besoinsbudgetaire->objet }}</td>
                            <td>{{ number_format($besoinsbudgetaire->total_estime, 0, ',', ' ') }} FCFA</td>
                            <td>
                               <button
                                    class="btn btn-sm btn-primary"
                                    data-toggle="modal"
                                    data-target="#modalVoirBesoin"
                                    data-url="{{ route('besoinsbudgetaires.show', $besoinsbudgetaire->id) }}"
                                >
                                    Voir
                                </button>
                            </td>
                           <td>
                                @if($besoinsbudgetaire->statut === 'transmis')
                                    {{-- Si le besoin est transmis, afficher seulement le badge jaune --}}
                                    <span class="badge badge-warning">En attente</span>

                                @elseif($besoinsbudgetaire->statut === 'retourne')
                                    {{-- Si le besoin est retourné, afficher badge rouge et bouton dupliquer --}}
                                    <span class="badge badge-danger">Différer</span>
                                    <a href="{{ route('besoinsbudgetaire.edit', ['besoinsbudgetaire' => $besoinsbudgetaire->id, 'duplicata' => true]) }}" 
                                        class="btn btn-sm btn-info" title="Dupliquer">
                                        <i class="fas fa-copy"></i>
                                    </a>

                                @elseif($besoinsbudgetaire->statut === 'valide')
                                    {{-- Si le besoin est validé, afficher seulement le badge vert --}}
                                    <span class="badge badge-success">Validé</span>

                                @else
                                    {{-- Si le besoin est brouillon, afficher les actions --}}
                                    <a href="{{ route('besoinsbudgetaire.edit', $besoinsbudgetaire->id) }}" class="btn btn-sm btn-info" title="Modifier">
                                        <i class="fas fa-edit"></i>
                                    </a>

                                    <form action="{{ route('besoinsbudgetaire.supprimer', $besoinsbudgetaire->id) }}"
                                        method="POST"
                                        class="d-inline"
                                        onsubmit="return confirm('Voulez-vous vraiment supprimer ce besoin ?')">
                                        @csrf
                                        @method('DELETE')
                                        <button class="btn btn-sm btn-danger" title="Supprimer">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </form>

                                    <form action="{{ route('besoinsbudgetaire.transmettre', $besoinsbudgetaire->id) }}"
                                        method="POST"
                                        class="d-inline">
                                        @csrf
                                        <button class="btn btn-sm btn-primary" title="Transmettre">
                                            <i class="fas fa-paper-plane"></i>
                                        </button>
                                    </form>
                                @endif
                            </td>
                            <td>
                                {{ $besoinsbudgetaire->motif_retour ?? '---' }}
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="text-center text-muted">
                                Aucun besoin enregistré
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

        <!-- MODAL VOIR BESOINS BUDGETAIRES -->
        <div class="modal fade" id="modalVoirBesoin" tabindex="-1">
            <div class="modal-dialog modal-xl modal-dialog-scrollable">
                <div class="modal-content">

                    <!-- HEADER -->
                    <div class="modal-header bg-primary text-white">
                        <h5 class="modal-title">
                            Détail du besoin budgétaire
                        </h5>
                        {{-- <button type="button" class="btn-close" data-dismiss="modal"></button> --}}
                    </div>

                    <!-- BODY -->
                    <div class="modal-body">
                        <div id="modal-content-loader" class="text-center my-4">
                            <div class="spinner-border text-primary"></div>
                            <p>Chargement...</p>
                        </div>

                        <!-- CONTENU AJAX -->
                        <div id="modal-content-body"></div>

                    </div>

                    <!-- FOOTER -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">
                            Fermer
                        </button>
                    </div>

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

</div>
@endsection

@push('scripts')
<script>
    /**
     * Ajouter une nouvelle ligne de besoin
     */
    function ajouterLigne() {
        const tbody = document.getElementById('besoinslignes');

        const nouvelleLigne = document.createElement('tr');
        nouvelleLigne.innerHTML = `
            <td><input name="activite[]" class="form-control form-control-sm" required></td>
            <td><input name="sous_activite[]" class="form-control form-control-sm"></td>
            <td><input type="number" name="cout_estime[]" class="form-control form-control-sm" required></td>
            <td>
                <select name="priorite[]" class="form-select form-select-sm">
                    <option value="Haute">Haute</option>
                    <option value="Moyenne">Moyenne</option>
                    <option value="Basse">Basse</option>
                </select>
            </td>
            <td><input name="commentaire[]" class="form-control form-control-sm"></td>
            <td class="text-center">
                <button type="button" class="btn btn-sm btn-danger" onclick="supprimerLigne(this)">
                    <i class="fas fa-trash"></i>
                </button>
            </td>
        `;

        tbody.appendChild(nouvelleLigne);
    }

    /**
     * Supprimer une ligne (sauf si c'est la dernière)
     */
    function supprimerLigne(button) {
        const tbody = document.getElementById('besoinslignes');
        const lignes = tbody.querySelectorAll('tr');

        if (lignes.length <= 1) {
            alert('Au moins une ligne de besoin est obligatoire.');
            return;
        }

        const ligne = button.closest('tr');
        ligne.remove();
    }
</script>

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

        const modal = document.getElementById('modalVoirBesoin');

        modal.addEventListener('show.bs.modal', function (event) {

            const button = event.relatedTarget;
            const url = button.getAttribute('data-url');

            const loader = document.getElementById('modal-content-loader');
            const body = document.getElementById('modal-content-body');

            loader.classList.remove('d-none');
            body.classList.add('d-none');

            fetch(url)
                .then(response => {
                    if (!response.ok) throw new Error();
                    return response.text();
                })
                .then(html => {
                    body.innerHTML = html;
                })
                .catch(() => {
                    body.innerHTML = `
                        <div class="alert alert-danger">
                            Erreur lors du chargement des détails.
                        </div>
                    `;
                })
                .finally(() => {
                    loader.classList.add('d-none');
                    body.classList.remove('d-none');
                });
        });

    });
</script> --}}

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

    // Sélection du modal
    var modal = document.getElementById('modalVoirBesoin');

    // Événement au moment de l'ouverture du modal
    $('#modalVoirBesoin').on('show.bs.modal', function (event) {

        // Le bouton qui a déclenché le modal
        var button = $(event.relatedTarget); 
        var url = button.data('url'); // URL à appeler pour récupérer le contenu

        // Loader et zone de contenu
        var loader = $('#modal-content-loader');
        var body = $('#modal-content-body');

        loader.removeClass('d-none');
        body.addClass('d-none');

        // Requête AJAX pour récupérer le contenu du show
        fetch(url)
            .then(response => {
                if (!response.ok) throw new Error('Erreur AJAX');
                return response.text();
            })
            .then(html => {
                body.html(html);
            })
            .catch(() => {
                body.html(`
                    <div class="alert alert-danger">
                        Erreur lors du chargement des détails.
                    </div>
                `);
            })
            .finally(() => {
                loader.addClass('d-none');
                body.removeClass('d-none');
                });
        });

    });

</script>
@endpush