@php
    $isSuperAdmin = auth()->user()?->isSuperAdmin();
    $permit = $permit ?? null;
    $selectedPermitFor = old('permit_for', $permit?->permit_for ?? 'vehicle');
    $defaultBranchId = $permit->branch_id ?? session('current_branch_id', auth()->user()?->branch_id);
    $defaultCompanyId = $permit->company_id ?? request('company_id');
    $defaultCustomerId = $permit->customer_id ?? request('customer_id');
    $defaultVehicleId = $permit->vehicle_id ?? request('vehicle_id');
@endphp

@if(request()->filled('return_to'))
    <input type="hidden" name="return_to" value="{{ request('return_to') }}">
@endif

<div class="row g-3">
    <div class="col-md-3">
        <label class="form-label">الفرع</label>
        <select name="branch_id" class="form-select" {{ $isSuperAdmin ? '' : 'disabled' }}>
            @foreach($branches as $branch)
                <option value="{{ $branch->id }}" {{ (int) old('branch_id', $defaultBranchId) === $branch->id ? 'selected' : '' }}>
                    {{ $branch->name }}
                </option>
            @endforeach
        </select>
        @if(! $isSuperAdmin)
            <input type="hidden" name="branch_id" value="{{ old('branch_id', $defaultBranchId) }}">
        @endif
        @error('branch_id')<small class="text-danger">{{ $message }}</small>@enderror
    </div>

    <div class="col-md-3">
        <label class="form-label">الشركة (اختياري)</label>
        <select name="company_id" class="form-select">
            <option value="">غير تابع لشركة</option>
            @foreach($companies as $company)
                <option value="{{ $company->id }}" {{ (string) old('company_id', $defaultCompanyId) === (string) $company->id ? 'selected' : '' }}>
                    {{ $company->name }}
                </option>
            @endforeach
        </select>
        @error('company_id')<small class="text-danger">{{ $message }}</small>@enderror
    </div>

    <div class="col-md-3">
        <label class="form-label">العميل (اختياري)</label>
        <select name="customer_id" class="form-select js-customer-select2" data-placeholder="اختر العميل">
            <option value="">غير تابع لعميل</option>
            @foreach($customers as $customer)
                <option
                    value="{{ $customer->id }}"
                    data-phone="{{ $customer->phone ?? '' }}"
                    data-mobile="{{ $customer->mobile ?? '' }}"
                    {{ (string) old('customer_id', $defaultCustomerId) === (string) $customer->id ? 'selected' : '' }}
                >
                    {{ $customer->full_name }}{{ $customer->phone ? ' - ' . $customer->phone : '' }}
                </option>
            @endforeach
        </select>
        @error('customer_id')<small class="text-danger">{{ $message }}</small>@enderror
    </div>

    <div class="col-md-3">
        <label class="form-label">نوع التصريح</label>
        <select name="permit_type_id" class="form-select" required>
            <option value="">اختر النوع</option>
            @foreach($permitTypes as $type)
                <option value="{{ $type->id }}" {{ (string) old('permit_type_id', $permit->permit_type_id ?? '') === (string) $type->id ? 'selected' : '' }}>
                    {{ $type->name }}
                </option>
            @endforeach
        </select>
        @error('permit_type_id')<small class="text-danger">{{ $message }}</small>@enderror
    </div>

    <div class="col-md-3">
        <label class="form-label">رقم التصريح</label>
        <input type="text" name="permit_number" class="form-control" value="{{ old('permit_number', $permit->permit_number ?? '') }}" required>
        @error('permit_number')<small class="text-danger">{{ $message }}</small>@enderror
    </div>

    <div class="col-md-3">
        <label class="form-label">التصريح لـ</label>
        <select name="permit_for" id="permit_for" class="form-select" required>
            <option value="vehicle" {{ $selectedPermitFor === 'vehicle' ? 'selected' : '' }}>سيارة فقط</option>
            <option value="tractor" {{ $selectedPermitFor === 'tractor' ? 'selected' : '' }}>قاطرة فقط</option>
            <option value="trailer" {{ $selectedPermitFor === 'trailer' ? 'selected' : '' }}>مقطورة فقط</option>
            <option value="tractor_trailer" {{ $selectedPermitFor === 'tractor_trailer' ? 'selected' : '' }}>قاطرة + مقطورة</option>
        </select>
        @error('permit_for')<small class="text-danger">{{ $message }}</small>@enderror
    </div>

    <div class="col-md-3" id="vehicle-wrapper">
        <label class="form-label">المركبة (سيارة/قاطرة)</label>
        <select name="vehicle_id" id="vehicle_id" class="form-select">
            <option value="">اختر مركبة</option>
            @foreach($vehicles as $vehicle)
                <option value="{{ $vehicle->id }}" data-kind="{{ $vehicle->vehicle_kind }}" {{ (string) old('vehicle_id', $defaultVehicleId) === (string) $vehicle->id ? 'selected' : '' }}>
                    {{ $vehicle->plate_number }} - {{ $vehicle->vehicle_kind_label }}
                </option>
            @endforeach
        </select>
        @error('vehicle_id')<small class="text-danger">{{ $message }}</small>@enderror
    </div>

    <div class="col-md-3" id="trailer-wrapper">
        <label class="form-label">المقطورة</label>
        <select name="trailer_id" id="trailer_id" class="form-select">
            <option value="">اختر مقطورة</option>
            @foreach($trailers as $trailer)
                <option value="{{ $trailer->id }}" {{ (string) old('trailer_id', $permit->trailer_id ?? '') === (string) $trailer->id ? 'selected' : '' }}>
                    {{ $trailer->trailer_number }}
                </option>
            @endforeach
        </select>
        @error('trailer_id')<small class="text-danger">{{ $message }}</small>@enderror
    </div>

    <div class="col-md-3">
        <label class="form-label">البيان</label>
        <input type="text" name="vehicle_label" class="form-control" value="{{ old('vehicle_label', $permit->vehicle_label ?? '') }}" placeholder="مثال: قاطرة مرسيدس موديل 2020" required>
        @error('vehicle_label')<small class="text-danger">{{ $message }}</small>@enderror
    </div>

    <div class="col-md-3">
        <label class="form-label">رقم اللوحة</label>
        <input type="text" name="plate_number" class="form-control" value="{{ old('plate_number', $permit->plate_number ?? '') }}" required>
        @error('plate_number')<small class="text-danger">{{ $message }}</small>@enderror
    </div>

    <div class="col-md-3">
        <label class="form-label">رقم الشاسيه</label>
        <input type="text" name="chassis_number" class="form-control" value="{{ old('chassis_number', $permit->chassis_number ?? '') }}" required>
        @error('chassis_number')<small class="text-danger">{{ $message }}</small>@enderror
    </div>

    <div class="col-md-3">
        <label class="form-label">اللون</label>
        <input type="text" name="color" class="form-control" value="{{ old('color', $permit->color ?? '') }}">
    </div>

    <div class="col-md-3">
        <label class="form-label">شاهد النقل</label>
        <input type="text" name="transport_witness" class="form-control" value="{{ old('transport_witness', $permit->transport_witness ?? '') }}">
    </div>

    <div class="col-md-3">
        <label class="form-label">تاريخ البداية</label>
        <input type="date" name="start_date" class="form-control" value="{{ old('start_date', $permit?->start_date?->format('Y-m-d')) }}" required>
        @error('start_date')<small class="text-danger">{{ $message }}</small>@enderror
    </div>

    <div class="col-md-3">
        <label class="form-label">تاريخ النهاية</label>
        <input type="date" name="end_date" class="form-control" value="{{ old('end_date', $permit?->end_date?->format('Y-m-d')) }}" required>
        @error('end_date')<small class="text-danger">{{ $message }}</small>@enderror
    </div>

    <div class="col-md-3">
        <label class="form-label">تاريخ الاستحقاق</label>
        <input type="date" name="due_date" class="form-control" value="{{ old('due_date', $permit?->due_date?->format('Y-m-d')) }}">
    </div>

    <div class="col-12">
        <label class="form-label">القطاعات المسموح بها</label>
        <textarea name="allowed_sectors" class="form-control" rows="2">{{ old('allowed_sectors', $permit->allowed_sectors ?? '') }}</textarea>
    </div>

    <div class="col-md-4">
        <label class="form-label">الإجمالي</label>
        <input type="number" step="0.01" min="0" name="total_amount" id="total_amount" class="form-control" value="{{ old('total_amount', $permit->total_amount ?? 0) }}" required>
    </div>

    <div class="col-md-4">
        <label class="form-label">المدفوع</label>
        <input type="number" step="0.01" min="0" name="paid_amount" id="paid_amount" class="form-control" value="{{ old('paid_amount', $permit->paid_amount ?? 0) }}" required>
    </div>

    <div class="col-md-4">
        <label class="form-label">المتبقي (تلقائي)</label>
        <input type="number" step="0.01" min="0" id="remaining_amount_display" class="form-control" value="{{ old('remaining_amount', $permit->remaining_amount ?? 0) }}" readonly>
    </div>

    <div class="col-12">
        <label class="form-label">ملاحظات</label>
        <textarea name="notes" class="form-control" rows="3">{{ old('notes', $permit->notes ?? '') }}</textarea>
    </div>
