@extends('layouts.app')

@section('page-title', 'Comptabilité')
@section('page-subtitle', 'Gestion des achats et dépenses')

@section('content')
<style>
    .comptabilite-container {
        max-width: 1400px;
        margin: 0 auto;
    }

    .card {
        background: white;
        border-radius: 1rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        border: 1px solid #e5e7eb;
        margin-bottom: 2rem;
        overflow: hidden;
    }

    .card-header {
        padding: 1.5rem;
        border-bottom: 1px solid #e5e7eb;
        background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
    }

    .card-header h3 {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 700;
        color: #111827;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .card-body {
        padding: 1.5rem;
    }

    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1.5rem;
        margin-bottom: 2rem;
    }

    .stat-card {
        background: white;
        border-radius: 1rem;
        padding: 1.5rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        border: 1px solid #e5e7eb;
        transition: all 0.3s ease;
    }

    .stat-card:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
    }

    .stat-label {
        font-size: 0.9rem;
        color: #6b7280;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 0.5rem;
    }

    .stat-value {
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }

    .form-group {
        margin-bottom: 1.5rem;
    }

    .form-label {
        display: block;
        font-weight: 600;
        color: #374151;
        margin-bottom: 0.5rem;
        font-size: 0.95rem;
    }

    .form-input,
    .form-select,
    .form-textarea {
        width: 100%;
        padding: 0.75rem 1rem;
        border: 2px solid #d1d5db;
        border-radius: 0.5rem;
        font-size: 0.95rem;
        transition: all 0.3s ease;
    }

    .form-input:focus,
    .form-select:focus,
    .form-textarea:focus {
        outline: none;
        border-color: var(--secondary);
        box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
    }

    .form-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1.5rem;
    }

    .table-container {
        overflow-x: auto;
    }

    table {
        width: 100%;
        border-collapse: collapse;
    }

    th {
        background: #f9fafb;
        padding: 1rem;
        text-align: left;
        font-weight: 600;
        color: #374151;
        border-bottom: 2px solid #e5e7eb;
        font-size: 0.9rem;
    }

    td {
        padding: 1rem;
        border-bottom: 1px solid #e5e7eb;
        color: #111827;
    }

    tr:hover {
        background: #f9fafb;
    }

    .badge {
        display: inline-block;
        padding: 0.25rem 0.75rem;
        border-radius: 9999px;
        font-size: 0.85rem;
        font-weight: 600;
    }

    .profit-box {
        background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
        border-left: 4px solid var(--success);
        border-radius: 0.75rem;
        padding: 1.5rem;
        margin-bottom: 2rem;
    }

    .loss-box {
        background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
        border-left: 4px solid var(--danger);
        border-radius: 0.75rem;
        padding: 1.5rem;
        margin-bottom: 2rem;
    }

    .modal-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(5px);
        z-index: 50;
        align-items: center;
        justify-content: center;
        padding: 1rem;
    }

    .modal-overlay.active {
        display: flex;
    }

    .modal-content {
        background: white;
        border-radius: 1rem;
        box-shadow: 0 20px 25px rgba(0, 0, 0, 0.15);
        overflow: hidden;
        animation: slideIn 0.3s ease-out;
        max-width: 600px;
        width: 100%;
    }

    .modal-header {
        padding: 1.5rem;
        background: linear-gradient(to right, var(--secondary), #7c3aed);
        color: white;
    }

    .modal-header h2 {
        margin: 0;
        font-size: 1.5rem;
        font-weight: 700;
    }

    .modal-body {
        padding: 1.5rem;
    }

    .modal-footer {
        display: flex;
        gap: 1rem;
        justify-content: flex-end;
        padding: 1rem;
        border-top: 1px solid #e5e7eb;
    }

    @keyframes slideIn {
        from {
            opacity: 0;
            transform: scale(0.95) translateY(10px);
        }
        to {
            opacity: 1;
            transform: scale(1) translateY(0);
        }
    }

    .empty-state {
        text-align: center;
        padding: 3rem 1rem;
        color: #9ca3af;
    }

    .empty-state i {
        font-size: 4rem;
        margin-bottom: 1rem;
        opacity: 0.5;
    }

    .btn {
        padding: 0.625rem 1rem;
        border: none;
        border-radius: 0.5rem;
        cursor: pointer;
        font-weight: 500;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
    }

    .btn-action {
        border: none;
        border-radius: 0.5rem;
        padding: 0.5rem;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .btn-action:hover {
        transform: translateY(-2px);
    }

    @media (max-width: 768px) {
        .form-grid {
            grid-template-columns: 1fr;
        }

        .stats-grid {
            grid-template-columns: 1fr;
        }

        table {
            font-size: 0.85rem;
        }

        th, td {
            padding: 0.75rem;
        }
    }
</style>

<div class="comptabilite-container">
    
    <!-- Financial Summary -->
    <div class="stats-grid">
        <!-- Total Revenue -->
        <div class="stat-card">
            <div class="stat-label">
                <i class="fas fa-coins" style="color: var(--success);"></i> Total Revenus
            </div>
            <div class="stat-value" style="color: var(--success);">{{ number_format($financial['total_revenue'] ?? 0, 2) }} <span style="font-size: 0.7em;">MAD</span></div>
            <div style="font-size: 0.85rem; color: #6b7280;">De toutes les commandes</div>
        </div>

        <!-- Total Expenses -->
        <div class="stat-card">
            <div class="stat-label">
                <i class="fas fa-shopping-bag" style="color: var(--danger);"></i> Total Dépenses
            </div>
            <div class="stat-value" style="color: var(--danger);">{{ number_format($financial['total_expenses'] ?? 0, 2) }} <span style="font-size: 0.7em;">MAD</span></div>
            <div style="font-size: 0.85rem; color: #6b7280;">Tous les achats</div>
        </div>

        <!-- Net Profit -->
        <div class="stat-card">
            <div class="stat-label">
                <i class="fas fa-chart-line" style="color: var(--secondary);"></i> Profit Net
            </div>
            <div class="stat-value" style="color: var(--secondary);">{{ number_format($financial['net_profit'] ?? 0, 2) }} <span style="font-size: 0.7em;">MAD</span></div>
            <div style="font-size: 0.85rem; color: #6b7280;">Revenus - Dépenses</div>
        </div>

        <!-- Balance -->
        <div class="stat-card">
            <div class="stat-label">
                <i class="fas fa-wallet" style="color: var(--primary);"></i> Solde
            </div>
            <div class="stat-value" style="color: var(--primary);">{{ number_format($financial['balance'] ?? 0, 2) }} <span style="font-size: 0.7em;">MAD</span></div>
            <div style="font-size: 0.85rem; color: #6b7280;">Liquide disponible</div>
        </div>
    </div>

    <!-- Profit/Loss Alert -->
    @if(($financial['net_profit'] ?? 0) >= 0)
        <div class="profit-box">
            <div style="display: flex; align-items: center; gap: 1rem;">
                <div style="font-size: 2.5rem;">✅</div>
                <div>
                    <div style="font-weight: 700; color: #166534; font-size: 1.1rem;">
                        Profit: {{ number_format($financial['net_profit'] ?? 0, 2) }} MAD
                    </div>
                    <div style="font-size: 0.9rem; color: #4b5563;">
                        Vos revenus dépassent vos dépenses
                    </div>
                </div>
            </div>
        </div>
    @else
        <div class="loss-box">
            <div style="display: flex; align-items: center; gap: 1rem;">
                <div style="font-size: 2.5rem;">⚠️</div>
                <div>
                    <div style="font-weight: 700; color: #991b1b; font-size: 1.1rem;">
                        Perte: {{ number_format(abs($financial['net_profit'] ?? 0), 2) }} MAD
                    </div>
                    <div style="font-size: 0.9rem; color: #7c2d12;">
                        Vos dépenses dépassent vos revenus
                    </div>
                </div>
            </div>
        </div>
    @endif

    <!-- Add Purchase Card -->
    <div class="card">
        <div class="card-header">
            <h3><i class="fas fa-plus-circle" style="color: var(--success);"></i> Ajouter un Achat</h3>
        </div>
        <div class="card-body">
            <form id="addPurchaseForm" class="form-grid">
                @csrf
                
                <div class="form-group">
                    <label class="form-label">
                        <i class="fas fa-user"></i> Nom du Fournisseur *
                    </label>
                    <input 
                        type="text" 
                        name="supplier_name" 
                        required
                        class="form-input"
                        placeholder="Ex: Acme Supplier">
                </div>

                <div class="form-group">
                    <label class="form-label">
                        <i class="fas fa-tag"></i> Catégorie *
                    </label>
                    <select name="category" required class="form-select">
                        <option value="">Choisir une catégorie</option>
                        <option value="materials">Matériaux</option>
                        <option value="services">Services</option>
                        <option value="equipment">Équipement</option>
                        <option value="other">Autre</option>
                    </select>
                </div>

                <div class="form-group">
                    <label class="form-label">
                        <i class="fas fa-calendar"></i> Date d'Achat *
                    </label>
                    <input 
                        type="date" 
                        name="purchase_date" 
                        required
                        class="form-input"
                        value="{{ date('Y-m-d') }}">
                </div>

                <div class="form-group">
                    <label class="form-label">
                        <i class="fas fa-align-left"></i> Description *
                    </label>
                    <textarea 
                        name="description" 
                        rows="2"
                        required
                        class="form-textarea"
                        placeholder="Décrivez l'achat"></textarea>
                </div>

                <div class="form-group">
                    <label class="form-label">
                        <i class="fas fa-boxes"></i> Quantité *
                    </label>
                    <input 
                        type="number" 
                        name="quantity" 
                        min="1"
                        value="1"
                        required
                        class="form-input"
                        placeholder="1">
                </div>

                <div class="form-group">
                    <label class="form-label">
                        <i class="fas fa-tag"></i> Prix Unitaire (MAD) *
                    </label>
                    <input 
                        type="number" 
                        name="unit_price" 
                        step="0.01"
                        min="0"
                        required
                        class="form-input"
                        placeholder="0.00">
                </div>

                <div style="grid-column: 1 / -1;">
                    <label class="form-label">
                        <i class="fas fa-sticky-note"></i> Notes (Optionnel)
                    </label>
                    <textarea 
                        name="notes" 
                        rows="2"
                        class="form-textarea"
                        placeholder="Notes supplémentaires..."></textarea>
                </div>

                <div style="grid-column: 1 / -1; text-align: right;">
                    <button type="submit" class="btn" style="background: linear-gradient(to right, var(--success), #059669); color: white; padding: 0.75rem 2rem; font-size: 1rem; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);">
                        <i class="fas fa-plus-circle"></i> Enregistrer l'Achat
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Purchases Table -->
    <div class="card">
        <div class="card-header" style="display: flex; justify-content: space-between; align-items: center;">
            <h3><i class="fas fa-list" style="color: var(--primary);"></i> Historique des Achats</h3>
            <span style="background: #dbeafe; color: var(--primary); padding: 0.5rem 1rem; border-radius: 9999px; font-size: 0.9rem; font-weight: 600;">{{ $purchases->count() ?? 0 }} Achats</span>
        </div>
        <div class="card-body">
            @if(($purchases->count() ?? 0) > 0)
                <div class="table-container">
                    <table id="purchasesTable">
                        <thead>
                            <tr>
                                <th style="width: 50px;">#</th>
                                <th>Fournisseur</th>
                                <th style="text-align: center;">Catégorie</th>
                                <th>Description</th>
                                <th style="text-align: center;">Qté</th>
                                <th style="text-align: center;">Prix Unit.</th>
                                <th style="text-align: center;">Total</th>
                                <th style="text-align: center;">Date</th>
                                <th style="text-align: center;">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($purchases as $index => $purchase)
                            <tr id="purchase-{{ $purchase->id }}">
                                <td style="font-weight: 700; color: #6b7280;">{{ $index + 1 }}</td>
                                <td style="font-weight: 600;">{{ $purchase->supplier_name }}</td>
                                <td style="text-align: center;">
                                    <span class="badge" 
                                        @if($purchase->category === 'materials')
                                            style="background: #dbeafe; color: #1e40af;"
                                        @elseif($purchase->category === 'services')
                                            style="background: #dcfce7; color: #166534;"
                                        @else
                                            style="background: #fde68a; color: #92400e;"
                                        @endif>
                                        @if($purchase->category === 'materials') 📦 Matériaux
                                        @elseif($purchase->category === 'services') 🔧 Services
                                        @elseif($purchase->category === 'equipment') ⚙️ Équipement
                                        @else ❓ Autre @endif
                                    </span>
                                </td>
                                <td style="font-size: 0.9rem; color: #6b7280;">{{ $purchase->description }}</td>
                                <td style="text-align: center; font-weight: 600;">{{ $purchase->quantity }}</td>
                                <td style="text-align: center;">{{ number_format($purchase->unit_price, 2) }} MAD</td>
                                <td style="text-align: center; font-weight: 700; color: var(--secondary);">{{ number_format($purchase->total_amount, 2) }} MAD</td>
                                <td style="text-align: center; color: #6b7280;">{{ $purchase->purchase_date->format('d/m/Y') }}</td>
                                <td style="text-align: center;">
                                    <div style="display: flex; gap: 0.5rem; justify-content: center;">
                                        <button onclick="editPurchase({{ $purchase->id }})" class="btn-action" style="background: #dbeafe; color: var(--primary);" title="Modifier">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <button onclick="deletePurchase({{ $purchase->id }})" class="btn-action" style="background: #fee2e2; color: var(--danger);" title="Supprimer">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @else
                <div class="empty-state">
                    <i class="fas fa-inbox"></i>
                    <p style="font-size: 1.25rem; font-weight: 600; color: #111827; margin-bottom: 0.5rem;">Aucun achat enregistré</p>
                    <p style="font-size: 0.95rem; color: #6b7280;">Commencez par ajouter votre premier achat ci-dessus</p>
                </div>
            @endif
        </div>
    </div>

</div>

@endsection

@push('scripts')
<script>
    console.log('💰 Comptabilité Page Loaded');

    // Add Purchase
    document.getElementById('addPurchaseForm').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const formData = new FormData(this);
        const data = Object.fromEntries(formData);
        
        // Calculer le montant total
        data.total_amount = (parseFloat(data.quantity) * parseFloat(data.unit_price)).toFixed(2);
        
        const submitBtn = this.querySelector('button[type="submit"]');
        const originalText = submitBtn.innerHTML;
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Enregistrement...';
        
        fetch('{{ route("comptabilite.store") }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        })
        .then(r => r.json())
        .then(data => {
            submitBtn.disabled = false;
            submitBtn.innerHTML = originalText;
            
            if (data.success) {
                showSuccessModal('✅ Achat Enregistré!', `${data.purchase.supplier_name} - ${data.purchase.total_amount} MAD`);
                setTimeout(() => location.reload(), 2000);
            } else {
                showErrorModal('❌ Erreur', data.message);
            }
        })
        .catch(e => {
            submitBtn.disabled = false;
            submitBtn.innerHTML = originalText;
            showErrorModal('❌ Erreur', e.message);
        });
    });

    function deletePurchase(id) {
        if (!confirm('❌ Êtes-vous sûr de vouloir supprimer cet achat?')) return;
        
        fetch(`/comptabilite/${id}`, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json'
            }
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                showSuccessModal('✅ Achat Supprimé!', 'L\'achat a été supprimé avec succès.');
                setTimeout(() => {
                    const row = document.getElementById(`purchase-${id}`);
                    if (row) row.remove();
                    location.reload();
                }, 1500);
            } else {
                showErrorModal('❌ Erreur', data.message);
            }
        })
        .catch(e => showErrorModal('❌ Erreur', e.message));
    }

    function editPurchase(id) {
        alert('✏️ La modification sera disponible bientôt!');
    }

    function showSuccessModal(title, content) {
        const modal = document.createElement('div');
        modal.className = 'modal-overlay active';
        modal.innerHTML = `
            <div class="modal-content">
                <div class="modal-header" style="background: linear-gradient(to right, var(--success), #059669);">
                    <h2>${title}</h2>
                </div>
                <div class="modal-body">
                    <div style="text-align: center; padding: 1rem;">
                        <div style="font-size: 3rem; margin-bottom: 1rem;">✅</div>
                        <div style="font-size: 1.1rem; font-weight: 600; color: #166534;">${content}</div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button onclick="this.closest('.modal-overlay').remove()" class="btn" style="background: var(--success); color: white; width: 100%;">
                        Fermer
                    </button>
                </div>
            </div>
        `;
        document.body.appendChild(modal);
        modal.onclick = (e) => {
            if (e.target === modal) modal.remove();
        };
    }

    function showErrorModal(title, content) {
        const modal = document.createElement('div');
        modal.className = 'modal-overlay active';
        modal.innerHTML = `
            <div class="modal-content">
                <div class="modal-header" style="background: linear-gradient(to right, var(--danger), #dc2626);">
                    <h2>${title}</h2>
                </div>
                <div class="modal-body">
                    <div style="text-align: center; padding: 1rem;">
                        <div style="font-size: 3rem; margin-bottom: 1rem;">❌</div>
                        <div style="font-size: 1.1rem; font-weight: 600; color: #991b1b;">${content}</div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button onclick="this.closest('.modal-overlay').remove()" class="btn" style="background: var(--danger); color: white; width: 100%;">
                        Fermer
                    </button>
                </div>
            </div>
        `;
        document.body.appendChild(modal);
        modal.onclick = (e) => {
            if (e.target === modal) modal.remove();
        };
    }

    console.log('✅ Comptabilité Ready!');
</script>
@endpush