@extends('layouts.app')

@section('content')
<div class="py-12">
    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
            <div class="p-6 text-gray-900">
                <div class="container-fluid">
                    <div class="row mb-4">
                        <!-- Total des paiements -->
                        <div class="col-xl-3 col-md-6 mb-4">
                            <div class="card bg-primary text-white">
                                <div class="card-body">
                                    <h5 class="card-title">TOTAL DES PAIEMENTS</h5>
                                    <h2 class="mb-0">{{ number_format($totalPayments, 3, ',', ' ') }} TND</h2>
                                </div>
                            </div>
                        </div>

                        <!-- Paiements du mois -->
                        <div class="col-xl-3 col-md-6 mb-4">
                            <div class="card bg-success text-white">
                                <div class="card-body">
                                    <h5 class="card-title">PAIEMENTS DU MOIS</h5>
                                    <h2 class="mb-0">{{ number_format($monthlyPayments, 3, ',', ' ') }} TND</h2>
                                </div>
                            </div>
                        </div>

                        <!-- Nombre de fournisseurs -->
                        <div class="col-xl-3 col-md-6 mb-4">
                            <div class="card bg-info text-white">
                                <div class="card-body">
                                    <h5 class="card-title">FOURNISSEURS</h5>
                                    <h2 class="mb-0">{{ $suppliersCount }}</h2>
                                </div>
                            </div>
                        </div>

                        <!-- Nombre de sociétés -->
                        <div class="col-xl-3 col-md-6 mb-4">
                            <div class="card bg-warning text-white">
                                <div class="card-body">
                                    <h5 class="card-title">SOCIÉTÉS</h5>
                                    <h2 class="mb-0">{{ $companiesCount }}</h2>
                                </div>
                            </div>
                        </div>
                    </div>

                    <form method="GET" action="{{ route('dashboard') }}" class="mb-4">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="card">
                                    <div class="card-header">
                                        <h5 class="card-title mb-0">Derniers paiements</h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="table-responsive">
                                            <table class="table">
                                                <thead>
                                                    <tr>
                                                        <th>Date</th>
                                                        <th>Fournisseur</th>
                                                        <th>Banque</th>
                                                        <th class="text-end">Montant</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach($latestPayments as $payment)
                                                    <tr>
                                                        <td>{{ $payment->date->format('d/m/Y') }}</td>
                                                        <td>{{ $payment->supplier->name }}</td>
                                                        <td>{{ $payment->bank }}</td>
                                                        <td class="text-end">{{ number_format($payment->amount, 3, ',', ' ') }} TND</td>
                                                    </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="card">
                                    <div class="card-header">
                                        <h5 class="card-title mb-3">Paiements à venir</h5>
                                        <div class="row g-2">
                                            <div class="col-md-4">
                                                <select name="bank" class="form-select">
                                                    <option value="">Toutes les banques</option>
                                                    @foreach($banks as $bankKey => $bankName)
                                                        <option value="{{ $bankKey }}" {{ request('bank') == $bankKey ? 'selected' : '' }}>
                                                            {{ $bankName }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="col-md-4">
                                                <input type="month" name="date" class="form-control" value="{{ $selectedDate ?? '' }}">
                                            </div>
                                            <div class="col-md-4">
                                                <select name="supplier_id" class="form-select">
                                                    <option value="">Tous les fournisseurs</option>
                                                    @foreach($suppliers as $supplier)
                                                        <option value="{{ $supplier->id }}" {{ request('supplier_id') == $supplier->id ? 'selected' : '' }}>
                                                            {{ $supplier->name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="col-12 text-end">
                                                <button type="submit" class="btn btn-primary">Filtrer</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <div class="table-responsive">
                                            <table class="table">
                                                <thead>
                                                    <tr>
                                                        <th>Date d'échéance</th>
                                                        <th>Fournisseur</th>
                                                        <th>Banque</th>
                                                        <th class="text-end">Montant</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach($upcomingPayments as $payment)
                                                    <tr>
                                                        <td>{{ $payment->due_date->format('d/m/Y') }}</td>
                                                        <td>{{ $payment->supplier->name }}</td>
                                                        <td>{{ $payment->bank }}</td>
                                                        <td class="text-end">{{ number_format($payment->amount, 3, ',', ' ') }} TND</td>
                                                    </tr>
                                                    @endforeach
                                                </tbody>
                                                <tfoot>
                                                    <tr>
                                                        <td colspan="3" class="text-end fw-bold">Total :</td>
                                                        <td class="text-end fw-bold">{{ number_format($upcomingTotal, 3, ',', ' ') }} TND</td>
                                                    </tr>
                                                </tfoot>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
function updateMonthlyPayments(selectedDate) {
    window.location.href = `{{ route('dashboard') }}?selected_date=${selectedDate}`;
}

function filterUpcomingPayments() {
    const month = document.getElementById('upcoming_month').value;
    const supplier = document.getElementById('supplier_filter').value;
    const params = new URLSearchParams(window.location.search);
    
    if (month) params.set('upcoming_month', month);
    else params.delete('upcoming_month');
    
    if (supplier) params.set('supplier_id', supplier);
    else params.delete('supplier_id');
    
    window.location.href = `{{ route('dashboard') }}?${params.toString()}`;
}

function resetFilters() {
    document.getElementById('upcoming_month').value = '';
    document.getElementById('supplier_filter').value = '';
    filterUpcomingPayments();
}
</script>
@endpush