@extends('layouts.app')
@section('title', 'رسايل الواتساب')
@section('content')
<div class="container">
    <x-header title="إدارة رسايل الواتساب" />
    @canany(['whatsapp.create'])
        <a href="{{ route('whatsapp_templates.create') }}" class="btn btn-success mb-3">
            <i class="fa-brands fa-whatsapp"></i> إضافة رساله
        </a>
    @endcanany

    <x-alert />

    {{-- للعرض على الشاشات الكبيرة --}}
    <div class="table-responsive d-none d-md-block">
        <table class="table table-bordered table-striped table-hover table-sm text-center align-middle">
            <thead>
                <tr class="text-center">
                    <th>#</th>
                    <th>إسم الرساله</th>
                    <th>محتوى الرساله</th>
                    <th>الحالة</th>
                    @canany(['whatsapp.edit', 'whatsapp.delete'])
                    <th>إجراءات</th>
                    @endcanany
                </tr>
            </thead>
            <tbody>
                @forelse ($whatsappTemplates as $whatsappTemplate)
                <tr class="text-center">
                    <td>{{ $loop->iteration + ($whatsappTemplates->currentPage() - 1) * $whatsappTemplates->perPage() }}</td>
                    <td>{{ $whatsappTemplate->title }}</td>
                    <td>{!! $whatsappTemplate->message !!}</td>

                    <td>
                        @if($whatsappTemplate->is_active)
                            <span class="badge bg-success">نشط</span>
                        @else
                            <span class="badge bg-secondary">غير نشط</span>
                        @endif
                    </td>

                    @canany(['whatsapp.edit', 'whatsapp.delete'])
                    <td>
                        @canany(['whatsapp.edit'])
                            <a href="{{ route('whatsapp_templates.edit', $whatsappTemplate->id) }}" class="btn btn-sm btn-warning btn-sm"><i class="fa-regular fa-pen-to-square"></i></a>
                        @endcan
                        @canany(['whatsapp.delete'])
                            <!-- زر الحذف -->
                            <button type="button" class="btn btn-danger btn-sm delete-ajax-trigger" 
                                    data-id="{{ $whatsappTemplate->id }}"
                                    data-name="{{ $whatsappTemplate->title }}"
                                    data-url="/whatsapp_templates"
                                    data-bs-toggle="modal"
                                    data-bs-target="#deleteModal0">
                                <i class="fa-solid fa-trash"></i>
                            </button>
                        @endcanany
                    </td>
                    @endcanany
                </tr>
                @empty
                <tr>
                    <td colspan="9" class="text-center">لا يوجد بيانات</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    

    {{-- للعرض على الشاشات الصغيرة --}}
    <div class="d-block d-md-none">
        @forelse ($whatsappTemplates as $whatsappTemplate)
        <div class="card mb-3">
            <div class="card-body">
                <span class="badge text-bg-dark rounded-pill">{{ $loop->iteration + ($whatsappTemplates->currentPage() - 1) * $whatsappTemplates->perPage() }}</span> <br>
                <strong>المادة الدراسية:</strong> {{ $whatsappTemplate->title }} <br>
                <strong>نظام التعليم:</strong>{!! $whatsappTemplate->message !!} <br>
                <strong>الحالة:</strong><span class="badge text-bg-{{ $whatsappTemplate->is_active ? 'success' : 'danger' }}">{{ $whatsappTemplate->is_active ? 'نشط' : 'غير نشط' }} </span>
                <br>
                @canany(['whatsapp.edit', 'whatsapp.delete'])
                <div class="d-flex justify-content-evenly mt-3">
                    @canany(['whatsapp.edit'])
                        <a href="{{ route('whatsapp_templates.edit', $whatsappTemplate->id) }}" class="btn btn-sm btn-warning me-2"><i class="fa-regular fa-pen-to-square"></i> تعديل
                        </a>
                    @endcan
                    @canany(['whatsapp.delete'])
                        <button type="button" class="btn btn-danger btn-sm delete-ajax-trigger" 
                                    data-id="{{ $whatsappTemplate->id }}"
                                    data-name="{{ $whatsappTemplate->title }}"
                                    data-url="/whatsapp_templates"
                                    data-bs-toggle="modal"
                                    data-bs-target="#deleteModal0">
                            <i class="fa-solid fa-trash"></i> حذف
                        </button>
                    @endcanany
                </div>
                @endcanany
            </div>
        </div>
        @empty
        <div class="card mb-3">
            <div class="card-body">
                لا يوجد بيانات
            </div>
        </div>
        @endforelse
    </div>
</div>
{{ $whatsappTemplates->links('pagination::bootstrap-5') }}

@canany(['whatsapp.delete'])
    {{-- مودال واحد يتيم لكل الصفحة --}}
    <x-delete-modal id="0" model="whatsapp_templates" />
@endcanany

@endsection