@extends('layouts.dashboard')

@section('title', 'Comptabilité')
@section('page-title', '')

@push('styles')
<style>
    .page-header {
        margin-bottom: 2rem;
    }
    
    .page-title {
        font-size: 1.75rem;
        font-weight: 600;
        color: #1f2937;
        margin-bottom: 0.5rem;
    }
    
    .page-subtitle {
        color: #6b7280;
        font-size: 1rem;
    }
    
    .main-card {
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        padding: 1.5rem;
        transition: all 0.2s ease;
        margin-bottom: 1.5rem;
    }
    
    .section-title {
        font-size: 1.25rem;
        font-weight: 600;
        color: #1f2937;
        margin-bottom: 1.5rem;
    }
    
    /* Styles pour les onglets */
    .tabs-container {
        border-bottom: 2px solid #e5e7eb;
        margin-bottom: 2rem;
    }
    
    .tabs-list {
        display: flex;
        gap: 0;
        list-style: none;
        padding: 0;
        margin: 0;
    }
    
    .tab-item {
        padding: 0.75rem 1.5rem;
        cursor: pointer;
        border-bottom: 3px solid transparent;
        color: #6b7280;
        font-weight: 500;
        transition: all 0.2s ease;
        background: transparent;
        border-top: none;
        border-left: none;
        border-right: none;
    }
    
    .tab-item:hover {
        color: #6fb87d;
        background: rgba(111, 184, 125, 0.05);
    }
    
    .tab-item.active {
        color: #6fb87d;
        border-bottom-color: #6fb87d;
        font-weight: 600;
    }
    
    .tab-content {
        display: none;
    }
    
    .tab-content.active {
        display: block;
    }
    
    /* Graphique */
    .chart-container {
        position: relative;
        height: 400px;
        margin-bottom: 2rem;
        background: white;
        padding: 1.5rem;
        border-radius: 8px;
        border: 1px solid #e5e7eb;
    }
    
    /* Form styles */
    .form-group {
        margin-bottom: 1.5rem;
    }
    
    .form-label {
        display: block;
        font-size: 0.875rem;
        font-weight: 600;
        color: #1f2937;
        margin-bottom: 0.5rem;
    }
    
    .form-control {
        width: 100%;
        padding: 0.75rem 1rem;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        font-size: 0.875rem;
        background: white;
        transition: all 0.2s ease;
    }
    
    .form-control:focus {
        outline: none;
        border-color: #6fb87d;
        box-shadow: 0 0 0 0.2rem rgba(111, 184, 125, 0.25);
    }
    
    .form-control:hover {
        border-color: #6fb87d;
    }
    
    /* Checkboxes assureurs */
    .assureurs-list {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        margin-top: 1rem;
    }
    
    .assureur-item {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 1rem;
        border-radius: 8px;
        transition: background 0.2s ease;
        cursor: pointer;
        border: 1px solid #e5e7eb;
    }
    
    .assureur-item:hover {
        background: #f8fafc;
        border-color: #6fb87d !important;
    }
    
    .assureur-checkbox {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        cursor: pointer !important;
        flex-shrink: 0;
        margin: 0 !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        border: 2px solid #cbd5e1 !important;
        border-radius: 6px !important;
        background-color: white !important;
        position: relative;
        transition: all 0.2s ease;
    }
    
    .assureur-checkbox:hover {
        border-color: #6fb87d !important;
        transform: scale(1.1);
    }
    
    .assureur-checkbox:checked {
        background-color: #6fb87d !important;
        border-color: #6fb87d !important;
    }
    
    .assureur-checkbox:checked::after {
        content: '✓';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        font-size: 18px;
        font-weight: bold;
        line-height: 1;
    }
    
    .assureur-label {
        flex: 1;
        cursor: pointer;
        font-size: 0.9375rem;
        color: #1f2937;
        margin: 0;
        font-weight: 500;
        user-select: none;
    }
    
    .btn-primary {
        background-color: #6fb87d;
        border-color: #6fb87d;
        color: white;
        padding: 0.75rem 1.5rem;
        border-radius: 8px;
        font-weight: 500;
        transition: all 0.2s ease;
        border: none;
        cursor: pointer;
    }
    
    .btn-primary:hover {
        background-color: #5da66d;
        border-color: #5da66d;
        color: white;
    }
    
    .btn-primary:focus {
        background-color: #5da66d;
        border-color: #5da66d;
        box-shadow: 0 0 0 0.2rem rgba(111, 184, 125, 0.25);
    }
    
    .alert {
        padding: 1rem;
        border-radius: 8px;
        margin-bottom: 1rem;
    }
    
    .alert-success {
        background-color: rgba(111, 184, 125, 0.1);
        border: 1px solid rgba(111, 184, 125, 0.3);
        color: #6fb87d;
    }
    
    .alert-error {
        background-color: rgba(239, 68, 68, 0.1);
        border: 1px solid rgba(239, 68, 68, 0.3);
        color: #ef4444;
    }
    
    /* Styles pour le tableau récapitulatif */
    .table {
        background: white;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        border: 1px solid #e5e7eb;
        width: 100%;
        border-collapse: collapse;
    }
    
    .table th {
        background: #f8fafc;
        border: none;
        border-bottom: 2px solid #e5e7eb;
        font-weight: 700;
        color: #1f2937;
        padding: 1.25rem 1rem;
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        text-align: left;
    }
    
    .table td {
        padding: 1.25rem 1rem;
        vertical-align: middle;
        border-bottom: 1px solid #f1f5f9;
        background: white;
    }
    
    .table tbody tr:hover {
        background: linear-gradient(135deg, #e8f5ea 0%, #d4f0dd 100%);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(111, 184, 125, 0.1);
    }
    
    .action-buttons {
        display: flex;
        gap: 0.75rem;
        justify-content: center;
        align-items: center;
    }
    
    .action-btn {
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
        text-decoration: none;
        cursor: pointer;
        background: transparent;
        border: none;
        padding: 0;
    }
    
    .action-btn:hover {
        transform: scale(1.1);
    }
    
    .action-btn svg {
        width: 18px;
        height: 18px;
    }
    
    .action-btn-delete {
        color: #ef4444;
    }
    
    .action-btn-delete:hover {
        color: #dc2626;
    }
    
    .confirm-modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 99999999;
    }
    
    .confirm-modal-content {
        background: white;
        padding: 2rem;
        border-radius: 8px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        max-width: 400px;
        width: 90%;
        text-align: center;
    }
    
    .confirm-modal h3 {
        margin-bottom: 1rem;
        color: #333;
        font-size: 1.25rem;
    }
    
    .confirm-modal p {
        margin-bottom: 2rem;
        color: #666;
        line-height: 1.5;
    }
    
    .confirm-modal-buttons {
        display: flex;
        gap: 1rem;
        justify-content: center;
    }
    
    .confirm-modal-btn {
        padding: 0.75rem 1.5rem;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-weight: 500;
        transition: all 0.2s ease;
    }
    
    .confirm-modal-btn-cancel {
        background-color: #6c757d;
        color: white;
    }
    
    .confirm-modal-btn-cancel:hover {
        background-color: #5a6268;
    }
    
    .confirm-modal-btn-confirm {
        background-color: #dc3545;
        color: white;
    }
    
    .confirm-modal-btn-confirm:hover {
        background-color: #c82333;
    }
    
    #confirmURSSAFBtn {
        background-color: #6fb87d !important;
        color: white !important;
    }
    
    #confirmURSSAFBtn:hover {
        background-color: #5da66d !important;
    }
    
    .badge-revenu {
        background: linear-gradient(135deg, #6fb87d 0%, #5da66d 100%);
        color: white;
        padding: 0.375rem 0.75rem;
        border-radius: 6px;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
    
    .badge-depense {
        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
        color: white;
        padding: 0.375rem 0.75rem;
        border-radius: 6px;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
</style>
@endpush

@section('content')
<div class="container-fluid px-4 py-4" style="padding-left: 1.5rem; padding-right: 1.5rem; padding-top: 1.5rem; padding-bottom: 1.5rem;">
    <!-- En-tête de la page -->
    <div class="row mb-4">
        <div class="col-12">
            <h1 class="mb-2" style="color: #6fb87d; font-size: 2rem; font-weight: 600;">Comptabilité</h1>
            <p class="text-muted" style="font-size: 1.1rem;">Suivez votre chiffre d'affaires et vos dépenses</p>
        </div>
    </div>

    <!-- Graphique principal -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="main-card">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h2 class="section-title mb-0">Évolution mensuelle du CA et des Dépenses</h2>
                    <div class="d-flex align-items-center gap-3">
                        <button class="btn btn-sm" id="prevYearBtn" style="background: #f8fafc; border: 1px solid #e5e7eb; color: #1f2937; padding: 0.5rem 1rem; border-radius: 6px; cursor: pointer;">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <polyline points="15 18 9 12 15 6"></polyline>
                            </svg>
                        </button>
                        <span id="currentYearDisplay" style="font-weight: 600; color: #1f2937; min-width: 80px; text-align: center;">2025</span>
                        <button class="btn btn-sm" id="nextYearBtn" style="background: #f8fafc; border: 1px solid #e5e7eb; color: #1f2937; padding: 0.5rem 1rem; border-radius: 6px; cursor: pointer;">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <polyline points="9 18 15 12 9 6"></polyline>
                            </svg>
                        </button>
                    </div>
                </div>
                <div class="chart-container">
                    <canvas id="comptabiliteChart"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Zone de saisie -->
    <div class="row">
        <div class="col-12">
            <div class="main-card">
                <!-- Onglets -->
                <div class="tabs-container">
                    <ul class="tabs-list">
                        <li class="tab-item active" data-tab="revenu">
                            Ajouter un revenu (CA)
                        </li>
                        <li class="tab-item" data-tab="depense">
                            Ajouter une dépense
                        </li>
                        <li class="tab-item" data-tab="recapitulatif">
                            Récapitulatif
                        </li>
                        <li class="tab-item" data-tab="trimestriels">
                            Revenus trimestriels
                        </li>
                        <li class="tab-item" data-tab="recurrentes">
                            Dépenses récurrentes
                        </li>
                    </ul>
                </div>
                
                <!-- Contenu onglet Revenu -->
                <div class="tab-content active" id="revenu-tab">
                    <form id="revenuForm">
                        @csrf
                        <div class="form-group">
                            <label class="form-label" for="revenuMontant">Montant (€)</label>
                            <input type="number" step="0.01" class="form-control" id="revenuMontant" name="montant" required placeholder="0.00">
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label" for="revenuDate">Date / Mois</label>
                            <input type="month" class="form-control" id="revenuDate" name="date_revenu" required>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">Assureurs</label>
                            <div class="assureurs-list">
                                <div class="assureur-item">
                                    <input type="checkbox" name="assureurs[]" value="Mutuelle des motards" id="assureur_mutuelle" class="assureur-checkbox">
                                    <label for="assureur_mutuelle" class="assureur-label">Mutuelle des motards</label>
                                </div>
                                <div class="assureur-item">
                                    <input type="checkbox" name="assureurs[]" value="April moto" id="assureur_april" class="assureur-checkbox">
                                    <label for="assureur_april" class="assureur-label">April moto</label>
                                </div>
                                <div class="assureur-item">
                                    <input type="checkbox" name="assureurs[]" value="Solly Azar" id="assureur_solly" class="assureur-checkbox">
                                    <label for="assureur_solly" class="assureur-label">Solly Azar</label>
                                </div>
                                <div class="assureur-item">
                                    <input type="checkbox" name="assureurs[]" value="Xenassur" id="assureur_xenassur" class="assureur-checkbox">
                                    <label for="assureur_xenassur" class="assureur-label">Xenassur</label>
                                </div>
                                <div class="assureur-item">
                                    <input type="checkbox" name="assureurs[]" value="Autre" id="assureur_autre" class="assureur-checkbox">
                                    <label for="assureur_autre" class="assureur-label">Autre</label>
                                </div>
                            </div>
                        </div>
                        
                        <div id="revenuAlert"></div>
                        
                        <button type="submit" class="btn btn-primary">
                            Ajouter le revenu
                        </button>
                    </form>
                </div>
                
                <!-- Contenu onglet Dépense -->
                <div class="tab-content" id="depense-tab">
                    <form id="depenseForm">
                        @csrf
                        <div class="form-group">
                            <label class="form-label" for="depenseMontant">Montant (€)</label>
                            <input type="number" step="0.01" class="form-control" id="depenseMontant" name="montant" required placeholder="0.00">
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label" for="depenseCategorie">Catégorie de la dépense</label>
                            <input type="text" class="form-control" id="depenseCategorie" name="categorie" required placeholder="Ex: Carburant, Logiciels, etc.">
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label" for="depenseDescription">Description (optionnelle)</label>
                            <textarea class="form-control" id="depenseDescription" name="description" rows="3" placeholder="Description détaillée de la dépense"></textarea>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label" for="depenseDate">Date / Mois</label>
                            <input type="month" class="form-control" id="depenseDate" name="date_depense" required>
                        </div>
                        
                        <div id="depenseAlert"></div>
                        
                        <div style="display: flex; gap: 1rem; align-items: center;">
                            <button type="submit" class="btn btn-primary">
                                Ajouter la dépense
                            </button>
                        </div>
                    </form>
                </div>
                
                <!-- Contenu onglet Récapitulatif -->
                <div class="tab-content" id="recapitulatif-tab">
                    <!-- Filtres -->
                    <div class="d-flex gap-3 mb-4" style="flex-wrap: wrap; align-items: end;">
                        <div style="flex: 1; min-width: 200px;">
                            <label class="form-label" for="filterDateFrom">Date de début</label>
                            <input type="month" class="form-control" id="filterDateFrom" style="width: 100%;">
                        </div>
                        <div style="flex: 1; min-width: 200px;">
                            <label class="form-label" for="filterDateTo">Date de fin</label>
                            <input type="month" class="form-control" id="filterDateTo" style="width: 100%;">
                        </div>
                        <div style="flex: 1; min-width: 200px;">
                            <label class="form-label" for="filterType">Type</label>
                            <select class="form-control" id="filterType" style="width: 100%;">
                                <option value="all">Tous</option>
                                <option value="revenu">Revenus uniquement</option>
                                <option value="depense">Dépenses uniquement</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="table-responsive">
                        <table class="table" id="recapitulatifTable">
                            <thead>
                                <tr>
                                    <th>Type</th>
                                    <th>Montant</th>
                                    <th>Date</th>
                                    <th>Détails</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody id="recapitulatifTableBody">
                                <!-- Les données seront chargées via JavaScript -->
                            </tbody>
                        </table>
                    </div>
                </div>
                
                <!-- Contenu onglet Dépenses récurrentes -->
                <div class="tab-content" id="recurrentes-tab">
                    <div class="mb-4">
                        <h3 class="section-title mb-3">Gérer les dépenses récurrentes</h3>
                        
                        <!-- Formulaire pour créer une récurrence -->
                        <div class="main-card mb-4">
                            <h4 style="font-size: 1.1rem; font-weight: 600; color: #1f2937; margin-bottom: 1rem;">Créer une dépense récurrente</h4>
                            <form id="recurrenteForm">
                                @csrf
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-label" for="recurrenteRecurrence">Récurrence</label>
                                            <select class="form-control" id="recurrenteRecurrence" name="recurrence" required>
                                                <option value="">Sélectionner une récurrence</option>
                                                <option value="mensuel">Mensuel</option>
                                                <option value="trimestriel">Trimestriel</option>
                                                <option value="semestriel">Semestriel</option>
                                                <option value="annuel">Annuel</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-label" for="recurrenteMontant">Montant (€)</label>
                                            <input type="number" step="0.01" class="form-control" id="recurrenteMontant" name="montant" required placeholder="0.00">
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-label" for="recurrenteCategorie">Catégorie</label>
                                            <input type="text" class="form-control" id="recurrenteCategorie" name="categorie" required placeholder="Ex: Carburant, Logiciels, etc.">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-label" for="recurrenteDescription">Description (optionnelle)</label>
                                            <input type="text" class="form-control" id="recurrenteDescription" name="description" placeholder="Description optionnelle">
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-label" for="recurrenteDateDebut">Date de début</label>
                                            <input type="date" class="form-control" id="recurrenteDateDebut" name="date_debut" required>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-label" for="recurrenteJour">Date de récurrence (jour du mois)</label>
                                            <input type="number" min="1" max="31" class="form-control" id="recurrenteJour" name="jour" required value="5" placeholder="Ex: 5">
                                            <small class="form-text text-muted">Jour du mois où la dépense sera générée (1-31)</small>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="form-group">
                                    <button type="submit" class="btn btn-primary">Créer la dépense récurrente</button>
                                </div>
                            </form>
                        </div>
                        
                        <!-- Liste des récurrences -->
                        <div class="main-card">
                            <h4 style="font-size: 1.1rem; font-weight: 600; color: #1f2937; margin-bottom: 1rem;">Dépenses récurrentes actives</h4>
                            <div class="table-responsive">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th>Récurrence</th>
                                            <th>Montant</th>
                                            <th>Catégorie</th>
                                            <th>Description</th>
                                            <th>Date de début</th>
                                            <th>Jour du mois</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody id="recurrentesTableBody">
                                        <!-- Les données seront chargées via JavaScript -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Contenu onglet Revenus trimestriels -->
                <div class="tab-content" id="trimestriels-tab">
                    <div class="mb-4">
                        <h3 class="section-title mb-3">Revenus cumulés par trimestre</h3>
                        
                        <!-- Filtre année -->
                        <div class="mb-3" style="display: flex; align-items: end; gap: 1rem;">
                            <div style="flex: 1; max-width: 250px;">
                                <label class="form-label" for="filterYearTrimestriels">Année</label>
                                <select class="form-control" id="filterYearTrimestriels" style="width: 100%;">
                                    <!-- Les années seront chargées via JavaScript -->
                                </select>
                            </div>
                        </div>
                        
                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>Année</th>
                                        <th>Trimestre</th>
                                        <th>Période</th>
                                        <th>Revenu cumulé</th>
                                        <th>Coût URSSAF (21.4%)</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody id="trimestrielsTableBody">
                                    <!-- Les données seront chargées via JavaScript -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal de confirmation de suppression -->
<div id="confirmDeleteModal" class="confirm-modal" style="display: none;">
    <div class="confirm-modal-content">
        <h3>Confirmer la suppression</h3>
        <p id="confirmDeleteMessage">Êtes-vous sûr de vouloir supprimer cet élément ?</p>
        <div class="confirm-modal-buttons">
            <button class="confirm-modal-btn confirm-modal-btn-cancel" onclick="closeDeleteModal()">Annuler</button>
            <button class="confirm-modal-btn confirm-modal-btn-confirm" id="confirmDeleteBtn">Supprimer</button>
        </div>
    </div>
</div>

<!-- Modal de confirmation URSSAF -->
<div id="confirmURSSAFModal" class="confirm-modal" style="display: none;">
    <div class="confirm-modal-content">
        <h3>Ajouter la dépense URSSAF</h3>
        <p id="confirmURSSAFMessage">Voulez-vous ajouter cette dépense URSSAF dans les dépenses ?</p>
        <div class="confirm-modal-buttons">
            <button class="confirm-modal-btn confirm-modal-btn-cancel" onclick="closeURSSAFModal()">Annuler</button>
            <button class="confirm-modal-btn confirm-modal-btn-confirm" id="confirmURSSAFBtn" style="background-color: #6fb87d; color: white;">Confirmer</button>
        </div>
    </div>
</div>

<!-- Modal de succès URSSAF -->
<div id="successURSSAFModal" class="confirm-modal" style="display: none;">
    <div class="confirm-modal-content">
        <h3 style="color: #6fb87d;">✓ Dépense ajoutée</h3>
        <p id="successURSSAFMessage">La dépense URSSAF a été ajoutée avec succès.</p>
        <div class="confirm-modal-buttons">
            <button class="confirm-modal-btn confirm-modal-btn-confirm" onclick="closeSuccessURSSAFModal()" style="background-color: #6fb87d; width: 100%;">Fermer</button>
        </div>
    </div>
</div>

<!-- Modal pour modifier une dépense récurrente -->
<div id="editRecurrenteModal" class="confirm-modal" style="display: none;">
    <div class="confirm-modal-content" style="max-width: 600px;">
        <h3>Modifier la dépense récurrente</h3>
        <form id="editRecurrenteForm" style="margin-top: 1.5rem;">
            @csrf
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label class="form-label" for="editRecurrenteRecurrence">Récurrence</label>
                        <select class="form-control" id="editRecurrenteRecurrence" name="recurrence" required>
                            <option value="">Sélectionner une récurrence</option>
                            <option value="mensuel">Mensuel</option>
                            <option value="trimestriel">Trimestriel</option>
                            <option value="semestriel">Semestriel</option>
                            <option value="annuel">Annuel</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label class="form-label" for="editRecurrenteMontant">Montant (€)</label>
                        <input type="number" step="0.01" class="form-control" id="editRecurrenteMontant" name="montant" required placeholder="0.00">
                    </div>
                </div>
            </div>
            
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label class="form-label" for="editRecurrenteCategorie">Catégorie</label>
                        <input type="text" class="form-control" id="editRecurrenteCategorie" name="categorie" required placeholder="Ex: Carburant, Logiciels, etc.">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label class="form-label" for="editRecurrenteDescription">Description (optionnelle)</label>
                        <input type="text" class="form-control" id="editRecurrenteDescription" name="description" placeholder="Description optionnelle">
                    </div>
                </div>
            </div>
            
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label class="form-label" for="editRecurrenteDateDebut">Date de début</label>
                        <input type="date" class="form-control" id="editRecurrenteDateDebut" name="date_debut" required>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label class="form-label" for="editRecurrenteJour">Date de récurrence (jour du mois)</label>
                        <input type="number" min="1" max="31" class="form-control" id="editRecurrenteJour" name="jour" required value="5" placeholder="Ex: 5">
                        <small class="form-text text-muted">Jour du mois où la dépense sera générée (1-31)</small>
                    </div>
                </div>
            </div>
            
            <div id="editRecurrenteAlert"></div>
            
            <div class="confirm-modal-buttons" style="margin-top: 1.5rem;">
                <button type="button" class="confirm-modal-btn confirm-modal-btn-cancel" onclick="closeEditRecurrenteModal()">Annuler</button>
                <button type="submit" class="confirm-modal-btn confirm-modal-btn-confirm" style="background-color: #6fb87d; color: white;">Modifier</button>
            </div>
        </form>
    </div>
</div>

@endsection

@push('scripts')
<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>

<script>
let comptabiliteChart = null;
let currentYear = new Date().getFullYear();

// Initialiser le mois/année actuel par défaut
document.addEventListener('DOMContentLoaded', function() {
    const today = new Date();
    const currentMonth = today.getFullYear() + '-' + String(today.getMonth() + 1).padStart(2, '0');
    document.getElementById('revenuDate').value = currentMonth;
    document.getElementById('depenseDate').value = currentMonth;
    
    // Initialiser l'affichage de l'année
    updateYearDisplay();
    
    // Gestion des boutons de navigation d'année
    document.getElementById('prevYearBtn').addEventListener('click', function() {
        currentYear--;
        updateYearDisplay();
        loadChartData();
    });
    
    document.getElementById('nextYearBtn').addEventListener('click', function() {
        const maxYear = new Date().getFullYear();
        if (currentYear < maxYear) {
            currentYear++;
            updateYearDisplay();
            loadChartData();
        }
    });
    
    // Charger les données du graphique
    loadChartData();
    
    // Gestion des onglets
    document.querySelectorAll('.tab-item').forEach(function(tab) {
        tab.addEventListener('click', function() {
            const tabName = this.getAttribute('data-tab');
            
            // Désactiver tous les onglets
            document.querySelectorAll('.tab-item').forEach(function(t) {
                t.classList.remove('active');
            });
            document.querySelectorAll('.tab-content').forEach(function(c) {
                c.classList.remove('active');
            });
            
            // Activer l'onglet cliqué
            this.classList.add('active');
            document.getElementById(tabName + '-tab').classList.add('active');
            
            // Charger les données du récapitulatif si on ouvre cet onglet
            if (tabName === 'recapitulatif') {
                setTimeout(function() {
                    loadRecapitulatif();
                }, 100);
            }
            
            // Charger les données trimestrielles si on ouvre cet onglet
            if (tabName === 'trimestriels') {
                setTimeout(function() {
                    loadTrimestriels();
                }, 100);
            }
            
            // Charger les dépenses récurrentes si on ouvre cet onglet
            if (tabName === 'recurrentes') {
                setTimeout(function() {
                    loadRecurrentes();
                }, 100);
            }
        });
    });
    
    // Gestion du filtre année pour les trimestriels
    const filterYearTrimestriels = document.getElementById('filterYearTrimestriels');
    if (filterYearTrimestriels) {
        filterYearTrimestriels.addEventListener('change', function() {
            loadTrimestriels();
        });
    }
    
    // Initialiser les filtres avec les valeurs par défaut
    const todayForFilters = new Date();
    const currentYearMonth = todayForFilters.getFullYear() + '-' + String(todayForFilters.getMonth() + 1).padStart(2, '0');
    const firstYearMonth = todayForFilters.getFullYear() + '-01';
    
    const filterDateFromEl = document.getElementById('filterDateFrom');
    const filterDateToEl = document.getElementById('filterDateTo');
    
    if (filterDateFromEl) {
        filterDateFromEl.value = firstYearMonth;
    }
    if (filterDateToEl) {
        filterDateToEl.value = currentYearMonth;
    }
    
    // Appliquer les filtres automatiquement quand on change les valeurs
    if (filterDateFromEl) {
        filterDateFromEl.addEventListener('change', function() {
            applyFilters();
        });
    }
    
    if (filterDateToEl) {
        filterDateToEl.addEventListener('change', function() {
            applyFilters();
        });
    }
    
    const filterTypeEl = document.getElementById('filterType');
    if (filterTypeEl) {
        filterTypeEl.addEventListener('change', function() {
            applyFilters();
        });
    }
    
    // Gestion du formulaire revenu
    document.getElementById('revenuForm').addEventListener('submit', function(e) {
        e.preventDefault();
        addRevenu();
    });
    
    // Gestion du formulaire dépense
    document.getElementById('depenseForm').addEventListener('submit', function(e) {
        e.preventDefault();
        addDepense();
    });
});

// Mettre à jour l'affichage de l'année
function updateYearDisplay() {
    document.getElementById('currentYearDisplay').textContent = currentYear;
    
    // Désactiver le bouton suivant si on est à l'année actuelle
    const nextBtn = document.getElementById('nextYearBtn');
    const maxYear = new Date().getFullYear();
    if (currentYear >= maxYear) {
        nextBtn.style.opacity = '0.5';
        nextBtn.style.cursor = 'not-allowed';
    } else {
        nextBtn.style.opacity = '1';
        nextBtn.style.cursor = 'pointer';
    }
}

// Charger les données pour le graphique
function loadChartData() {
    fetch('/api/comptabilite/data?year=' + currentYear, {
        method: 'GET',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Accept': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            renderChart(data.data);
        }
    })
    .catch(error => {
        console.error('Erreur lors du chargement des données:', error);
    });
}

// Rendre le graphique
function renderChart(data) {
    const ctx = document.getElementById('comptabiliteChart').getContext('2d');
    
    // Détruire le graphique existant s'il existe
    if (comptabiliteChart) {
        comptabiliteChart.destroy();
    }
    
    comptabiliteChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: data.labels,
            datasets: [
                {
                    label: 'Chiffre d\'Affaires mensuel',
                    data: data.ca_mensuel,
                    borderColor: '#6FB87D',
                    backgroundColor: 'rgba(111, 184, 125, 0.1)',
                    borderWidth: 3,
                    fill: true,
                    tension: 0.4,
                    pointRadius: 5,
                    pointHoverRadius: 7,
                    pointBackgroundColor: '#6FB87D',
                    pointBorderColor: '#fff',
                    pointBorderWidth: 2
                },
                {
                    label: 'Chiffre d\'Affaires cumulé',
                    data: data.ca_cumule,
                    borderColor: '#f97316',
                    backgroundColor: 'rgba(249, 115, 22, 0.1)',
                    borderWidth: 3,
                    fill: false,
                    tension: 0.4,
                    pointRadius: 5,
                    pointHoverRadius: 7,
                    pointBackgroundColor: '#f97316',
                    pointBorderColor: '#fff',
                    pointBorderWidth: 2
                },
                {
                    label: 'Chiffre d\'Affaires mensuel N-1',
                    data: data.ca_mensuel_n1 || [],
                    borderColor: '#a855f7',
                    backgroundColor: 'rgba(168, 85, 247, 0.1)',
                    borderWidth: 3,
                    fill: false,
                    tension: 0.4,
                    pointRadius: 5,
                    pointHoverRadius: 7,
                    pointBackgroundColor: '#a855f7',
                    pointBorderColor: '#fff',
                    pointBorderWidth: 2,
                    borderDash: [5, 5]
                },
                {
                    label: 'Dépenses mensuelles',
                    data: data.depenses_mensuelles,
                    borderColor: '#ef4444',
                    backgroundColor: 'rgba(239, 68, 68, 0.1)',
                    borderWidth: 3,
                    fill: true,
                    tension: 0.4,
                    pointRadius: 5,
                    pointHoverRadius: 7,
                    pointBackgroundColor: '#ef4444',
                    pointBorderColor: '#fff',
                    pointBorderWidth: 2
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: true,
                    position: 'top',
                    labels: {
                        usePointStyle: true,
                        padding: 20,
                        font: {
                            size: 14,
                            weight: '500'
                        }
                    }
                },
                tooltip: {
                    mode: 'point',
                    intersect: true,
                    backgroundColor: 'rgba(0, 0, 0, 0.8)',
                    padding: 12,
                    titleFont: {
                        size: 14,
                        weight: '600'
                    },
                    bodyFont: {
                        size: 13
                    },
                    callbacks: {
                        label: function(context) {
                            const label = context.dataset.label || '';
                            const value = parseFloat(context.parsed.y || 0).toFixed(2) + ' €';
                            return label + ': ' + value;
                        },
                        afterBody: function(context) {
                            // context est un tableau, prendre le premier élément (le point survolé)
                            const tooltipItem = Array.isArray(context) ? context[0] : context;
                            const datasetIndex = tooltipItem.datasetIndex;
                            const dataIndex = tooltipItem.dataIndex;
                            
                            if (datasetIndex === 0) {
                                // CA - afficher les totaux par assureur
                                const details = data.details_ca[dataIndex];
                                if (details && details.assureurs && Object.keys(details.assureurs).length > 0) {
                                    let html = '\n\nCA pour ' + data.labels[dataIndex] + ':\n';
                                    Object.keys(details.assureurs).forEach(function(assureur) {
                                        html += assureur + ': ' + parseFloat(details.assureurs[assureur] || 0).toFixed(2) + ' €\n';
                                    });
                                    return html;
                                }
                            } else if (datasetIndex === 3) {
                                // Dépenses - afficher les détails individuels triés de la plus grosse à la plus petite
                                const details = data.details_depenses[dataIndex];
                                if (details && details.depenses && details.depenses.length > 0) {
                                    let html = '\n\nDépenses pour ' + data.labels[dataIndex] + ':\n';
                                    html += '─────────────────────────\n';
                                    details.depenses.forEach(function(depense) {
                                        const description = depense.description ? ' - ' + depense.description : '';
                                        html += parseFloat(depense.montant).toFixed(2) + ' €';
                                        if (depense.categorie) {
                                            html += ' (' + depense.categorie + ')';
                                        }
                                        html += description + '\n';
                                    });
                                    html += '─────────────────────────\n';
                                    html += 'Total: ' + parseFloat(details.total || 0).toFixed(2) + ' €';
                                    return html;
                                } else if (details && details.categories && Object.keys(details.categories).length > 0) {
                                    // Fallback sur les catégories si pas de détails individuels
                                    let html = '\n\nDépenses pour ' + data.labels[dataIndex] + ':\n';
                                    Object.keys(details.categories).forEach(function(categorie) {
                                        html += categorie + ': ' + parseFloat(details.categories[categorie] || 0).toFixed(2) + ' €\n';
                                    });
                                    return html;
                                }
                            }
                            return '';
                        }
                    }
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        callback: function(value) {
                            return value.toFixed(0) + ' €';
                        },
                        font: {
                            size: 12
                        }
                    },
                    grid: {
                        color: 'rgba(0, 0, 0, 0.05)'
                    }
                },
                x: {
                    ticks: {
                        font: {
                            size: 12
                        }
                    },
                    grid: {
                        display: false
                    }
                }
            },
            interaction: {
                mode: 'nearest',
                axis: 'x',
                intersect: false
            }
        }
    });
}

