@extends('layouts.master')
@section('title')
    Prise en charge
@endsection
@section('content')
<div class="page-body">
    <div class="container-xl">
        <div class="row">
            @if(session()->has('success'))
                <div class="col-6 offset-3">
                    <div class="alert alert-success d-flex align-items-center justify-content-between" role="alert">
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-check" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                            <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
                            <path d="M9 12l2 2l4 -4"></path>
                        </svg>
                        <div>
                            {{ session()->get('success') }}
                        </div>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                </div>
            @endif
            @if(session()->has('error'))
                <div class="col-6 offset-3">
                    <div class="alert alert-danger d-flex align-items-center justify-content-between" role="alert">
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-alert-circle" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                            <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
                            <path d="M12 8l.01 0"></path>
                            <path d="M11 12l1 0l0 4l1 0"></path>
                        </svg>
                        <div>
                            {{ session()->get('error') }}
                        </div>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                </div>
            @endif
            @if(session()->has('warning'))
                <div class="col-6 offset-3">
                    <div class="alert alert-warning d-flex align-items-center justify-content-between" role="alert">
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-alert-triangle" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                            <path d="M12 9v4"></path>
                            <path d="M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z"></path>
                            <path d="M12 16h.01"></path>
                        </svg>
                        <div>
                            {{ session()->get('warning') }}
                        </div>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                </div>
            @endif
        </div>
        <div class="row row-cards">
            <div class="col-12">
                <div class="card card-md border border-pink shadow">
                    <div class="card-header">
                        <h2><span class="badge bg-pink-lt">Liste des factures à prendre en charge</span></h2>
                        <div class="ms-auto">
                            <span class="badge bg-pink" id="counter-badge">0 facture(s) sélectionnée(s)</span>
                        </div>
                    </div>
                    <form method="POST" action="{{ route('engagements.update') }}" id="priseEnChargeForm">
                        @csrf
                        
                        <!-- Section Type de prise en charge (cachée par défaut) -->
                        <div class="card-body border-bottom" id="typeSection" style="display: none;">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="statut" class="form-label required">Type PEC</label>
                                        <select name="type_pec" id="statut" class="form-select" required>
                                            <option value="">-- Sélectionner un type --</option>
                                            <option value="PEC Budget">Prise en charge sur Budget</option>
                                            <option value="PEC Hors Budget">Prise en charge Hors Budget</option>
                                        </select>
                                        @error('statut')
                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="date_pec" class="form-label required">Date PEC</label>
                                        <input type="date" class="form-control" @error('date_facture') is-invalid @enderror id="date_pec" name="date_pec" 
                                            value="{{ old('date_pec', isset($facture) ? $facture->date_pec->format('Y-m-d') : '') }}" required>
                                         @error('date_pec')
                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label class="form-label">Montant total sélectionné</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control" id="montantTotal" value="0" readonly>
                                            <span class="input-group-text">FCFA</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table card-table table-vcenter text-nowrap" id="dataTable" style="font-size: 0.8em;">
                                    <thead>
                                        <tr>
                                            <th>N° Facture</th>
                                            <th>Date</th>
                                            <th>Operateur</th>
                                            <th>Marche</th>
                                            <th>Secteur</th>
                                            <th>Prestation</th>
                                            <th>Montant</th>
                                            <th>Statut</th>
                                            <th class="text-center">
                                                <input class="form-check-input" type="checkbox" id="select-all" title="Tout sélectionner">
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse($factures as $facture)
                                            <tr>
                                                <td><span class="text-muted">{{ $facture->numero_facture }}</span></td>
                                                <td><a href="#" class="text-reset" tabindex="-1">{{ $facture->date_recue->format('d/m/Y') }}</a></td>
                                                <td>{{ $facture->marche->operateur->denomination }}</td>
                                                <td>{{ $facture->marche->reference }}</td>
                                                <td>{{ $facture->secteur->libelle }}</td>
                                                <td>{{ $facture->prestation->titre }}</td>
                                                <td>{{ number_format($facture->montant, 0, ',', '.') }} FCFA</td>
                                                <td>
                                                    <span class="badge bg-silver">Reçue</span>
                                                </td>
                                                <td class="text-center">
                                                    <input class="form-check-input m-0 align-middle facture-checkbox" type="checkbox" 
                                                        name="facture_ids[]" value="{{ $facture->id }}" data-montant="{{ $facture->montant }}" aria-label="Sélectionner la facture">
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="9" class="text-center text-muted py-4">
                                                    Pas de factures à prendre en charge...
                                                </td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="card-footer d-flex justify-content-between">
                            <a href="{{ route('engagements.index') }}" class="btn btn-dark">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-arrow-left">
                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                    <path d="M5 12l14 0" />
                                    <path d="M5 12l6 6" />
                                    <path d="M5 12l6 -6" />
                                </svg> 
                                Liste des factures
                            </a>
                            <button type="submit" class="btn btn-pink" id="submitBtn" disabled>
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-check">
                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                    <path d="M5 12l5 5l10 -10" />
                                </svg>
                                Prendre en charge
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<script src="{{ asset('js/jquery.dataTables.min.js') }}"></script>
<script type="text/javascript">
    $(document).ready(function() {
        // Initialisation DataTable
        const table = $('#dataTable').DataTable({
            language: {
                url: "https://cdn.datatables.net/plug-ins/1.13.6/i18n/fr-FR.json"
            },
            lengthMenu: [10, 20, 30],
            columnDefs: [
                { orderable: false, targets: 8 } // Désactiver le tri sur la colonne checkbox
            ]
        });

        // Fonction pour mettre à jour le compteur et le montant total
        function updateSelection() {
            const checkboxes = $('.facture-checkbox:checked');
            const count = checkboxes.length;
            let total = 0;

            // Calculer le montant total
            checkboxes.each(function() {
                total += parseFloat($(this).data('montant')) || 0;
            });

            // Mettre à jour l'interface
            $('#counter-badge').text(count + ' facture(s) sélectionnée(s)');
            $('#montantTotal').val(new Intl.NumberFormat('fr-FR').format(total));

            // Afficher/masquer la section type de prise en charge
            if (count > 0) {
                $('#typeSection').slideDown(300);
                $('#submitBtn').prop('disabled', false);
            } else {
                $('#typeSection').slideUp(300);
                $('#submitBtn').prop('disabled', true);
                $('#statut').val(''); // Réinitialiser le select
            }

            // Mettre à jour l'état de la case "Tout sélectionner"
            const totalCheckboxes = $('.facture-checkbox').length;
            $('#select-all').prop('checked', count === totalCheckboxes && totalCheckboxes > 0);
        }

        // Gestion de la case "Tout sélectionner"
        $('#select-all').on('change', function() {
            const isChecked = $(this).is(':checked');
            
            // Sélectionner/désélectionner toutes les cases visibles dans le tableau
            table.rows({ search: 'applied' }).nodes().to$().find('.facture-checkbox').prop('checked', isChecked);
            
            updateSelection();
        });

        // Gestion des cases individuelles
        $(document).on('change', '.facture-checkbox', function() {
            updateSelection();
        });

        // Validation du formulaire
        $('#priseEnChargeForm').on('submit', function(e) {
            const selectedCount = $('.facture-checkbox:checked').length;
            const statut = $('#statut').val();

            if (selectedCount === 0) {
                e.preventDefault();
                alert('Veuillez sélectionner au moins une facture.');
                return false;
            }

            if (!statut) {
                e.preventDefault();
                alert('Veuillez sélectionner un type de prise en charge.');
                $('#statut').focus();
                return false;
            }

            // Confirmation
            const message = `Êtes-vous sûr de vouloir prendre en charge ${selectedCount} facture(s) avec le statut "${statut}" ?`;
            if (!confirm(message)) {
                e.preventDefault();
                return false;
            }
        });

        // Mettre à jour l'état initial
        updateSelection();

        // Recompter après chaque recherche/filtre DataTable
        table.on('draw', function() {
            updateSelection();
        });
    });
</script>

<style>
    #typeSection {
        background-color: #f8f9fa;
    }
    
    .required::after {
        content: " *";
        color: red;
    }
    
    #counter-badge {
        font-size: 0.875rem;
        padding: 0.5rem 0.75rem;
    }
    
    .facture-checkbox {
        cursor: pointer;
    }
    
    #select-all {
        cursor: pointer;
    }
    
    tbody tr:hover {
        background-color: #f8f9fa;
    }
</style>
@endpush