@extends('layouts.master')

@section('title')
    Besoins Budgetaires
@endsection

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

  <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">Liste des Besoins transmis</h6>
        </div>

    <div class="card-body table-responsive">
      <table class="table table-bordered table-hover">
          <thead class="table-light">
              <tr>
                <th>#</th>
                <th>Direction</th>
                <th>Exercice</th>
                <th>Responsable</th>
                <th>Objet</th>
                <th>Commentaire</th>
                <th>Total estimé</th>
                <th>Détails</th>
                <th>Action</th>
              </tr>
        </thead>
        <tbody>
            @forelse($besoinsbudgetaires as $besoinsbudgetaire)
            <tr>
                <td>{{ $loop->iteration }}</td>
                <td>{{ $besoinsbudgetaire->direction->libelle }}</td>
                <td>{{ $besoinsbudgetaire->exercice->libelle }}</td>
                <td>{{ $besoinsbudgetaire->responsable->nom }} {{ $besoinsbudgetaire->responsable->prenoms }}</td>
                <td>{{ $besoinsbudgetaire->objet }}</td>
                <td>{{ $besoinsbudgetaire->commentaire_general }}</td>
                <td class="text-end">
                    {{ number_format($besoinsbudgetaire->besoinslignes->sum('cout_estime'), 0, ',', ' ') }}
                </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 class="text-center">

                @if($besoinsbudgetaire->statut === 'transmis')
                    <!-- RETOUR POUR CORRECTION -->
                    <button
                        class="btn btn-sm btn-warning mb-1"
                        data-toggle="modal"
                        data-target="#modalRetourCorrection"
                        data-id="{{ $besoinsbudgetaire->id }}"
                    >
                        Différer
                    </button>

                    <!-- CREER BUDGET SECTORIEL -->
                    <a href="{{ route('budgetsectoriels.createFromBesoin', $besoinsbudgetaire->id) }}"
                        class="btn btn-sm btn-success">
                            Créer budget
                        </a>
                    </a>
                @elseif($besoinsbudgetaire->statut === 'valide')
                   <span class="badge badge-success">Budget créé</span>
                @endif
                </td>

            </tr>
            @empty
                    <tr>
                        <td colspan="9" class="text-center text-muted">
                            Aucun besoin transmis pour le moment.
                        </td>
                    </tr>
                @endforelse
            {{-- @endforeach --}}
        </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>

        <!-- MODAL RETOUR POUR CORRECTION -->
        <div class="modal fade" id="modalRetourCorrection" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">

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

                        <input type="hidden" name="besoinsbudgetaire_id" id="besoin_id_retour">

                        <div class="modal-header bg-warning">
                            <h5 class="modal-title">Différer pour correction</h5>
                        </div>

                        <div class="modal-body">
                            <label class="form-label">
                                Motif du retour <span class="text-danger">*</span>
                            </label>
                            <textarea
                                name="motif_retour"
                                class="form-control"
                                rows="4"
                                required
                            ></textarea>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">
                                Annuler
                            </button>
                            <button type="submit" class="btn btn-warning">
                                Différer
                            </button>
                        </div>

                    </form>

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

</div>
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            $('#modalVoirBesoin').on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget);
                var url = button.data('url');
                var modal = $(this);

                // Show loader
                modal.find('#modal-content-body').html('');
                modal.find('#modal-content-loader').show();

                // Load content via AJAX
                $.get(url, function(data) {
                    modal.find('#modal-content-loader').hide();
                    modal.find('#modal-content-body').html(data);
                });
            });
        });
    </script>

    <script>
        $('#modalRetourCorrection').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            var besoinId = button.data('id');

            $('#besoin_id_retour').val(besoinId);
        });
    </script>

@endpush