@section('title', 'Brand Photo Gallery')

<div>
    <div class="card">
        <div class="card-header">
            <h5>Photo Gallery</h5>
        </div>
        <div class="card-body">
            @if (session()->has('message'))
                <div class="alert alert-success">{{ session('message') }}</div>
            @endif

            <form wire:submit.prevent="save" class="mb-5">
                <div class="mb-3">
                    <label class="form-label">Upload Photos</label>
                    <input type="file" class="form-control" wire:model="photos" multiple>
                    <div wire:loading wire:target="photos">Uploading...</div>
                    @error('photos.*') <span class="text-danger">{{ $message }}</span> @enderror
                </div>
                <button type="submit" class="btn btn-primary" @if(!$photos) disabled @endif>Upload All</button>
            </form>

            <div class="row">
                @foreach ($gallery as $photo)
                    <div class="col-md-3 col-sm-6 mb-4">
                        <div class="card h-100">
                            <img src="{{ $photo->photo_url }}" class="card-img-top" alt="Brand Photo" style="height: 150px; object-fit: cover;">
                            <div class="card-body text-center p-2">
                                <button class="btn btn-danger btn-sm w-100" wire:click="deletePhoto({{ $photo->brands_photos_id }})" onclick="return confirm('Delete this photo?')">
                                    <i class="ti ti-trash"></i> Delete
                                </button>
                            </div>
                        </div>
                    </div>
                @endforeach
                @if($gallery->isEmpty())
                     <div class="col-12 text-center text-muted">No photos in gallery.</div>
                @endif
            </div>
            
            <div class="mt-3">
                <a href="{{ route('data-entry.dashboard', $brandId) }}" class="btn btn-secondary">Back</a>
            </div>
        </div>
    </div>
</div>