@extends('layouts.master')

@section('title')
    Modifier un Besoin Budgétaire
@endsection

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

    <!-- Bouton replier/déplier le formulaire -->
    <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-edit fa-sm text-white-50"></i> Modifier le besoin
        </a>
    </div>

    <!-- FORMULAIRE DE MODIFICATION -->
    <div class="row">
        <div class="col-sm-10 offset-sm-1">
            <div class="card shadow mb-4 collapse show" id="collapseBesoin">
                <div class="card-body">
                    <form method="POST" action="{{ route('besoinsbudgetaires.update', $besoinsbudgetaire->id) }}">
                        @csrf
                        @method('PUT')

                        {{-- 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 }}" 
                                            {{ $besoinsbudgetaire->exercice_id == $exercice->id ? 'selected' : '' }}>
                                            {{ $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"
                                       value="{{ old('objet', $besoinsbudgetaire->objet) }}" 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">{{ old('commentaire_general', $besoinsbudgetaire->commentaire_general) }}</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">
                                    @foreach($besoinsbudgetaire->besoinslignes as $besoinsligne)
                                        <tr>
                                            <td><input name="activite[]" class="form-control form-control-sm" value="{{ $besoinsligne->activite }}" required></td>
                                            <td><input name="sous_activite[]" class="form-control form-control-sm" value="{{ $besoinsligne->sous_activite }}"></td>
                                            <td><input type="number" name="cout_estime[]" class="form-control form-control-sm" value="{{ $besoinsligne->cout_estime }}" required></td>
                                            <td>
                                                <select name="priorite[]" class="form-select form-select-sm">
                                                    <option value="Haute" {{ $besoinsligne->priorite == 'Haute' ? 'selected' : '' }}>Haute</option>
                                                    <option value="Moyenne" {{ $besoinsligne->priorite == 'Moyenne' ? 'selected' : '' }}>Moyenne</option>
                                                    <option value="Basse" {{ $besoinsligne->priorite == 'Basse' ? 'selected' : '' }}>Basse</option>
                                                </select>
                                            </td>
                                            <td><input name="commentaire[]" class="form-control form-control-sm" value="{{ $besoinsligne->commentaire }}"></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>
                                    @endforeach
                                </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>

</div>
@endsection

@push('scripts')
<script>
    function ajouterLigne() {
        let tbody = document.getElementById('besoinslignes');
        let row = document.createElement('tr');
        row.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(row);
    }

    function supprimerLigne(button) {
        let tbody = document.getElementById('besoinslignes');
        if(tbody.rows.length > 1) { // ne jamais supprimer la dernière ligne
            button.closest('tr').remove();
        }
    }
</script>
@endpush