@extends('layouts.app')

@section('content')

<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; margin-top: 15px;">
    <h2 style="color: #d4af37; font-size: 1.5rem; font-weight: bold;">
        {{ app()->getLocale() == 'ar' ? 'سندات القبض' : 'Receipts' }}
    </h2>
    <a href="{{ route('admin.receipts.create') }}" style="background: #d4af37; color: black; padding: 0.5rem 1rem; border-radius: 0.5rem; text-decoration: none; font-size: 0.875rem; font-weight: bold;">
        {{ app()->getLocale() == 'ar' ? '+ إضافة سند قبض' : '+ New Receipt' }}
    </a>
</div>

<div>
    <!-- Search Form -->
    <div class="bg-[#111] border border-gray-800 rounded-2xl p-6 mb-8">
                <form action="{{ route('admin.receipts.index') }}" method="GET">
                    <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
                        <div>
                            <label class="block text-xs text-gray-500 mb-2 uppercase tracking-wider">{{ app()->getLocale() == 'ar' ? 'رقم السند' : 'Receipt Number' }}</label>
                            <input type="text" name="receipt_number" value="{{ request('receipt_number') }}" class="w-full bg-black border-gray-800 rounded-lg px-4 py-2.5 text-white focus:border-[#d4af37] outline-none text-sm" placeholder="RC-...">
                        </div>

                        <div>
                            <label class="block text-xs text-gray-500 mb-2 uppercase tracking-wider">{{ app()->getLocale() == 'ar' ? 'طريقة الدفع' : 'Payment Method' }}</label>
                            <select name="payment_method" class="w-full bg-black border-gray-800 rounded-lg px-4 py-2.5 text-white focus:border-[#d4af37] outline-none text-sm">
                                <option value="">{{ app()->getLocale() == 'ar' ? 'الكل' : 'All' }}</option>
                                <option value="cash" {{ request('payment_method') == 'cash' ? 'selected' : '' }}>Cash</option>
                                <option value="mada" {{ request('payment_method') == 'mada' ? 'selected' : '' }}>Mada</option>
                                <option value="visa" {{ request('payment_method') == 'visa' ? 'selected' : '' }}>Visa/MC</option>
                                <option value="stcpay" {{ request('payment_method') == 'stcpay' ? 'selected' : '' }}>STC Pay</option>
                                <option value="transfer" {{ request('payment_method') == 'transfer' ? 'selected' : '' }}>Transfer</option>
                            </select>
                        </div>

                        <div>
                            <label class="block text-xs text-gray-500 mb-2 uppercase tracking-wider">{{ app()->getLocale() == 'ar' ? 'من تاريخ' : 'Date From' }}</label>
                            <input type="date" name="date_from" value="{{ request('date_from') }}" class="w-full bg-black border-gray-800 rounded-lg px-4 py-2.5 text-white focus:border-[#d4af37] outline-none text-sm">
                        </div>

                        <div>
                            <label class="block text-xs text-gray-500 mb-2 uppercase tracking-wider">{{ app()->getLocale() == 'ar' ? 'إلى تاريخ' : 'Date To' }}</label>
                            <input type="date" name="date_to" value="{{ request('date_to') }}" class="w-full bg-black border-gray-800 rounded-lg px-4 py-2.5 text-white focus:border-[#d4af37] outline-none text-sm">
                        </div>
                    </div>

                    <div class="flex justify-end mt-6">
                        <button type="submit" class="px-8 py-2 rounded-lg bg-[#d4af37] text-black text-sm font-bold hover:bg-[#b08d2a] transition-colors">
                            {{ app()->getLocale() == 'ar' ? 'بحث' : 'Search' }}
                        </button>
                    </div>
                </form>
            </div>

            <div class="bg-[#111] border border-gray-800 rounded-2xl overflow-hidden">
                <table class="w-full {{ app()->getLocale() == 'ar' ? 'text-right' : 'text-left' }}">
                    <thead class="bg-black/50 text-gray-500 text-xs uppercase">
                        <tr>
                            <th class="px-6 py-4">{{ app()->getLocale() == 'ar' ? 'رقم السند' : 'Receipt #' }}</th>
                            <th class="px-6 py-4">{{ app()->getLocale() == 'ar' ? 'العميل' : 'Customer' }}</th>
                            <th class="px-6 py-4">{{ app()->getLocale() == 'ar' ? 'المبلغ' : 'Amount' }}</th>
                            <th class="px-6 py-4">{{ app()->getLocale() == 'ar' ? 'طريقة الدفع' : 'Method' }}</th>
                            <th class="px-6 py-4">{{ app()->getLocale() == 'ar' ? 'التاريخ' : 'Date' }}</th>
                            <th class="px-6 py-4">{{ app()->getLocale() == 'ar' ? 'الحالة' : 'Status' }}</th>
                            <th class="px-6 py-4">{{ app()->getLocale() == 'ar' ? 'العمليات' : 'Actions' }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-800">
                        @foreach($receipts as $receipt)
                        <tr class="hover:bg-white/5 transition-colors">
                            <td class="px-6 py-4 text-sm font-bold text-[#d4af37]">{{ $receipt->receipt_number }}</td>
                            <td class="px-6 py-4 text-sm">{{ $receipt->customer->name }}</td>
                            <td class="px-6 py-4 text-sm">{{ number_format($receipt->amount, 2) }} SAR</td>
                            <td class="px-6 py-4 text-xs uppercase">{{ $receipt->payment_method }}</td>
                            <td class="px-6 py-4 text-sm">{{ $receipt->receipt_date->format('Y-m-d') }}</td>
                            <td class="px-6 py-4">
                                <span class="text-[10px] px-2 py-0.5 rounded-full 
                                    {{ $receipt->status == 'confirmed' ? 'bg-green-500/20 text-green-400' : 'bg-red-500/20 text-red-400' }}">
                                    {{ strtoupper($receipt->status) }}
                                </span>
                            </td>
                            <td class="px-6 py-4 space-x-2 space-x-reverse">
                                <a href="{{ route('admin.receipts.show', $receipt->id) }}" class="text-blue-400 hover:text-blue-300 text-xs">{{ app()->getLocale() == 'ar' ? 'عرض' : 'View' }}</a>
                                <a href="{{ route('admin.receipts.pdf', $receipt->id) }}" target="_blank" class="text-gray-400 hover:text-white text-xs">{{ app()->getLocale() == 'ar' ? 'طباعة' : 'Print' }}</a>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
                <div class="p-4 border-t border-gray-800">
                    {{ $receipts->links() }}
                </div>
            </div>
        </div>
    </div>



@endsection