@extends('layouts.app')

@section('content')
<div class="container py-4">
  <div class="d-flex justify-content-between align-items-center mb-4">
    <h4>Diocese Sliders</h4>

    {{-- Filter by Diocese --}}
    <form method="GET" class="d-flex align-items-center">
      <select name="diocese" class="form-select me-2" onchange="this.form.submit()">
        <option value="">— All Dioceses —</option>
        @foreach($dioceses as $dio)
          <option
            value="{{ $dio->id }}"
            {{ (string)($did ?? '') === (string)$dio->id ? 'selected':'' }}
          >{{ $dio->name }}</option>
        @endforeach
      </select>
      <button class="btn btn-outline-secondary">Filter</button>
    </form>

    {{-- + Add Slider --}}
    <button
      class="btn btn-success"
      data-bs-toggle="modal"
      data-bs-target="#addSliderModal"
    >+ Add Slider</button>
  </div>

  @if(session('success'))
    <div class="alert alert-success">{{ session('success') }}</div>
  @endif

  @if($sliders->isEmpty())
    <p class="text-muted">No slider images found.</p>
  @else
    <div class="row">
      @foreach($sliders as $slide)
        <div class="col-md-4 mb-4">
          <div class="card">
            <img
              src="{{ asset('storage/'.$slide->image_path) }}"
              class="card-img-top"
            >
            @if($slide->caption)
              <div class="card-body">
                <p class="card-text">{{ $slide->caption }}</p>
              </div>
            @endif
            <div class="card-footer d-flex justify-content-between align-items-center">
              <small class="text-muted">{{ $slide->diocese->name }}</small>
              <form
                action="{{ route('dioceses.sliders.destroy',$slide->id) }}"
                method="POST"
              >
                @csrf @method('DELETE')
                <button class="btn btn-sm btn-danger">Delete</button>
              </form>
            </div>
          </div>
        </div>
      @endforeach
    </div>

    <div class="d-flex justify-content-center">
      {{ $sliders->withQueryString()->links() }}
    </div>
  @endif
</div>

{{-- Add Slider Modal --}}
<div
  class="modal fade"
  id="addSliderModal"
  tabindex="-1"
  aria-labelledby="addSliderLabel"
  aria-hidden="true"
>
  <div class="modal-dialog">
    <form
      action="{{ route('dioceses.sliders.store') }}"
      method="POST"
      enctype="multipart/form-data"
    >
      @csrf
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="addSliderLabel">Add Diocese Slider</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">

          {{-- Select Diocese --}}
          <div class="mb-3">
            <label class="form-label">Diocese*</label>
            <select
              name="diocese_id"
              class="form-select @error('diocese_id') is-invalid @enderror"
              required
            >
              <option value="">Select Diocese…</option>
              @foreach($dioceses as $dio)
                <option
                  value="{{ $dio->id }}"
                  {{ old('diocese_id')==$dio->id?'selected':'' }}
                >
                  {{ $dio->name }}
                </option>
              @endforeach
            </select>
            @error('diocese_id')
              <div class="invalid-feedback">{{ $message }}</div>
            @enderror
          </div>

          {{-- Image --}}
          <div class="mb-3">
            <label class="form-label">Photo*</label>
            <input
              type="file"
              name="image"
              class="form-control @error('image') is-invalid @enderror"
              required
            >
            @error('image')
              <div class="invalid-feedback">{{ $message }}</div>
            @enderror
          </div>

          {{-- Caption --}}
          <div class="mb-3">
            <label class="form-label">Caption</label>
            <input
              type="text"
              name="caption"
              class="form-control @error('caption') is-invalid @enderror"
              value="{{ old('caption') }}"
              placeholder="Optional caption"
            >
            @error('caption')
              <div class="invalid-feedback">{{ $message }}</div>
            @enderror
          </div>

        </div>
        <div class="modal-footer">
          <button class="btn btn-success">Add Slider</button>
        </div>
      </div>
    </form>
  </div>
</div>
@endsection