</div>

<script>
(function () {
    const permitForEl = document.getElementById('permit_for');
    const vehicleWrapper = document.getElementById('vehicle-wrapper');
    const trailerWrapper = document.getElementById('trailer-wrapper');
    const vehicleEl = document.getElementById('vehicle_id');

    const totalEl = document.getElementById('total_amount');
    const paidEl = document.getElementById('paid_amount');
    const remainingEl = document.getElementById('remaining_amount_display');

    function toggleTargets() {
        const v = permitForEl.value;
        const needsVehicle = v === 'vehicle' || v === 'tractor' || v === 'tractor_trailer';
        const needsTrailer = v === 'trailer' || v === 'tractor_trailer';

        vehicleWrapper.style.display = needsVehicle ? '' : 'none';
        trailerWrapper.style.display = needsTrailer ? '' : 'none';

        if (v === 'tractor' || v === 'tractor_trailer') {
            Array.from(vehicleEl.options).forEach(function (opt, i) {
                if (i === 0) return;
                const kind = opt.getAttribute('data-kind');
                opt.style.display = (kind === 'tractor') ? '' : 'none';
            });
        } else {
            Array.from(vehicleEl.options).forEach(function (opt, i) {
                if (i === 0) return;
                opt.style.display = '';
            });
        }
    }

    function recalc() {
        const total = parseFloat(totalEl.value || 0);
        const paid = parseFloat(paidEl.value || 0);
        remainingEl.value = Math.max(total - paid, 0).toFixed(2);
    }

    permitForEl.addEventListener('change', toggleTargets);
    totalEl.addEventListener('input', recalc);
    paidEl.addEventListener('input', recalc);

    toggleTargets();
    recalc();
})();
</script>