@extends('admin-dining.layouts.app')

@section('title', 'Edit Slider')
@section('page-title', 'Edit Hero Slider - ' . $slider->title)

@section('content')
  <form method="POST" action="{{ route('admin-dining.sliders.update', $slider) }}" enctype="multipart/form-data">
    @csrf
    @method('PUT')

    <div class="row">
      <div class="col-lg-8">
        <!-- Basic Information -->
        <div class="card mb-4">
          <div class="card-header">
            <h5 class="mb-0">Slider Information</h5>
          </div>
          <div class="card-body">
            <!-- Title -->
            <div class="mb-3">
              <label for="title" class="form-label">Title <span class="text-danger">*</span></label>
              <input type="text" name="title" id="title" class="form-control @error('title') is-invalid @enderror"
                placeholder="Enter slider title" value="{{ old('title', $slider->title) }}" required>
              @error('title')
                <div class="invalid-feedback">{{ $message }}</div>
              @enderror
            </div>

            <!-- Subtitle -->
            <div class="mb-3">
              <label for="subtitle" class="form-label">Subtitle</label>
              <input type="text" name="subtitle" id="subtitle"
                class="form-control @error('subtitle') is-invalid @enderror" placeholder="Enter slider subtitle"
                value="{{ old('subtitle', $slider->subtitle) }}">
              @error('subtitle')
                <div class="invalid-feedback">{{ $message }}</div>
              @enderror
            </div>

            <!-- Button Text & Link -->
            <div class="row mb-3">
              <div class="col-md-6">
                <label for="button_text" class="form-label">Button Text</label>
                <input type="text" name="button_text" id="button_text"
                  class="form-control @error('button_text') is-invalid @enderror" placeholder="e.g., LEARN MORE"
                  value="{{ old('button_text', $slider->button_text) }}">
                @error('button_text')
                  <div class="invalid-feedback">{{ $message }}</div>
                @enderror
              </div>
              <div class="col-md-6">
                <label for="button_link" class="form-label">Button Link</label>
                <input type="text" name="button_link" id="button_link"
                  class="form-control @error('button_link') is-invalid @enderror"
                  placeholder="/benefits or https://example.com" value="{{ old('button_link', $slider->button_link) }}">
                @error('button_link')
                  <div class="invalid-feedback">{{ $message }}</div>
                @enderror
              </div>
            </div>

            <!-- Sort Order -->
            <div class="mb-3">
              <label for="sort_order" class="form-label">Sort Order</label>
              <input type="number" name="sort_order" id="sort_order"
                class="form-control @error('sort_order') is-invalid @enderror" placeholder="0"
                value="{{ old('sort_order', $slider->sort_order) }}">
              <small class="text-muted">Lower numbers appear first</small>
              @error('sort_order')
                <div class="invalid-feedback">{{ $message }}</div>
              @enderror
            </div>
          </div>
        </div>
      </div>

      <div class="col-lg-4">
        <!-- Image Upload -->
        <div class="card mb-4">
          <div class="card-header">
            <h5 class="mb-0">Slider Image</h5>
          </div>
          <div class="card-body">
            @if($slider->image)
              <div class="mb-3">
                <p class="text-muted mb-2">Current Image:</p>
                <img src="{{ $slider->image_url }}" alt="{{ $slider->title }}"
                  style="max-width: 100%; height: auto; border-radius: 0.75rem;">
              </div>
            @endif
            <div class="mb-3">
              <label for="image" class="form-label">Upload New Image</label>
              <input type="file" name="image" id="image" class="form-control @error('image') is-invalid @enderror"
                accept="image/*" onchange="previewImage(event)">
              <small class="text-muted d-block mt-2">Recommended: 1920x800px. Accepted formats: JPEG, PNG, JPG, GIF, WebP
                (Max 2MB)</small>
              @error('image')
                <div class="invalid-feedback">{{ $message }}</div>
              @enderror
            </div>
            <div id="imagePreview" class="mt-3" style="display: none;">
              <p class="text-muted mb-2">New Image Preview:</p>
              <img id="previewImg" src="" alt="Preview" style="max-width: 100%; height: auto; border-radius: 0.75rem;">
            </div>
          </div>
        </div>

        <!-- Status -->
        <div class="card mb-4">
          <div class="card-header">
            <h5 class="mb-0">Status</h5>
          </div>
          <div class="card-body">
            <div class="mb-3">
              <label for="status" class="form-label">Status <span class="text-danger">*</span></label>
              <select name="status" id="status" class="form-select @error('status') is-invalid @enderror" required>
                <option value="active" {{ old('status', $slider->status) == 'active' ? 'selected' : '' }}>Active</option>
                <option value="inactive" {{ old('status', $slider->status) == 'inactive' ? 'selected' : '' }}>Inactive
                </option>
              </select>
              @error('status')
                <div class="invalid-feedback">{{ $message }}</div>
              @enderror
            </div>
          </div>
        </div>

        <!-- Actions -->
        <div class="d-grid gap-2">
          <button type="submit" class="btn btn-primary btn-lg">
            <i class="bi bi-check-circle"></i> Update Slider
          </button>
          <a href="{{ route('admin-dining.sliders.index') }}" class="btn btn-outline-secondary btn-lg">
            <i class="bi bi-x-circle"></i> Cancel
          </a>
        </div>
      </div>
    </div>
  </form>

  <script>
    function previewImage(event) {
      const file = event.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = function (e) {
          document.getElementById('previewImg').src = e.target.result;
          document.getElementById('imagePreview').style.display = 'block';
        };
        reader.readAsDataURL(file);
      }
    }
  </script>
@endsection