// Ajouter un revenu
function addRevenu() {
    const form = document.getElementById('revenuForm');
    const formData = new FormData(form);
    
    // Vérifier qu'au moins un assureur est sélectionné
    const assureurs = form.querySelectorAll('input[name="assureurs[]"]:checked');
    if (assureurs.length === 0) {
        showAlert('revenuAlert', 'Veuillez sélectionner au moins un assureur', 'error');
        return;
    }
    
    const data = {
        montant: parseFloat(formData.get('montant')),
        date_revenu: formData.get('date_revenu'),
        assureurs: Array.from(assureurs).map(a => a.value)
    };
    
    fetch('/api/comptabilite/revenu', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Content-Type': 'application/json',
            'Accept': 'application/json'
        },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(result => {
        if (result.success) {
            showAlert('revenuAlert', 'Revenu ajouté avec succès', 'success');
            form.reset();
            // Réinitialiser le mois/année
            const todayRevenu = new Date();
            const currentMonth = todayRevenu.getFullYear() + '-' + String(todayRevenu.getMonth() + 1).padStart(2, '0');
            document.getElementById('revenuDate').value = currentMonth;
            // Recharger le graphique
            loadChartData();
        } else {
            showAlert('revenuAlert', result.message || 'Erreur lors de l\'ajout du revenu', 'error');
        }
    })
    .catch(error => {
        console.error('Erreur:', error);
        showAlert('revenuAlert', 'Erreur lors de l\'ajout du revenu', 'error');
    });
}

