@extends('admin.layouts.master')

@section('title', 'تفاصيل مركبة — ' . $vehicle->plate_number)

@section('content')
<div class="pc-container">
    <div class="pc-content">

        {{-- ══════════════════════════════════════════════════════
             PAGE HEADER
        ══════════════════════════════════════════════════════ --}}
        <div class="page-header d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">
            <div>
                <div class="d-flex align-items-center gap-2 mb-1 flex-wrap">
                    <h2 class="mb-0 fw-bold font-monospace">{{ $vehicle->plate_number }}</h2>
                    <span class="badge bg-info fs-6">{{ $vehicle->vehicle_kind_label }}</span>
                    <span class="badge {{ $vehicle->active ? 'bg-success' : 'bg-danger' }} fs-6">{{ $vehicle->active_label }}</span>
                </div>
                <small class="text-muted">
                    <i class="ti ti-building me-1"></i>{{ $vehicle->owner_label }}
                    @if($vehicle->branch)
                        &nbsp;·&nbsp;<i class="ti ti-map-pin me-1"></i>{{ $vehicle->branch->name }}
                    @endif
                </small>
            </div>
            <div class="d-flex gap-2 flex-wrap">
                @can('create permits')
                    <button type="button" class="btn btn-primary js-open-permit-modal" data-action="create">
                        <i class="ti ti-file-certificate me-1"></i>إصدار تصريح جديد
                    </button>
                @endcan
                @can('collect payments')
                    @if($latestUnpaidPermit && (float)($latestUnpaidPermit->remaining_amount ?? 0) > 0)
                        <a href="{{ route('admin.treasury.create', ['reference_type' => 'vehicle_permit', 'reference_id' => $latestUnpaidPermit->id, 'amount' => $latestUnpaidPermit->remaining_amount]) }}"
                           class="btn btn-success">
                            <i class="ti ti-cash me-1"></i>تحصيل متبقي
                        </a>
                    @endif
                @endcan
                @can('edit customers')
                    <a href="{{ route('admin.vehicles.edit', $vehicle) }}" class="btn btn-warning">
                        <i class="ti ti-pencil me-1"></i>تعديل
                    </a>
                @endcan
                <a href="{{ route('admin.vehicles.index') }}" class="btn btn-light">
                    <i class="ti ti-arrow-right me-1"></i>رجوع
                </a>
            </div>
        </div>

        {{-- Alerts --}}
        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show">
                <i class="ti ti-circle-check me-2"></i>{{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif
        @if(session('error'))
            <div class="alert alert-danger alert-dismissible fade show">
                <i class="ti ti-alert-circle me-2"></i>{{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        {{-- ══════════════════════════════════════════════════════
             STATS CARDS
        ══════════════════════════════════════════════════════ --}}
        <div class="row g-3 mb-4">
            <div class="col-6 col-md-4 col-lg-2">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body text-center py-3 px-2">
                        <div class="avatar avatar-m bg-light-primary rounded-circle mx-auto mb-2">
                            <i class="ti ti-file-certificate f-18 text-primary"></i>
                        </div>
                        <h3 class="mb-0 fw-bold">{{ $vehicle->vehicle_permits_count }}</h3>
                        <small class="text-muted">إجمالي التصاريح</small>
                    </div>
                </div>
            </div>
            <div class="col-6 col-md-4 col-lg-2">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body text-center py-3 px-2">
                        <div class="avatar avatar-m bg-light-success rounded-circle mx-auto mb-2">
                            <i class="ti ti-shield-check f-18 text-success"></i>
                        </div>
                        <h3 class="mb-0 fw-bold text-success">{{ $activePermitsCount }}</h3>
                        <small class="text-muted">التصاريح النشطة</small>
                    </div>
                </div>
            </div>
            <div class="col-6 col-md-4 col-lg-2">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body text-center py-3 px-2">
                        <div class="avatar avatar-m bg-light-info rounded-circle mx-auto mb-2">
                            <i class="ti ti-truck f-18 text-info"></i>
                        </div>
                        <h3 class="mb-0 fw-bold">{{ $vehicle->trailers_count }}</h3>
                        <small class="text-muted">المقطورات</small>
                    </div>
                </div>
            </div>
            <div class="col-6 col-md-4 col-lg-2">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body text-center py-3 px-2">
                        <div class="avatar avatar-m bg-light-secondary rounded-circle mx-auto mb-2">
                            <i class="ti ti-receipt f-18 text-secondary"></i>
                        </div>
                        <h5 class="mb-0 fw-bold">{{ number_format((float)($vehicle->permits_total_amount ?? 0), 2) }}</h5>
                        <small class="text-muted">الإجمالي ج.م</small>
                    </div>
                </div>
            </div>
            <div class="col-6 col-md-4 col-lg-2">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body text-center py-3 px-2">
                        <div class="avatar avatar-m bg-light-success rounded-circle mx-auto mb-2">
                            <i class="ti ti-cash f-18 text-success"></i>
                        </div>
                        <h5 class="mb-0 fw-bold text-success">{{ number_format((float)($vehicle->permits_paid_amount ?? 0), 2) }}</h5>
                        <small class="text-muted">المدفوع ج.م</small>
                    </div>
                </div>
            </div>
            @php $remaining = (float)($vehicle->permits_remaining_amount ?? 0); @endphp
            <div class="col-6 col-md-4 col-lg-2">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body text-center py-3 px-2">
                        <div class="avatar avatar-m {{ $remaining > 0 ? 'bg-light-danger' : 'bg-light-success' }} rounded-circle mx-auto mb-2">
                            <i class="ti ti-coin f-18 {{ $remaining > 0 ? 'text-danger' : 'text-success' }}"></i>
                        </div>
                        <h5 class="mb-0 fw-bold {{ $remaining > 0 ? 'text-danger' : 'text-success' }}">
                            {{ number_format($remaining, 2) }}
                        </h5>
                        <small class="text-muted">المتبقي ج.م</small>
                    </div>
                </div>
            </div>
        </div>

        {{-- ══════════════════════════════════════════════════════
             TABS
        ══════════════════════════════════════════════════════ --}}
        <ul class="nav nav-tabs mb-0" id="vehicleTabs" role="tablist" style="border-bottom:0;">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="details-tab" data-bs-toggle="tab"
                        data-bs-target="#details" type="button" role="tab">
                    <i class="ti ti-car me-1"></i>بيانات المركبة
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="permits-tab" data-bs-toggle="tab"
                        data-bs-target="#permits" type="button" role="tab">
                    <i class="ti ti-file-certificate me-1"></i>التصاريح
                    <span class="badge bg-primary ms-1">{{ $vehicle->vehicle_permits_count }}</span>
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="trailers-tab" data-bs-toggle="tab"
                        data-bs-target="#trailers" type="button" role="tab">
                    <i class="ti ti-truck me-1"></i>المقطورات
                    <span class="badge bg-info ms-1">{{ $vehicle->trailers_count }}</span>
                </button>
            </li>
            <li class="nav-item" role="presentation">
                @php $allTxCount = $vehicle->vehiclePermits->sum(fn($p) => $p->treasuryTransactions->count()); @endphp
                <button class="nav-link" id="transactions-tab" data-bs-toggle="tab"
                        data-bs-target="#transactions" type="button" role="tab">
                    <i class="ti ti-receipt me-1"></i>المعاملات المالية
                    @if($allTxCount > 0)
                        <span class="badge bg-secondary ms-1">{{ $allTxCount }}</span>
                    @endif
                </button>
            </li>
        </ul>

        <div class="tab-content border border-top-0 rounded-bottom p-3 bg-white shadow-sm" id="vehicleTabsContent">

            {{-- ════════════════════════════════════════
                 TAB 1 — VEHICLE DETAILS
            ════════════════════════════════════════ --}}
            <div class="tab-pane fade show active" id="details" role="tabpanel">
                <div class="row g-3">

                    {{-- Basic Info --}}
                    <div class="col-lg-6">
                        <div class="card h-100 shadow-none border">
                            <div class="card-header bg-light fw-semibold">
                                <i class="ti ti-car me-2 text-primary"></i>البيانات الأساسية
                            </div>
                            <div class="card-body p-0">
                                <table class="table table-borderless table-sm mb-0">
                                    <tbody>
                                        <tr class="border-bottom">
                                            <td class="text-muted ps-3 py-2" style="width:40%">رقم اللوحة</td>
                                            <td class="py-2"><strong class="font-monospace fs-5">{{ $vehicle->plate_number }}</strong></td>
                                        </tr>
                                        <tr class="border-bottom">
                                            <td class="text-muted ps-3 py-2">نوع المركبة</td>
                                            <td class="py-2"><span class="badge bg-info">{{ $vehicle->vehicle_kind_label }}</span></td>
                                        </tr>
                                        <tr class="border-bottom">
                                            <td class="text-muted ps-3 py-2">رقم الشاسيه</td>
                                            <td class="py-2"><strong class="font-monospace">{{ $vehicle->chassis_number ?: '—' }}</strong></td>
                                        </tr>
                                        <tr class="border-bottom">
                                            <td class="text-muted ps-3 py-2">الماركة / المصنع</td>
                                            <td class="py-2">{{ $vehicle->brand ?: '—' }}</td>
                                        </tr>
                                        <tr class="border-bottom">
                                            <td class="text-muted ps-3 py-2">موديل السنة</td>
                                            <td class="py-2">{{ $vehicle->model_year ?: '—' }}</td>
                                        </tr>
                                        <tr class="border-bottom">
                                            <td class="text-muted ps-3 py-2">اللون</td>
                                            <td class="py-2">{{ $vehicle->color ?: '—' }}</td>
                                        </tr>
                                        <tr class="{{ $vehicle->notes ? 'border-bottom' : '' }}">
                                            <td class="text-muted ps-3 py-2">الحالة</td>
                                            <td class="py-2">
                                                <span class="badge {{ $vehicle->active ? 'bg-success' : 'bg-danger' }}">
                                                    {{ $vehicle->active_label }}
                                                </span>
                                            </td>
                                        </tr>
                                        @if($vehicle->notes)
                                        <tr>
                                            <td class="text-muted ps-3 py-2 align-top">ملاحظات</td>
                                            <td class="py-2"><small>{{ $vehicle->notes }}</small></td>
                                        </tr>
                                        @endif
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    {{-- Ownership --}}
                    <div class="col-lg-6">
                        <div class="card h-100 shadow-none border">
                            <div class="card-header bg-light fw-semibold">
                                <i class="ti ti-user-check me-2 text-success"></i>بيانات الملكية والتواصل
                            </div>
                            <div class="card-body p-0">
                                <table class="table table-borderless table-sm mb-0">
                                    <tbody>
                                        <tr class="border-bottom">
                                            <td class="text-muted ps-3 py-2" style="width:40%">المالك</td>
                                            <td class="py-2"><strong>{{ $vehicle->owner_label }}</strong></td>
                                        </tr>
                                        <tr class="border-bottom">
                                            <td class="text-muted ps-3 py-2">الفرع</td>
                                            <td class="py-2">
                                                <i class="ti ti-map-pin text-muted me-1"></i>{{ $vehicle->branch?->name ?? '—' }}
                                            </td>
                                        </tr>
                                        @if($vehicle->customer)
                                        <tr class="border-bottom">
                                            <td class="text-muted ps-3 py-2">العميل</td>
                                            <td class="py-2">
                                                @can('edit customers')
                                                    <a href="{{ route('admin.customers.edit', $vehicle->customer) }}" class="text-decoration-none fw-semibold">
                                                        <i class="ti ti-user me-1"></i>{{ $vehicle->customer->full_name }}
                                                    </a>
                                                @else
                                                    <strong><i class="ti ti-user me-1"></i>{{ $vehicle->customer->full_name }}</strong>
                                                @endcan
                                            </td>
                                        </tr>
                                        <tr class="border-bottom">
                                            <td class="text-muted ps-3 py-2">هاتف العميل</td>
                                            <td class="py-2 font-monospace">{{ $vehicle->customer->phone ?: ($vehicle->customer->mobile ?: '—') }}</td>
                                        </tr>
                                        @endif
                                        @if($vehicle->company)
                                        <tr class="border-bottom">
                                            <td class="text-muted ps-3 py-2">الشركة</td>
                                            <td class="py-2">
                                                <a href="{{ route('admin.companies.show', $vehicle->company) }}" class="text-decoration-none fw-semibold">
                                                    <i class="ti ti-building me-1"></i>{{ $vehicle->company->name }}
                                                </a>
                                            </td>
                                        </tr>
                                        <tr class="border-bottom">
                                            <td class="text-muted ps-3 py-2">هاتف الشركة</td>
                                            <td class="py-2 font-monospace">{{ $vehicle->company->phone ?: ($vehicle->company->mobile ?: '—') }}</td>
                                        </tr>
                                        @endif
                                        <tr>
                                            <td class="text-muted ps-3 py-2">تاريخ التسجيل</td>
                                            <td class="py-2">
                                                <small class="text-muted">{{ $vehicle->created_at?->format('Y-m-d') ?? '—' }}</small>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            {{-- ════════════════════════════════════════
                 TAB 2 — PERMITS
            ════════════════════════════════════════ --}}
            <div class="tab-pane fade" id="permits" role="tabpanel">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h6 class="fw-semibold mb-0">
                        <i class="ti ti-file-certificate me-1 text-primary"></i>قائمة التصاريح
                    </h6>
                    @can('create permits')
                        <button type="button" class="btn btn-sm btn-primary js-open-permit-modal" data-action="create">
                            <i class="ti ti-plus me-1"></i>تصريح جديد
                        </button>
                    @endcan
                </div>

                @if($vehicle->vehiclePermits->isEmpty())
                    <div class="text-center py-5 text-muted">
                        <i class="ti ti-file-off f-48 d-block mb-2 opacity-50"></i>
                        <p class="mb-1">لا توجد تصاريح مرتبطة بهذه المركبة بعد.</p>
                        @can('create permits')
                            <button type="button" class="btn btn-sm btn-primary mt-2 js-open-permit-modal" data-action="create">
                                <i class="ti ti-plus me-1"></i>إصدار أول تصريح
                            </button>
                        @endcan
                    </div>
                @else
                    <div class="table-responsive">
                        <table class="table table-hover table-bordered table-sm align-middle mb-0">
                            <thead class="table-dark">
                                <tr>
                                    <th>#</th>
                                    <th class="text-nowrap">رقم التصريح</th>
                                    <th>نوع التعريفة</th>
                                    <th>لصالح</th>
                                    <th>المقطورة</th>
                                    <th class="text-nowrap">تاريخ البداية</th>
                                    <th class="text-nowrap">تاريخ النهاية</th>
                                    <th class="text-center">الحالة</th>
                                    <th class="text-end text-nowrap">الإجمالي</th>
                                    <th class="text-end text-nowrap">المدفوع</th>
                                    <th class="text-end text-nowrap">المتبقي</th>
                                    <th>بواسطة</th>
                                    <th class="text-center">إجراءات</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($vehicle->vehiclePermits as $index => $permit)
                                    @php
                                        $rowClass = '';
                                        if ($permit->end_date) {
                                            $endTs = $permit->end_date->startOfDay()->timestamp;
                                            $now   = now()->startOfDay()->timestamp;
                                            $soon  = now()->addDays(7)->startOfDay()->timestamp;
                                            if ($endTs < $now)       $rowClass = 'table-danger';
                                            elseif ($endTs <= $soon) $rowClass = 'table-warning';
                                        }
                                    @endphp
                                    <tr class="{{ $rowClass }}">
                                        <td class="text-muted"><small>{{ $index + 1 }}</small></td>
                                        <td>
                                            <a href="{{ route('admin.vehicle-permits.show', $permit) }}"
                                               class="fw-semibold text-decoration-none text-nowrap text-primary">
                                                <i class="ti ti-external-link me-1 opacity-50"></i>{{ $permit->permit_number }}
                                            </a>
                                        </td>
                                        <td><small>{{ $permit->permitType?->name ?? '—' }}</small></td>
                                        <td><small>{{ $permit->permit_for_label }}</small></td>
                                        <td>
                                            @if($permit->trailer)
                                                <a href="{{ route('admin.trailers.show', $permit->trailer) }}"
                                                   class="text-decoration-none small">
                                                    <i class="ti ti-truck me-1 opacity-50"></i>{{ $permit->trailer->trailer_number }}
                                                </a>
                                            @else
                                                <span class="text-muted small">—</span>
                                            @endif
                                        </td>
                                        <td class="text-nowrap"><small>{{ optional($permit->start_date)->format('Y-m-d') ?? '—' }}</small></td>
                                        <td class="text-nowrap">
                                            <small class="{{ $rowClass === 'table-danger' ? 'fw-semibold text-danger' : ($rowClass === 'table-warning' ? 'fw-semibold text-warning' : '') }}">
                                                {{ optional($permit->end_date)->format('Y-m-d') ?? '—' }}
                                            </small>
                                        </td>
                                        <td class="text-center">
                                            <span class="{{ $permit->permit_status?->badgeClass() ?? 'badge bg-secondary' }}">
                                                {{ $permit->status_label }}
                                            </span>
                                        </td>
                                        <td class="text-end text-nowrap"><small>{{ number_format((float)$permit->total_amount, 2) }} ج.م</small></td>
                                        <td class="text-end text-nowrap text-success"><small>{{ number_format((float)$permit->paid_amount, 2) }} ج.م</small></td>
                                        <td class="text-end text-nowrap">
                                            @if((float)$permit->remaining_amount > 0)
                                                <span class="badge bg-danger">{{ number_format((float)$permit->remaining_amount, 2) }} ج.م</span>
                                            @else
                                                <span class="badge bg-success"><i class="ti ti-check me-1"></i>مسدد</span>
                                            @endif
                                        </td>
                                        <td><small class="text-muted">{{ $permit->issuedBy?->name ?? '—' }}</small></td>
                                        <td class="text-center">
                                            <div class="d-flex gap-1 justify-content-center flex-nowrap">
                                                <a href="{{ route('admin.vehicle-permits.show', $permit) }}"
                                                   class="btn btn-xs btn-light-primary" title="عرض التصريح">
                                                    <i class="ti ti-eye"></i>
                                                </a>
                                                @can('edit permits')
                                                    <button type="button" class="btn btn-xs btn-light-info js-open-permit-modal" title="تعديل التصريح" data-action="edit" data-permit-id="{{ $permit->id }}">
                                                        <i class="ti ti-pencil"></i>
                                                    </button>
                                                @endcan
                                                @can('collect payments')
                                                    @if((float)$permit->remaining_amount > 0)
                                                        <button type="button" class="btn btn-xs btn-light-success js-open-tx-modal" title="تحصيل دفعة"
                                                                data-permit-id="{{ $permit->id }}" data-amount="{{ number_format((float)$permit->remaining_amount, 2, '.', '') }}">
                                                            <i class="ti ti-cash"></i>
                                                        </button>
                                                    @endif
                                                @endcan
                                                @can('renew permits')
                                                    <a href="{{ route('admin.vehicle-permits.show', $permit) }}"
                                                       class="btn btn-xs btn-light-info" title="تجديد التصريح">
                                                        <i class="ti ti-refresh"></i>
                                                    </a>
                                                @endcan
                                                @can('delete permits')
                                                    <button type="button" class="btn btn-xs btn-light-danger js-delete-permit" data-permit-id="{{ $permit->id }}" title="حذف التصريح">
                                                        <i class="ti ti-trash"></i>
                                                    </button>
                                                @endcan
                                            </div>
                                        </td>
                                    </tr>

                                    {{-- Renewals sub-rows --}}
                                    @foreach($permit->renewals as $renewal)
                                        <tr class="bg-light border-start border-4 border-info">
                                            <td></td>
                                            <td class="ps-3">
                                                <small class="text-info fw-semibold text-nowrap">
                                                    <i class="ti ti-corner-down-right me-1"></i>{{ $renewal->renewal_number }}
                                                </small>
                                            </td>
                                            <td colspan="2">
                                                <small class="text-muted">تجديد بتاريخ {{ optional($renewal->renewed_on)->format('Y-m-d') ?? '—' }}</small>
                                            </td>
                                            <td>—</td>
                                            <td class="text-nowrap"><small class="text-muted">{{ optional($renewal->new_start_date)->format('Y-m-d') ?? '—' }}</small></td>
                                            <td class="text-nowrap"><small class="text-muted">{{ optional($renewal->renewed_to)->format('Y-m-d') ?? '—' }}</small></td>
                                            <td class="text-center">
                                                <span class="{{ $renewal->payment_status_badge_class }}">{{ $renewal->payment_status_label }}</span>
                                            </td>
                                            <td class="text-end text-nowrap"><small>{{ number_format((float)$renewal->net_amount, 2) }} ج.م</small></td>
                                            <td class="text-end text-nowrap text-success"><small>{{ number_format((float)$renewal->paid_amount, 2) }} ج.م</small></td>
                                            <td class="text-end text-nowrap">
                                                @if((float)$renewal->remaining_amount > 0)
                                                    <span class="badge bg-danger">{{ number_format((float)$renewal->remaining_amount, 2) }}</span>
                                                @else
                                                    <span class="badge bg-success"><i class="ti ti-check me-1"></i>مسدد</span>
                                                @endif
                                            </td>
                                            <td><small class="text-muted">{{ $renewal->processedBy?->name ?? '—' }}</small></td>
                                            <td></td>
                                        </tr>
                                    @endforeach

                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    {{-- Color Legend --}}
                    <div class="d-flex gap-3 mt-2 flex-wrap">
                        <small class="text-muted"><span class="badge bg-danger me-1">&nbsp;&nbsp;</span>تصريح منتهي</small>
                        <small class="text-muted"><span class="badge bg-warning me-1">&nbsp;&nbsp;</span>ينتهي خلال 7 أيام</small>
                        <small class="text-muted"><i class="ti ti-corner-down-right text-info me-1"></i>سجل التجديدات</small>
                    </div>
                @endif
            </div>

            {{-- ════════════════════════════════════════
                 TAB 3 — TRAILERS
            ════════════════════════════════════════ --}}
            <div class="tab-pane fade" id="trailers" role="tabpanel">
                <h6 class="fw-semibold mb-3">
                    <i class="ti ti-truck me-1 text-info"></i>المقطورات المرتبطة
                </h6>

                @if($vehicle->trailers->isEmpty())
                    <div class="text-center py-5 text-muted">
                        <i class="ti ti-truck-off f-48 d-block mb-2 opacity-50"></i>
                        <p class="mb-0">لا توجد مقطورات مرتبطة بهذه المركبة.</p>
                    </div>
                @else
                    <div class="table-responsive">
                        <table class="table table-hover table-bordered table-sm align-middle mb-0">
                            <thead class="table-dark">
                                <tr>
                                    <th>#</th>
                                    <th>رقم المقطورة</th>
                                    <th>النوع</th>
                                    <th>رقم الشاسيه</th>
                                    <th>اللون</th>
                                    <th>الموديل</th>
                                    <th class="text-center">الحالة</th>
                                    <th class="text-center">إجراء</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($vehicle->trailers as $i => $trailer)
                                    <tr>
                                        <td class="text-muted"><small>{{ $i + 1 }}</small></td>
                                        <td><strong class="font-monospace">{{ $trailer->trailer_number }}</strong></td>
                                        <td>{{ $trailer->trailer_kind_label ?? '—' }}</td>
                                        <td class="font-monospace"><small>{{ $trailer->chassis_number ?: '—' }}</small></td>
                                        <td>{{ $trailer->color ?: '—' }}</td>
                                        <td>{{ $trailer->model_year ?: '—' }}</td>
                                        <td class="text-center">
                                            <span class="badge {{ $trailer->active ? 'bg-success' : 'bg-danger' }}">
                                                {{ $trailer->active_label }}
                                            </span>
                                        </td>
                                        <td class="text-center">
                                            <a href="{{ route('admin.trailers.show', $trailer) }}"
                                               class="btn btn-xs btn-light-primary">
                                                <i class="ti ti-eye me-1"></i>عرض
                                            </a>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif
            </div>

            {{-- ════════════════════════════════════════
                 TAB 4 — TREASURY TRANSACTIONS
            ════════════════════════════════════════ --}}
            <div class="tab-pane fade" id="transactions" role="tabpanel">
                @php
                    $allTransactions = $vehicle->vehiclePermits
                        ->flatMap(fn ($p) => $p->treasuryTransactions)
                        ->sortByDesc('transaction_date');
                    $totalIn  = $allTransactions->where('direction', 'in')->sum('amount');
                    $totalOut = $allTransactions->where('direction', 'out')->sum('amount');
                @endphp

                <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
                    <h6 class="fw-semibold mb-0">
                        <i class="ti ti-receipt me-1 text-secondary"></i>
                        المعاملات المالية
                        <span class="badge bg-secondary ms-1">{{ $allTransactions->count() }}</span>
                    </h6>
                    @if($allTransactions->count() > 0)
                        <div class="d-flex gap-3">
                            <small class="text-success fw-semibold">
                                <i class="ti ti-arrow-down-circle me-1"></i>وارد: {{ number_format($totalIn, 2) }} ج.م
                            </small>
                            <small class="text-danger fw-semibold">
                                <i class="ti ti-arrow-up-circle me-1"></i>صادر: {{ number_format($totalOut, 2) }} ج.م
                            </small>
                        </div>
                    @endif
                    <div class="d-flex ms-2">
                        @can('collect payments')
                            <button type="button" class="btn btn-sm btn-success js-open-tx-modal">
                                <i class="ti ti-cash me-1"></i>تسجيل عملية مالية
                            </button>
                        @endcan
                    </div>
                </div>

                @if($allTransactions->isEmpty())
                    <div class="text-center py-5 text-muted">
                        <i class="ti ti-receipt-off f-48 d-block mb-2 opacity-50"></i>
                        <p class="mb-0">لا توجد معاملات مالية بعد.</p>
                    </div>
                @else
                    <div class="table-responsive">
                        <table class="table table-hover table-bordered table-sm align-middle mb-0">
                            <thead class="table-dark">
                                <tr>
                                    <th>#</th>
                                    <th class="text-nowrap">رقم المعاملة</th>
                                    <th>التصريح المرتبط</th>
                                    <th>نوع المعاملة</th>
                                    <th>طريقة الدفع</th>
                                    <th class="text-end text-nowrap">المبلغ</th>
                                    <th class="text-nowrap">التاريخ</th>
                                    <th>بواسطة</th>
                                    <th>الوصف / المرجع</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($allTransactions as $i => $tx)
                                    <tr>
                                        <td class="text-muted"><small>{{ $i + 1 }}</small></td>
                                        <td class="font-monospace text-nowrap">
                                            <small>{{ $tx->transaction_number }}</small>
                                        </td>
                                        <td>
                                            @if($tx->vehiclePermit)
                                                <a href="{{ route('admin.vehicle-permits.show', $tx->vehiclePermit) }}"
                                                   class="text-decoration-none small text-primary">
                                                    <i class="ti ti-external-link me-1 opacity-50"></i>{{ $tx->vehiclePermit->permit_number }}
                                                </a>
                                            @else
                                                <span class="text-muted small">—</span>
                                            @endif
                                        </td>
                                        <td>
                                            <span class="{{ $tx->transaction_type_badge_class }}">
                                                {{ $tx->transaction_type_label }}
                                            </span>
                                        </td>
                                        <td><small>{{ $tx->payment_method_label }}</small></td>
                                        <td class="text-end text-nowrap fw-semibold {{ $tx->direction === 'in' ? 'text-success' : 'text-danger' }}">
                                            {{ $tx->direction === 'in' ? '+' : '−' }}{{ number_format((float)$tx->amount, 2) }} ج.م
                                        </td>
                                        <td class="text-nowrap">
                                            <small>{{ optional($tx->transaction_date)->format('Y-m-d') }}</small>
                                            <br><small class="text-muted">{{ optional($tx->transaction_date)->format('H:i') }}</small>
                                        </td>
                                        <td><small class="text-muted">{{ $tx->processedBy?->name ?? '—' }}</small></td>
                                        <td>
                                            <small class="text-muted">{{ \Illuminate\Support\Str::limit($tx->description ?? '', 45) ?: '—' }}</small>
                                            @if($tx->reference_no)
                                                <br><small class="font-monospace text-muted opacity-75">{{ $tx->reference_no }}</small>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                            <tfoot class="table-light fw-semibold">
                                <tr>
                                    <td colspan="5" class="text-end pe-3">الإجمالي الوارد:</td>
                                    <td class="text-end text-nowrap text-success">+{{ number_format($totalIn, 2) }} ج.م</td>
                                    <td colspan="3"></td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                @endif
            </div>

        </div>{{-- end .tab-content --}}
    </div>
</div>
@endsection

@section('js')
<script>
document.addEventListener('DOMContentLoaded', function () {
    // Open permit modal (create/edit)
    const permitModalEl = document.createElement('div');
    permitModalEl.innerHTML = `
    <div class="modal fade" id="permitModal" tabindex="-1" aria-hidden="true">
      <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
          <form id="permitModalForm">
            <div class="modal-header">
              <h5 class="modal-title" id="permitModalTitle">تصريح</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
              <input type="hidden" name="_method" id="permitModalMethod" value="POST">
              <input type="hidden" name="vehicle_id" value="{{ $vehicle->id }}">
              <input type="hidden" name="permit_for" value="vehicle">
              <input type="hidden" name="vehicle_label" value="{{ $vehicle->vehicle_label ?? $vehicle->plate_number ?? '' }}">
              <input type="hidden" name="plate_number" value="{{ $vehicle->plate_number }}">
              <input type="hidden" name="chassis_number" value="{{ $vehicle->chassis_number ?? '' }}">
              @if(auth()->user()->isSuperAdmin())
                <div class="mb-3">
                  <label class="form-label">الفرع</label>
                  <select name="branch_id" class="form-select" required>
                    <option value="">اختر فرع</option>
                    @foreach(\App\Models\Branch::query()->active()->orderBy('name')->get() as $b)
                      <option value="{{ $b->id }}">{{ $b->name }}</option>
                    @endforeach
                  </select>
                </div>
              @else
                <input type="hidden" name="branch_id" value="{{ $branchId ?? auth()->user()->branch_id }}">
              @endif
              <div class="mb-3">
                <label class="form-label">رقم التصريح</label>
                <input type="text" name="permit_number" class="form-control" required>
              </div>
              <div class="mb-3">
                <label class="form-label">نوع التصريح</label>
                <select name="permit_type_id" class="form-select" required>
                  <option value="">اختر</option>
                  @foreach($permitTypes as $pt)
                    <option value="{{ $pt->id }}">{{ $pt->name }}</option>
                  @endforeach
                </select>
              </div>
              <div class="row">
                <div class="col-md-6 mb-3">
                  <label class="form-label">تاريخ البداية</label>
                  <input type="date" name="start_date" class="form-control" required>
                </div>
                <div class="col-md-6 mb-3">
                  <label class="form-label">تاريخ النهاية</label>
                  <input type="date" name="end_date" class="form-control" required>
                </div>
              </div>
              <div class="mb-3">
                <label class="form-label">الإجمالي</label>
                <input type="number" step="0.01" min="0" name="total_amount" class="form-control" required>
              </div>
              <div class="mb-3">
                <label class="form-label">المدفوع</label>
                <input type="number" step="0.01" min="0" name="paid_amount" class="form-control" required>
              </div>
              <div class="mb-3">
                <label class="form-label">ملاحظات</label>
                <textarea name="notes" class="form-control" rows="2"></textarea>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-light" data-bs-dismiss="modal">إلغاء</button>
              <button type="submit" class="btn btn-primary" id="permitModalSubmit">حفظ</button>
            </div>
          </form>
        </div>
      </div>
    </div>`;

    document.body.appendChild(permitModalEl);

    const permitModal = new bootstrap.Modal(document.getElementById('permitModal'));

    function showPermitModal(action, permitId) {
        const form = document.getElementById('permitModalForm');
        form.reset();
        document.getElementById('permitModalMethod').value = 'POST';
        document.getElementById('permitModalTitle').textContent = action === 'create' ? 'إصدار تصريح جديد' : 'تعديل التصريح';

        if (action === 'edit' && permitId) {
            fetch('{{ url("admin/vehicle-permits") }}' + '/' + permitId + '/modal-data')
                .then(r => r.json())
                .then(json => {
                        if (json.success && json.permit) {
                            const p = json.permit;
                            if (form.branch_id) form.branch_id.value = p.branch_id || '';
                            if (form.permit_for) form.permit_for.value = p.permit_for || 'vehicle';
                            if (form.vehicle_label) form.vehicle_label.value = p.vehicle_label || '';
                            if (form.plate_number) form.plate_number.value = p.plate_number || '';
                            if (form.chassis_number) form.chassis_number.value = p.chassis_number || '';
                            form.permit_number.value = p.permit_number || '';
                        form.permit_type_id.value = p.permit_type_id || '';
                        form.start_date.value = p.start_date ? p.start_date.split(' ')[0] : '';
                        form.end_date.value = p.end_date ? p.end_date.split(' ')[0] : '';
                        form.total_amount.value = p.total_amount || '';
                        form.paid_amount.value = p.paid_amount || '';
                        form.notes.value = p.notes || '';
                        document.getElementById('permitModalMethod').value = 'PATCH';
                        form.dataset.permitId = permitId;
                        permitModal.show();
                    }
                });
        } else {
            // create
            permitModal.show();
        }
    }

    document.body.addEventListener('click', function (e) {
        const open = e.target.closest('.js-open-permit-modal');
        if (!open) return;
        const action = open.dataset.action || 'create';
        const permitId = open.dataset.permitId;
        showPermitModal(action, permitId);
    });

    // Submit modal form via AJAX
    document.getElementById('permitModalForm').addEventListener('submit', function (ev) {
        ev.preventDefault();
        const form = ev.currentTarget;
        const method = document.getElementById('permitModalMethod').value || 'POST';
        const isPatch = method.toUpperCase() === 'PATCH';
        const url = isPatch && form.dataset.permitId
            ? '{{ url("admin/vehicle-permits") }}' + '/' + form.dataset.permitId + '/modal-update'
            : '{{ route("admin.vehicle-permits.modal-store") }}';

        const formData = new FormData(form);

        fetch(url, {
            method: isPatch ? 'PATCH' : 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'X-Requested-With': 'XMLHttpRequest'
            },
            body: formData,
        })
        .then(async (r) => {
            const contentType = r.headers.get('content-type') || '';
            let json = {};
            if (contentType.includes('application/json')) json = await r.json();
            if (r.ok && json.success) {
                permitModal.hide();
                location.reload();
                return;
            }
            // handle validation errors (422) or other errors
            if (r.status === 422 && json.errors) {
                // display first error message
                const firstField = Object.keys(json.errors)[0];
                const msg = Array.isArray(json.errors[firstField]) ? json.errors[firstField][0] : 'تحقق من المدخلات.';
                alert(msg);
                return;
            }
            alert(json.message || 'فشل حفظ التصريح. تحقق من المدخلات.');
        })
        .catch(() => alert('فشل في الاتصال بالخادم'));
    });

    // Delete permit via AJAX
    document.body.addEventListener('click', function (e) {
        const del = e.target.closest('.js-delete-permit');
        if (!del) return;
        if (!confirm('هل أنت متأكد من حذف هذا التصريح؟')) return;
        const id = del.dataset.permitId;
        fetch('{{ url('admin/vehicle-permits') }}/' + id + '/modal-destroy', {
            method: 'DELETE', headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
        }).then(r => r.json()).then(json => {
            if (json.success) location.reload(); else alert('فشل الحذف');
        });
    });

            // ---------------- Transaction modal ----------------
            const txModalEl = document.createElement('div');
            txModalEl.innerHTML = `
            <div class="modal fade" id="txModal" tabindex="-1" aria-hidden="true">
              <div class="modal-dialog modal-lg modal-dialog-centered">
                <div class="modal-content">
                  <form id="txModalForm">
                    <div class="modal-header">
                      <h5 class="modal-title">تسجيل عملية مالية</h5>
                      <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                      <input type="hidden" name="branch_id" value="{{ $branchId ?? auth()->user()->branch_id }}">
                      <input type="hidden" name="reference_type" value="vehicle_permit">
                      <input type="hidden" name="reference_id" value="">

                              <div class="row g-3">
                                <div class="col-md-4">
                                  <label class="form-label">نوع العملية</label>
                                  <select name="transaction_type" class="form-select" required>
                                    <option value="collection">💰 تحصيل (وارد)</option>
                                    <option value="refund">↩️ استرداد (صادر)</option>
                                    <option value="expense">📤 مصروف (صادر)</option>
                                  </select>
                                </div>
                                <div class="col-md-4">
                                  <label class="form-label">المبلغ</label>
                                  <div class="input-group">
                                    <input type="number" step="0.01" min="0.01" name="amount" class="form-control" required>
                                    <span class="input-group-text">ج.م</span>
                                  </div>
                                </div>
                                <div class="col-md-4">
                                  <label class="form-label">طريقة الدفع</label>
                                  <select name="payment_method" class="form-select" required>
                                    <option value="cash">💵 نقدي</option>
                                    <option value="bank_transfer">🏦 تحويل بنكي</option>
                                    <option value="instapay">📱 إنستاباي</option>
                                    <option value="card">💳 بطاقة</option>
                                    <option value="wallet">👛 محفظة</option>
                                    <option value="cheque">📄 شيك</option>
                                    <option value="other">🔹 أخرى</option>
                                  </select>
                                </div>

                                <div class="col-md-4">
                                  <label class="form-label">تاريخ العملية</label>
                                  <input type="datetime-local" name="transaction_date" class="form-control" id="tx_transaction_date">
                                </div>

                        <div class="col-md-8">
                          <label class="form-label">السجل المرتبط (التصريح)</label>
                          <select name="tx_reference_id" id="tx_reference_id" class="form-select">
                            <option value="">-- اختر تصريح مرتبط (اختياري) --</option>
                            @foreach($vehicle->vehiclePermits as $p)
                              <option value="{{ $p->id }}">{{ $p->permit_number }} — {{ $p->vehicle_label }} (متبقي: {{ number_format($p->remaining_amount,2) }} ج.م)</option>
                            @endforeach
                          </select>
                        </div>

                        <div class="col-md-4">
                          <label class="form-label">الموظف</label>
                          <select name="received_by_user_id" class="form-select">
                            <option value="">-- المستخدم الحالي --</option>
                            @foreach($employees ?? [] as $emp)
                              <option value="{{ $emp->id }}">{{ $emp->name }}</option>
                            @endforeach
                          </select>
                        </div>

                        <div class="col-12">
                          <label class="form-label">رقم الإيصال / المرجع</label>
                          <input type="text" name="receipt_number" class="form-control">
                        </div>
                        <div class="col-12">
                          <label class="form-label">ملاحظات</label>
                          <textarea name="notes" class="form-control" rows="2"></textarea>
                        </div>
                      </div>
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-light" data-bs-dismiss="modal">إلغاء</button>
                      <button type="submit" class="btn btn-success">حفظ العملية</button>
                    </div>
                  </form>
                </div>
              </div>
            </div>`;

            document.body.appendChild(txModalEl);
            const txModal = new bootstrap.Modal(document.getElementById('txModal'));

            document.body.addEventListener('click', function (e) {
                const btn = e.target.closest('.js-open-tx-modal');
                if (!btn) return;
                        // set reference id if clicked from permit-specific actions? default empty
                                const permitId = btn.dataset.permitId;
                                const amount = btn.dataset.amount;
                                if (permitId) {
                                    document.querySelector('#txModalForm [name="reference_id"]').value = permitId;
                                    let sel = document.querySelector('#txModalForm [name="tx_reference_id"]');
                                    if (sel) sel.value = permitId;
                                } else {
                                    document.querySelector('#txModalForm [name="reference_id"]').value = '';
                                    let sel = document.querySelector('#txModalForm [name="tx_reference_id"]');
                                    if (sel) sel.value = '';
                                }
                                if (amount) {
                                    let amtEl = document.querySelector('#txModalForm [name="amount"]');
                                    if (amtEl) amtEl.value = amount;
                                }
                                // prefill transaction_date if empty
                                let txDateElOpen = document.querySelector('#txModalForm [name="transaction_date"]');
                                if (txDateElOpen && !txDateElOpen.value) {
                                    const now = new Date();
                                    const pad = (n) => String(n).padStart(2, '0');
                                    txDateElOpen.value = now.getFullYear() + '-' + pad(now.getMonth()+1) + '-' + pad(now.getDate()) + 'T' + pad(now.getHours()) + ':' + pad(now.getMinutes());
                                }
                txModal.show();
            });

            document.getElementById('txModalForm').addEventListener('submit', function (ev) {
                ev.preventDefault();
                const form = ev.currentTarget;
                const url = '{{ route('admin.treasury.modal-store') }}';
                        const fd = new FormData();
                        // map fields
                        ['branch_id','transaction_type','amount','payment_method','receipt_number','received_by_user_id','notes'].forEach(k => {
                            const el = form.querySelector('[name="' + k + '"]');
                            if (el) fd.append(k, el.value);
                        });
                        // transaction_date (required) - default to now if empty
                        let txDateEl = form.querySelector('[name="transaction_date"]');
                        let txDateVal = txDateEl ? txDateEl.value : '';
                        if (!txDateVal) {
                            const now = new Date();
                            // format as YYYY-MM-DDTHH:mm
                            const pad = (n) => String(n).padStart(2, '0');
                            txDateVal = now.getFullYear() + '-' + pad(now.getMonth()+1) + '-' + pad(now.getDate()) + 'T' + pad(now.getHours()) + ':' + pad(now.getMinutes());
                        }
                        fd.append('transaction_date', txDateVal);
                // if user selected related permit
                const refSelect = form.querySelector('[name="tx_reference_id"]');
                if (refSelect && refSelect.value) {
                    fd.append('reference_type', 'vehicle_permit');
                    fd.append('reference_id', refSelect.value);
                } else {
                    fd.append('reference_type', 'vehicle_permit');
                    fd.append('reference_id', '');
                }

                fetch(url, { method: 'POST', headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'X-Requested-With': 'XMLHttpRequest' }, body: fd })
                    .then(async r => {
                        const json = await r.json().catch(() => ({}));
                        if (r.ok && json.success) {
                            txModal.hide();
                            location.reload();
                            return;
                        }
                        if (r.status === 422 && json.errors) {
                            const first = Object.keys(json.errors)[0];
                            alert(json.errors[first][0]);
                            return;
                        }
                        alert(json.message || 'فشل تسجيل العملية');
                    })
                    .catch(() => alert('فشل في الاتصال بالخادم'));
            });
});
</script>
@endsection