@extends('layouts.master')

@section('title', 'Modifier budget sectoriel')

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

<form method="POST" action="{{ route('budgetsectoriels.update', $budgetsectoriel->id) }}">
    @csrf
    @method('PUT')

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

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

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

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

            {{-- TYPES DE BUDGET --}}
            <div class="col-md-6 mb-3">
                <label class="form-label fw-bold">Contrats de budget concernés</label>
                <select name="typebudget_ids[]" class="form-control" multiple required>
                    @foreach($typebudgets as $typebudget)
                        <option value="{{ $typebudget->id }}"
                            {{ $budgetsectoriel->typebudgets->contains($typebudget->id) ? 'selected' : '' }}>
                            {{ $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>

            <input type="hidden" name="type_budget" value="depense">
        </div>
    </div>

    {{-- ================= LIGNES BUDGETAIRES ================= --}}
    <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">
                <thead class="table-light text-center">
                    <tr>
                        <th>Activité</th>
                        <th>Rubrique</th>
                        <th>Compte SYSCOHADA</th>
                        <th>Montant</th>
                        <th>Justification</th>
                    </tr>
                </thead>

                <tbody>
                @foreach($budgetsectoriel->lignebudgetdeps as $index => $ligne)
                    <tr>

                        {{-- Activité --}}
                        <td>
                            <input type="text" class="form-control"
                                   name="depenses[{{ $index }}][activite]"
                                   value="{{ $ligne->activite }}" readonly>
                        </td>

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

                        {{-- Compte --}}
                        <td>
                            <select name="depenses[{{ $index }}][comptesyscohada_id]"
                                    class="form-control compte-select"
                                    data-selected="{{ $ligne->comptesyscohada_id }}"
                                    required>
                                <option value="">-- Sélectionner un compte --</option>
                            </select>
                        </td>

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

                        {{-- Justification --}}
                        <td>
                            <input type="text" class="form-control"
                                   name="depenses[{{ $index }}][justification]"
                                   value="{{ $ligne->justification }}">
                        </td>

                    </tr>
                @endforeach
                </tbody>
            </table>
        </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
        </button>
    </div>

</form>
</div>

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

    const comptes = @json($comptesyscohadas);

    function updateCompteOptions(row, preselect = true) {

        const rubriqueSelect = row.querySelector('.rubrique-select');
        const compteSelect   = row.querySelector('.compte-select');
        const selectedCompte = compteSelect.dataset.selected;

        const option = rubriqueSelect.options[rubriqueSelect.selectedIndex];
        const code   = option ? option.dataset.code : null;

        compteSelect.innerHTML = '';

        if (!code) {
            compteSelect.disabled = true;
            compteSelect.innerHTML = '<option value="">-- Sélectionner une rubrique d\'abord --</option>';
            return;
        }

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

        comptes
            .filter(c => c.code.startsWith(code))
            .forEach(c => {
                const opt = document.createElement('option');
                opt.value = c.id;
                opt.textContent = c.code + ' - ' + c.libelle;

                if (preselect && selectedCompte && c.id == selectedCompte) {
                    opt.selected = true;
                }

                compteSelect.appendChild(opt);
            });
    }

    // INITIALISATION (mode édition)
    document.querySelectorAll('tbody tr').forEach(row => {
        updateCompteOptions(row, true);
    });

    // CHANGEMENT DE RUBRIQUE
    document.querySelectorAll('.rubrique-select').forEach(select => {
        select.addEventListener('change', function () {
            const row = this.closest('tr');
            row.querySelector('.compte-select').dataset.selected = '';
            updateCompteOptions(row, false);
        });
    });

});
</script>

@endsection