@extends('layouts.app')
@section('title', 'إدارة الكنائس')
@section('content')
<div class="container">
    <x-header title="إدارة الكنائس" />
    @canany(['church.create'])
        <a href="{{ route('churches.create') }}" class="btn btn-success mb-3"><i class="fa-solid fa-church"></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>
                    <th>رابط واتساب</th>
                    <th>رابط الفيسبوك</th>
                    @canany(['church.edit', 'church.delete'])
                    <th>إجراءات</th>
                    @endcanany
                </tr>
            </thead>
            <tbody>
                @forelse ($churches as $church)
                <tr class="text-center">
                    <td>{{ $loop->iteration + ($churches->currentPage() - 1) * $churches->perPage() }}</td>
                    <td>{{ $church->name }}</td>
                    <td>{{ $church->address }}</td>
                    <td>{{ $church->phone }}</td>
                    <td>{{ $church->whatsapp_link }}</td>
                    <td>{{ $church->facebook_link }}</td>
                    @canany(['church.edit', 'church.delete'])
                    <td>
                        @canany(['church.edit'])
                            <a href="{{ route('churches.edit', $church->id) }}" class="btn btn-sm btn-warning btn-sm"><i class="fa-regular fa-pen-to-square"></i></a>
                        @endcan
                        @canany(['church.delete'])
                            <!-- زر الحذف -->
                            <button type="button" class="btn btn-danger btn-sm delete-ajax-trigger" 
                                    data-id="{{ $church->id }}"
                                    data-name="{{ $church->name . ' - ' . $church->address }}"
                                    data-url="/churches"
                                    data-bs-toggle="modal"
                                    data-bs-target="#deleteModal0">
                                <i class="fa-solid fa-trash"></i>
                            </button>
                        @endcanany
                    </td>
                    @endcanany
                </tr>
                @empty
                <tr>
                    <td colspan="7" class="text-center">لا يوجد بيانات</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    
    {{-- للعرض على الشاشات الصغيرة --}}
    <div class="d-block d-md-none">
        @forelse ($churches as $church)
        <div class="card mb-3">
            <div class="card-body">
                <h5 class="card-title">{{ $church->name }}</h5>
                <p class="card-text">{{ $church->address }}</p>
                <div class="d-flex justify-content-around mt-3">
                    {{-- أيقونة الاتصال --}}
                    @if($church->phone)
                        <a href="tel:{{ $church->phone }}" class="btn btn-outline-primary rounded-circle p-2">
                            <i class="fas fa-phone"></i> </a>
                    @endif

                    {{-- أيقونة الواتساب --}}
                    @if($church->whatsapp_link)
                        <a href="{{ $church->whatsapp_link }}" target="_blank" class="btn btn-outline-success rounded-circle p-2">
                            <i class="fab fa-whatsapp"></i> </a>
                    @endif

                    {{-- أيقونة الفيسبوك --}}
                    @if($church->facebook_link)
                        <a href="{{ $church->facebook_link }}" target="_blank" class="btn btn-outline-info rounded-circle p-2">
                            <i class="fab fa-facebook-f"></i> </a>
                    @endif
                </div>
                @canany(['church.edit', 'church.delete'])
                <div class="d-flex justify-content-center mt-3">
                    @canany(['church.edit'])
                        <a href="{{ route('churches.edit', $church->id) }}" class="btn btn-sm btn-warning me-2">
                            <i class="fa-regular fa-pen-to-square"></i>
                        </a>
                    @endcan
                    @canany(['church.delete'])
                        <button type="button" class="btn btn-danger btn-sm delete-ajax-trigger" 
                                data-id="{{ $church->id }}"
                                data-name="{{ $church->name . ' - ' . $church->address }}"
                                data-url="/churches"
                                data-bs-toggle="modal"
                                data-bs-target="#deleteModal0">
                            <i class="fa-solid fa-trash"></i>
                        </button>
                    @endcanany
                </div>
                @endcanany
            </div>
        </div>
        @empty
        <div class="alert alert-light border text-center py-5 shadow-sm rounded-4">
            <i class="bi bi-emoji-slight-smile display-4 text-muted mb-3 d-block"></i>
            <h4 class="text-secondary">لا توجد مجموعات</h4>
            <p class="text-muted mb-0 small">وربما جميع المجموعات غير نشطة حالياً.</p>
        </div>
        @endforelse
    </div>
</div>

<x-pagination :data="$churches" />

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

@endsection