@extends('layouts.app')

@section('content')
<div class="top-bar d-flex justify-content-between align-items-center">
    <h2 class="mb-0">تفاصيل الحوالة #{{ $transfer->id }}</h2>
    <a href="{{ route('transfers.index') }}" class="btn btn-secondary">
        <i class="fas fa-arrow-right"></i>
        رجوع
    </a>
</div>

<div class="row justify-content-center">
    <div class="col-lg-8">
        <div class="form-card">
            <div class="row g-4">
                <div class="col-12">
                    <div class="text-center mb-4">
                        @if($transfer->status == 'pending')
                            <span class="status-badge status-pending fs-5 px-4 py-2">معلقة</span>
                        @elseif($transfer->status == 'completed')
                            <span class="status-badge status-completed fs-5 px-4 py-2">مكتملة</span>
                        @else
                            <span class="status-badge status-cancelled fs-5 px-4 py-2">ملغاة</span>
                        @endif
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="p-3 bg-light rounded">
                        <h6 class="text-muted mb-2">
                            <i class="fas fa-user"></i>
                            المرسل
                        </h6>
                        <p class="mb-1 fw-bold">{{ $transfer->sender_name }}</p>
                        <p class="mb-0 text-muted">{{ $transfer->sender_phone }}</p>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="p-3 bg-light rounded">
                        <h6 class="text-muted mb-2">
                            <i class="fas fa-user-check"></i>
                            المستلم
                        </h6>
                        <p class="mb-1 fw-bold">{{ $transfer->recipient_name }}</p>
                        <p class="mb-0 text-muted">{{ $transfer->recipient_phone }}</p>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="p-3 bg-light rounded">
                        <h6 class="text-muted mb-2">
                            <i class="fas fa-money-bill"></i>
                            المبلغ
                        </h6>
                        <p class="mb-1 fw-bold fs-4">
                            {{ number_format($transfer->amount, 2) }}
                            <span class="text-muted">{{ $transfer->currency }}</span>
                        </p>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="p-3 bg-light rounded">
                        <h6 class="text-muted mb-2">
                            <i class="fas fa-calendar"></i>
                            التاريخ
                        </h6>
                        <p class="mb-1 fw-bold">{{ $transfer->created_at->format('Y-m-d') }}</p>
                        <p class="mb-0 text-muted">{{ $transfer->created_at->format('H:i') }}</p>
                    </div>
                </div>

                @if($transfer->notes)
                <div class="col-12">
                    <div class="p-3 bg-light rounded">
                        <h6 class="text-muted mb-2">
                            <i class="fas fa-sticky-note"></i>
                            ملاحظات
                        </h6>
                        <p class="mb-0">{{ $transfer->notes }}</p>
                    </div>
                </div>
                @endif

                <div class="col-12 mt-4">
                    <div class="border-top pt-4">
                        <h5 class="mb-3">تحديث الحالة</h5>
                        <form action="{{ route('transfers.updateStatus', $transfer) }}" method="POST" class="d-flex gap-2">
                            @csrf
                            @method('PATCH')
                            <select name="status" class="form-select" style="max-width: 200px;">
                                <option value="pending" {{ $transfer->status == 'pending' ? 'selected' : '' }}>معلقة</option>
                                <option value="completed" {{ $transfer->status == 'completed' ? 'selected' : '' }}>مكتملة</option>
                                <option value="cancelled" {{ $transfer->status == 'cancelled' ? 'selected' : '' }}>ملغاة</option>
                            </select>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-check"></i>
                                تحديث
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection