@extends('layouts.app')

@section('content')
<div style="padding: 2rem;">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">
        <h1 style="color: #d4af37; margin: 0;">الفاتورات</h1>
        <a href="{{ route('admin.invoices.create') }}" style="background: #d4af37; color: black; padding: 0.75rem 1.5rem; border-radius: 0.5rem; text-decoration: none; font-weight: bold;">
            + إنشاء فاتورة جديدة
        </a>
    </div>

    <div style="background: #111; border: 1px solid #333; border-radius: 1rem; padding: 1.5rem; margin-bottom: 2rem;">
        <form method="GET" action="{{ route('admin.invoices.index') }}" style="display: grid; gap: 1rem;">
            <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;">
                <div>
                    <label style="color: #999; font-size: 0.75rem;">الفرع</label>
                    <select name="branch_id" style="width: 100%; padding: 0.5rem; background: #222; border: 1px solid #333; color: white; border-radius: 0.5rem;">
                        <option value="">الكل</option>
                        @foreach($branches as $branch)
                            <option value="{{ $branch->id }}" {{ request('branch_id') == $branch->id ? 'selected' : '' }}>
                                {{ $branch->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label style="color: #999; font-size: 0.75rem;">الحالة</label>
                    <select name="status" style="width: 100%; padding: 0.5rem; background: #222; border: 1px solid #333; color: white; border-radius: 0.5rem;">
                        <option value="">الكل</option>
                        <option value="draft" {{ request('status') == 'draft' ? 'selected' : '' }}>مسودة</option>
                        <option value="issued" {{ request('status') == 'issued' ? 'selected' : '' }}>صادرة</option>
                        <option value="partially_paid" {{ request('status') == 'partially_paid' ? 'selected' : '' }}>مدفوعة جزئياً</option>
                        <option value="paid" {{ request('status') == 'paid' ? 'selected' : '' }}>مدفوعة</option>
                        <option value="cancelled" {{ request('status') == 'cancelled' ? 'selected' : '' }}>ملغاة</option>
                    </select>
                </div>
                <div>
                    <label style="color: #999; font-size: 0.75rem;">العميل</label>
                    <select name="customer_id" style="width: 100%; padding: 0.5rem; background: #222; border: 1px solid #333; color: white; border-radius: 0.5rem;">
                        <option value="">الكل</option>
                        @foreach($customers as $customer)
                            <option value="{{ $customer->id }}" {{ request('customer_id') == $customer->id ? 'selected' : '' }}>
                                {{ $customer->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div style="display: flex; align-items: flex-end;">
                    <button type="submit" style="width: 100%; padding: 0.5rem; background: #d4af37; color: black; border: none; border-radius: 0.5rem; font-weight: bold; cursor: pointer;">
                        تصفية
                    </button>
                </div>
            </div>
        </form>
    </div>

    @if($invoices->count())
    <div style="background: #111; border: 1px solid #333; border-radius: 1rem; padding: 1.5rem; overflow-x: auto;">
        <table style="width: 100%; border-collapse: collapse;">
            <thead>
                <tr>
                    <th style="padding: 1rem; text-align: left; color: #d4af37; border-bottom: 2px solid #333;">رقم الفاتورة</th>
                    <th style="padding: 1rem; text-align: left; color: #d4af37; border-bottom: 2px solid #333;">العميل</th>
                    <th style="padding: 1rem; text-align: left; color: #d4af37; border-bottom: 2px solid #333;">التاريخ</th>
                    <th style="padding: 1rem; text-align: left; color: #d4af37; border-bottom: 2px solid #333;">المبلغ</th>
                    <th style="padding: 1rem; text-align: left; color: #d4af37; border-bottom: 2px solid #333;">المدفوع</th>
                    <th style="padding: 1rem; text-align: left; color: #d4af37; border-bottom: 2px solid #333;">المتبقي</th>
                    <th style="padding: 1rem; text-align: left; color: #d4af37; border-bottom: 2px solid #333;">الحالة</th>
                    <th style="padding: 1rem; text-align: left; color: #d4af37; border-bottom: 2px solid #333;">الإجراءات</th>
                </tr>
            </thead>
            <tbody>
                @foreach($invoices as $invoice)
                <tr style="border-bottom: 1px solid #333;">
                    <td style="padding: 1rem; color: white; font-weight: bold;">
                        <a href="{{ route('admin.invoices.show', $invoice) }}" style="color: #d4af37; text-decoration: none;">
                            {{ $invoice->invoice_number }}
                        </a>
                    </td>
                    <td style="padding: 1rem; color: white;">{{ $invoice->customer->name ?? '-' }}</td>
                    <td style="padding: 1rem; color: white;">{{ $invoice->invoice_date->format('Y-m-d') }}</td>
                    <td style="padding: 1rem; color: #10b981;">{{ number_format($invoice->total_amount, 2) }} ر.س</td>
                    <td style="padding: 1rem; color: #22c55e;">{{ number_format($invoice->paid_amount, 2) }} ر.س</td>
                    <td style="padding: 1rem; color: #ef4444;">{{ number_format($invoice->remaining_amount, 2) }} ر.س</td>
                    <td style="padding: 1rem;">
                        <span style="font-size: 0.875rem; padding: 0.25rem 0.75rem; border-radius: 0.25rem;
                            @if($invoice->status == 'draft')
                                background: rgba(107, 114, 128, 0.2); color: #9ca3af;
                            @elseif($invoice->status == 'issued')
                                background: rgba(59, 130, 246, 0.2); color: #3b82f6;
                            @elseif($invoice->status == 'partially_paid')
                                background: rgba(245, 158, 11, 0.2); color: #f59e0b;
                            @elseif($invoice->status == 'paid')
                                background: rgba(34, 197, 94, 0.2); color: #22c55e;
                            @else
                                background: rgba(239, 68, 68, 0.2); color: #ef4444;
                            @endif
                        ">
                            @switch($invoice->status)
                                @case('draft'): مسودة @break
                                @case('issued'): صادرة @break
                                @case('partially_paid'): مدفوعة جزئياً @break
                                @case('paid'): مدفوعة @break
                                @case('cancelled'): ملغاة @break
                            @endswitch
                        </span>
                    </td>
                    <td style="padding: 1rem;">
                        <div style="display: flex; gap: 0.5rem;">
                            <a href="{{ route('admin.invoices.show', $invoice) }}" style="background: #3b82f6; color: white; padding: 0.25rem 0.75rem; border-radius: 0.25rem; text-decoration: none; font-size: 0.875rem;">
                                عرض
                            </a>
                            <a href="{{ route('admin.invoices.print', $invoice) }}" target="_blank" style="background: #10b981; color: white; padding: 0.25rem 0.75rem; border-radius: 0.25rem; text-decoration: none; font-size: 0.875rem;">
                                طباعة
                            </a>
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    <div style="display: flex; justify-content: center; margin-top: 2rem;">
        {{ $invoices->links() }}
    </div>
    @else
    <div style="background: #111; border: 1px solid #333; border-radius: 1rem; padding: 2rem; text-align: center;">
        <p style="color: #999;">لا توجد فاتورات</p>
    </div>
    @endif
</div>
@endsection