@extends('layouts.app')

@section('content')

        <div class="flex justify-between items-center">
            <h2 class="font-semibold text-xl text-[#d4af37] leading-tight">
                {{ app()->getLocale() == 'ar' ? 'سندات الصرف' : 'Payment Vouchers' }}
            </h2>
            <a href="{{ route('admin.vouchers.create') }}" class="bg-[#d4af37] text-black px-4 py-2 rounded-lg font-bold text-sm hover:bg-[#b08d2a] transition-all">
                {{ app()->getLocale() == 'ar' ? 'إنشاء سند صرف جديد' : 'Create New Voucher' }}
            </a>
        </div>


    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-[#111] border border-gray-800 rounded-2xl overflow-hidden shadow-xl">
                <div class="p-6 border-b border-gray-800">
                    <form method="GET" class="grid grid-cols-1 md:grid-cols-4 gap-4">
                        <input type="text" name="voucher_number" placeholder="{{ app()->getLocale() == 'ar' ? 'رقم السند' : 'Voucher Number' }}" value="{{ request('voucher_number') }}" class="bg-black border-gray-800 rounded-lg px-4 py-2 text-white text-sm">
                        <select name="status" class="bg-black border-gray-800 rounded-lg px-4 py-2 text-white text-sm">
                            <option value="">{{ app()->getLocale() == 'ar' ? 'كل الحالات' : 'All Statuses' }}</option>
                            <option value="confirmed" {{ request('status') == 'confirmed' ? 'selected' : '' }}>Confirmed</option>
                            <option value="cancelled" {{ request('status') == 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                        </select>
                        <button type="submit" class="bg-gray-800 text-white px-4 py-2 rounded-lg text-sm font-bold hover:bg-gray-700">
                            {{ app()->getLocale() == 'ar' ? 'بحث' : 'Search' }}
                        </button>
                    </form>
                </div>

                <div class="overflow-x-auto">
                    <table class="w-full text-right">
                        <thead class="bg-black text-gray-500 text-xs uppercase tracking-wider">
                            <tr>
                                <th class="px-6 py-4">{{ app()->getLocale() == 'ar' ? 'رقم السند' : 'Voucher #' }}</th>
                                <th class="px-6 py-4">{{ app()->getLocale() == 'ar' ? 'التاريخ' : 'Date' }}</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' ? 'السبب' : 'Reason' }}</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($vouchers as $voucher)
                            <tr class="hover:bg-white/5 transition-colors">
                                <td class="px-6 py-4 font-bold text-[#d4af37]">{{ $voucher->voucher_number }}</td>
                                <td class="px-6 py-4 text-white text-sm">{{ $voucher->voucher_date->format('Y-m-d') }}</td>
                                <td class="px-6 py-4 text-white text-sm">{{ $voucher->customer->name ?? '-' }}</td>
                                <td class="px-6 py-4 text-white font-bold">{{ number_format($voucher->amount, 2) }} SAR</td>
                                <td class="px-6 py-4 text-gray-400 text-sm">{{ $voucher->reason }}</td>
                                <td class="px-6 py-4">
                                    <span class="px-2 py-1 rounded-full text-[10px] font-bold {{ $voucher->status == 'confirmed' ? 'bg-green-500/10 text-green-500' : 'bg-red-500/10 text-red-500' }}">
                                        {{ strtoupper($voucher->status) }}
                                    </span>
                                </td>
                                <td class="px-6 py-4">
                                    <div class="flex gap-2">
                                        <a href="{{ route('admin.vouchers.show', $voucher) }}" class="text-blue-400 hover:text-blue-300">View</a>
                                        <a href="{{ route('admin.vouchers.pdf', $voucher) }}" target="_blank" class="text-green-400 hover:text-green-300">Print</a>
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                <div class="p-4 border-t border-gray-800">
                    {{ $vouchers->links() }}
                </div>
            </div>
        </div>
    </div>
</div>
@endsection