// Ajouter une dépense
function addDepense() {
    const form = document.getElementById('depenseForm');
    const formData = new FormData(form);
    
    const data = {
        montant: parseFloat(formData.get('montant')),
        categorie: formData.get('categorie'),
        description: formData.get('description') || null,
        date_depense: formData.get('date_depense')
    };
    
    fetch('/api/comptabilite/depense', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Content-Type': 'application/json',
            'Accept': 'application/json'
        },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(result => {
        if (result.success) {
            showAlert('depenseAlert', 'Dépense ajoutée avec succès', 'success');
            form.reset();
            // Réinitialiser le mois/année
            const todayDepense = new Date();
            const currentMonth = todayDepense.getFullYear() + '-' + String(todayDepense.getMonth() + 1).padStart(2, '0');
            document.getElementById('depenseDate').value = currentMonth;
            // Recharger le graphique
            loadChartData();
        } else {
            showAlert('depenseAlert', result.message || 'Erreur lors de l\'ajout de la dépense', 'error');
        }
    })
    .catch(error => {
        console.error('Erreur:', error);
        showAlert('depenseAlert', 'Erreur lors de l\'ajout de la dépense', 'error');
    });
}

// Fonctions pour gérer les dépenses récurrentes
let editingRecurrenteId = null;

// Initialiser la date de début à aujourd'hui
document.addEventListener('DOMContentLoaded', function() {
    const dateDebutInput = document.getElementById('recurrenteDateDebut');
    if (dateDebutInput) {
        const today = new Date();
        dateDebutInput.value = today.toISOString().split('T')[0];
    }
    
    // Gestion du formulaire de dépense récurrente (création)
    const recurrenteForm = document.getElementById('recurrenteForm');
    if (recurrenteForm) {
        recurrenteForm.addEventListener('submit', function(e) {
            e.preventDefault();
            addDepenseRecurrente();
        });
    }
    
    // Gestion du formulaire de modification de dépense récurrente
    const editRecurrenteForm = document.getElementById('editRecurrenteForm');
    if (editRecurrenteForm) {
        editRecurrenteForm.addEventListener('submit', function(e) {
            e.preventDefault();
            updateDepenseRecurrente();
        });
    }
    
    // Fermer la modal de modification en cliquant en dehors
    const editRecurrenteModal = document.getElementById('editRecurrenteModal');
    if (editRecurrenteModal) {
        editRecurrenteModal.addEventListener('click', function(e) {
            if (e.target === this) {
                closeEditRecurrenteModal();
            }
        });
    }
});

