@php
    $subscription = $subscription ?? null;
    $preset = $preset ?? ['customer_id' => null, 'device_unit_id' => null];
    $selectedCustomer = old('customer_id', $subscription?->customer_id ?? $preset['customer_id']);
@endphp

<div class="row g-3">
    <div class="col-12"><div class="form-section-title"><i class="fa-solid fa-satellite-dish"></i>بيانات الاشتراك</div></div>

    <div class="col-md-4">
        <label class="form-label">العميل <span class="req">*</span></label>
        <select name="customer_id" id="subCustomer" class="form-select select2" data-placeholder="اختر العميل" required>
            <option value="">— اختر العميل —</option>
            @foreach ($customers as $c)
                <option value="{{ $c->id }}" @selected((int) $selectedCustomer === $c->id)>{{ $c->display_name }} — {{ $c->phone }}</option>
            @endforeach
        </select>
    </div>

    <div class="col-md-4">
        <label class="form-label">المركبة</label>
        <select name="vehicle_id" id="subVehicle" class="form-select select2" data-placeholder="اختر المركبة">
            <option value="">— بدون —</option>
            @foreach ($vehicles as $v)
                <option value="{{ $v->id }}" data-customer="{{ $v->customer_id }}"
                    @selected((int) old('vehicle_id', $subscription?->vehicle_id) === $v->id)>
                    {{ $v->plate_number }} — {{ trim($v->make . ' ' . $v->model) }}
                </option>
            @endforeach
        </select>
    </div>

    <div class="col-md-4">
        <label class="form-label">الجهاز (IMEI)</label>
        <select name="device_unit_id" class="form-select select2" data-placeholder="اختر الجهاز">
            <option value="">— بدون —</option>
            @foreach ($devices as $d)
                <option value="{{ $d->id }}" @selected((int) old('device_unit_id', $subscription?->device_unit_id ?? $preset['device_unit_id']) === $d->id)>
                    {{ $d->imei }} — {{ $d->product?->name }}
                </option>
            @endforeach
        </select>
    </div>

    <div class="col-md-4">
        <label class="form-label">باقة الاشتراك</label>
        <select name="product_id" id="planSelect" class="form-select select2" data-placeholder="اختر الباقة">
            <option value="">— بدون —</option>
            @foreach ($plans as $p)
                <option value="{{ $p->id }}" data-price="{{ $p->sale_price }}" data-months="{{ $p->subscription_months }}"
                    @selected((int) old('product_id', $subscription?->product_id) === $p->id)>
                    {{ $p->name }} ({{ currency($p->sale_price) }})
                </option>
            @endforeach
        </select>
    </div>

    <div class="col-md-3">
        <label class="form-label">تاريخ البداية <span class="req">*</span></label>
        <input type="date" name="start_date" id="startDate" class="form-control" required
               value="{{ old('start_date', $subscription?->start_date?->format('Y-m-d') ?? today()->toDateString()) }}">
    </div>

    <div class="col-md-3">
        <label class="form-label">تاريخ الانتهاء <span class="req">*</span></label>
        <input type="date" name="end_date" id="endDate" class="form-control" required
               value="{{ old('end_date', $subscription?->end_date?->format('Y-m-d') ?? today()->addYear()->toDateString()) }}">
    </div>

    <div class="col-md-2">
        <label class="form-label">القيمة</label>
        <input type="number" step="0.01" min="0" name="amount" id="amountInput" class="form-control"
               value="{{ old('amount', $subscription?->amount ?? 0) }}">
    </div>

    <div class="col-md-4">
        <label class="form-label">الحالة <span class="req">*</span></label>
        <select name="status" class="form-select" required>
            @foreach ($statuses as $k => $v)
                <option value="{{ $k }}" @selected(old('status', $subscription?->status ?? 'active') === $k)>{{ $v }}</option>
            @endforeach
        </select>
    </div>

    <div class="col-12 mt-4"><div class="form-section-title"><i class="fa-solid fa-key"></i>بيانات منصة التتبع</div></div>

    <div class="col-md-4">
        <label class="form-label">رابط المنصة</label>
        <input type="text" name="platform_url" class="form-control" dir="ltr"
               value="{{ old('platform_url', $subscription?->platform_url ?? setting('platform_url')) }}">
    </div>

    <div class="col-md-4">
        <label class="form-label">اسم المستخدم</label>
        <input type="text" name="platform_username" class="form-control" dir="ltr"
               value="{{ old('platform_username', $subscription?->platform_username) }}">
    </div>

    <div class="col-md-4">
        <label class="form-label">كلمة المرور</label>
        <input type="text" name="platform_password" class="form-control" dir="ltr"
               value="{{ old('platform_password', $subscription?->platform_password) }}">
    </div>

    <div class="col-12">
        <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" name="auto_renew" value="1" id="autoRenew"
                   @checked(old('auto_renew', $subscription?->auto_renew ?? false))>
            <label class="form-check-label" for="autoRenew">تجديد تلقائي (تنبيه مسبق قبل الانتهاء)</label>
        </div>
    </div>

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

<div class="d-flex gap-2 mt-4">
    <button type="submit" class="btn btn-primary"><i class="fa-solid fa-floppy-disk ms-2"></i>حفظ</button>
    <a href="{{ route('subscriptions.index') }}" class="btn btn-light">إلغاء</a>
</div>

@push('scripts')
<script>
$(function () {
    function filterVehicles() {
        const customerId = String($('#subCustomer').val() || '');
        $('#subVehicle option').each(function () {
            if (!$(this).val()) return;
            $(this).prop('disabled', customerId && String($(this).data('customer')) !== customerId);
        });
        $('#subVehicle').trigger('change.select2');
    }
    $('#subCustomer').on('change', filterVehicles);
    filterVehicles();

    // تعبئة القيمة وتاريخ الانتهاء تلقائياً حسب الباقة المختارة
    $('#planSelect').on('change', function () {
        const opt = $(this).find('option:selected');
        const price = opt.data('price');
        const months = parseInt(opt.data('months')) || 0;

        if (price !== undefined) $('#amountInput').val(price);

        if (months > 0 && $('#startDate').val()) {
            const start = new Date($('#startDate').val());
            start.setMonth(start.getMonth() + months);
            $('#endDate').val(start.toISOString().slice(0, 10));
        }
    });
});
</script>
@endpush