@extends('layouts.app')

@section('content')
<div class="container py-4">

  <div class="d-flex justify-content-between align-items-center mb-4">
    <h4>Department Sliders</h4>

    {{-- Filter + Add --}}
    <div class="d-flex">
      <form method="GET" class="d-flex me-3">
        <select name="department" class="form-select me-2" onchange="this.form.submit()">
          <option value="">— All Departments —</option>
          @foreach($departments as $dept)
            <option
              value="{{ $dept->id }}"
              {{ (string)($did ?? '') === (string)$dept->id ? 'selected':'' }}
            >{{ $dept->name }}</option>
          @endforeach
        </select>
        <button class="btn btn-outline-secondary">Filter</button>
      </form>

      <button
        class="btn btn-success"
        data-bs-toggle="modal"
        data-bs-target="#addSliderModal"
      >+ Add Slider</button>
    </div>
  </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->department->name }}</small>
              <form
                action="{{ route('departments.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('departments.sliders.store') }}"
      method="POST"
      enctype="multipart/form-data"
    >
      @csrf
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="addSliderLabel">Add Department Slider</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">

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

          <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>

          <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