@extends('layouts.master')
@section('title')
    Création d'un Marché
@endsection
@section('content')
<div class="page-body">
    <div class="container-xl">
        <div class="row">
            @if($errors->any())
                <div class="col-6 offset-3">
                    <div class="alert alert-warning">
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            @endif
        </div>
        <div class="row row-cards">
            <div class="col-12 mb-4">
                <form class="card card-md shadow" action="{{ route('marches.store') }}" method="POST">
                    @csrf
                    <div class="card-header">
                        <h2><span class="badge bg-teal-lt">Formulaire d'enregistrement d'un Marché</span></h2>
                    </div>
                    <div class="card-body">
                        <div class="mb-3 row">
                            <div class="col-6">
                                <div class="mb-3 row">
                                    <label class="col-3 col-form-label bg-teal-lt required">Référence</label>
                                    <div class="col">
                                        <input type="text" class="form-control @error('reference') is-invalid @enderror" 
                                            name="reference" value="{{ old('reference') }}" placeholder="Numéro du marché" required>
                                        @error('reference')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="mb-3 row">
                                    <label class="col-3 col-form-label bg-teal-lt required">Intitulé</label>
                                    <div class="col">
                                        <input type="text" class="form-control @error('intitule') is-invalid @enderror" 
                                            id="objet" name="intitule" value="{{ old('intitule') }}" placeholder="intitulé du marché" required>
                                        @error('intitule')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="mb-3 row">
                                    <label class="col-3 col-form-label bg-teal-lt required">Montant Initial</label>
                                    <div class="col">
                                        <input type="number" step="0.01" class="form-control @error('cout_initial') is-invalid @enderror" 
                                            id="montant_global" name="cout_initial" value="{{ old('cout_initial') }}" placeholder="2.540.000.000" required>
                                        @error('cout_initial')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="mb-3 row">
                                    <label class="col-3 col-form-label bg-teal-lt required">Date début</label>
                                    <div class="col">
                                        <input type="date" class="form-control @error('date_debut') is-invalid @enderror" 
                                            id="date_debut" name="date_debut" value="{{ old('date_debut') }}" required>
                                        @error('date_debut')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="mb-3 row">
                                    <label class="col-3 col-form-label bg-teal-lt required">Date fin</label>
                                    <div class="col">
                                        <input type="date" class="form-control @error('date_fin') is-invalid @enderror" 
                                            id="date_fin" name="date_fin" value="{{ old('date_fin') }}" required>
                                        @error('date_fin')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="mb-3 row">
                                    <label class="col-3 col-form-label bg-teal-lt required">Titulaire</label>
                                    <div class="col">
                                        <select class="form-select @error('operateur_id') is-invalid @enderror" name="operateur_id" required>
                                            <option value="">-- Choix titulaire --</option>
                                            @foreach ($operateurs as $operateur)
                                                <option value="{{ $operateur->id }}" {{ old('operateur_id') == $operateur->id ? 'selected' : '' }}>
                                                    {{ $operateur->denomination }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('operateur_id')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="mb-3 row">
                                    <label class="col-3 col-form-label bg-teal-lt required">Secteur/Zone</label>
                                    <div class="col">
                                        <select class="form-select @error('secteur_id') is-invalid @enderror" name="secteur_id" required>
                                            <option value="">-- Choix secteur/zone --</option>
                                            @foreach ($secteurs as $secteur)
                                                <option value="{{ $secteur->id }}" {{ old('secteur_id') == $secteur->id ? 'selected' : '' }}>
                                                    {{ $secteur->libelle }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('secteur_id')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="mb-3 row">
                                    <label class="col-3 col-form-label bg-teal-lt">Avenants au Marché</label>
                                    <div class="col">
                                        <input type="number" class="form-control @error('avenants') is-invalid @enderror" 
                                            name="avenants" value="{{ old('avenants') }}" placeholder="54.000.000">
                                        @error('avenants')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="card">
                                    <div class="card-header d-flex justify-content-between">
                                        <label class="col-form-label p-2 bg-teal-lt required">Répartition par Exercice</label>
                                        <div>
                                            <button type="button" id="add-exercice" class="btn btn-sm btn-dark">+ Ajouter un exercice</button>
                                        </div>
                                    </div>
                                    <div id="exercices-container" class="card-body">
                                        @if(old('exercices', null))
                                            @foreach(old('exercices') as $index => $exercice)
                                                <div class="row exercice-row mb-3">
                                                    <div class="col-md-5">
                                                        <select class="form-select" name="exercices[{{ $index }}][id]" required>
                                                            <option value="">--Choix d'un exercice--</option>
                                                            @foreach($exercices as $ex)
                                                                <option value="{{ $ex->id }}" 
                                                                    {{ $exercice['id'] == $ex->id ? 'selected' : '' }}>
                                                                    {{ $ex->annee }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    <div class="col-md-5">
                                                        <input type="number" step="0.01" class="form-control montant-exercice" 
                                                            name="exercices[{{ $index }}][montant]" 
                                                            value="{{ $exercice['montant'] }}" placeholder="2.450.000.00" required>
                                                    </div>
                                                    <div class="col-md-2 pt-1">
                                                        <button type="button" class="btn btn-sm btn-red remove-exercice">- Supprimer</button>
                                                    </div>
                                                </div>
                                            @endforeach
                                        @else
                                            <div class="row exercice-row mb-3">
                                                <div class="col-md-5">
                                                    <select class="form-select" name="exercices[0][id]" required>
                                                        <option value="">--Choix d'un exercice--</option>
                                                        @foreach($exercices as $ex)
                                                            <option value="{{ $ex->id }}">{{ $ex->annee }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="col-md-5">
                                                    <input type="number" step="0.01" class="form-control montant-exercice" 
                                                        name="exercices[0][montant]" placeholder="2.450.000.000" required>
                                                </div>
                                                <div class="col-md-2 pt-1">
                                                    <button type="button" class="btn btn-sm btn-red remove-exercice">
                                                        - Supprimer
                                                    </button>
                                                </div>
                                            </div>
                                        @endif
                                </div>
                                <div class="row">
                                    <div class="m-4">
                                        <strong>Total alloué: </strong>
                                        <span id="total-alloue">0.00</span> FCFA /
                                        <span id="montant-global-display">0.00</span> FCFA
                                    </div>
                                    <div id="montant-error" class="text-danger d-none">
                                        Le total alloué aux exercices ne correspond pas au montant global!
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer d-flex justify-content-between">
                        <a href="{{ route('marches.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> 
                            Retour à la liste
                        </a>
                        <button type="submit" class="btn btn-teal">Enregistrer</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection
@push('scripts')
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<script>
$(document).ready(function(){
    let exerciceIndex = 1;
    
    // Ajouter un exercice
    $('#add-exercice').click(function(e) {
        e.preventDefault();
        const newRow = `
            <div class="row exercice-row mb-3">
                <div class="col-md-5">
                    <select class="form-select" name="exercices[${exerciceIndex}][id]" required>
                        <option value="">--Choix d'un exercice--</option>
                        @foreach($exercices as $ex)
                            <option value="{{ $ex->id }}">{{ $ex->annee }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-5">
                    <input type="number" step="0.01" class="form-control montant-exercice" 
                        name="exercices[${exerciceIndex}][montant]" placeholder="2.450.000.000" required>
                </div>
                <div class="col-md-2 pt-1">
                    <button type="button" class="btn btn-sm btn-red remove-exercice">
                        - Supprimer
                    </button>
                </div>
            </div>
        `;
        $('#exercices-container').append(newRow);
        exerciceIndex++;
        calculerTotalAlloue();
    });
    
    // Supprimer un exercice
    $(document).on('click', '.remove-exercice', function(e) {
        e.preventDefault();
        if ($('.exercice-row').length > 1) {
            $(this).closest('.exercice-row').remove();
            calculerTotalAlloue();
        } else {
            alert('Un marché doit avoir au moins un exercice.');
        }
    });
    
    // Calculer le total alloué
    function calculerTotalAlloue() {
        let total = 0;
        $('.montant-exercice').each(function() {
            const valeur = parseFloat($(this).val()) || 0;
            total += valeur;
        });
        
        // Formatage avec espaces pour les milliers (format français)
        $('#total-alloue').text(total.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ' ').replace('.', ','));
        
        // Calcul du montant global incluant les avenants
        const montantInitial = parseFloat($('#montant_global').val()) || 0;
        const montantAvenants = parseFloat($('input[name="avenants"]').val()) || 0;
        const montantGlobalAvecAvenants = montantInitial + montantAvenants;
        
        // Affichage du montant global avec avenants
        $('#montant-global-display').text(montantGlobalAvecAvenants.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ' ').replace('.', ','));
        
        // Vérification de la correspondance
        const difference = Math.abs(total - montantGlobalAvecAvenants);
        
        if (difference > 0.01) {
            $('#montant-error').removeClass('d-none');
            $('#montant-error').html('Le total alloué aux exercices (' + 
                total.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ' ').replace('.', ',') + 
                ' FCFA) ne correspond pas au montant global + avenants (' + 
                montantGlobalAvecAvenants.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ' ').replace('.', ',') + 
                ' FCFA)!');
            $('button[type="submit"]').prop('disabled', true);
        } else {
            $('#montant-error').addClass('d-none');
            $('button[type="submit"]').prop('disabled', false);
        }
    }
    
    // Event listeners pour le calcul automatique (avec délégation pour les éléments dynamiques)
    $(document).on('input', '.montant-exercice', calculerTotalAlloue);
    
    // Recalculer quand le montant initial change
    $('#montant_global').on('input', function() {
        calculerTotalAlloue();
    });
    
    // Recalculer quand le montant des avenants change
    $('input[name="avenants"]').on('input', function() {
        calculerTotalAlloue();
    });
    
    // Initialiser le calcul au chargement de la page
    calculerTotalAlloue();
    
    // Initialiser l'affichage du montant global si une valeur existe déjà (old)
    @if(old('cout_initial'))
        calculerTotalAlloue();
    @endif
});
</script>
@endpush