
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gestion Comptable Vin</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #f5f5f5; padding: 20px; }
        .container { max-width: 1400px; margin: 0 auto; }
        h1 { text-align: center; color: #333; margin-bottom: 30px; }
        .year-selector { text-align: center; margin-bottom: 20px; }
        .year-selector select { padding: 8px 15px; font-size: 16px; border: 1px solid #ddd; border-radius: 4px; }
        .tabs { display: flex; gap: 10px; margin-bottom: 20px; border-bottom: 2px solid #ddd; }
        .tab-btn { padding: 12px 20px; background: none; border: none; cursor: pointer; font-size: 16px; color: #666; border-bottom: 3px solid transparent; transition: all 0.3s; }
        .tab-btn.active { color: #3498db; border-bottom-color: #3498db; }
        .tab-content { display: none; }
        .tab-content.active { display: block; }
        .section { background: white; padding: 20px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
        .form-group { display: flex; gap: 10px; margin-bottom: 15px; flex-wrap: wrap; }
        label { width: 150px; font-weight: bold; }
        input, select { flex: 1; min-width: 150px; padding: 8px; border: 1px solid #ddd; border-radius: 4px; }
        button { padding: 8px 16px; background: #3498db; color: white; border: none; border-radius: 4px; cursor: pointer; }
        button:hover { background: #2980b9; }
        .delete-btn { background: #e74c3c; padding: 4px 8px; font-size: 12px; }
        table { width: 100%; border-collapse: collapse; margin-top: 15px; }
        table th { background: #34495e; color: white; padding: 10px; text-align: left; }
        table td { padding: 8px; border-bottom: 1px solid #ddd; }
        table tr:nth-child(even) { background: #ecf0f1; }
        .summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-top: 20px; }
        .summary-card { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 15px; border-radius: 8px; }
        .summary-card.ca { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
        .summary-card.marge { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }
        .summary-card.urssaf { background: linear-gradient(135deg, #eb3349 0%, #f45c43 100%); }
        .summary-card h3 { font-size: 12px; opacity: 0.9; margin-bottom: 5px; }
        .summary-card .value { font-size: 22px; font-weight: bold; }
        .chart-container { position: relative; height: 300px; margin-top: 20px; }
        .info-text { color: #666; font-size: 13px; margin-bottom: 15px; }
    </style>
</head>
<body>
    <div class="container">
        <h1>📊 Gestion Comptable - Dépenses & Ventes de Vin (Franchise TVA)</h1>

        <div class="year-selector">
            <label for="yearSelect">Sélectionner l'année :</label>
            <select id="yearSelect" onchange="changerAnnee()">
                <option value="">Chargement...</option>
            </select>
        </div>

        <div class="tabs">
            <button class="tab-btn active" onclick="switchTab('data')">Saisie Données</button>
            <button class="tab-btn" onclick="switchTab('dashboard')">Tableau de Bord</button>
            <button class="tab-btn" onclick="switchTab('urssaf')">URSSAF Trimestriel</button>
            <button class="tab-btn" onclick="switchTab('historique')">Historique</button>
        </div>

        <!-- TAB: Saisie Données -->
        <div id="data" class="tab-content active">
            <div class="section">
                <h2>🛒 Achats</h2>
                <p class="info-text">Vous êtes en franchise de TVA - saisir les montants HT</p>
                <div class="form-group">
                    <label>Date :</label>
                    <input type="date" id="achatDate">
                </div>
                <div class="form-group">
                    <label>Libellé :</label>
                    <input type="text" id="achatLibelle" placeholder="Ex: Achat de raisins">
                </div>
                <div class="form-group">
                    <label>Montant (€) :</label>
                    <input type="number" id="achatMontant" placeholder="Ex: 500" step="0.01">
                    <button onclick="ajouterAchat()">Ajouter</button>
                </div>
                <table id="tableAchats">
                    <thead><tr><th>Date</th><th>Libellé</th><th>Montant (€)</th><th>Action</th></tr></thead>
                    <tbody></tbody>
                </table>
            </div>

            <div class="section">
                <h2>💰 Ventes</h2>
                <p class="info-text">Vous êtes en franchise de TVA - saisir les montants HT</p>
                <div class="form-group">
                    <label>Date :</label>
                    <input type="date" id="venteDate">
                </div>
                <div class="form-group">
                    <label>Libellé :</label>
                    <input type="text" id="venteLibelle" placeholder="Ex: Vente bouteilles Bordeaux">
                </div>
                <div class="form-group">
                    <label>Montant (€) :</label>
                    <input type="number" id="venteMontant" placeholder="Ex: 600" step="0.01">
                    <button onclick="ajouterVente()">Ajouter</button>
                </div>
                <table id="tableVentes">
                    <thead><tr><th>Date</th><th>Libellé</th><th>Montant (€)</th><th>Action</th></tr></thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>

        <!-- TAB: Tableau de Bord -->
        <div id="dashboard" class="tab-content">
            <div class="section">
                <h2>📈 Résumé Financier</h2>
                <div class="summary">
                    <div class="summary-card">
                        <h3>Total Achats</h3>
                        <div class="value" id="totalAchats">0.00 €</div>
                    </div>
                    <div class="summary-card ca">
                        <h3>Total Ventes</h3>
                        <div class="value" id="totalVentes">0.00 €</div>
                    </div>
                    <div class="summary-card marge">
                        <h3>Marge Brute</h3>
                        <div class="value" id="margeBrute">0.00 €</div>
                    </div>
                    <div class="summary-card urssaf">
                        <h3>Cotisations URSSAF (Annuelles)</h3>
                        <div class="value" id="urssafAnnuel">0.00 €</div>
                    </div>
                </div>
            </div>

            <div class="section">
                <h2>📊 Évolution Mensuelle</h2>
                <div class="chart-container">
                    <canvas id="chartMensuel"></canvas>
                </div>
            </div>
        </div>

        <!-- TAB: URSSAF Trimestriel -->
        <div id="urssaf" class="tab-content">
            <div class="section">
                <h2>📅 Cotisations URSSAF par Trimestre (à partir du 30 juin 2026)</h2>
                <p style="margin-bottom: 20px; color: #666;">Taux appliqué : 12.1% du chiffre d'affaires</p>
                <table id="tableURSSAF">
                    <thead>
                        <tr>
                            <th>Trimestre</th>
                            <th>Période</th>
                            <th>CA (€)</th>
                            <th>Cotisations URSSAF (€)</th>
                            <th>Date limite paiement</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>

        <!-- TAB: Historique -->
        <div id="historique" class="tab-content">
            <div class="section">
                <h2>📅 Détail des Transactions</h2>
                <table id="tableHistorique">
                    <thead><tr><th>Date</th><th>Type</th><th>Libellé</th><th>Montant (€)</th></tr></thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

    <script>
        const URSSAF_RATE = 0.121;
        let chartMensuelInstance = null;
        let anneeActuelle = new Date().getFullYear();

        function chargerAnnees() {
            fetch('?action=get_years').then(r => r.json()).then(years => {
                const select = document.getElementById('yearSelect');
                select.innerHTML = '';
                years.forEach(year => {
                    const option = document.createElement('option');
                    option.value = year;
                    option.textContent = year;
                    if (year == anneeActuelle) option.selected = true;
                    select.appendChild(option);
                });
                chargerDonnees();
            }).catch(e => console.error('Erreur:', e));
        }

        function changerAnnee() {
            anneeActuelle = parseInt(document.getElementById('yearSelect').value);
            document.getElementById('achatDate').valueAsDate = new Date();
            document.getElementById('venteDate').valueAsDate = new Date();
            chargerDonnees();
        }

        function chargerDonnees() {
            chargerAchats();
            chargerVentes();
        }

        function switchTab(tab) {
            document.querySelectorAll('.tab-content').forEach(el => el.classList.remove('active'));
            document.querySelectorAll('.tab-btn').forEach(el => el.classList.remove('active'));
            document.getElementById(tab).classList.add('active');
            event.target.classList.add('active');
            
            if (tab === 'dashboard') chargerDashboard();
            if (tab === 'urssaf') chargerURSSAF();
            if (tab === 'historique') chargerHistorique();
        }

        function ajouterAchat() {
            const date = document.getElementById('achatDate').value;
            const libelle = document.getElementById('achatLibelle').value;
            const montant = parseFloat(document.getElementById('achatMontant').value);
            
            if (!date || !libelle || isNaN(montant) || montant <= 0) {
                alert('Veuillez remplir tous les champs');
                return;
            }
            
            fetch('?action=add_achat', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({date, libelle, montant})
            }).then(r => r.json()).then(data => {
                if (data.success) {
                    document.getElementById('achatDate').value = '';
                    document.getElementById('achatLibelle').value = '';
                    document.getElementById('achatMontant').value = '';
                    chargerAnnees();
                } else {
                    alert('Erreur: ' + (data.error || 'Inconnu'));
                }
            }).catch(e => alert('Erreur réseau: ' + e));
        }

        function ajouterVente() {
            const date = document.getElementById('venteDate').value;
            const libelle = document.getElementById('venteLibelle').value;
            const montant = parseFloat(document.getElementById('venteMontant').value);
            
            if (!date || !libelle || isNaN(montant) || montant <= 0) {
                alert('Veuillez remplir tous les champs');
                return;
            }
            
            fetch('?action=add_vente', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({date, libelle, montant})
            }).then(r => r.json()).then(data => {
                if (data.success) {
                    document.getElementById('venteDate').value = '';
                    document.getElementById('venteLibelle').value = '';
                    document.getElementById('venteMontant').value = '';
                    chargerAnnees();
                } else {
                    alert('Erreur: ' + (data.error || 'Inconnu'));
                }
            }).catch(e => alert('Erreur réseau: ' + e));
        }

        function supprimerAchat(id) {
            if (confirm('Confirmer la suppression ?')) {
                fetch('?action=delete_achat&id=' + id).then(() => chargerAnnees());
            }
        }

        function supprimerVente(id) {
            if (confirm('Confirmer la suppression ?')) {
                fetch('?action=delete_vente&id=' + id).then(() => chargerAnnees());
            }
        }

        function chargerAchats() {
            fetch('?action=get_achats&year=' + anneeActuelle).then(r => r.json()).then(achats => {
                const tbody = document.querySelector('#tableAchats tbody');
                tbody.innerHTML = '';
                achats.forEach(a => {
                    const tr = document.createElement('tr');
                    tr.innerHTML = `<td>${a.date}</td><td>${a.libelle}</td><td>${parseFloat(a.montant).toFixed(2)}</td><td><button class="delete-btn" onclick="supprimerAchat(${a.id})">Supprimer</button></td>`;
                    tbody.appendChild(tr);
                });
                chargerResume();
            });
        }

        function chargerVentes() {
            fetch('?action=get_ventes&year=' + anneeActuelle).then(r => r.json()).then(ventes => {
                const tbody = document.querySelector('#tableVentes tbody');
                tbody.innerHTML = '';
                ventes.forEach(v => {
                    const tr = document.createElement('tr');
                    tr.innerHTML = `<td>${v.date}</td><td>${v.libelle}</td><td>${parseFloat(v.montant).toFixed(2)}</td><td><button class="delete-btn" onclick="supprimerVente(${v.id})">Supprimer</button></td>`;
                    tbody.appendChild(tr);
                });
                chargerResume();
            });
        }

        function chargerResume() {
            fetch('?action=get_summary&year=' + anneeActuelle).then(r => r.json()).then(data => {
                document.getElementById('totalAchats').textContent = data.total_achats.toFixed(2) + ' €';
                document.getElementById('totalVentes').textContent = data.total_ventes.toFixed(2) + ' €';
                document.getElementById('margeBrute').textContent = data.marge_brute.toFixed(2) + ' €';
                document.getElementById('urssafAnnuel').textContent = data.urssaf_annuel.toFixed(2) + ' €';
            });
        }

        function chargerDashboard() {
            chargerResume();
            fetch('?action=get_monthly_stats&year=' + anneeActuelle).then(r => r.json()).then(monthData => {
                const monthNames = ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Jun', 'Jul', 'Aoû', 'Sep', 'Oct', 'Nov', 'Déc'];
                const achatsData = [];
                const ventesData = [];
                
                for (let i = 1; i <= 12; i++) {
                    achatsData.push((monthData[i].achats || 0).toFixed(2));
                    ventesData.push((monthData[i].ventes || 0).toFixed(2));
                }

                if (chartMensuelInstance) chartMensuelInstance.destroy();
                const ctx = document.getElementById('chartMensuel').getContext('2d');
                chartMensuelInstance = new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: monthNames,
                        datasets: [
                            { label: 'Achats', data: achatsData, borderColor: '#e74c3c', tension: 0.4, fill: false },
                            { label: 'Ventes', data: ventesData, borderColor: '#27ae60', tension: 0.4, fill: false }
                        ]
                    },
                    options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: true } } }
                });
            });
        }

        function chargerURSSAF() {
            fetch('?action=get_urssaf_trimestriel').then(r => r.json()).then(trimestres => {
                const tbody = document.querySelector('#tableURSSAF tbody');
                tbody.innerHTML = '';
                
                trimestres.forEach(trim => {
                    const tr = document.createElement('tr');
                    const debut = new Date(trim.debut).toLocaleDateString('fr-FR');
                    const fin = new Date(trim.fin).toLocaleDateString('fr-FR');
                    tr.innerHTML = `<td>T${trim.trimestre}</td><td>${debut} au ${fin}</td><td>${trim.ca}</td><td>${trim.urssaf}</td><td>${trim.limite}</td>`;
                    tbody.appendChild(tr);
                });
            });
        }

        function chargerHistorique() {
            Promise.all([
                fetch('?action=get_achats&year=' + anneeActuelle).then(r => r.json()),
                fetch('?action=get_ventes&year=' + anneeActuelle).then(r => r.json())
            ]).then(([achats, ventes]) => {
                const tbody = document.querySelector('#tableHistorique tbody');
                tbody.innerHTML = '';
                
                const allTransactions = [
                    ...achats.map(a => ({ ...a, type: 'Achat' })),
                    ...ventes.map(v => ({ ...v, type: 'Vente' }))
                ].sort((a, b) => new Date(b.date) - new Date(a.date));
                
                allTransactions.forEach(t => {
                    const tr = document.createElement('tr');
                    tr.innerHTML = `<td>${t.date}</td><td>${t.type}</td><td>${t.libelle}</td><td>${parseFloat(t.montant).toFixed(2)}</td>`;
                    tbody.appendChild(tr);
                });
            });
        }

        document.getElementById('achatDate').valueAsDate = new Date();
        document.getElementById('venteDate').valueAsDate = new Date();
        chargerAnnees();
    </script>
</body>
</html>
        