@extends('layouts.provider')

@section('title', 'Mes Achats')
@section('page-title', 'Mes Achats')

@section('content')
<div class="space-y-6">
    <!-- Header -->
    <x-card>
        <div class="flex justify-between items-center">
            <div>
                <h2 class="text-xl font-bold text-gray-900 dark:text-white">Mes Achats</h2>
                <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Gérez vos achats professionnels</p>
            </div>
            <x-button href="{{ route('provider.expenses.create') }}" size="sm">
                <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                </svg>
                Nouvelle
            </x-button>
        </div>
    </x-card>

    <!-- Filtres -->
    <x-card>
        <form method="GET" action="{{ route('provider.expenses.index') }}" class="space-y-4">
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                    <x-input name="search" :value="request('search')" placeholder="Rechercher..." />
                    <x-select name="expense_type_id">
                        <option value="">Tous les types</option>
                        @foreach($expenseTypes as $type)
                            <option value="{{ $type->id }}" {{ request('expense_type_id') == $type->id ? 'selected' : '' }}>
                                {{ $type->name }}
                            </option>
                        @endforeach
                    </x-select>
                    <x-select name="supplier_id">
                        <option value="">Tous les fournisseurs</option>
                        @foreach($suppliers as $supplier)
                            <option value="{{ $supplier->id }}" {{ request('supplier_id') == $supplier->id ? 'selected' : '' }}>
                                {{ $supplier->name }}
                            </option>
                        @endforeach
                    </x-select>
                    <x-select name="status">
                        <option value="">Tous les statuts</option>
                        <option value="unpaid" {{ request('status') === 'unpaid' ? 'selected' : '' }}>Non payée</option>
                        <option value="partly_paid" {{ request('status') === 'partly_paid' ? 'selected' : '' }}>Partiellement payée</option>
                        <option value="paid" {{ request('status') === 'paid' ? 'selected' : '' }}>Payée</option>
                        <option value="overdue" {{ request('status') === 'overdue' ? 'selected' : '' }}>En retard</option>
                        <option value="cancelled" {{ request('status') === 'cancelled' ? 'selected' : '' }}>Annulée</option>
                    </x-select>
                </div>
                <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                    <x-input type="date" name="date_from" :value="request('date_from')" />
                    <x-input type="date" name="date_to" :value="request('date_to')" />
                    <div class="flex gap-2">
                        <x-button type="submit" variant="secondary" class="flex-1">Filtrer</x-button>
                        @if(request()->hasAny(['search', 'expense_type_id', 'supplier_id', 'status', 'date_from', 'date_to']))
                            <x-button href="{{ route('provider.expenses.index') }}" variant="secondary">Effacer</x-button>
                        @endif
                    </div>
                </div>
        </form>
    </x-card>

    @if($expenses->count() > 0)
        <!-- Mobile cards -->
        <div class="space-y-3">
            @foreach($expenses as $expense)
            <x-card>
                <div class="flex justify-between items-start">
                    <div class="flex-1">
                        <div class="flex items-center mb-2">
                            @if($expense->expenseType->color)
                                <div class="w-4 h-4 rounded-full mr-2" style="background-color: {{ $expense->expenseType->color }}"></div>
                            @endif
                            <h3 class="font-semibold text-gray-900 dark:text-white">{{ $expense->expenseType->name }}</h3>
                            @if($expense->isOverdue())
                                <span class="ml-2 px-2 py-0.5 text-xs bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200 rounded-full">En retard</span>
                            @else
                                <span class="ml-2 px-2 py-0.5 text-xs rounded-full {{ $expense->status === 'paid' ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200' : ($expense->status === 'partly_paid' ? 'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200' : ($expense->status === 'cancelled' ? 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300' : 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200')) }}">{{ $expense->statusLabel }}</span>
                            @endif
                        </div>
                        <p class="text-lg font-bold text-gray-900 dark:text-white mb-1">{{ format_currency($expense->amount) }} {{ $expense->currency }}</p>
                        @if($expense->supplier)
                            <p class="text-sm text-blue-600 dark:text-blue-400 mb-1">{{ $expense->supplier->name }}</p>
                        @endif
                        @if($expense->supplier_invoice_no)
                            <p class="text-sm text-gray-600 dark:text-gray-400 mb-1">Facture: {{ $expense->supplier_invoice_no }}</p>
                        @endif
                        <p class="text-sm text-gray-600 dark:text-gray-400 mb-1">
                            @if($expense->invoice_date)
                                Facture du {{ $expense->invoice_date->format('d/m/Y') }}
                            @else
                                {{ $expense->expense_date->format('d/m/Y') }}
                            @endif
                        </p>
                        @if($expense->due_date && !in_array($expense->status, ['paid', 'cancelled']))
                            <p class="text-sm {{ $expense->isOverdue() ? 'text-red-600 dark:text-red-400' : 'text-gray-500 dark:text-gray-400' }}">
                                Échéance: {{ $expense->due_date->format('d/m/Y') }}
                            </p>
                        @endif
                    </div>
                    <div class="flex space-x-2">
                        <x-button href="{{ route('provider.expense-payments.index', $expense->uuid) }}" variant="secondary" size="sm">Paiements</x-button>
                        <x-button href="{{ route('provider.expenses.edit', $expense->uuid) }}" variant="secondary" size="sm">Modifier</x-button>
                        <form action="{{ route('provider.expenses.destroy', $expense->uuid) }}" method="POST" class="inline">
                            @csrf
                            @method('DELETE')
                            <x-button type="submit" variant="danger" size="sm" onclick="return confirm('Êtes-vous sûr de vouloir supprimer cet achat ?')">Supprimer</x-button>
                        </form>
                    </div>
                </div>
            </x-card>
            @endforeach
        </div>

        <!-- Pagination -->
        <div class="mt-6">
            {{ $expenses->appends(request()->query())->links() }}
        </div>
    @else
        <x-card class="text-center py-12">
            <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z" />
            </svg>
            <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-white">Aucun achat</h3>
            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Commencez par enregistrer votre premier achat.</p>
            <div class="mt-6">
                <x-button href="{{ route('provider.expenses.create') }}">
                    <svg class="-ml-1 mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                    </svg>
                    Nouvel achat
                </x-button>
            </div>
        </x-card>
    @endif
</div>
@endsection