@extends('admin.layouts.master')

@section('title', 'تفاصيل تصريح مركبة')

@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-3 flex-wrap gap-2">
            <div>
                <h4 class="mb-0">تصريح رقم: {{ $permit->permit_number }}</h4>
                <small class="text-muted">{{ $permit->permit_for_label }} — {{ $permit->vehicle_label }}</small>
            </div>
            <div class="d-flex gap-2 flex-wrap">
                @can('renew permits')
                <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#renewModal">
                    <i class="ti ti-refresh me-1"></i>تجديد التصريح
                </button>
                @endcan
                @can('collect payments')
                @if((float)$permit->remaining_amount > 0)
                <a href="{{ route('admin.treasury.create', ['reference_type' => 'vehicle_permit', 'reference_id' => $permit->id, 'amount' => $permit->remaining_amount]) }}"
                   class="btn btn-warning">
                    <i class="ti ti-cash me-1"></i>تحصيل مدفوعات
                </a>
                @endif
                @endcan
                @can('edit permits')
                <a href="{{ route('admin.vehicle-permits.edit', $permit) }}" class="btn btn-warning">
                    <i class="ti ti-pencil me-1"></i>تعديل
                </a>
                @endcan
                <a href="{{ route('admin.vehicle-permits.index') }}" class="btn btn-light">رجوع</a>
            </div>
        </div>

        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        @if($errors->has('new_end_date') || $errors->has('new_start_date') || $errors->has('amount'))
            <div class="alert alert-danger alert-dismissible fade show">
                <strong>يوجد أخطاء في نموذج التجديد:</strong>
                <ul class="mb-0 mt-1">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        <div class="row g-3">

            {{-- ── Vehicle & Permit Data ── --}}
            <div class="col-lg-6">
                <div class="card h-100">
                    <div class="card-header fw-semibold"><i class="ti ti-car me-1 text-primary"></i>بيانات التصريح والمركبة</div>
                    <div class="card-body">
                        <div class="row g-2">
                            <div class="col-6"><strong>نوع التصريح:</strong> {{ $permit->permit_for_label }}</div>
                            <div class="col-6"><strong>التعريفة:</strong> {{ $permit->permitType?->name ?? '-' }}</div>
                            <div class="col-6"><strong>البيان:</strong> {{ $permit->vehicle_label }}</div>
                            <div class="col-6"><strong>رقم اللوحة:</strong> {{ $permit->plate_number }}</div>
                            <div class="col-6"><strong>رقم الشاسيه:</strong> {{ $permit->chassis_number }}</div>
                            <div class="col-6"><strong>اللون:</strong> {{ $permit->color ?? '-' }}</div>
                            <div class="col-6"><strong>شاهد النقل:</strong> {{ $permit->transport_witness ?? '-' }}</div>
                            <div class="col-6">
                                <strong>الحالة:</strong>
                                <span class="{{ $permit->permit_status?->badgeClass() }}">{{ $permit->status_label }}</span>
                            </div>
                            <div class="col-12"><strong>القطاعات المسموح بها:</strong><br>{{ $permit->allowed_sectors ?: '-' }}</div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- ── Ownership & Dates ── --}}
            <div class="col-lg-6">
                <div class="card h-100">
                    <div class="card-header fw-semibold"><i class="ti ti-building me-1 text-primary"></i>بيانات الملكية والفرع</div>
                    <div class="card-body">
                        <div class="row g-2">
                            <div class="col-6"><strong>الفرع:</strong> {{ $permit->branch?->name ?? '-' }}</div>
                            <div class="col-6"><strong>الشركة:</strong> {{ $permit->company?->name ?? '-' }}</div>
                            <div class="col-6"><strong>العميل:</strong> {{ $permit->customer?->full_name ?? '-' }}</div>
                            <div class="col-6"><strong>المسؤول:</strong> {{ $permit->issuedBy?->name ?? '-' }}</div>
                            <div class="col-6"><strong>المركبة:</strong> {{ $permit->vehicle?->plate_number ?? '-' }}</div>
                            <div class="col-6"><strong>المقطورة:</strong> {{ $permit->trailer?->trailer_number ?? '-' }}</div>
                            <div class="col-6"><strong>تاريخ البداية:</strong> {{ optional($permit->start_date)->format('Y-m-d') ?? '-' }}</div>
                            <div class="col-6"><strong>تاريخ النهاية:</strong> {{ optional($permit->end_date)->format('Y-m-d') ?? '-' }}</div>
                            <div class="col-12"><strong>ملاحظات:</strong><br>{{ $permit->notes ?: '-' }}</div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- ── Financials ── --}}
            <div class="col-lg-4">
                <div class="card h-100">
                    <div class="card-header fw-semibold"><i class="ti ti-cash me-1 text-success"></i>الملف المالي</div>
                    <div class="card-body">
                        <div class="row g-3 text-center">
                            <div class="col-4">
                                <div class="p-2 bg-light rounded">
                                    <small class="text-muted d-block">الإجمالي</small>
                                    <strong>{{ number_format((float)$permit->total_amount, 2) }}</strong>
                                    <small class="text-muted"> ج.م</small>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="p-2 bg-success bg-opacity-10 rounded">
                                    <small class="text-muted d-block">المدفوع</small>
                                    <strong class="text-success">{{ number_format((float)$permit->paid_amount, 2) }}</strong>
                                    <small class="text-muted"> ج.م</small>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="p-2 bg-danger bg-opacity-10 rounded">
                                    <small class="text-muted d-block">المتبقي</small>
                                    <strong class="text-danger">{{ number_format((float)$permit->remaining_amount, 2) }}</strong>
                                    <small class="text-muted"> ج.م</small>
                                </div>
                            </div>
                            @if($permit->due_date)
                            <div class="col-12">
                                <div class="p-2 bg-warning bg-opacity-10 rounded">
                                    <small class="text-muted d-block">تاريخ الاستحقاق</small>
                                    <strong>{{ $permit->due_date->format('Y-m-d') }}</strong>
                                </div>
                            </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            {{-- ── Renewals History ── --}}
            <div class="col-lg-8">
                <div class="card h-100">
                    <div class="card-header fw-semibold d-flex justify-content-between align-items-center">
                        <span><i class="ti ti-history me-1 text-primary"></i>سجل التجديدات</span>
                        <span class="badge bg-primary rounded-pill">{{ $permit->renewals->count() }}</span>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-sm table-hover align-middle mb-0">
                                <thead class="table-light">
                                <tr>
                                    <th>رقم التجديد</th>
                                    <th>تاريخ التجديد</th>
                                    <th>الفترة القديمة</th>
                                    <th>الفترة الجديدة</th>
                                    <th>قيمة التجديد</th>
                                    <th>الصافي</th>
                                    <th>المدفوع</th>
                                    <th>المتبقي</th>
                                    <th>الاستحقاق</th>
                                    <th>الحالة</th>
                                    <th>بواسطة</th>
                                </tr>
                                </thead>
                                <tbody>
                                @forelse($permit->renewals as $renewal)
                                    <tr>
                                        <td><span class="fw-semibold">{{ $renewal->renewal_number }}</span></td>
                                        <td>{{ optional($renewal->renewed_on)->format('Y-m-d') }}</td>
                                        <td class="text-nowrap">
                                            <small>{{ optional($renewal->old_start_date)->format('Y-m-d') ?? '-' }}</small>
                                            <br><small class="text-muted">← {{ optional($renewal->renewed_from)->format('Y-m-d') ?? '-' }}</small>
                                        </td>
                                        <td class="text-nowrap">
                                            <small>{{ optional($renewal->new_start_date)->format('Y-m-d') ?? '-' }}</small>
                                            <br><small class="text-muted">← {{ optional($renewal->renewed_to)->format('Y-m-d') ?? '-' }}</small>
                                        </td>
                                        <td>{{ number_format((float)$renewal->amount, 2) }}</td>
                                        <td>{{ number_format((float)$renewal->net_amount, 2) }}</td>
                                        <td class="text-success">{{ number_format((float)$renewal->paid_amount, 2) }}</td>
                                        <td class="text-danger">{{ number_format((float)$renewal->remaining_amount, 2) }}</td>
                                        <td>{{ optional($renewal->due_date)->format('Y-m-d') ?? '-' }}</td>
                                        <td>
                                            <span class="{{ $renewal->payment_status_badge_class }}">
                                                {{ $renewal->payment_status_label }}
                                            </span>
                                        </td>
                                        <td>
                                            <small class="text-muted">{{ $renewal->processedBy?->name ?? '-' }}</small>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="11" class="text-center text-muted py-3">
                                            <i class="ti ti-history-off me-1"></i>لا توجد تجديدات سابقة.
                                        </td>
                                    </tr>
                                @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            {{-- ── Activity Log ── --}}
            <div class="col-12">
                <div class="card">
                    <div class="card-header fw-semibold"><i class="ti ti-list-details me-1 text-secondary"></i>سجل النشاط</div>
                    <div class="card-body">
                        @forelse($permit->activityLogs as $log)
                            <div class="border rounded p-2 mb-2">
                                <div class="d-flex justify-content-between">
                                    <strong>{{ $log->description ?: $log->action }}</strong>
                                    <small class="text-muted">{{ optional($log->occurred_at)->format('Y-m-d H:i') }}</small>
                                </div>
                                <small class="text-muted">بواسطة: {{ $log->user?->name ?? 'النظام' }}</small>
                            </div>
                        @empty
                            <span class="text-muted">لا يوجد نشاط مسجل بعد.</span>
                        @endforelse
                    </div>
                </div>
            </div>

        </div>{{-- end .row --}}
    </div>
