@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' ? 'تفاصيل المطالبة' : 'Claim Details' }} - {{ $insurance_claim->claim_number }}
    </h2>
    <a href="{{ route('admin.insurance-claims.index') }}" style="background: #666; color: white; padding: 0.5rem 1rem; border-radius: 0.5rem; text-decoration: none;">
        {{ app()->getLocale() == 'ar' ? 'عودة' : 'Back' }}
    </a>
</div>

<div style="background: #111; border: 1px solid #333; border-radius: 1rem; padding: 2rem; max-width: 800px; margin: 0 auto;">
    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 2rem;">
        <div>
            <div style="color: #999; font-size: 0.75rem; text-transform: uppercase; margin-bottom: 0.5rem;">{{ app()->getLocale() == 'ar' ? 'السيارة' : 'Vehicle' }}</div>
            <div style="font-weight: bold; color: white; font-size: 1rem;">{{ $insurance_claim->car->brand?->name }} ({{ $insurance_claim->car->plate_number }})</div>
        </div>
        <div>
            <div style="color: #999; font-size: 0.75rem; text-transform: uppercase; margin-bottom: 0.5rem;">{{ app()->getLocale() == 'ar' ? 'رقم المطالبة' : 'Claim Number' }}</div>
            <div style="font-weight: bold; color: #d4af37; font-family: monospace; font-size: 1rem;">{{ $insurance_claim->claim_number }}</div>
        </div>
    </div>

    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 2rem;">
        <div>
            <div style="color: #999; font-size: 0.75rem; text-transform: uppercase; margin-bottom: 0.5rem;">{{ app()->getLocale() == 'ar' ? 'تاريخ الحادث' : 'Accident Date' }}</div>
            <div style="color: white; font-size: 1rem;">{{ $insurance_claim->accident_date->format('Y-m-d') }}</div>
        </div>
        <div>
            <div style="color: #999; font-size: 0.75rem; text-transform: uppercase; margin-bottom: 0.5rem;">{{ app()->getLocale() == 'ar' ? 'الحالة' : 'Status' }}</div>
            <div style="display: inline-block; padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.85rem; font-weight: bold;
                @if($insurance_claim->claim_status == 'pending') background: rgba(234, 179, 8, 0.2); color: #eab308;
                @elseif($insurance_claim->claim_status == 'accepted') background: rgba(34, 197, 94, 0.2); color: #22c55e;
                @elseif($insurance_claim->claim_status == 'rejected') background: rgba(239, 68, 68, 0.2); color: #ef4444;
                @else background: rgba(107, 114, 128, 0.2); color: #9ca3af; @endif">
                {{ $insurance_claim->claim_status }}
            </div>
        </div>
    </div>

    @if($insurance_claim->rental)
    <div style="margin-bottom: 2rem;">
        <div style="color: #999; font-size: 0.75rem; text-transform: uppercase; margin-bottom: 0.5rem;">{{ app()->getLocale() == 'ar' ? 'العقد المرتبط' : 'Linked Contract' }}</div>
        <div style="color: white; font-size: 1rem;">{{ app()->getLocale() == 'ar' ? 'عقد #' : 'Contract #' }}{{ $insurance_claim->rental->contract_number }}</div>
    </div>
    @endif

    <div style="margin-bottom: 2rem;">
        <div style="color: #999; font-size: 0.75rem; text-transform: uppercase; margin-bottom: 0.5rem;">{{ app()->getLocale() == 'ar' ? 'وصف الحادث' : 'Accident Description' }}</div>
        <div style="color: #ccc; font-size: 0.95rem; line-height: 1.6;">{{ $insurance_claim->description }}</div>
    </div>

    <div style="background: #1a1a1a; border: 1px solid #333; border-radius: 0.75rem; padding: 1.5rem; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; margin-bottom: 2rem;">
        <div>
            <div style="color: #999; font-size: 0.75rem; text-transform: uppercase; margin-bottom: 0.5rem;">{{ app()->getLocale() == 'ar' ? 'التكلفة التقديرية' : 'Est. Damage Cost' }}</div>
            <div style="color: #d4af37; font-weight: bold; font-size: 1.25rem;">{{ number_format($insurance_claim->estimated_damage_cost, 2) }} SAR</div>
        </div>
        <div>
            <div style="color: #999; font-size: 0.75rem; text-transform: uppercase; margin-bottom: 0.5rem;">{{ app()->getLocale() == 'ar' ? 'نسبة التحمل' : 'Deductible' }}</div>
            <div style="color: #ef4444; font-weight: bold; font-size: 1.25rem;">{{ number_format($insurance_claim->deductible_paid, 2) }} SAR</div>
        </div>
        <div>
            <div style="color: #999; font-size: 0.75rem; text-transform: uppercase; margin-bottom: 0.5rem;">{{ app()->getLocale() == 'ar' ? 'المطالبة التأمينية' : 'Insurance Claim' }}</div>
            <div style="color: #22c55e; font-weight: bold; font-size: 1.25rem;">{{ number_format($insurance_claim->estimated_damage_cost - $insurance_claim->deductible_paid, 2) }} SAR</div>
        </div>
    </div>

    <div style="padding-top: 1.5rem; border-top: 1px solid #333;">
        <div style="color: #999; font-size: 0.75rem; text-transform: uppercase; margin-bottom: 0.5rem;">{{ app()->getLocale() == 'ar' ? 'تم التسجيل بواسطة' : 'Recorded By' }}</div>
        <div style="color: white; font-size: 0.95rem;">{{ $insurance_claim->creator->name ?? '---' }} - {{ $insurance_claim->created_at->format('Y-m-d H:i') }}</div>
    </div>
</div>

@endsection