@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>
                            <th>وصف قصير</th>
                            <th>وصف المنتج</th>

                            <th>وصف طويل</th>
                            <th>الصوره</th>

                            <th>عدد القطع</th>
                            <th>الفئه</th>
                            <th>الأدوات</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($products as $product)
                            <tr>
                                <td>{{ $product->id }}</td>
                                <td>{{ $product->name }}</td>
                                <td>{{ $product->price }}</td>
                                <td>{{ $product->created_at->format('Y-m-d') }}</td>
                                <td>{{ $product->short_desc }}</td>
                                <td>{{ $product->long_desc }}</td>
                                <td>{{ $product->product_spec }}</td>
                                <td>
                                    <img src="{{ Storage::url($product->image) }}" alt="Product Image" width="100">
                                </td>
                                <td>{{ $product->num_of_paces }}</td>
                                 <td>
                                    {{ optional($product->category->first())->name }}
                                </td>
                                <td>
                                    <form action="{{ route('admin.product.delete', ['id' => $product->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_{{ $product->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">
                    {{ $products->links('pagination::bootstrap-4') }}
                </div>
            </div>
        </div>
    </div>
</div>


<!-- Create Product 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.product.create') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="mb-3">
                        <label for="name" class="form-label">اسم المنتج</label>
                        <input type="text" class="form-control" name="name" id="name" placeholder="اسم المنتج" required>
                    </div>

                    <div class="mb-3">
                        <label for="name" class="form-label">سعر المنتج</label>
                        <input type="text" class="form-control" name="price" id="price" placeholder="سعر المنتج" required>
                    </div>

                    <div class="mb-3">
                        <label for="short_desc" class="form-label">وصف قصير</label>
                        <input type="text" class="form-control" name="short_desc" id="short_desc" placeholder="وصف قصير" required>
                    </div>
                    <div class="mb-3">
                        <label for="product_spec" class="form-label">  تعريف بالمنتج</label>
                        <input type="text" class="form-control" name="product_spec" id="product_spec" placeholder="مواصفات المنتج" required>
                    </div>
                    <div class="mb-3">
                        <label for="long_desc" class="form-label">مواصفات المنتج</label>
                        <textarea class="form-control" name="long_desc" id="long_desc" placeholder="وصف طويل" required></textarea>
                    </div>
                    <div class="mb-3">
                        <label for="image" class="form-label">الصورة</label>
                        <input type="file" class="form-control" name="image" id="image" required>
                    </div>
                    <div class="mb-3">
                        <label for="num_of_paces" class="form-label">عدد القطع</label>
                        <input type="number" class="form-control" name="num_of_paces" id="num_of_paces" placeholder="عدد القطع" required>
                    </div>
                    <div class="mb-3">
                        <label for="category_id" class="form-label">الفئة</label>
                        <select class="form-control" name="category_id" id="category_id" required>
                            @foreach($categories as $category)
                                <option value="{{ $category->id }}">{{ $category->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <button type="submit" class="btn btn-primary">إضافة</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Edit Product Modals -->
@foreach($products as $product)
    <div class="modal fade" id="edit_modal_{{ $product->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.product.update', ['id' => $product->id]) }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')
                        <div class="mb-3">
                            <label for="name_{{ $product->id }}" class="form-label">اسم المنتج</label>
                            <input type="text" class="form-control" name="name" id="name_{{ $product->id }}" value="{{ $product->name }}" required>
                        </div>

                        <div class="mb-3">
                            <label for="name" class="form-label">سعر المنتج</label>
                            <input type="text" class="form-control" name="price" id="price_{{ $product->id }}" value="{{ $product->price }}"  placeholder="سعر المنتج" required>
                        </div>


                        <div class="mb-3">
                            <label for="short_desc_{{ $product->id }}" class="form-label">وصف قصير</label>
                            <input type="text" class="form-control" name="short_desc" id="short_desc_{{ $product->id }}" value="{{ $product->short_desc }}" required>
                        </div>
                      

                        <div class="mb-3">
                            <label for="product_spec_{{ $product->id }}" class="form-label">وصف طويل</label>
                            <input type="text" class="form-control" name="product_spec" id="product_spec_{{ $product->id }}" value="{{ $product->product_spec }}" required>
                        </div>
                      
                        <div class="mb-3">
                            <label for="long_desc_{{ $product->id }}" class="form-label">   مواصفات المنتج</label>
                            <textarea class="form-control" name="long_desc" id="long_desc_{{ $product->id }}" required>{{ $product->long_desc }}</textarea>
                        </div>
                        <div class="mb-3">
                            <label for="image_{{ $product->id }}" class="form-label">الصورة</label>
                            <input type="file" class="form-control" name="image" id="image_{{ $product->id }}">
                        </div>
                        <div class="mb-3">
                            <label for="num_of_paces_{{ $product->id }}" class="form-label">عدد القطع</label>
                            <input type="number" class="form-control" name="num_of_paces" id="num_of_paces_{{ $product->id }}" value="{{ $product->num_of_paces }}" required>
                        </div>
                        <div class="mb-3" hidden>
                            <label for="category_id_{{ $product->id }}" class="form-label">الفئة</label>
                            <select class="form-control" name="category_id" id="category_id_{{ $product->id }}" required>
                                @foreach($categories as $category)
                                    <option value="{{ $category->id }}" {{ $category->id == $product->category_id ? 'selected' : '' }}>
                                        {{ $category->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <button type="submit" class="btn btn-primary">تحديث</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