@extends('layouts.master')

@section('title', 'Création Budget Sectoriel')

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

    <div class="card shadow mb-4">
        <div class="card-header bg-primary text-white">
            <h6 class="mb-0">Création du budget sectoriel</h6>
        </div>

        <div class="card-body">

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

                {{-- Informations générales --}}
                <div class="card mb-4">
                    <div class="card-header fw-bold">Informations générales</div>
                    <div class="card-body row">

                        {{-- Direction --}}
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Direction</label>
                            <input type="text" class="form-control" value="{{ $besoinsbudgetaire->direction->libelle }}" readonly>
                            <input type="hidden" name="direction_id" value="{{ $besoinsbudgetaire->direction_id }}">
                        </div>

                        {{-- Exercice --}}
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Exercice</label>
                            <input type="text" class="form-control" value="{{ $besoinsbudgetaire->exercice->libelle }}" readonly>
                            <input type="hidden" name="exercice_id" value="{{ $besoinsbudgetaire->exercice_id }}">
                        </div>

                        {{-- Responsable --}}
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Responsable budgétaire</label>
                            <input type="text" class="form-control" value="{{ $besoinsbudgetaire->responsable->nom }} {{ $besoinsbudgetaire->responsable->prenoms }}" readonly>
                            <input type="hidden" name="responsable_id" value="{{ $besoinsbudgetaire->responsable_id }}">
                        </div>

                        {{-- Types de budget (MULTI-SÉLECTION) --}}
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">Contrat de budget concernés</label>

                            <select name="typebudget_ids[]"
                                    class="form-control"
                                    multiple
                                    required>
                                @foreach($typebudgets as $typebudget)
                                    <option value="{{ $typebudget->id }}">
                                        {{ $typebudget->libelle }}
                                    </option>
                                @endforeach
                            </select>

                            <small class="text-muted">
                                Maintenez <strong>Ctrl</strong> (ou <strong>Cmd</strong> sur Mac) pour sélectionner plusieurs éléments
                            </small>
                        </div>

                            {{-- Champs cachés --}}
                        <input type="hidden" name="type_budget" value="depense">
                        <input type="hidden" name="besoinsbudgetaire_id" value="{{ $besoinsbudgetaire->id }}">

                    </div>
                </div>

                {{-- Lignes budgétaires --}}
                <div class="card mb-4">
                    <div class="card-header fw-bold">Lignes budgétaires – Dépenses</div>
                    <div class="card-body table-responsive">
                        <table class="table table-bordered align-middle" id="table-lignes">
                            <thead class="table-light text-center">
                                <tr>
                                    <th>Activité</th>
                                    <th>Rubrique</th>
                                    <th>Compte SYSCOHADA</th>
                                    <th>Montant (FCFA)</th>
                                    <th>Justification</th>
                                    
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($besoinsbudgetaire->besoinslignes as $index => $besoinsligne)
                                <tr>
                                    {{-- Activité --}}
                                    <td>
                                        <input type="text" class="form-control" name="depenses[{{ $index }}][activite]" value="{{ $besoinsligne->activite }}" readonly>
                                    </td>

                                   {{-- Rubrique --}}
                                    <td>
                                        <select name="depenses[{{ $index }}][rubrique_id]" class="form-control rubrique-select" required>
                                            <option value="">-- Sélectionner --</option>
                                            @foreach($rubriques as $rubrique)
                                                <option value="{{ $rubrique->id }}" data-code="{{ $rubrique->code }}">
                                                    {{ $rubrique->code }} - {{ $rubrique->libelle }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </td>

                                    {{-- Compte SYSCOHADA --}}
                                    <td>
                                      <select name="depenses[{{ $index }}][comptesyscohada_id]" class="form-control compte-select" disabled required>
                                            <option value="">-- Sélectionner une rubrique d'abord --</option>
                                        </select>
                                    </td>


                                    {{-- Montant --}}
                                    <td>
                                        <input type="number" class="form-control text-end" name="depenses[{{ $index }}][montant]" value="{{ $besoinsligne->cout_estime }}">
                                    </td>

                                    {{-- Justification --}}
                                    <td>
                                        <input type="text" class="form-control" name="depenses[{{ $index }}][justification]" placeholder="Justification de la dépense">
                                    </td>

                                </tr>
                                @endforeach
                            </tbody>
                        </table>


                        <div class="text-end mt-3">
                            <strong>Total estimé du besoin :</strong> {{ number_format($besoinsbudgetaire->total_estime, 0, ',', ' ') }} FCFA
                        </div>
                    </div>
                </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="soumettre" class="btn btn-primary">Soumettre le budget</button>
                </div>

            </form>

        </div>
    </div>
</div>
@endsection

@push('scripts')
<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