@push('css')
    <style>
        .kanban-board {
            display: flex;
            gap: 1rem;
            overflow-x: auto;
            padding-bottom: 1rem;
        }

        .kanban-column {
            min-width: 300px;
            background: #f8f9fa;
            border-radius: 0.5rem;
            flex: 1;
            display: flex;
            flex-direction: column;
            max-height: 80vh;
        }

        .kanban-header {
            padding: 0.75rem 1rem;
            border-radius: 0.5rem 0.5rem 0 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: white;
        }

        .kanban-cards {
            padding: 0.9rem;
            flex: 1;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .kanban-footer {
            border-top: 1px solid #dee2e6;
        }

        .kanban-card {
            background: white;
            border-radius: 0.5rem;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            cursor: grab;
            transition: all 0.2s ease;
        }

        .kanban-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .kanban-card:active {
            cursor: grabbing;
        }

        .kanban-card .card-header {
            padding: 0.75rem 1rem;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .kanban-card .card-body {
            padding: 0.75rem 1rem;
        }

        .kanban-card .card-footer {
            padding: 0.75rem 1rem;
            border-top: 1px solid #eee;
            display: flex;
            gap: 0.5rem;
            align-items: center;
        }

        .pagination {
            margin-bottom: 0;
        }

        @media (max-width: 768px) {
            .kanban-board {
                flex-direction: column;
            }

            .kanban-column {
                min-width: 100%;
                max-height: none;
            }
        }
    </style>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
@endpush
<div class="main-side" x-data="{ screen: @entangle('screen') }" x-cloak>
    <div x-show="screen == 'index'" x-transition>
        <div class="d-flex justify-content-between align-items-center mb-3">
            <div class="main-title mb-0 me-auto me-xl-0">
                <div class="small">الرئيسية</div>
                <div class="large">الصفقات</div>
            </div>
            <div class="d-flex gap-2">
                <button class="main-btn" wire:click='$set("screen","create")'>
                    <i class="fas fa-plus fs-13px"></i>اضافة صفقة
                </button>
            </div>
        </div>
        <x-message-admin />
        <div class="content_view" x-data="{ view: 'blocks' }">

            <div class="alert alert-info" role="alert">
                هنا يمكنك إضافة الصفقات التي تُظهر احتمالية عالية للنجاح.
                <br>
                ستتمكن من متابعتها من خلال صفحة "الصفقات"، حيث تُدرج تحت بند قيد المتابعة لتتمكن من مراقبة تقدمها واتخاذ
                الإجراءات المناسبة.
            </div>
            <div class="content_header">
                <div class="row g-2 flex-grow-1">
                    <div class="col-12 col-md-4 col-lg-3 col-xl-2">
                        <select class="form-select" wire:model.live="filter_employee">
                            <option value="">-- الموظف --</option>
                            @foreach ($users as $employee)
                                <option value="{{ $employee->id }}">{{ $employee->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-12 col-md-4 col-lg-3 col-xl-2">
                        <x-xselect2 :options="$clients" id="filter_client" wire:model.live="filter_client" />
                    </div>
                    <div class="col-12 col-md-4 col-lg-3 col-xl-2">
                        <select class="form-select" wire:model.live="filter_program">
                            <option value="">-- الخدمة --</option>
                            @foreach ($programs as $program)
                                <option value="{{ $program->id }}">{{ $program->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="btn-holder d-flex gap-1">
                    <button class="btn btn-sm btn-tooltip"
                        :class="view === 'blocks' ? 'btn-secondary' : 'btn-outline-secondary'"
                        @click="view = 'blocks'">
                        <i class="fas fa-list-ul"></i>
                        <span class="tip">العرض كقائمة</span>
                    </button>

                    <button class="btn btn-sm btn-tooltip"
                        :class="view === 'tables' ? 'btn-secondary' : 'btn-outline-secondary'"
                        @click="view = 'tables'">
                        <i class="fab fa-microsoft"></i>
                        <span class="tip">العرض كجدول</span>
                    </button>
                </div>
            </div>

            <div x-show="view === 'blocks'" x-transition:enter="transition ease-out duration-300"
                x-transition:enter-start="opacity-0 transform scale-95"
                x-transition:enter-end="opacity-100 transform scale-100"
                x-transition:leave="transition ease-in duration-200"
                x-transition:leave-start="opacity-100 transform scale-100"
                x-transition:leave-end="opacity-0 transform scale-95">

                <div class="kanban-board">
                    @foreach (['pending', 'in_progress', 'completed', 'cancelled'] as $status)
                        <div class="kanban-column" wire:key="column-{{ $status }}" x-data="{ status: '{{ $status }}' }"
                            @drop.prevent=" const dealId = event.dataTransfer.getData('dealId'); $wire.updateStatus(dealId, status);"
                            @dragover.prevent>
                            <div class="kanban-header {{ $this->getStatusColor($status) }}">
                                <h5 class="mb-0">{{ __($status) }}</h5>
                                <span
                                    class="badge bg-dark">{{ \App\Models\Deal::where('status', $status)->count() }}</span>
                            </div>
                            <div class="kanban-cards">
                                @foreach ($this->getDealsByStatus($status) as $deal)
                                    <div class="kanban-card" wire:key="deal-{{ $deal->id }}" draggable="true"
                                        @dragstart="event.dataTransfer.setData('dealId', {{ $deal->id }})">
                                        <h6 class="p-1">رقم الطلب: #{{ $deal->order_number }}</h6>
                                        <div class="card-header">
                                            <h6 class="mb-0">{{ $deal->title }}</h6>
                                            <div class="d-flex align-items-center">
                                                <img width="13" class="me-2"
                                                    src="https://upload.wikimedia.org/wikipedia/commons/9/98/Saudi_Riyal_Symbol.svg"
                                                    alt="">
                                                <span
                                                    class="badge bg-primary">{{ number_format($deal->amount, 2) }}</span>
                                            </div>
                                        </div>
                                        <div class="card-body">
                                            @if ($deal->description)
                                                <p class="small text-muted mb-2" title="{{ $deal->description }}">
                                                    <i class="fas fa-align-left me-1"></i>
                                                    {{ Str::limit($deal->description, 80) }}
                                                </p>
                                            @endif
                                            <div class="d-flex justify-content-between align-items-center">
                                                <div class="d-flex align-items-center gap-1">
                                                    <span class="badge bg-info" title="العميل">
                                                        <i class="fas fa-building me-1"></i>
                                                        {{ $deal->client->name ?? 'No Client' }}
                                                    </span>
                                                    <span class="badge bg-success" title="الخدمة">
                                                        <i class="fa-solid fa-chart-line me-1"></i>
                                                        {{ $deal->program?->name }}
                                                    </span>
                                                </div>
                                                <span class="small" title="الموظف">
                                                    <i class="fas fa-user me-1"></i>
                                                    {{ $deal->assignedUser->name ?? 'Unassigned' }}
                                                </span>
                                            </div>

                                        </div>
                                        <div class="card-footer">
                                            <div class="d-flex align-items-center gap-1">
                                                <button wire:click="show({{ $deal->id }})"
                                                    class="btn btn-sm btn-purple btn-tooltip">
                                                    <i class="fas fa-eye"></i>
                                                    <span class="tip">عرض التفاصيل</span>

                                                </button>
                                                {{-- عملت زرار بروات  بص لاسف الصور فى الارسال مش شغال    --}}
                                                {{-- <a href="{{ route('admin.deals.show', $deal->id) }}"
                                                    class="btn btn-sm btn-purple btn-tooltip">
                                                      <i class="fas fa-eye"></i>
                                                    <span class="tip">عرض التفاصيل</span>
                                                </a> --}}
                                                <button class="btn btn-sm btn-info btn-tooltip"
                                                    wire:click="edit({{ $deal->id }})" title="Edit">
                                                    <i class="fas fa-edit"></i>
                                                    <span class="tip">تعديل</span>
                                                </button>
                                                <button type="button" class="btn btn-sm btn-danger btn-tooltip"
                                                    wire:click="confirmDelete({{ $deal->id }})"
                                                    data-bs-toggle="modal" data-bs-target="#deleteModal"
                                                    title="حذف">
                                                    <i class="fas fa-trash"></i>
                                                    <span class="tip">حذف</span>
                                                </button>
                                            </div>
                                            <div class="ms-auto">
                                                <span class="text-muted">
                                                    <small
                                                        class="fs-11px">{{ $deal->created_at->format('M d, Y') }}</small>
                                                    |
                                                    <small class="fs-11px">رقم الصفقة : {{ $deal->id }}</small>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                            <div class="kanban-footer px-3 py-2">
                                {{ $this->getDealsByStatus($status)->links() }}
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

            <div x-show="view === 'tables'" x-transition:enter="transition ease-out duration-300"
                x-transition:enter-start="opacity-0 translate-y-4" x-transition:enter-end="opacity-100 translate-y-0"
                x-transition:leave="transition ease-in duration-200"
                x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 translate-y-4">
                <!-- هنا سيتم إرفاق الجدول لاحقاً -->
                <div class="table-responsive">
                    <table class="table main-table">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>العنوان</th>
                                <th>العميل</th>
                                <th>رقم الطلب</th>
                                <th>الخدمة</th>
                                <th>المبلغ</th>
                                <th>الحالة</th>
                                <th>أُضيف بواسطة</th>
                                <th>تاريخ الاضافة</th>
                                <th>العمليات</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($this->allDeals as $deal)
                                <tr>
                                    <td>{{ $deal->id }}</td>
                                    <td>{{ $deal->title }}</td>
                                    <td>{{ $deal->client->name ?? 'لايوجد' }}</td>
                                    <td>{{ $deal->order_number ?? 'لايوجد' }}</td>
                                    <td>{{ $deal->program?->name }}</td>
                                    <td>{{ number_format($deal->amount, 2) }}</td>
                                    <td>
                                        <span class="badge {{ $this->getStatusColor($deal->status) }}">
                                            {{ __($deal->status) }}
                                        </span>
                                    </td>
                                    <td>{{ $deal->assignedUser->name ?? 'لايوجد' }}</td>
                                    <td>{{ $deal->created_at->format('M d, Y') }}</td>
                                    <td>
                                        <button class="btn btn-sm btn-secondary btn-tooltip" data-bs-toggle="modal"
                                            data-bs-target="#changeStatus" wire:click="setDeal({{ $deal->id }})">
                                            <i class="fas fa-circle-notch"></i>
                                            <span class="tip">تعديل الحالة</span>
                                        </button>
                                        <button wire:click="show({{ $deal->id }})"
                                            class="btn btn-sm btn-purple btn-tooltip">
                                            <i class="fas fa-eye"></i>
                                            <span class="tip">عرض التفاصيل</span>
                                        </button>
                                        <button class="btn btn-sm btn-info btn-tooltip"
                                            wire:click="edit({{ $deal->id }})" title="Edit">
                                            <i class="fas fa-edit"></i>
                                            <span class="tip">تعديل</span>
                                        </button>
                                        <button type="button" class="btn btn-sm btn-danger btn-tooltip"
                                            wire:click="confirmDelete({{ $deal->id }})" data-bs-toggle="modal"
                                            data-bs-target="#deleteModal">
                                            <i class="fas fa-trash"></i>
                                            <span class="tip">حذف</span>
                                        </button>
                                    </td>
                                </tr>
                            @empty
                                <div class="alert alert-warning text-center mb-0">لايوجد بيانات</div>
                            @endforelse
                        </tbody>
                    </table>
                    {{ $this->allDeals->links() }}
                </div>
            </div>
            <!-- Modal -->
            <div class="modal fade" id="changeStatus" aria-hidden="true" wire:ignore.self>
                <div class="modal-dialog modal-sm">
                    <form 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 class="form-select" wire:model="selectedStatus">
                                            <option value="">اختر الحالة</option>
                                            <option value="pending">قيد الانتظار</option>
                                            <option value="in_progress">قيد التنفيذ</option>
                                            <option value="completed">مكتمل</option>
                                            <option value="cancelled">ملغي</option>
                                        </select>
                                    </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" wire:click="changeStatus" class="btn btn-success btn-sm px-3"
                                data-bs-dismiss="modal">حفظ</button>
                        </div>
                    </form>
                </div>
            </div>
            <div class="modal fade" id="deleteModal" aria-hidden="true" wire:ignore.self>
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="deleteModalLabel">تأكيد الحذف</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            هل أنت متأكد من تأكيد عملية الحذف؟
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary btn-sm px-3"
                                data-bs-dismiss="modal">إلغاء</button>
                            <button type="button" wire:click="delete" data-bs-dismiss="modal"
                                class="btn btn-danger btn-sm px-3">نعم</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="content_view" x-show="screen == 'create' || screen == 'edit'" x-transition>
        @include('livewire.admin.deals.form-modal')
    </div>
    <div x-show="screen == 'show'" x-transition>
        @include('livewire.admin.deals.show')
    </div>
</div>

@push('css')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
@endpush

@push('js')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

 <script>
    // Track if Select2 is initialized
    let select2Initialized = false;

    function initializeSelect2() {
        // Only initialize if not already initialized
        if (!select2Initialized) {
            // Initialize services select2
            $('#services').select2({
                placeholder: "اختر الخدمات",
                allowClear: true,
                width: '100%'
            }).on('change', function() {
                @this.set('services', $(this).val(), true);
            });

            // Initialize packages select2
            $('#packages').select2({
                placeholder: "اختر الباقات",
                allowClear: true,
                width: '100%'
            }).on('change', function() {
                @this.set('packages', $(this).val(), true);
            });

            select2Initialized = true;
        }

        // Update values if they've changed
        $('#services').val(@this.get('services')).trigger('change');
        $('#packages').val(@this.get('packages')).trigger('change');
    }

    function destroySelect2() {
        if (select2Initialized) {
            $('#services').select2('destroy');
            $('#packages').select2('destroy');
            select2Initialized = false;
        }
    }

    document.addEventListener('livewire:load', function() {
        initializeSelect2();
    });

    document.addEventListener('livewire:update', function() {
        // Only reinitialize if we're in form mode
        if (@this.screen === 'create' || @this.screen === 'edit') {
            destroySelect2();
            initializeSelect2();
        }
    });

    // Handle when entering edit mode
    window.addEventListener('dealEditMode', () => {
        setTimeout(() => {
            destroySelect2();
            initializeSelect2();
        }, 100);
    });

    // Clean up when component is removed
    Livewire.hook('component.removed', () => {
        destroySelect2();
    });
</script>
@endpush