// Charger la liste des dépenses récurrentes
function loadRecurrentes() {
    const tbody = document.getElementById('recurrentesTableBody');
    if (tbody) {
        tbody.innerHTML = '<tr><td colspan="6" style="text-align: center; padding: 2rem; color: #6b7280;">Chargement...</td></tr>';
    }
    
    fetch('/api/comptabilite/depenses-recurrentes', {
        method: 'GET',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Accept': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            renderRecurrentes(data.data || []);
        } else {
            if (tbody) {
                tbody.innerHTML = '<tr><td colspan="6" style="text-align: center; padding: 2rem; color: #ef4444;">Erreur lors du chargement</td></tr>';
            }
        }
    })
    .catch(error => {
        console.error('Erreur:', error);
        if (tbody) {
            tbody.innerHTML = '<tr><td colspan="6" style="text-align: center; padding: 2rem; color: #ef4444;">Erreur lors du chargement</td></tr>';
        }
    });
}

// Afficher la liste des récurrences
function renderRecurrentes(recurrentes) {
    const tbody = document.getElementById('recurrentesTableBody');
    if (!tbody) return;
    
    tbody.innerHTML = '';
    
    if (!recurrentes || recurrentes.length === 0) {
        tbody.innerHTML = '<tr><td colspan="7" style="text-align: center; padding: 2rem; color: #6b7280;">Aucune dépense récurrente</td></tr>';
        return;
    }
    
    const recurrenceLabels = {
        'mensuel': 'Mensuel',
        'trimestriel': 'Trimestriel',
        'semestriel': 'Semestriel',
        'annuel': 'Annuel'
    };
    
    recurrentes.forEach(recurrente => {
        const row = document.createElement('tr');
        const montant = parseFloat(recurrente.montant || 0).toFixed(2) + ' €';
        const dateDebut = new Date(recurrente.date_debut).toLocaleDateString('fr-FR');
        
        row.innerHTML = `
            <td>${recurrenceLabels[recurrente.recurrence] || recurrente.recurrence}</td>
            <td style="font-weight: 600; color: #1f2937;">${montant}</td>
            <td>${recurrente.categorie || '-'}</td>
            <td>${recurrente.description || '-'}</td>
            <td>${dateDebut}</td>
            <td style="text-align: center; font-weight: 600;">${recurrente.jour || 5}</td>
            <td style="text-align: center;">
                <div class="action-buttons">
                    <button type="button" class="action-btn" onclick="editRecurrente(${recurrente.id})" title="Modifier" style="color: #6fb87d;">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
                            <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
                        </svg>
                    </button>
                    <button type="button" class="action-btn action-btn-delete" onclick="confirmDeleteRecurrente(${recurrente.id}, '${recurrenceLabels[recurrente.recurrence]} - ${montant}')" title="Supprimer">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <polyline points="3,6 5,6 21,6"></polyline>
                            <path d="M19,6v14a2 2 0 0,1 -2,2H7a2 2 0 0,1 -2,-2V6m3,0V4a2 2 0 0,1 2,-2h4a2 2 0 0,1 2,2v2"></path>
                            <line x1="10" y1="11" x2="10" y2="17"></line>
                            <line x1="14" y1="11" x2="14" y2="17"></line>
                        </svg>
                    </button>
                </div>
            </td>
        `;
        
        tbody.appendChild(row);
    });
}

