@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'Gallery Add & View'])
    <div class="container-fluid py-4">
        <div class="card">
            <div class="card-header p-3">
                <h4 class="mb-0">Gallery Add & View</h4>
            </div>
            <form action="{{ route('gallery-update') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="event_id" value="{{ $event_id }}">
                <div class="card-body p-3">
                    <div class="row">
                        <div class="col-lg-9">
                            <div class="row g-3 align-items-center">
                                <div class="col-lg-8">
                                    <label for="upload" class="form-label">Upload Images/Videos</label>
                                    <input type="file" id="upload" name="file[]" accept="image/*,video/*"
                                        class="form-control" multiple required>
                                    <small class="text-muted">Accepted formats: images (JPEG, PNG, etc.)</small>
                                </div>
                                <div class="col-lg-2">
                                    <button type="submit" class="btn btn-primary w-100 mt-3">Upload</button>
                                </div>
                                <div class="col-lg-2">
                                    <a href="{{route('gallery-index')}}" class="btn btn-secondary w-100 mt-3">Back</a>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>

            <div class="card-body p-3">
                <div class="row g-3">                    
                    @forelse ($images as $item)
                        <div class="col-md-3 col-sm-6 mb-4">
                            <div class="card h-100">
                                <div class="position-relative h-100">
                                    <img src="{{ $item->path ? getFileUrl($item->path) : asset('assets/img/logos/profile.png') }}"
                                        alt="Gallery Image" class="card-img-top img-fluid"
                                        style="height: 200px; object-fit: cover;">
                                    <i class="fas fa-trash text-danger  position-absolute top-0 end-0 m-2" data-id="{{ $item->id }}"
                                        onclick="confirmDelete({{ $item->id }})"></i>
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="col-12">
                            <div class="alert">No media files found for this event.</div>
                        </div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
    function confirmDelete(itemId) {
        Swal.fire({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#e9671b',
            cancelButtonColor: '#8392ab',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if (result.isConfirmed) {
                // Show loading state
                Swal.fire({                
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });
    
                $.ajax({
                    url: '/image-delete/' + itemId,
                    type: 'DELETE',
                    data: {
                        _token: $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        Swal.close();
                        if (response.success) {
                            $('i[data-id="' + itemId + '"]').closest('.col-md-3').remove();
                            toastr.success('Item deleted successfully!');
                        } else {
                            toastr.error('Error deleting item.');
                        }
                    },
                    error: function(xhr) {
                       
                        toastr.error('There was an error deleting the item.');
                    }
                });
            }
        });
    }
    </script>
@endpush