@extends('backend.index')

@section('content')
<div class="container">
    <!-- Upload Image Form -->
    <h3>Upload Image</h3>
    <form action="{{ route('backend.store') }}" method="POST" enctype="multipart/form-data">
        @csrf
        <div class="form-group">
            <label for="image">Select Image</label>
            <input type="file" name="image" id="image" class="form-control" required>
        </div>
        <button type="submit" class="btn btn-primary mt-3">Upload</button>
    </form>

    <!-- Gallery Table -->
    <h3 class="mt-5">Gallery</h3>
    <table class="table table-bordered">
        <thead>
            <tr>
                <th scope="col">Image</th>
                <th scope="col">Actions</th>
            </tr>
        </thead>
        <tbody>
            @foreach($images as $image)
                <tr>
                    <td>
                        <img src="{{ url('storage/' . $image->image_path) }}" alt="Image" class="img-fluid"
                            style="max-width: 150px;">
                    </td>
                    <td>
                        <!-- Edit Button -->
                        <a href="{{ route('backend.editGallery', $image->id) }}" class="btn btn-warning">Edit</a>

                        <!-- Delete Form -->
                        <form action="{{ route('backend.deleteGallery', $image->id) }}" method="POST"
                            class="d-inline-block">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-danger ml-2"
                                onclick="return confirm('Are you sure you want to delete this image?')">Delete</button>
                        </form>
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>
    <div class="d-flex justify-content-center">
        {{ $images->links('pagination::bootstrap-4') }}
    </div>
</div>
@endsection