@extends('layouts.app')
@section('title', 'إدارة الفئات')
@section('content')
<div class="container">
    <x-header title="إدارة الفئات" />
    
    @canany(['expense_categories.create'])
        <a href="{{ route('expense_categories.create') }}" class="btn btn-success mb-3">
            <i class="fa-solid fa-plus"></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(['expense_categories.edit', 'expense_categories.delete'])
                    <th>إجراءات</th>
                    @endcanany
                </tr>
            </thead>
            <tbody>
                @forelse ($categories as $categorie)
                <tr class="text-center">
                    <td>{{ $loop->iteration + ($categories->currentPage() - 1) * $categories->perPage() }}</td>
                    <td>{{ $categorie->name }}</td>
                    <td>{{ $categorie->description }}</td>
                    <td>
                        @if($categorie->is_active)
                            <span class="badge bg-success">نشط</span>
                        @else
                            <span class="badge bg-danger">غير نشط</span>
                        @endif
                    </td>
                    @canany(['expense_category.edit', 'expense_category.delete'])
                    <td>
                        @canany(['expense_category.edit'])
                            <a href="{{ route('expense_categories.edit', $categorie->id) }}" class="btn btn-sm btn-warning btn-sm"><i class="fa-regular fa-pen-to-square"></i></a>
                        @endcan
                        @canany(['expense_category.delete'])
                            <!-- زر الحذف -->
                            <button type="button" class="btn btn-danger btn-sm delete-ajax-trigger" 
                                    data-id="{{ $categorie->id }}"
                                    data-name="{{ $categorie->name }}"
                                    data-url="/financials/categories/"
                                    data-bs-toggle="modal"
                                    data-bs-target="#deleteModal0">
                                <i class="fa-solid fa-trash"></i>
                            </button>
                        @endcanany
                    </td>
                    @endcanany
                </tr>
                @empty
                <tr>
                    <td colspan="5" class="text-center">لا يوجد بيانات</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    {{-- للعرض على الموبايل --}}
    <div class="d-block d-md-none">
        <ul class="list-group list-group-flush">
            @forelse ($categories as $categorie)
                <li class="list-group-item">
                    <span class="badge text-bg-dark rounded-pill">{{ $loop->iteration + ($categories->currentPage() - 1) * $categories->perPage() }}</span>  <br>
                    <strong>الاسم:</strong> {{ $categorie->name }} <br>
                    <strong>الوصف:</strong> {{ $categorie->description }} <br>
                    <strong>الحالة:</strong>
                        @if($categorie->is_active)
                            <span class="badge bg-success">نشط</span>
                        @else
                            <span class="badge bg-danger">غير نشط</span>
                        @endif

                        @canany(['expense_category.edit', 'expense_category.delete'])
                            <div class="d-flex justify-content-evenly mt-2">
                                @canany(['expense_category.edit'])
                                    <a href="{{ route('expense_categories.edit', $categorie->id) }}" class="btn btn-sm btn-warning">
                                        <i class="fa-regular fa-pen-to-square"></i> تعديل
                                    </a>
                                @endcan
                                @canany(['expense_category.delete'])
                                    <button type="button" class="btn btn-danger btn-sm delete-ajax-trigger" 
                                            data-id="{{ $categorie->id }}"
                                            data-name="{{ $categorie->name }}"
                                            data-url="/financials/categories"
                                            data-bs-toggle="modal"
                                            data-bs-target="#deleteModal0">
                                        <i class="fa-solid fa-trash"></i> حذف
                                    </button>
                                @endcanany
                            </div>
                        @endcanany
                </li>
            @empty
                <li class="list-group-item text-center">لا يوجد بيانات</li>
            @endforelse
        </ul>
    </div>


    <x-pagination :data="$categories" />
</div>
@canany(['expense_category.delete'])
    {{-- مودال واحد يتيم لكل الصفحة --}}
    <x-delete-modal id="0" model="expense_categories" />
@endcanany

@endsection