@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($sliders as $slider)
                            <tr>
                                <td>{{ $slider->id }}</td>
                                 <td>{{ $slider->created_at->format('Y-m-d') }}</td>
                                
                                <td>
                                    <img src="{{ Storage::url($slider->image) }}" alt="slider Image" width="100">
                                </td>
                               
                                <td>
                                    {{-- <form action="{{ route('admin.slider.delete', ['id' => $slider->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_{{ $slider->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">
                    {{ $sliders->links('pagination::bootstrap-4') }}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Create slider 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.slider.create') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                  
                 
                    <div class="mb-3">
                        <label for="image" class="form-label">الصورة</label>
                        <input type="file" class="form-control" name="image" id="image" required>
                    </div>
                
                    <button type="submit" class="btn btn-primary">إضافة</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Edit slider Modals -->
@foreach($sliders as $slider)
    <div class="modal fade" id="edit_modal_{{ $slider->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.slider.update', ['id' => $slider->id]) }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')
                       
            
                        <div class="mb-3">
                            <label for="image_{{ $slider->id }}" class="form-label">الصورة</label>
                            <input type="file" class="form-control" name="image" id="image_{{ $slider->id }}">
                        </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