@extends('panel._layout.app')

@section('content')
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h4 class="mt-0 header-title">الفئات</h4>
                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#create_modal">
                    <i class="mdi mdi-plus"></i> إضافة
                </button>
            </div>
            <div class="card-body">
                <table id="oTable" class="table table-bordered dt-responsive table-responsive nowrap">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>الاسم بالعربية</th>
                            <th>تاريخ الإضافة</th>
                            <th>الأدوات</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($categories as $category)
                            <tr>
                                <td>{{ $category->id }}</td>
                                <td>{{ $category->name }}</td>
                                <td>{{ $category->created_at->format('Y-m-d') }}</td>
                                <td>
                                    <form action="{{ route('admin.category.delete', ['id' => $category->id]) }}" method="POST" style="display:inline;" onsubmit="return confirmDelete(event)">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-danger">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </form>
                                    <a href="#" class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#edit_modal_{{ $category->id }}">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <div class="row justify-content-between align-items-center" style="padding: 10px; margin-top: 20px;">
                <div class="col-md-2">
                    {{ $categories->links('pagination::bootstrap-4') }}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Create Category Modal -->
<div class="modal fade" id="create_modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-top">
        <div class="modal-content">
            <div class="modal-header bg-light">
                <h4 class="modal-title" id="myCenterModalLabel">إضافة فئة جديدة</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
            </div>
            <div class="modal-body">
                <form action="{{ route('admin.category.create') }}" method="POST">
                    @csrf
                    <div class="mb-3">
                        <label for="nameAr" class="form-label">الاسم بالعربية</label>
                        <input type="text" class="form-control" name="name" id="nameAr" placeholder="الاسم" required>
                        <div class="invalid-feedback"></div>
                    </div>
                    <button type="submit" class="btn btn-primary waves-effect waves-light submit_btn">إضافة</button>
                    <button type="button" class="btn btn-danger waves-effect waves-light" data-bs-dismiss="modal">إلغاء</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Edit Category Modals -->
@foreach($categories as $category)
    <div class="modal fade" id="edit_modal_{{ $category->id }}" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-top">
            <div class="modal-content">
                <div class="modal-header bg-light">
                    <h4 class="modal-title" id="editModalLabel">تعديل الفئة</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
                </div>
                <div class="modal-body">
                    <form action="{{ route('admin.category.update', ['id' => $category->id]) }}" method="POST">
                        @csrf
                        @method('PUT')
                        <div class="mb-3">
                            <label for="nameAr_{{ $category->id }}" class="form-label">الاسم بالعربية</label>
                            <input type="text" class="form-control" name="name" id="nameAr_{{ $category->id }}" value="{{ $category->name }}" required>
                            <div class="invalid-feedback"></div>
                        </div>
                        <button type="submit" class="btn btn-primary waves-effect waves-light submit_btn">تحديث</button>
                        <button type="button" class="btn btn-danger waves-effect waves-light" data-bs-dismiss="modal">إلغاء</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endforeach

<script>
    function confirmDelete(event) {
        event.preventDefault();

        Swal.fire({
            title: 'تأكيد الحذف',
            text: 'هل أنت متأكد من رغبتك في الحذف؟',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'نعم',
            cancelButtonText: 'لا'
        }).then((result) => {
            if (result.isConfirmed) {
                event.target.submit(); // Submit the form if confirmed
            } else {
                Swal.fire('تم إلغاء الحذف', '', 'info');
            }
        });

        return false; // Prevent the default form submission
    }
</script>
@endsection