// Ajouter une dépense récurrente
function addDepenseRecurrente() {
    const form = document.getElementById('recurrenteForm');
    const formData = new FormData(form);
    
    const data = {
        montant: parseFloat(formData.get('montant')),
        categorie: formData.get('categorie'),
        description: formData.get('description') || null,
        recurrence: formData.get('recurrence'),
        jour: parseInt(formData.get('jour')) || 5,
        date_debut: formData.get('date_debut')
    };
    
    fetch('/api/comptabilite/depense-recurrente', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Content-Type': 'application/json',
            'Accept': 'application/json'
        },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(result => {
        if (result.success) {
            form.reset();
            // Réinitialiser la date de début à aujourd'hui
            const dateDebutInput = document.getElementById('recurrenteDateDebut');
            if (dateDebutInput) {
                const today = new Date();
                dateDebutInput.value = today.toISOString().split('T')[0];
            }
            loadRecurrentes();
            loadChartData();
        } else {
            alert('Erreur : ' + (result.message || 'Erreur lors de la création'));
        }
    })
    .catch(error => {
        console.error('Erreur:', error);
        alert('Erreur lors de la création de la dépense récurrente');
    });
}

// Modifier une dépense récurrente
function editRecurrente(id) {
    fetch(`/api/comptabilite/depense-recurrente/${id}`, {
        method: 'GET',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Accept': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success && data.data) {
            const recurrente = data.data;
            editingRecurrenteId = id;
            
            // Remplir le formulaire de la modal
            document.getElementById('editRecurrenteRecurrence').value = recurrente.recurrence;
            document.getElementById('editRecurrenteMontant').value = recurrente.montant;
            document.getElementById('editRecurrenteCategorie').value = recurrente.categorie || '';
            document.getElementById('editRecurrenteDescription').value = recurrente.description || '';
            document.getElementById('editRecurrenteDateDebut').value = recurrente.date_debut || '';
            document.getElementById('editRecurrenteJour').value = recurrente.jour || 5;
            
            // Vider l'alerte
            document.getElementById('editRecurrenteAlert').innerHTML = '';
            
            // Afficher la modal
            document.getElementById('editRecurrenteModal').style.display = 'flex';
        } else {
            alert('Erreur lors du chargement de la dépense récurrente');
        }
    })
    .catch(error => {
        console.error('Erreur:', error);
        alert('Erreur lors du chargement de la dépense récurrente');
    });
}

