@extends('layouts.master')

@section('title')
    Budget Sectoriel
@endsection

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

   <!-- Bouton Ajouter -->
    {{-- <div class="d-sm-flex align-items-center justify-content-end mb-4">
        <a href="#collapseRubrique" class="btn btn-sm btn-primary shadow-sm" data-toggle="collapse">
            <i class="fas fa-plus fa-sm text-white-50"></i> Ajouter un budget sectoriel
        </a>
    </div> --}}

<!-- Formulaire -->
    <div class="row">
        <div class="col-sm-10 offset-sm-1">
            <div class="card shadow mb-4 collapse" id="collapseRubrique">
                <div class="card-body">

                    <form method="POST" action="{{ route('budgetsectoriels.store') }}" enctype="multipart/form-data">
                        @csrf

                        {{-- ========================= --}}
                        {{-- INFORMATIONS GÉNÉRALES --}}
                        {{-- ========================= --}}
                        <div class="card mb-4">
                            <div class="card-header">Informations Générales</div>
                            <div class="card-body row">

                                <div class="col-md-6 mb-3">
                                    <label>Direction</label>
                                    <select name="direction_id" class="form-control">
                                        @foreach($directions as $direction)
                                            <option value="{{ $direction->id }}">{{ $direction->libelle }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-md-6 mb-3">
                                    <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 mb-3">
                                  <label>Responsable budgétaire</label>
                                    <select name="responsable_id" class="form-control">
                                        @foreach($responsables as $responsable)
                                            <option value="{{ $responsable->id }}">{{ $responsable->nom }} {{ $responsable->prenom }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                {{-- <div class="col-md-6 mb-3">
                                    <label>Rubrique budgétaire</label>
                                    <select name="rubrique_id" class="form-control">
                                        @foreach($rubriques as $rubrique)
                                            <option value="{{ $rubrique->id }}">{{ $rubrique->code }} - {{ $rubrique->libelle }}</option>
                                        @endforeach
                                    </select>
                                </div> --}}

                                 <div class="col-md-6 mb-3">
                                    <label>Type de budget</label><br>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="type_budget" value="depense" checked>
                                        <label class="form-check-label">Dépenses</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="type_budget" value="recette">
                                        <label class="form-check-label">Recettes</label>
                                    </div>
                                </div>

                            </div>
                        </div>

                        {{-- ========================= --}}
                        {{-- LIGNES DÉPENSES --}}
                        {{-- ========================= --}}
                        <div class="card mb-4" id="bloc-depenses">
                            <div class="card-header">Lignes budgétaires - Dépenses</div>
                            <div class="card-body">

                                <table class="table table-bordered" id="table-depenses">
                                    <thead>
                                        <tr>
                                            <th>Activité</th>
                                            <th>Rubrique</th>
                                            <th>Compte SYSCOHADA</th>
                                            <th>Montant</th>
                                            <th>Justification</th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><input type="text" name="depenses[0][activite]" class="form-control"></td>
                                            <td>
                                                <select name="depenses[0][rubrique_id]" class="form-control">
                                                    @foreach($rubriques as $rubrique)
                                                        <option value="{{ $rubrique->id }}">
                                                            {{ $rubrique->code }} - {{ $rubrique->libelle }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </td>
                                            <td>
                                                <select name="depenses[0][comptesyscohada_id]" class="form-control">
                                                    @foreach($comptesyscohadas as $comptesyscohada)
                                                        <option value="{{ $comptesyscohada->id }}">
                                                            {{ $comptesyscohada->code }} - {{ $comptesyscohada->libelle }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </td>
                                            <td><input type="number" name="depenses[0][montant]" class="form-control"></td>
                                            <td><input type="text" name="depenses[0][justification]" class="form-control"></td>
                                            <td><button type="button" class="btn btn-danger btn-sm remove-row">X</button></td>
                                        </tr>
                                    </tbody>
                                </table>

                                <button type="button" class="btn btn-outline-primary" id="add-depense">
                                    + Ajouter une ligne
                                </button>
                            </div>
                        </div>

                        {{-- ========================= --}}
                        {{-- LIGNES RECETTES --}}
                        {{-- ========================= --}}
                        <div class="card mb-4 d-none" id="bloc-recettes">
                            <div class="card-header">Lignes budgétaires - Recettes</div>
                            <div class="card-body">

                                <table class="table table-bordered" id="table-recettes">
                                    <thead>
                                        <tr>
                                            <th>Type de recette</th>
                                            <th>Rubrique</th>
                                            <th>Compte SYSCOHADA</th>
                                            <th>Montant attendu</th>
                                            <th>Hypothèse</th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><input type="text" name="recettes[0][type_recette]" class="form-control"></td>
                                            <td>
                                                <select name="recettes[0][rubrique_id]" class="form-control">
                                                    @foreach($rubriques as $rubrique)
                                                        <option value="{{ $rubrique->id }}">
                                                            {{ $rubrique->code }} - {{ $rubrique->libelle }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            <td>
                                                <select name="depenses[0][comptesyscohada_id]" class="form-control">
                                                    @foreach($comptesyscohadas as $comptesyscohada)
                                                        <option value="{{ $comptesyscohada->id }}">
                                                            {{ $comptesyscohada->code }} - {{ $comptesyscohada->libelle }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </td>
                                            <td><input type="number" name="recettes[0][montant]" class="form-control"></td>
                                            <td><input type="text" name="recettes[0][hypothese]" class="form-control"></td>
                                            <td><button type="button" class="btn btn-danger btn-sm remove-row">X</button></td>
                                        </tr>
                                    </tbody>
                                </table>

                                <button type="button" class="btn btn-outline-primary" id="add-recette">
                                    + Ajouter une ligne
                                </button>
                            </div>
                        </div>

                        {{-- ========================= --}}
                        {{-- ACTIONS --}}
                        {{-- ========================= --}}
                        <div class="text-end">
                            <button type="submit" name="action" value="brouillon" class="btn btn-secondary">
                                Enregistrer le brouillon
                            </button>
                            <button type="submit" name="action" value="soumettre" class="btn btn-primary">
                                Soumettre
                            </button>
                        </div>

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


     <!-- 
    DataTables Example
    Affichage des rubriques budgétaires
    -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">Liste des Budgets sectoriels</h6>
        </div>

         {{-- ===============================
            BUDGETS DÉPENSES
            =============================== --}}
            <div class="card shadow mb-5">
                <div class="card-header bg-danger text-white">
                    Budgets sectoriels - Dépenses
                </div>

                <div class="card-body table-responsive">
                    <table class="table table-bordered table-hover">
                        <thead class="table-light">
                            <tr class="text-center">
                                <th>#</th>
                                <th>Exercice</th>
                                <th>Direction</th>
                                <th>Responsable</th>
                                <th>Contrat de Budget</th>
                                <th>Total dépenses</th>
                                <th>Détails</th>
                                <th>Actions</th>
                                <th>Motif Si Retour</th>
                            </tr>
                        </thead>
                        <tbody>
                        @forelse($lignebudgetdeps as $budgetsectoriel)
                            <tr class="text-center">
                                <td>{{ $loop->iteration }}</td>
                                <td>{{ $budgetsectoriel->exercice->libelle }}</td>
                                <td>{{ $budgetsectoriel->direction->libelle }}</td>
                                <td>{{ $budgetsectoriel->responsable->nom }} {{ $budgetsectoriel->responsable->prenoms }}</td>
                                <td>
                                    @foreach($budgetsectoriel->typebudgets as $typebudget)
                                        <span class="badge badge-info">
                                            {{ $typebudget->libelle }}
                                        </span>
                                    @endforeach
                                </td>
                                <td class="text-end fw-bold text-danger">
                                    {{ number_format($budgetsectoriel->lignebudgetdeps->sum('montant'), 0, ',', ' ') }} FCFA
                                </td>
                                <td class="text-center">
                                    <button
                                        class="btn btn-sm btn-primary"
                                        data-toggle="modal"
                                        data-target="#modalVoirBesoin"
                                        data-url="{{ route('budgetsectoriels.show', $budgetsectoriel->id) }}"
                                    >
                                        Voir
                                    </button>
                                </td>
                                </td>
                                    <td class="text-center">
                                    @if($budgetsectoriel->statut === 'soumis')
                                        {{-- Si le budget est Crée, afficher seulement le badge jaune --}}
                                        <span class="badge badge-warning">En attente DRHFM</span>

                                    @elseif($budgetsectoriel->statut === 'retourne')
                                        {{-- Si le budget est retourné, afficher badge rouge et bouton différer --}}
                                        <span class="badge badge-danger">Différer</span>

                                        <a href="{{ route('budgetsectoriel.edit', $budgetsectoriel->id) }}"
                                        class="btn btn-sm btn-info" title="Corriger">
                                            <i class="fas fa-edit"></i>
                                        </a>

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

                                    @else
                                        {{-- Brouillon --}}
                                        <a href="{{ route('budgetsectoriel.edit', $budgetsectoriel->id) }}"
                                        class="btn btn-sm btn-warning" title="Modifier">
                                            <i class="fas fa-edit"></i>
                                        </a>

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

                                        <form action="{{ route('budgetsectoriel.transmettre', $budgetsectoriel->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>
                                {{ $budgetsectoriel->motif_retour ?? '---' }}
                            </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="9" class="text-center text-muted">
                                    Aucun budget de dépenses
                                </td>
                            </tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

        {{-- ===============================
        BUDGETS RECETTES
        =============================== --}}
        <div class="card shadow mb-4">
            <div class="card-header bg-success text-white">
                Budgets sectoriels - Recettes
            </div>

            <div class="card-body table-responsive">
                <table class="table table-bordered table-hover">
                    <thead class="table-light">
                        <tr class="text-center">
                            <th>#</th>
                            <th>Exercice</th>
                            <th>Direction</th>
                            <th>Responsable</th>
                            <th>Contrat de budget</th>
                            <th>Total recettes</th>
                            <th>Details</th>
                            <th>Actions</th>
                            <th>Motif Si Retour</th>
                        </tr>
                    </thead>
                    <tbody>
                    @forelse($lignebudgetrecs as $budgetsectoriel)
                        <tr class="text-center">
                            <td>{{ $loop->iteration }}</td>
                            <td>{{ $budgetsectoriel->exercice->libelle }}</td>
                            <td>{{ $budgetsectoriel->direction->libelle }}</td>
                            <td>{{ $budgetsectoriel->responsable->nom }} {{ $budgetsectoriel->responsable->prenom }}</td>
                            <td>
                                @foreach($budgetsectoriel->typebudgets as $typebudget)
                                    <span class="badge badge-info">
                                        {{ $typebudget->libelle }}
                                    </span>
                                @endforeach
                            <td class="text-end fw-bold text-success">
                                {{ number_format($budgetsectoriel->lignebudgetrecs->sum('montant'), 0, ',', ' ') }} FCFA
                            </td>
                            <td class="text-center">
                                <a href="{{ route('budgetsectoriels.show', $budgetsectoriel->id) }}" class="btn btn-sm btn-info">Voir</a>
                            </td>
                                <td class="text-center">
                                @if($budgetsectoriel->statut === 'soumis')
                                    {{-- Si le budget est Crée, afficher seulement le badge jaune --}}
                                    <span class="badge badge-warning">En attente DRHFM</span>

                                @elseif($budgetsectoriel->statut === 'retourne')
                                    {{-- Si le budget est retourné, afficher badge rouge et bouton différer --}}
                                    <span class="badge badge-danger">Différer</span>

                                    <a href="{{ route('budgetsectoriel.edit', $budgetsectoriel->id) }}"
                                    class="btn btn-sm btn-info" title="Corriger">
                                        <i class="fas fa-edit"></i>
                                    </a>

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

                                @else
                                    {{-- Brouillon --}}
                                    <a href="{{ route('budgetsectoriel.edit', $budgetsectoriel->id) }}"
                                    class="btn btn-sm btn-warning" title="Modifier">
                                        <i class="fas fa-edit"></i>
                                    </a>

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

                                    <form action="{{ route('budgetsectoriel.transmettre', $budgetsectoriel->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>
                            {{ $budgetsectoriel->motif_retour ?? '---' }}
                        </tr>
                    @empty
                        <tr>
                            <td colspan="9" class="text-center text-muted">
                                Aucun budget de recettes
                            </td>
                        </tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>

    </div>

        <!-- MODAL VOIR BUDGET LIGNE -->
        <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 Budget ligne
                        </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>
  (function () {

      /* ============================
        TOGGLE DEPENSE / RECETTE
      ============================ */
      function toggleBlocs(type) {
          const blocDep = document.getElementById('bloc-depenses');
          const blocRec = document.getElementById('bloc-recettes');

          if (!blocDep || !blocRec) return;

          if (type === 'depense') {
              blocDep.classList.remove('d-none');
              blocRec.classList.add('d-none');
          } else {
              blocDep.classList.add('d-none');
              blocRec.classList.remove('d-none');
          }
      }

      document.addEventListener('change', function (e) {
          if (e.target.name === 'type_budget') {
              toggleBlocs(e.target.value);
          }
      });

      document.addEventListener('DOMContentLoaded', function () {
          const checked = document.querySelector('input[name="type_budget"]:checked');
          if (checked) toggleBlocs(checked.value);
      });

      /* ============================
        AJOUT / SUPPRESSION LIGNES
      ============================ */

      // ➕ Ajouter ligne dépense
      document.getElementById('add-depense')?.addEventListener('click', function () {
          addRow('table-depenses', 'depenses');
      });

      // ➕ Ajouter ligne recette
      document.getElementById('add-recette')?.addEventListener('click', function () {
          addRow('table-recettes', 'recettes');
      });

      // ❌ Supprimer ligne (event delegation)
      document.addEventListener('click', function (e) {
          if (e.target.classList.contains('remove-row')) {
              const row = e.target.closest('tr');
              const tbody = row.parentElement;

              if (tbody.rows.length > 1) {
                  row.remove();
                  reindexRows(tbody);
              }
          }
      });

      /* ============================
        FONCTIONS UTILITAIRES
      ============================ */

      function addRow(tableId, prefix) {
          const table = document.getElementById(tableId);
          const tbody = table.querySelector('tbody');
          const index = tbody.rows.length;

          const newRow = tbody.rows[0].cloneNode(true);

          newRow.querySelectorAll('input, select').forEach(input => {
              input.value = '';
              input.name = input.name.replace(/\[\d+\]/, `[${index}]`);
          });

          tbody.appendChild(newRow);
      }

      function reindexRows(tbody) {
          Array.from(tbody.rows).forEach((row, index) => {
              row.querySelectorAll('input, select').forEach(input => {
                  input.name = input.name.replace(/\[\d+\]/, `[${index}]`);
              });
          });
      }

  })();
</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>

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

        // Tous les comptes
        const comptes = @json($comptesyscohadas);

        // Fonction pour mettre à jour les comptes d'une ligne
        function updateCompteOptions(row) {
            const rubriqueSelect = row.querySelector('.rubrique-select');
            const compteSelect = row.querySelector('.compte-select');

            const selectedOption = rubriqueSelect.options[rubriqueSelect.selectedIndex];
            const code = selectedOption.dataset.code;

            compteSelect.innerHTML = ''; // vider le select

            if (code) {
                compteSelect.disabled = false;
                compteSelect.innerHTML = '<option value="">-- Sélectionner un compte --</option>';

                // filtrer les comptes dont le code commence par le code de la rubrique
                comptes.filter(c => c.code.startsWith(code)).forEach(c => {
                    const option = document.createElement('option');
                    option.value = c.id;
                    option.textContent = c.code + ' - ' + c.libelle;
                    compteSelect.appendChild(option);
                });
            } else {
                compteSelect.disabled = true;
                compteSelect.innerHTML = '<option value="">-- Sélectionner une rubrique d\'abord --</option>';
            }
        }

        // Ajouter l'écouteur à chaque select rubrique
        document.querySelectorAll('.rubrique-select').forEach(select => {
            select.addEventListener('change', function() {
                const row = this.closest('tr');
                updateCompteOptions(row);
            });
        });

    });
</script>

@endpush