@extends('admin.layout.header')
@section('content')

<!-- partial -->
<div class="main-panel">
    <div class="content-wrapper">

        <!-- Add Image Button -->
        <div class="mb-3">
            <a href="{{ route('viewgalleryform') }}" class="btn btn-primary">Add Gallery Images</a>
        </div>

        <div class="row">
            <div class="col-md-12 stretch-card">
                <div class="card">
                    <div class="card-body">
                        <p class="card-title">Gallery</p>
                        <div class="table-responsive">
                            <table id="gallery-table" class="table table-sm">
                                <thead>
                                    <tr>
                                        <th>Image</th>
                                        <th>Description</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($gallery as $partner)
                                    <tr>
                                        <td>
                                            <img src="{{ asset($partner->image) }}" alt="Partner Image" style="width: 80px; height: 60px;">
                                        </td>
                                        <td>{{ $partner->description }}</td>
                                        <td>
                                            <!-- Container for buttons -->
                                            <div style="display: flex; align-items: center;">
                                                <!-- Delete button with icon -->
                                                <form action="{{ route('deleteGallery', $partner->id) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete this image?');" style="margin-right: 5px;">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="btn btn-danger btn-sm" title="Delete" style="padding: 0.2rem 0.4rem;">
                                                        <i class="fas fa-trash-alt" style="font-size: 0.75rem;"></i>
                                                    </button>
                                                </form>

                                                <!-- Edit button with icon -->
                                                <a href="{{ route('editgallery', $partner->id) }}" class="btn btn-primary btn-sm" title="Edit" style="padding: 0.2rem 0.4rem;">
                                                    <i class="fas fa-edit" style="font-size: 0.75rem;"></i>
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- content-wrapper ends -->

    @section('scripts')
    <!-- Include jQuery and DataTables JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">

    <script>
        $(document).ready(function() {
            $('#gallery-table').DataTable({
                paging: true,
                searching: true,
                ordering: true,
                lengthChange: true,
                pageLength: 5, // Set the default page length
                lengthMenu: [[5, 10, 25, -1], [5, 10, 25, "All"]] // Customize page length options
            });
        });
    </script>

    <style>
        /* Custom styles for the DataTable */
        #gallery-table {
            font-size: 0.875rem; /* Smaller font size */
        }

        #gallery-table th,
        #gallery-table td {
            padding: 0.5rem; /* Reduced padding */
        }

        #gallery-table img {
            object-fit: cover; /* Ensures image covers the area */
        }

        .btn-danger,
        .btn-primary {
            padding: 0.2rem 0.4rem; /* Reduced button padding */
            font-size: 0.75rem; /* Smaller font size for button text */
        }
    </style>
    @endsection
@endsection