@extends('layouts.app')
@section('content')
<div class="container py-4">
  <h4>{{ $bishop->full_name }}’s Photos</h4>

  {{-- Upload form --}}
  <form action="{{ route('leaders.bishops.photos.store', $bishop->id) }}" method="POST" enctype="multipart/form-data" class="mb-3">
    @csrf
    <input type="file" name="photo" required>
    <button class="btn btn-sm btn-primary">Add Photo</button>
  </form>

  {{-- Gallery or message --}}
  @if($photos->isEmpty())
    <div class="alert alert-info">No photos available for {{ $bishop->full_name }}.</div>
  @else
    <div class="row">
      @foreach($photos as $p)
        <div class="col-3 mb-3">
          <div class="position-relative border rounded">
            <img src="{{ asset('storage/'.$p->path) }}" class="img-fluid rounded" alt="Photo">
            <form
              action="{{ route('leaders.bishops.photos.destroy', [$bishop->id, $p->id]) }}"
              method="POST"
              class="position-absolute top-0 end-0 m-1"
            >
              @csrf
              @method('DELETE')
              <button class="btn btn-sm btn-danger" onclick="return confirm('Delete this photo?')">&times;</button>
            </form>
          </div>
        </div>
      @endforeach
    </div>
  @endif
</div>
@endsection