</div>

{{-- ═══════════════════════════════════════════════════════════════════════════
     RENEWAL MODAL
═══════════════════════════════════════════════════════════════════════════ --}}
@can('renew permits')
<div class="modal fade" id="renewModal" tabindex="-1" aria-hidden="true"
     data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <form class="modal-content" method="POST" action="{{ route('admin.vehicle-permits.renew', $permit) }}" id="renewForm">
            @csrf

            {{-- Header --}}
            <div class="modal-header bg-success text-white py-2">
                <div>
                    <h5 class="modal-title mb-0">
                        <i class="ti ti-refresh me-1"></i>تجديد تصريح مركبة
                    </h5>
                    <small class="opacity-75">{{ $permit->permit_number }} — {{ $permit->vehicle_label }}</small>
                </div>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>

            {{-- Body --}}
            <div class="modal-body">

                {{-- Current permit summary --}}
                <div class="alert alert-info py-2 mb-3 border-0">
                    <div class="row text-center g-0">
                        <div class="col-4 border-end">
                            <small class="text-muted d-block">تاريخ البداية الحالي</small>
                            <strong>{{ optional($permit->start_date)->format('Y-m-d') ?? '-' }}</strong>
                        </div>
                        <div class="col-4 border-end">
                            <small class="text-muted d-block">تاريخ النهاية الحالي</small>
                            <strong>{{ optional($permit->end_date)->format('Y-m-d') ?? '-' }}</strong>
                        </div>
                        <div class="col-4">
                            <small class="text-muted d-block">المتبقي المالي</small>
                            <strong class="text-danger">{{ number_format((float)$permit->remaining_amount, 2) }} ج.م</strong>
                        </div>
                    </div>
                </div>

                {{-- Section: New Period --}}
                <h6 class="fw-semibold text-muted border-bottom pb-2 mb-3">
                    <i class="ti ti-calendar-event me-1"></i>الفترة الجديدة
                </h6>
                <div class="row g-3 mb-3">
                    <div class="col-md-6">
                        <label class="form-label">تاريخ بداية الفترة الجديدة <span class="text-danger">*</span></label>
                        <input type="date" name="new_start_date" id="new_start_date"
                               class="form-control @error('new_start_date') is-invalid @enderror"
                               value="{{ old('new_start_date', $permit->end_date?->addDay()->format('Y-m-d')) }}"
                               required>
                        @error('new_start_date')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">تاريخ نهاية الفترة الجديدة <span class="text-danger">*</span></label>
                        <input type="date" name="new_end_date" id="new_end_date"
                               class="form-control @error('new_end_date') is-invalid @enderror"
                               value="{{ old('new_end_date') }}"
                               required>
                        @error('new_end_date')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <div class="form-text text-muted">
                            يجب أن يكون بعد {{ optional($permit->end_date)->format('Y-m-d') }}
                        </div>
                    </div>
                </div>

                {{-- Section: Financials --}}
                <h6 class="fw-semibold text-muted border-bottom pb-2 mb-3">
                    <i class="ti ti-coin me-1"></i>البيانات المالية
                </h6>
                <div class="row g-3 mb-3">
                    <div class="col-md-4">
                        <label class="form-label">قيمة التجديد <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <input type="number" step="0.01" min="0" max="99999999.99"
                                   name="amount" id="renewal_amount"
                                   class="form-control @error('amount') is-invalid @enderror"
                                   value="{{ old('amount', 0) }}"
                                   placeholder="0.00" required oninput="calcRenewal()">
                            <span class="input-group-text">ج.م</span>
                        </div>
                        @error('amount')
                            <div class="text-danger small mt-1">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">الخصم</label>
                        <div class="input-group">
                            <input type="number" step="0.01" min="0" max="99999999.99"
                                   name="discount_amount" id="discount_amount"
                                   class="form-control @error('discount_amount') is-invalid @enderror"
                                   value="{{ old('discount_amount', 0) }}"
                                   placeholder="0.00" oninput="calcRenewal()">
                            <span class="input-group-text">ج.م</span>
                        </div>
                        @error('discount_amount')
                            <div class="text-danger small mt-1">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">الصافي <span class="text-muted">(محسوب)</span></label>
                        <div class="input-group">
                            <input type="text" id="net_amount_display"
                                   class="form-control bg-light fw-semibold text-success"
                                   readonly value="0.00">
                            <span class="input-group-text">ج.م</span>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">المبلغ المدفوع</label>
                        <div class="input-group">
                            <input type="number" step="0.01" min="0" max="99999999.99"
                                   name="paid_amount" id="paid_amount"
                                   class="form-control @error('paid_amount') is-invalid @enderror"
                                   value="{{ old('paid_amount', 0) }}"
                                   placeholder="0.00" oninput="calcRenewal()">
                            <span class="input-group-text">ج.م</span>
                        </div>
                        @error('paid_amount')
                            <div class="text-danger small mt-1">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">المتبقي <span class="text-muted">(محسوب)</span></label>
                        <div class="input-group">
                            <input type="text" id="remaining_display"
                                   class="form-control bg-light fw-semibold text-danger"
                                   readonly value="0.00">
                            <span class="input-group-text">ج.م</span>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">تاريخ استحقاق الدفع</label>
                        <input type="date" name="due_date"
                               class="form-control @error('due_date') is-invalid @enderror"
                               value="{{ old('due_date') }}">
                        @error('due_date')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                {{-- Section: Notes --}}
                <h6 class="fw-semibold text-muted border-bottom pb-2 mb-3">
                    <i class="ti ti-notes me-1"></i>ملاحظات
                </h6>
                <textarea name="notes" class="form-control" rows="2"
                          placeholder="أي ملاحظات إضافية...">{{ old('notes') }}</textarea>

            </div>{{-- end modal-body --}}

            {{-- Footer --}}
            <div class="modal-footer border-top">
                <div class="me-auto">
                    <small class="text-muted">
                        <i class="ti ti-info-circle me-1"></i>
                        سيتم تحديث تاريخ نهاية التصريح الأساسي تلقائيًا
                    </small>
                </div>
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">إلغاء</button>
                <button type="submit" class="btn btn-success px-4">
                    <i class="ti ti-check me-1"></i>تأكيد التجديد
                </button>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
    function calcRenewal() {
        var amount   = parseFloat(document.getElementById('renewal_amount').value)  || 0;
        var discount = parseFloat(document.getElementById('discount_amount').value) || 0;
        var paid     = parseFloat(document.getElementById('paid_amount').value)     || 0;

        var net       = Math.max(amount - discount, 0);
        var remaining = Math.max(net - paid, 0);

        document.getElementById('net_amount_display').value = net.toFixed(2);
        document.getElementById('remaining_display').value  = remaining.toFixed(2);
    }

    @if($errors->has('new_end_date') || $errors->has('new_start_date') || $errors->has('amount'))
        document.addEventListener('DOMContentLoaded', function () {
            var modal = new bootstrap.Modal(document.getElementById('renewModal'));
            modal.show();
        });
    @endif

    document.addEventListener('DOMContentLoaded', function () {
        calcRenewal();
    });
</script>
@endpush
@endcan

@endsection