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

@section('title', 'Create Dining Program')
@section('page-title', 'Create Dining Program')

@section('content')
  <form method="POST" action="{{ route('admin-dining.dining-programs.store') }}" enctype="multipart/form-data">
    @csrf

    <div class="row">
      <div class="col-lg-8">
        <!-- Basic Information -->
        <div class="card mb-4">
          <div class="card-header">
            <h5 class="mb-0">Dining Program 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 program title (e.g., BALUCHI)" value="{{ old('title') }}" required>
              @error('title')
                <div class="invalid-feedback">{{ $message }}</div>
              @enderror
            </div>

            <!-- Description -->
            <div class="mb-3">
              <label for="description" class="form-label">Description <span class="text-danger">*</span></label>
              <textarea name="description" id="description" rows="5"
                class="form-control @error('description') is-invalid @enderror" placeholder="Enter program description"
                required>{{ old('description') }}</textarea>
              @error('description')
                <div class="invalid-feedback">{{ $message }}</div>
              @enderror
            </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', 0) }}">
              <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">Program Image <span class="text-danger">*</span></h5>
          </div>
          <div class="card-body">
            <div class="mb-3">
              <label for="image" class="form-label">Upload Image</label>
              <input type="file" name="image" id="image" class="form-control @error('image') is-invalid @enderror"
                accept="image/*" onchange="previewImage(event)" required>
              <small class="text-muted d-block mt-2">Recommended: 800x600px. 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;">
              <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') == 'active' ? 'selected' : '' }}>Active</option>
                <option value="inactive" {{ old('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> Create Dining Program
          </button>
          <a href="{{ route('admin-dining.dining-programs.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