@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' ? 'تفاصيل المصروف' : 'Expense Details' }}
    </h2>
    <div style="display: flex; gap: 1rem;">
        <a href="{{ route('admin.expenses.edit', $expense->id) }}" style="background: #10b981; color: white; padding: 0.5rem 1rem; border-radius: 0.5rem; text-decoration: none; font-size: 0.875rem; font-weight: bold;">
            {{ app()->getLocale() == 'ar' ? 'تعديل' : 'Edit' }}
        </a>
        <a href="{{ route('admin.expenses.index') }}" style="background: #666; color: white; padding: 0.5rem 1rem; border-radius: 0.5rem; text-decoration: none; font-size: 0.875rem; font-weight: bold;">
            {{ app()->getLocale() == 'ar' ? 'عودة' : 'Back' }}
        </a>
    </div>
</div>

<div style="background: #111; border: 1px solid #333; border-radius: 1rem; padding: 2.5rem; max-width: 800px; margin: 0 auto;">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
        <div class="bg-black/40 p-6 rounded-2xl border border-white/5">
            <label class="block text-xs text-gray-500 mb-2 uppercase tracking-wider text-right">{{ app()->getLocale() == 'ar' ? 'المبلغ' : 'Amount' }}</label>
            <div class="text-3xl font-black text-[#d4af37] text-right">
                {{ number_format($expense->amount, 2) }} <span class="text-sm font-bold text-gray-600">SAR</span>
            </div>
        </div>
        <div class="bg-black/40 p-6 rounded-2xl border border-white/5">
            <label class="block text-xs text-gray-500 mb-2 uppercase tracking-wider text-right">{{ app()->getLocale() == 'ar' ? 'الحالة' : 'Status' }}</label>
            <div class="text-right">
                <span class="px-4 py-1.5 rounded-full text-sm font-black {{ $expense->status == 'confirmed' ? 'bg-green-500/20 text-green-400' : 'bg-red-500/20 text-red-400' }}">
                    {{ $expense->status == 'confirmed' ? (app()->getLocale() == 'ar' ? 'مؤكد' : 'Confirmed') : (app()->getLocale() == 'ar' ? 'ملغي' : 'Cancelled') }}
                </span>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
        <div class="text-right">
            <label class="block text-xs text-gray-500 mb-1 uppercase tracking-wider">{{ app()->getLocale() == 'ar' ? 'تاريخ المصروف' : 'Expense Date' }}</label>
            <div class="text-white font-bold">{{ $expense->expense_date->format('Y-m-d') }}</div>
        </div>
        <div class="text-right">
            <label class="block text-xs text-gray-500 mb-1 uppercase tracking-wider">{{ app()->getLocale() == 'ar' ? 'نوع المصروف' : 'Category' }}</label>
            <div class="text-white font-bold">{{ $expense->category->name }}</div>
        </div>
        <div class="text-right">
            <label class="block text-xs text-gray-500 mb-1 uppercase tracking-wider">{{ app()->getLocale() == 'ar' ? 'طريقة الدفع' : 'Payment Method' }}</label>
            <div class="text-white font-bold uppercase">{{ $expense->payment_method }}</div>
        </div>
        <div class="text-right">
            <label class="block text-xs text-gray-500 mb-1 uppercase tracking-wider">{{ app()->getLocale() == 'ar' ? 'الفرع' : 'Branch' }}</label>
            <div class="text-white font-bold">{{ $expense->branch?->name ?? (app()->getLocale() == 'ar' ? 'الرئيسي' : 'Main') }}</div>
        </div>
    </div>

    <div class="mb-8 border-t border-white/5 pt-6">
        <label class="block text-xs text-gray-500 mb-2 uppercase tracking-wider text-right">{{ app()->getLocale() == 'ar' ? 'المرجع' : 'Reference' }}</label>
        <div class="text-right">
            @if($expense->car)
                <div class="bg-blue-500/10 p-4 rounded-xl border border-blue-500/20 inline-block">
                    <span class="text-blue-400 font-bold">🚗 {{ $expense->car->brand?->name }} ({{ $expense->car->plate_number }})</span>
                </div>
            @elseif($expense->rental)
                <div class="bg-green-500/10 p-4 rounded-xl border border-green-500/20 inline-block">
                    <span class="text-green-400 font-bold">📄 {{ app()->getLocale() == 'ar' ? 'عقد' : 'Contract' }} #{{ $expense->rental->contract_number }}</span>
                    <div class="text-[10px] text-gray-500 mt-1">{{ $expense->rental->customer->name }}</div>
                </div>
            @else
                <div class="bg-gray-500/10 p-4 rounded-xl border border-gray-500/20 inline-block">
                    <span class="text-gray-400 font-bold">{{ app()->getLocale() == 'ar' ? 'مصروف عام' : 'General Expense' }}</span>
                </div>
            @endif
        </div>
    </div>

    @if($expense->description)
    <div class="mb-8 border-t border-white/5 pt-6">
        <label class="block text-xs text-gray-500 mb-2 uppercase tracking-wider text-right">{{ app()->getLocale() == 'ar' ? 'الوصف / ملاحظات' : 'Description' }}</label>
        <div class="bg-black/30 p-4 rounded-xl text-gray-300 text-sm text-right leading-relaxed">
            {{ $expense->description }}
        </div>
    </div>
    @endif

    @if($expense->status == 'cancelled')
    <div class="mb-8 bg-red-500/10 p-6 rounded-2xl border border-red-500/20">
        <label class="block text-xs text-red-500 mb-2 uppercase tracking-wider text-right font-black">{{ app()->getLocale() == 'ar' ? 'سبب الإلغاء' : 'Cancellation Reason' }}</label>
        <div class="text-white text-sm text-right font-bold">{{ $expense->cancellation_reason }}</div>
    </div>
    @endif

    @if($expense->attachment)
    <div class="border-t border-white/5 pt-6">
        <label class="block text-xs text-gray-500 mb-4 uppercase tracking-wider text-right">{{ app()->getLocale() == 'ar' ? 'المرفقات' : 'Attachments' }}</label>
        <div class="bg-black/50 p-6 rounded-2xl border border-[#d4af37]/20 flex flex-col items-center gap-4">
            @php
                $extension = pathinfo($expense->attachment, PATHINFO_EXTENSION);
                $isImage = in_array(strtolower($extension), ['jpg', 'jpeg', 'png', 'gif']);
            @endphp

            @if($isImage)
                <img src="{{ asset('storage/' . $expense->attachment) }}" class="max-w-full rounded-lg shadow-2xl border border-white/10">
            @else
                <div class="w-16 h-16 bg-[#d4af37]/10 flex items-center justify-center rounded-2xl text-[#d4af37]">
                    <i class="fa-solid fa-file-pdf text-3xl"></i>
                </div>
            @endif

            <a href="{{ asset('storage/' . $expense->attachment) }}" target="_blank" class="px-8 py-2 bg-[#d4af37] text-black font-black rounded-xl hover:bg-[#b08d2a] transition-all flex items-center gap-2">
                <i class="fa-solid fa-download"></i> {{ app()->getLocale() == 'ar' ? 'تحميل المرفق' : 'Download Attachment' }}
            </a>
        </div>
    </div>
    @endif

    <div class="mt-8 border-t border-white/5 pt-6 text-right">
        <div class="text-[10px] text-gray-600 uppercase tracking-widest">
            {{ app()->getLocale() == 'ar' ? 'بواسطة:' : 'Created By:' }} {{ $expense->creator->name }} 
            <span class="mx-2">|</span> 
            {{ app()->getLocale() == 'ar' ? 'تاريخ الإنشاء:' : 'Created At:' }} {{ $expense->created_at->format('Y-m-d H:i') }}
        </div>
    </div>
</div>

@endsection