// Fermer la modal de modification
function closeEditRecurrenteModal() {
    document.getElementById('editRecurrenteModal').style.display = 'none';
    document.getElementById('editRecurrenteAlert').innerHTML = '';
    editingRecurrenteId = null;
    document.getElementById('editRecurrenteForm').reset();
}

// Mettre à jour une dépense récurrente
function updateDepenseRecurrente() {
    const form = document.getElementById('editRecurrenteForm');
    const formData = new FormData(form);
    
    const data = {
        montant: parseFloat(formData.get('montant')),
        categorie: formData.get('categorie'),
        description: formData.get('description') || null,
        recurrence: formData.get('recurrence'),
        jour: parseInt(formData.get('jour')) || 5,
        date_debut: formData.get('date_debut')
    };
    
    fetch(`/api/comptabilite/depense-recurrente/${editingRecurrenteId}`, {
        method: 'PUT',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Content-Type': 'application/json',
            'Accept': 'application/json'
        },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(result => {
        if (result.success) {
            closeEditRecurrenteModal();
            loadRecurrentes();
            loadChartData();
        } else {
            const alertDiv = document.getElementById('editRecurrenteAlert');
            alertDiv.innerHTML = '<div class="alert alert-danger">Erreur : ' + (result.message || 'Erreur lors de la modification') + '</div>';
        }
    })
    .catch(error => {
        console.error('Erreur:', error);
        const alertDiv = document.getElementById('editRecurrenteAlert');
        alertDiv.innerHTML = '<div class="alert alert-danger">Erreur lors de la modification de la dépense récurrente</div>';
    });
}

// Confirmer la suppression d'une récurrence
function confirmDeleteRecurrente(id, label) {
    deleteType = 'recurrente';
    deleteId = id;
    document.getElementById('confirmDeleteMessage').textContent = `Êtes-vous sûr de vouloir supprimer la dépense récurrente "${label}" ? Les dépenses passées seront conservées, seules les dépenses futures seront supprimées.`;
    document.getElementById('confirmDeleteModal').style.display = 'flex';
}

// Afficher une alerte
function showAlert(containerId, message, type) {
    const container = document.getElementById(containerId);
    container.innerHTML = '<div class="alert alert-' + type + '">' + message + '</div>';
    
    // Supprimer l'alerte après 5 secondes
    setTimeout(function() {
        container.innerHTML = '';
    }, 5000);
}

// Variables pour les filtres
let allRecapitulatifData = [];
let filteredRecapitulatifData = [];

// Fonction pour aller à l'onglet Dépenses récurrentes
function goToRecurrentesTab() {
    // Désactiver tous les onglets
    document.querySelectorAll('.tab-item').forEach(function(t) {
        t.classList.remove('active');
    });
    document.querySelectorAll('.tab-content').forEach(function(c) {
        c.classList.remove('active');
    });
    
    // Activer l'onglet Dépenses récurrentes
    const recurrentesTab = document.querySelector('.tab-item[data-tab="recurrentes"]');
    if (recurrentesTab) {
        recurrentesTab.classList.add('active');
        document.getElementById('recurrentes-tab').classList.add('active');
        loadRecurrentes();
    }
}

// Charger le récapitulatif
function loadRecapitulatif() {
    // Vider le tableau immédiatement pour un feedback visuel
    const tbody = document.getElementById('recapitulatifTableBody');
    if (tbody) {
        tbody.innerHTML = '<tr><td colspan="5" style="text-align: center; padding: 2rem; color: #6b7280;">Chargement...</td></tr>';
    }
    
    fetch('/api/comptabilite/recapitulatif', {
        method: 'GET',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Accept': 'application/json',
            'Cache-Control': 'no-cache'
        }
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('Erreur HTTP: ' + response.status);
        }
        return response.json();
    })
    .then(data => {
        if (data.success) {
            allRecapitulatifData = data.data || [];
            applyFilters();
        } else {
            console.error('Erreur:', data.message);
            if (tbody) {
                tbody.innerHTML = '<tr><td colspan="5" style="text-align: center; padding: 2rem; color: #ef4444;">Erreur lors du chargement</td></tr>';
            }
        }
    })
    .catch(error => {
        console.error('Erreur lors du chargement du récapitulatif:', error);
        if (tbody) {
            tbody.innerHTML = '<tr><td colspan="5" style="text-align: center; padding: 2rem; color: #ef4444;">Erreur lors du chargement</td></tr>';
        }
    });
}

// Appliquer les filtres
function applyFilters() {
    const dateFrom = document.getElementById('filterDateFrom')?.value || '';
    const dateTo = document.getElementById('filterDateTo')?.value || '';
    const filterType = document.getElementById('filterType')?.value || 'all';
    
    // S'assurer que allRecapitulatifData est un tableau
    if (!Array.isArray(allRecapitulatifData)) {
        allRecapitulatifData = [];
    }
    
    filteredRecapitulatifData = allRecapitulatifData.filter(function(item) {
        // Filtre par type
        if (filterType !== 'all' && item.type !== filterType) {
            return false;
        }
        
        // Filtre par date
        if (dateFrom || dateTo) {
            const itemDate = new Date(item.date);
            const itemYearMonth = itemDate.getFullYear() + '-' + String(itemDate.getMonth() + 1).padStart(2, '0');
            
            if (dateFrom && itemYearMonth < dateFrom) {
                return false;
            }
            
            if (dateTo && itemYearMonth > dateTo) {
                return false;
            }
        }
        
        return true;
    });
    
    renderRecapitulatif(filteredRecapitulatifData);
}

