@extends('layouts.admin')

@section('title', 'Manage Album Photos')
@section('header_title', 'Photos in Album')

@section('content')
<div class="row">
    <!-- Upload New Photo Card -->
    <div class="col-md-4">
        <div class="card-custom">
            <div class="card-custom-header">
                <h2>Upload Photo</h2>
            </div>
            
            <form action="{{ route('admin.gallery.photos.upload', $album->albumId) }}" method="POST" enctype="multipart/form-data">
                @csrf
                
                <div class="form-group form-group-custom">
                    <label for="gphotoFile">Choose Image File</label>
                    <div class="custom-file">
                        <input type="file" id="gphotoFile" name="gphotoFile" class="form-control" style="height: auto; padding: 6px 12px; border-radius: 8px;" required>
                    </div>
                    <small class="text-muted d-block mt-1">Recommended size: 1024x768px or similar. (max 3MB).</small>
                </div>
                
                <div class="form-group form-group-custom mt-3">
                    <label for="gphotoCourse">Photo Caption / Description</label>
                    <input type="text" id="gphotoCourse" name="gphotoCourse" class="form-control form-control-custom" value="{{ old('gphotoCourse') }}" placeholder="e.g. Sunday School Kids Choir">
                </div>
                

                
                <div class="mt-4 pt-3 border-top text-right">
                    <button type="submit" class="btn btn-custom-primary btn-block">
                        <i class="fa fa-upload mr-2"></i> Upload Photo
                    </button>
                </div>
            </form>
        </div>
    </div>
    
    <!-- Photos Grid Card -->
    <div class="col-md-8">
        <div class="card-custom">
            <div class="card-custom-header">
                <h2>Album: <strong>{{ $album->albumName }}</strong></h2>
                <a href="{{ route('admin.gallery.index') }}" class="btn btn-outline-secondary">
                    <i class="fa fa-arrow-left mr-2"></i> Back to Albums
                </a>
            </div>
            
            <div class="row">
                @forelse($photos as $photo)
                    <div class="col-sm-6 col-md-4 mb-4">
                        <div class="card shadow-sm h-100 border" style="border-radius: 10px; overflow: hidden; position: relative;">
                            <img src="{{ asset('images/' . $photo->gphotoFile) }}" class="card-img-top" alt="{{ $photo->gphotoCourse }}" style="height: 150px; object-fit: cover;">
                            
                            <div class="card-body p-3">
                                <h6 class="card-title font-weight-bold mb-1" style="font-size: 14px;">
                                    {{ $photo->gphotoCourse ?: 'No Caption' }}
                                </h6>

                            </div>
                            
                            <div class="card-footer bg-white border-top p-2 text-right">
                                <form action="{{ route('admin.gallery.photos.delete', $photo->gphotoId) }}" method="POST" class="d-inline" onsubmit="return confirm('Are you sure you want to delete this photo permanently?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-sm btn-outline-danger">
                                        <i class="fa fa-trash mr-1"></i> Delete
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="col-12 text-center text-muted py-5">
                        <i class="fa fa-images fa-3x mb-3 text-secondary"></i>
                        <p class="mb-0">No photos in this album yet. Upload photos using the left sidebar panel.</p>
                    </div>
                @endforelse
            </div>
        </div>
    </div>
</div>
@endsection