{{-- <div> --}}
<div class="main-side">
    <div class="main-title">
        <div class="small">الرئيسية</div>
        <div class="large">الخدمة</div>
    </div>
    <x-admin-alert></x-admin-alert>
    <div class="row g-4">
        <div class="col-md-4">
            <div class="issue-main-info">
                <div class="content-header">
                    اضف خدمة جديدة
                </div>
                <div class="col-md-12">
                    <label class="small-label mb-1" for="">
                        اسم الخدمة
                        <span class="text-danger">*</span>
                    </label>
                    <div class="box-input">
                        <input type="text" class="form-control" wire:model.defer='name' id="" />
                    </div>
                </div>
                <div class="d-flex justify-content-center mt-3">
                    <button type="button" wire:click='submit' class="main-btn px-4"> حفظ </button>
                </div>
            </div>
        </div>
        <div class="col-md-8">
            <form action="" class="issue-main-info">
                <div class="content-header">
                    عرض كل الخدمات
                </div>
                <div class="d-flex align-items-center justify-content-end mb-2">
                    <div class="box-search">
                        <img src="{{ asset('admin-asset/img/icons/search.png') }}" alt="icon" />
                        <input type="search" wire:model.live="search" id="" placeholder="بحث" />
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="main-table">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>إسم الخدمة</th>
                                <th>عدد العملاء</th>
                                <th>عدد الرسائل المرسلة</th>
                                <th>العمليات</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($programs as $program)
                                <tr>
                                    <td>{{ $loop->index + 1 }}</td>
                                    <td>{{ $program->name }}</td>
                                    <td>
                                        <a href="{{ route('admin.clients', ['program_id' => $program->id]) }}"
                                            class="btn-light-purple">
                                            {{ $program->clients_count }}
                                            <i class="fa fa-eye"></i>
                                        </a>
                                    </td>
                                    <td>
                                        <a href="{{ route('admin.MessagesSent', ['program_id' => $program->id]) }}"
                                            wire:navigate class="btn-light-blue"><i
                                                class="fas fa-envelope-open-text"></i> الرسائل:
                                            {{ $program->messages_count }} </a>
                                    </td>
                                    <td>
                                        <button type="button" class="btn btn-sm btn-info btn-tooltip"
                                            wire:click='edit({{ $program->id }})'>
                                            <i class="fas fa-pen"></i>
                                            <span class="tip">تعديل</span>
                                        </button>
                                        <x-delete-modal :item="$program" />
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan='22'>
                                        <div class="alert alert-warning mb-0">
                                            لا يوجد نتائج
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                    {{ $programs->links() }}
                </div>
            </form>
        </div>
    </div>
</div>