// Afficher le récapitulatif
function renderRecapitulatif(items) {
    const tbody = document.getElementById('recapitulatifTableBody');
    tbody.innerHTML = '';
    
    if (items.length === 0) {
        tbody.innerHTML = '<tr><td colspan="5" style="text-align: center; padding: 2rem; color: #6b7280;">Aucun élément trouvé</td></tr>';
        return;
    }
    
    items.forEach(item => {
        const row = document.createElement('tr');
        
        const typeBadge = item.type === 'revenu' 
            ? '<span class="badge-revenu">Revenu</span>' 
            : '<span class="badge-depense">Dépense</span>';
        
        const montant = parseFloat(item.montant).toFixed(2) + ' €';
        const date = new Date(item.date).toLocaleDateString('fr-FR', { 
            year: 'numeric', 
            month: 'long',
            day: 'numeric'
        });
        
        let details = '';
        if (item.type === 'revenu') {
            const assureurs = Array.isArray(item.assureurs) ? item.assureurs : [];
            details = assureurs.length > 0 
                ? assureurs.join(', ') 
                : 'Aucun assureur';
        } else {
            details = item.categorie || 'Sans catégorie';
            if (item.description) {
                details += ' - ' + item.description;
            }
        }
        
        row.innerHTML = `
            <td>${typeBadge}</td>
            <td style="font-weight: 600; color: #1f2937;">${montant}</td>
            <td style="color: #6b7280;">${date}</td>
            <td style="color: #1f2937;">${details}</td>
            <td style="text-align: center;">
                <div class="action-buttons">
                    ${item.type === 'depense' && item.depense_recurrente_id ? 
                        `<button type="button" class="action-btn" onclick="goToRecurrentesTab()" title="Voir dans Dépenses récurrentes" style="color: #6fb87d;">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
                                <polyline points="15 3 21 3 21 9"></polyline>
                                <line x1="10" y1="14" x2="21" y2="3"></line>
                            </svg>
                        </button>` :
                        `<button type="button" class="action-btn action-btn-delete" 
                                onclick="confirmDelete('${item.type}', ${item.id}, '${item.type === 'revenu' ? 'Revenu' : 'Dépense'} de ${montant}')" 
                                title="Supprimer">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <polyline points="3,6 5,6 21,6"/>
                                <path d="M19,6v14a2,2 0 0,1 -2,2H7a2,2 0 0,1 -2,-2V6m3,0V4a2,2 0 0,1 2,-2h4a2,2 0 0,1 2,2v2"/>
                                <line x1="10" y1="11" x2="10" y2="17"/>
                                <line x1="14" y1="11" x2="14" y2="17"/>
                            </svg>
                        </button>`
                    }
                </div>
            </td>
        `;
        
        tbody.appendChild(row);
    });
}

// Variables pour la suppression
let deleteType = null;
let deleteId = null;

// Confirmer la suppression
function confirmDelete(type, id, label) {
    deleteType = type;
    deleteId = id;
    document.getElementById('confirmDeleteMessage').textContent = `Êtes-vous sûr de vouloir supprimer ${label} ?`;
    document.getElementById('confirmDeleteModal').style.display = 'flex';
}

// Fermer le modal
function closeDeleteModal() {
    document.getElementById('confirmDeleteModal').style.display = 'none';
    deleteType = null;
    deleteId = null;
}

// Confirmer et supprimer
function handleDeleteConfirm() {
    if (!deleteType || !deleteId) {
        return;
    }
    
    let endpoint;
    if (deleteType === 'recurrente') {
        endpoint = `/api/comptabilite/depense-recurrente/${deleteId}`;
    } else if (deleteType === 'revenu') {
        endpoint = `/api/comptabilite/revenu/${deleteId}`;
    } else {
        endpoint = `/api/comptabilite/depense/${deleteId}`;
    }
    
    fetch(endpoint, {
        method: 'DELETE',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Accept': 'application/json'
        }
    })
    .then(response => {
        if (!response.ok) {
            return response.json().then(data => {
                throw new Error(data.message || 'Erreur lors de la suppression');
            });
        }
        return response.json();
    })
    .then(data => {
        if (data.success) {
            const wasRecurrente = deleteType === 'recurrente';
            closeDeleteModal();
            // Réinitialiser les variables de suppression
            deleteType = null;
            deleteId = null;
            // Recharger les données
            if (wasRecurrente) {
                loadRecurrentes();
            } else {
                loadRecapitulatif();
            }
            loadChartData();
        } else {
            alert('Erreur : ' + (data.message || 'Erreur inconnue'));
        }
    })
    .catch(error => {
        console.error('Erreur:', error);
        alert('Erreur : ' + error.message);
        closeDeleteModal();
    });
}

// Initialiser les événements après le chargement du DOM
document.addEventListener('DOMContentLoaded', function() {
    const confirmBtn = document.getElementById('confirmDeleteBtn');
    if (confirmBtn) {
        confirmBtn.addEventListener('click', handleDeleteConfirm);
    }
    
    const modal = document.getElementById('confirmDeleteModal');
    if (modal) {
        modal.addEventListener('click', function(e) {
            if (e.target === this) {
                closeDeleteModal();
            }
        });
    }
    
    // Initialiser les événements pour les modals URSSAF
    const confirmURSSAFBtn = document.getElementById('confirmURSSAFBtn');
    if (confirmURSSAFBtn) {
        confirmURSSAFBtn.addEventListener('click', confirmURSSAFDepense);
    }
    
    // Fermer les modals URSSAF en cliquant en dehors
    const confirmURSSAFModal = document.getElementById('confirmURSSAFModal');
    if (confirmURSSAFModal) {
        confirmURSSAFModal.addEventListener('click', function(e) {
            if (e.target === this) {
                closeURSSAFModal();
            }
        });
    }
    
    const successURSSAFModal = document.getElementById('successURSSAFModal');
    if (successURSSAFModal) {
        successURSSAFModal.addEventListener('click', function(e) {
            if (e.target === this) {
                closeSuccessURSSAFModal();
            }
        });
    }
});

// Charger les revenus trimestriels
function loadTrimestriels() {
    const filterYear = document.getElementById('filterYearTrimestriels')?.value || '';
    const url = filterYear ? '/api/comptabilite/trimestriels?year=' + filterYear : '/api/comptabilite/trimestriels';
    
    fetch(url, {
        method: 'GET',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Accept': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Mettre à jour le filtre année
            updateYearFilter(data.years || []);
            renderTrimestriels(data.data);
        } else {
            console.error('Erreur:', data.message);
        }
    })
    .catch(error => {
        console.error('Erreur lors du chargement des revenus trimestriels:', error);
    });
}

// Mettre à jour le filtre année
function updateYearFilter(years) {
    const filterSelect = document.getElementById('filterYearTrimestriels');
    if (!filterSelect) return;
    
    const currentValue = filterSelect.value;
    filterSelect.innerHTML = '<option value="">Toutes les années</option>';
    
    years.forEach(year => {
        const option = document.createElement('option');
        option.value = year;
        option.textContent = year;
        if (year.toString() === currentValue) {
            option.selected = true;
        }
        filterSelect.appendChild(option);
    });
}

// Afficher les revenus trimestriels
function renderTrimestriels(trimestres) {
    const tbody = document.getElementById('trimestrielsTableBody');
    if (!tbody) return;
    
    tbody.innerHTML = '';
    
    if (!trimestres || trimestres.length === 0) {
        tbody.innerHTML = '<tr><td colspan="5" style="text-align: center; padding: 2rem; color: #6b7280;">Aucune donnée disponible</td></tr>';
        return;
    }
    
    const trimestreLabels = {
        'T1': '1er trimestre',
        'T2': '2ème trimestre',
        'T3': '3ème trimestre',
        'T4': '4ème trimestre'
    };
    
    trimestres.forEach(trimestre => {
        const row = document.createElement('tr');
        const montant = parseFloat(trimestre.revenu_cumule || 0).toFixed(2) + ' €';
        const coutURSSAFInitial = parseFloat(trimestre.cout_urssaf || 0);
        const coutURSSAF = coutURSSAFInitial.toFixed(2) + ' €';
        const trimestreNum = trimestre.trimestre.replace('T', '');
        const rowId = `urssaf-row-${trimestre.annee}-${trimestreNum}`;
        
        row.id = rowId;
        row.innerHTML = `
            <td style="font-weight: 600; color: #1f2937;">${trimestre.annee}</td>
            <td style="font-weight: 600; color: #1f2937;">${trimestreLabels[trimestre.trimestre] || trimestre.trimestre}</td>
            <td style="color: #6b7280;">${trimestre.periode}</td>
            <td style="font-weight: 600; color: #6fb87d; font-size: 1.1rem;">${montant}</td>
            <td style="font-weight: 600; color: #ef4444; font-size: 1.1rem;">
                <input type="number" 
                       step="0.01" 
                       class="urssaf-montant-input" 
                       value="${coutURSSAFInitial.toFixed(2)}" 
                       data-initial="${coutURSSAFInitial.toFixed(2)}"
                       data-annee="${trimestre.annee}"
                       data-trimestre="${trimestreNum}"
                       style="width: 100px; padding: 0.25rem 0.5rem; border: 1px solid #d1d5db; border-radius: 4px; font-weight: 600; color: #ef4444; font-size: 1.1rem; text-align: right;">
                <span style="margin-left: 0.25rem;">€</span>
            </td>
            <td style="text-align: center;">
                <button type="button" class="action-btn" onclick="addURSSAFDepense(${trimestre.annee}, ${trimestreNum})" title="Ajouter la dépense URSSAF" style="color: #6fb87d;">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <line x1="12" y1="5" x2="12" y2="19"></line>
                        <line x1="5" y1="12" x2="19" y2="12"></line>
                    </svg>
                </button>
            </td>
        `;
        
        tbody.appendChild(row);
        
        // Ajouter l'événement de modification pour détecter les changements
        const input = row.querySelector('.urssaf-montant-input');
        input.addEventListener('input', function() {
            const currentValue = parseFloat(this.value) || 0;
            const initialValue = parseFloat(this.dataset.initial) || 0;
            
            if (Math.abs(currentValue - initialValue) > 0.01) {
                // Montant modifié : ajouter bordure pointillée sur l'input avec rayon
                this.style.border = '2px dashed #000000';
                this.style.borderRadius = '6px';
            } else {
                // Montant identique : retirer la bordure pointillée
                this.style.border = '1px solid #d1d5db';
                this.style.borderRadius = '4px';
            }
        });
    });
}

