{{-- Programs Modal --}}
@if ($showProgramsModal)
    <div class="modal fade show d-block" tabindex="-1" style="background-color: rgba(0,0,0,0.5);">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">الخدمات التابعة لـ {{ $selectedClientName }}</h5>
                    <button type="button" class="btn-close" wire:click="$set('showProgramsModal', false)"></button>
                </div>
                <div class="modal-body">
                    @if (!empty($selectedPrograms))
                        <ul class="list-group">
                            @foreach ($selectedPrograms as $program)
                                <li class="list-group-item">{{ $program }}</li>
                            @endforeach
                        </ul>
                    @else
                        <p class="text-muted text-center">لا توجد خدمات مسجلة</p>
                    @endif
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary btn-sm" wire:click="$set('showProgramsModal', false)">إغلاق</button>
                </div>
            </div>
        </div>
    </div>
@endif

{{-- Add Reminder Modal --}}
<div class="modal fade" id="addAlert" aria-hidden="true" wire:ignore.self>
    <div class="modal-dialog">
        <form wire:submit.prevent="saveReminder" class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5">أضافة تذكير</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row g-3">
                    <div class="col-12">
                        <label class="form-label">العنوان</label>
                        <input type="text" class="form-control" wire:model.defer="reminder_title">
                        @error('reminder_title')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">تاريخ التذكير</label>
                        <input type="date" class="form-control" wire:model.defer="reminder_remind_at">
                        @error('reminder_remind_at')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">التذكير القادم</label>
                        <input type="date" class="form-control" wire:model.defer="reminder_next_reminder">
                        @error('reminder_next_reminder')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="col-12">
                        <label class="form-label">الاجراء المتخذ</label>
                        <textarea class="form-control" wire:model.defer="reminder_action"></textarea>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary btn-sm px-3" data-bs-dismiss="modal">الغاء</button>
                <button type="submit" class="btn btn-success btn-sm px-3" data-bs-dismiss="modal">حفظ</button>
            </div>
        </form>
    </div>
</div>

{{-- Change Status Modal --}}
<div class="modal fade" id="changeStatus" aria-hidden="true" wire:ignore.self>
    <div class="modal-dialog modal-sm">
        <form wire:submit.prevent="updateStatus" class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5">تعديل الحالة</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row g-3">
                    <div class="col-12">
                        <div class="inp-holder">
                            <select wire:model="new_status" class="form-select">
                                <option value="">اختر الحالة</option>
                                <option value="possible">محتمل</option>
                                <option value="interested">مهتم</option>
                                <option value="not_interested">غير مهتم</option>
                                <option value="true">حقيقي</option>
                            </select>
                            @error('new_status')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary btn-sm px-3" data-bs-dismiss="modal">الغاء</button>
                <button type="submit" class="btn btn-success btn-sm px-3" data-bs-dismiss="modal">حفظ</button>
            </div>
        </form>
    </div>
</div>

{{-- Import Excel Modal --}}
<div class="modal fade" id="import" aria-hidden="true" wire:ignore.self>
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5">استيراد من اكسيل</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
                    wire:loading.attr="disabled" wire:target="import"></button>
            </div>
            <div class="modal-body">
                {{-- File Input --}}
                <div class="form-group mb-3">
                    <label for="file-input" class="form-label">الملف</label>
                    <input type="file" wire:model="file" class="form-control" id="file-input"
                        accept=".xlsx,.xls" wire:loading.attr="disabled" wire:target="import">
                    @error('file')
                        <div class="text-danger small mt-1">{{ $message }}</div>
                    @enderror
                </div>

                {{-- File Upload Progress --}}
                <div wire:loading wire:target="file" class="mb-3">
                    <div class="d-flex align-items-center">
                        <div class="spinner-border spinner-border-sm text-primary me-2" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                        <small class="text-muted">جاري تحميل الملف...</small>
                    </div>
                </div>

                {{-- Import Progress --}}
                <div wire:loading wire:target="import" class="mb-3">
                    <div class="alert alert-info d-flex align-items-center mb-3" role="alert">
                        <div class="spinner-border spinner-border-sm text-info me-2" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                        <div>
                            <strong>جاري معالجة الملف...</strong><br>
                            <small class="text-muted">يرجى الانتظار حتى اكتمال العملية</small>
                        </div>
                    </div>
                    <div class="progress mb-2" style="height: 8px;">
                        <div class="progress-bar progress-bar-striped progress-bar-animated bg-success"
                            role="progressbar" style="width: 100%"></div>
                    </div>
                    <div class="d-flex justify-content-between">
                        <small class="text-muted">قراءة البيانات وإدراجها في النظام</small>
                        <small class="text-muted">
                            <i class="fas fa-clock me-1"></i> قد تستغرق دقائق قليلة
                        </small>
                    </div>
                </div>

                {{-- File Info --}}
                @if ($file)
                    <div wire:loading.remove wire:target="import" class="alert alert-light border">
                        <div class="row align-items-center">
                            <div class="col-auto">
                                <i class="fas fa-file-excel text-success fa-2x"></i>
                            </div>
                            <div class="col">
                                <div class="fw-bold">{{ $file->getClientOriginalName() }}</div>
                                <small class="text-muted">
                                    الحجم: {{ number_format($file->getSize() / 1024, 1) }} KB
                                </small>
                            </div>
                        </div>
                    </div>
                @endif
            </div>
            <div class="modal-footer">
                <button wire:click="import" type="button" class="btn btn-success btn-sm px-3 position-relative"
                    wire:loading.attr="disabled" wire:target="import" @if (!$file) disabled @endif>
                    <span wire:loading.remove wire:target="import">
                        <i class="fas fa-upload me-1"></i> رفع واستيراد
                    </span>
                    <span wire:loading wire:target="import">
                        <span class="spinner-border spinner-border-sm me-2" role="status"></span>
                        جاري المعالجة...
                    </span>
                </button>
                <button type="button" class="btn btn-secondary btn-sm px-3" data-bs-dismiss="modal"
                    wire:loading.attr="disabled" wire:target="import">
                    <i class="fas fa-times me-1"></i> إلغاء
                </button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="transferClient" aria-hidden="true" wire:ignore.self>
    <div class="modal-dialog">
        <form wire:submit.prevent="transferClient" class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5">نقل العميل </h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row g-3">
                    <div class="col-12">
                        <label class="form-label">القسم الجديد</label>
                        <select wire:model="new_department" class="form-select">
                            <option value="">اختر القسم</option>
                            @foreach ($availableDepartments as $department)
                                <option value="{{ $department->id }}">{{ $department->name }}</option>
                            @endforeach
                        </select>
                        @error('new_department')
                        <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary btn-sm px-3" data-bs-dismiss="modal">الغاء</button>
                <button type="submit" class="btn btn-success btn-sm px-3" data-bs-dismiss="modal">نقل</button>
            </div>
        </form>
    </div>
</div>