@php
    $activity = $activity ?? null;
    $preset = $preset ?? ['subject_type' => null, 'subject_id' => null];
    $subjectType = old('subject_type', $activity?->subject_type ?? $preset['subject_type'] ?? \App\Models\Customer::class);
    $subjectId = old('subject_id', $activity?->subject_id ?? $preset['subject_id']);
@endphp

<div class="row g-3">
    <div class="col-12"><div class="form-section-title"><i class="fa-solid fa-calendar-check"></i>تفاصيل النشاط</div></div>

    <div class="col-md-4">
        <label class="form-label">الجهة <span class="req">*</span></label>
        <select name="subject_type" id="subjectType" class="form-select" required>
            <option value="{{ \App\Models\Customer::class }}" @selected($subjectType === \App\Models\Customer::class)>عميل</option>
            <option value="{{ \App\Models\Lead::class }}" @selected($subjectType === \App\Models\Lead::class)>عميل محتمل</option>
        </select>
    </div>

    <div class="col-md-8">
        <label class="form-label">اختر السجل <span class="req">*</span></label>
        <select name="subject_id" id="subjectId" class="form-select select2" data-placeholder="اختر السجل" required>
            <optgroup label="العملاء" data-group="{{ \App\Models\Customer::class }}">
                @foreach ($customers as $c)
                    <option value="{{ $c->id }}" data-type="{{ \App\Models\Customer::class }}"
                        @selected($subjectType === \App\Models\Customer::class && (int) $subjectId === $c->id)>
                        {{ $c->display_name }} — {{ $c->phone }}
                    </option>
                @endforeach
            </optgroup>
            <optgroup label="العملاء المحتملون" data-group="{{ \App\Models\Lead::class }}">
                @foreach ($leads as $l)
                    <option value="{{ $l->id }}" data-type="{{ \App\Models\Lead::class }}"
                        @selected($subjectType === \App\Models\Lead::class && (int) $subjectId === $l->id)>
                        {{ $l->name }} — {{ $l->phone }}
                    </option>
                @endforeach
            </optgroup>
        </select>
    </div>

    <div class="col-md-4">
        <label class="form-label">نوع النشاط <span class="req">*</span></label>
        <select name="type" class="form-select" required>
            @foreach ($types as $k => $v)
                <option value="{{ $k }}" @selected(old('type', $activity?->type ?? 'call') === $k)>{{ $v }}</option>
            @endforeach
        </select>
    </div>

    <div class="col-md-8">
        <label class="form-label">العنوان <span class="req">*</span></label>
        <input type="text" name="title" value="{{ old('title', $activity?->title) }}" class="form-control"
               placeholder="مثال: مكالمة متابعة لعرض السعر" required>
    </div>

    <div class="col-md-4">
        <label class="form-label">موعد النشاط</label>
        <input type="datetime-local" name="scheduled_at" class="form-control"
               value="{{ old('scheduled_at', $activity?->scheduled_at?->format('Y-m-d\TH:i') ?? now()->format('Y-m-d\TH:i')) }}">
    </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', $activity?->status ?? 'pending') === $k)>{{ $v }}</option>
            @endforeach
        </select>
    </div>

    <div class="col-md-4">
        <label class="form-label">الموظف المسؤول</label>
        <select name="user_id" class="form-select select2" data-placeholder="اختر الموظف">
            @foreach ($users as $k => $v)
                <option value="{{ $k }}" @selected((int) old('user_id', $activity?->user_id ?? auth()->id()) === (int) $k)>{{ $v }}</option>
            @endforeach
        </select>
    </div>

    <div class="col-12">
        <label class="form-label">التفاصيل</label>
        <textarea name="description" class="form-control" rows="3">{{ old('description', $activity?->description) }}</textarea>
    </div>

    <div class="col-12">
        <label class="form-label">النتيجة / الملخص</label>
        <textarea name="outcome" class="form-control" rows="2">{{ old('outcome', $activity?->outcome) }}</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('activities.index') }}" class="btn btn-light">إلغاء</a>
</div>

@push('scripts')
<script>
$(function () {
    function filterSubjects() {
        const type = $('#subjectType').val();
        $('#subjectId optgroup').each(function () {
            const match = $(this).data('group') === type;
            $(this).prop('disabled', !match).toggle(match);
            $(this).find('option').prop('disabled', !match);
        });
        // إعادة ضبط الاختيار إذا كان من مجموعة أخرى
        const selected = $('#subjectId').find('option:selected');
        if (selected.length && selected.data('type') !== type) {
            $('#subjectId').val($('#subjectId optgroup:visible option:first').val());
        }
        $('#subjectId').trigger('change.select2');
    }
    $('#subjectType').on('change', filterSubjects);
    filterSubjects();
});
</script>
@endpush