// Variables pour la modal URSSAF
let urssafAnnee = null;
let urssafTrimestre = null;
let urssafMontant = null;

// Ouvrir la modal de confirmation URSSAF
function addURSSAFDepense(annee, trimestreNum) {
    // S'assurer que les valeurs sont des nombres
    urssafAnnee = parseInt(annee);
    urssafTrimestre = parseInt(trimestreNum);
    
    // Vérifier que les conversions ont réussi
    if (isNaN(urssafAnnee) || isNaN(urssafTrimestre)) {
        console.error('Erreur: valeurs invalides', { annee, trimestreNum });
        alert('Erreur : Année ou trimestre invalide');
        return;
    }
    
    // Récupérer le montant depuis l'input de la ligne
    const rowId = `urssaf-row-${urssafAnnee}-${urssafTrimestre}`;
    const row = document.getElementById(rowId);
    if (!row) {
        console.error('Erreur: ligne introuvable', rowId);
        alert('Erreur : Ligne introuvable');
        return;
    }
    
    const montantInput = row.querySelector('.urssaf-montant-input');
    if (!montantInput) {
        console.error('Erreur: input montant introuvable');
        alert('Erreur : Champ montant introuvable');
        return;
    }
    
    const montant = parseFloat(montantInput.value) || 0;
    urssafMontant = montant;
    
    const montantFormatted = montant.toFixed(2) + ' €';
    document.getElementById('confirmURSSAFMessage').textContent = 
        `Voulez-vous ajouter la dépense URSSAF de ${montantFormatted} pour ${urssafAnnee} T${urssafTrimestre} ?`;
    document.getElementById('confirmURSSAFModal').style.display = 'flex';
}

// Fermer la modal de confirmation URSSAF
function closeURSSAFModal() {
    document.getElementById('confirmURSSAFModal').style.display = 'none';
    urssafAnnee = null;
    urssafTrimestre = null;
    urssafMontant = null;
}

// Fermer la modal de succès URSSAF
function closeSuccessURSSAFModal() {
    document.getElementById('successURSSAFModal').style.display = 'none';
}

// Confirmer et ajouter la dépense URSSAF
function confirmURSSAFDepense() {
    // Récupérer les valeurs depuis les variables globales ou depuis les attributs data de l'input
    let annee = urssafAnnee;
    let trimestre = urssafTrimestre;
    
    // Si les valeurs ne sont pas disponibles, essayer de les récupérer depuis le modal ou les inputs
    if (!annee || !trimestre) {
        // Chercher tous les inputs URSSAF pour trouver celui qui est dans la ligne active
        const allInputs = document.querySelectorAll('.urssaf-montant-input');
        for (let input of allInputs) {
            const row = input.closest('tr');
            if (row && row.style.border && row.style.border.includes('dashed')) {
                // Cette ligne a été modifiée, utiliser ses valeurs
                annee = parseInt(input.dataset.annee) || null;
                trimestre = parseInt(input.dataset.trimestre) || null;
                break;
            }
        }
    }
    
    // Si toujours pas de valeurs, utiliser les valeurs stockées dans les variables globales
    if (!annee || !trimestre) {
        if (!urssafAnnee || !urssafTrimestre) {
            alert('Erreur : Données manquantes. Veuillez réessayer.');
            return;
        }
        annee = urssafAnnee;
        trimestre = urssafTrimestre;
    }
    
    // Convertir en nombres entiers
    annee = parseInt(annee);
    trimestre = parseInt(trimestre);
    
    if (isNaN(annee) || isNaN(trimestre)) {
        alert('Erreur : Année ou trimestre invalide');
        console.error('Valeurs invalides:', { urssafAnnee, urssafTrimestre, annee, trimestre });
        return;
    }
    
    // Récupérer à nouveau le montant depuis l'input de la ligne pour être sûr d'avoir la dernière valeur
    const rowId = `urssaf-row-${annee}-${trimestre}`;
    const row = document.getElementById(rowId);
    if (!row) {
        alert('Erreur : Ligne introuvable');
        return;
    }
    
    const montantInput = row.querySelector('.urssaf-montant-input');
    if (!montantInput) {
        alert('Erreur : Champ montant introuvable');
        return;
    }
    
    const montant = parseFloat(montantInput.value) || 0;
    
    if (montant <= 0) {
        alert('Veuillez saisir un montant valide');
        montantInput.focus();
        return;
    }
    
    closeURSSAFModal();
    
    // Préparer les données à envoyer
    const dataToSend = {
        annee: annee,
        trimestre: trimestre,
        montant: montant
    };
    
    console.log('Données envoyées:', dataToSend);
    
    fetch('/api/comptabilite/urssaf', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Content-Type': 'application/json',
            'Accept': 'application/json'
        },
        body: JSON.stringify(dataToSend)
    })
    .then(response => {
        if (!response.ok) {
            return response.json().then(err => {
                throw new Error(err.message || 'Erreur lors de l\'ajout de la dépense URSSAF');
            });
        }
        return response.json();
    })
    .then(data => {
        if (data.success) {
            // Récupérer le montant depuis l'input pour l'affichage
            const rowId = `urssaf-row-${dataToSend.annee}-${dataToSend.trimestre}`;
            const row = document.getElementById(rowId);
            const montantInput = row ? row.querySelector('.urssaf-montant-input') : null;
            const montantFinal = montantInput ? parseFloat(montantInput.value) : dataToSend.montant;
            
            const montantFormatted = montantFinal.toFixed(2) + ' €';
            const message = data.updated 
                ? `La dépense URSSAF de ${montantFormatted} pour ${dataToSend.annee} T${dataToSend.trimestre} a été mise à jour avec succès.`
                : `La dépense URSSAF de ${montantFormatted} pour ${dataToSend.annee} T${dataToSend.trimestre} a été ajoutée avec succès.`;
            document.getElementById('successURSSAFMessage').textContent = message;
            document.getElementById('successURSSAFModal').style.display = 'flex';
            
            // Mettre à jour la valeur initiale de l'input pour retirer la bordure pointillée
            if (row && montantInput) {
                montantInput.dataset.initial = montantFinal.toFixed(2);
                montantInput.style.border = '1px solid #d1d5db';
                montantInput.style.borderRadius = '4px';
            }
            
            // Recharger les données du graphique et du récapitulatif
            loadChartData();
            loadRecapitulatif();
        } else {
            alert('Erreur : ' + (data.message || 'Erreur inconnue'));
        }
    })
    .catch(error => {
        console.error('Erreur:', error);
        closeURSSAFModal();
        alert('Erreur lors de l\'ajout de la dépense URSSAF : ' + error.message);
    });
}
</script>
@endpush