@extends('layouts.app')

@section('content')

        <h2 class="font-semibold text-xl text-red-400 leading-tight">
            {{ app()->getLocale() == 'ar' ? 'إدارة المخالفات' : 'Violations Management' }}
        </h2>


    <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">
                <table class="w-full text-left">
                    <thead class="bg-black/50 text-xs text-gray-500 uppercase">
                        <tr>
                            <th class="px-6 py-4">Contract</th>
                            <th class="px-6 py-4">Customer</th>
                            <th class="px-6 py-4">Description</th>
                            <th class="px-6 py-4">Amount</th>
                            <th class="px-6 py-4">Status</th>
                            <th class="px-6 py-4">Action</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-800">
                        @foreach($violations as $violation)
                        <tr class="hover:bg-white/5 transition-colors">
                            <td class="px-6 py-4">
                                <a href="{{ route('admin.rentals.show', $violation->rental_id) }}" class="text-[#d4af37] font-bold text-sm hover:underline">
                                    {{ $violation->rental->contract_number }}
                                </a>
                                <div class="text-[10px] text-gray-500">{{ $violation->rental->car->title }}</div>
                            </td>
                            <td class="px-6 py-4 text-sm text-gray-300">{{ $violation->rental->customer->name }}</td>
                            <td class="px-6 py-4 text-sm text-gray-400">{{ $violation->description }}</td>
                            <td class="px-6 py-4 text-sm text-red-400 font-bold">{{ number_format($violation->amount, 2) }} SAR</td>
                            <td class="px-6 py-4">
                                <span class="text-[10px] px-2 py-0.5 rounded-full 
                                    {{ $violation->status == 'paid' ? 'bg-green-500/20 text-green-400' : ($violation->status == 'deducted' ? 'bg-blue-500/20 text-blue-400' : 'bg-red-500/20 text-red-400') }}">
                                    {{ strtoupper($violation->status) }}
                                </span>
                            </td>
                            <td class="px-6 py-4">
                                <form action="{{ route('admin.violations.status', $violation->id) }}" method="POST" class="flex gap-2">
                                    @csrf @method('PATCH')
                                    <select name="status" onchange="this.form.submit()" class="bg-black border-gray-800 rounded px-2 py-1 text-[10px] text-white focus:border-[#d4af37] outline-none">
                                        <option value="pending" {{ $violation->status == 'pending' ? 'selected' : '' }}>Pending</option>
                                        <option value="paid" {{ $violation->status == 'paid' ? 'selected' : '' }}>Paid</option>
                                        <option value="deducted" {{ $violation->status == 'deducted' ? 'selected' : '' }}>Deducted</option>
                                    </select>
                                </form>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
                <div class="p-4 border-t border-gray-800">
                    {{ $violations->links() }}
                </div>
            </div>
        </div>
    </div>
</div>
@endsection