@extends('layouts.app')

@section('title', 'Add New Room')

@section('breadcrumbs')
  <nav class="flex" aria-label="Breadcrumb">
    <ol class="flex items-center space-x-4">
      <li><a href="{{ route('dashboard') }}" class="text-slate-600 hover:text-slate-900">Dashboard</a></li>
      <li class="flex items-center">
        <svg class="w-5 h-5 text-slate-400 mx-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
        <a href="{{ route('rooms.index') }}" class="text-slate-600 hover:text-slate-900">Rooms</a>
      </li>
      <li class="flex items-center">
        <svg class="w-5 h-5 text-slate-400 mx-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
        <span class="text-slate-900 font-medium">Add Room</span>
      </li>
    </ol>
  </nav>
@endsection

@section('content')
<div class="max-w-4xl mx-auto">
  <div class="bg-white rounded-lg border border-slate-200 p-8">
    <h1 class="text-2xl font-bold text-slate-900 mb-2">Add New Room</h1>
    <p class="text-slate-600 mb-8">Fill in the form below to add a new room to your inventory</p>

    <form action="{{ route('rooms.store') }}" method="POST" enctype="multipart/form-data" class="space-y-8">
      @csrf

      <!-- Basic Information -->
      <div class="border-t pt-8">
        <h2 class="text-xl font-semibold text-slate-900 mb-6">Basic Information</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <!-- Room Number -->
          <div>
            <label class="block text-sm font-medium text-slate-700 mb-2">Room Number <span class="text-red-600">*</span></label>
            <input type="text" name="room_number" value="{{ old('room_number') }}" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent @error('room_number') border-red-500 @enderror" required>
            @error('room_number')
              <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
            @enderror
          </div>

          <!-- Floor -->
          <div>
            <label class="block text-sm font-medium text-slate-700 mb-2">Floor <span class="text-red-600">*</span></label>
            <select name="floor_id" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent @error('floor_id') border-red-500 @enderror" required>
              <option value="">Select Floor</option>
              @if(isset($floors))
                @foreach($floors as $floor)
                  <option value="{{ $floor->id }}" {{ old('floor_id') == $floor->id ? 'selected' : '' }}>{{ $floor->name }}</option>
                @endforeach
              @endif
            </select>
            @error('floor_id')
              <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
            @enderror
          </div>

          <!-- Room Type -->
          <div>
            <label class="block text-sm font-medium text-slate-700 mb-2">Room Type <span class="text-red-600">*</span></label>
            <select name="room_type_id" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent @error('room_type_id') border-red-500 @enderror" required>
              <option value="">Select Room Type</option>
              @if(isset($roomTypes))
                @foreach($roomTypes as $type)
                  <option value="{{ $type->id }}" {{ old('room_type_id') == $type->id ? 'selected' : '' }}>{{ $type->name }}</option>
                @endforeach
              @endif
            </select>
            @error('room_type_id')
              <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
            @enderror
          </div>

          <!-- Bed Type -->
          <div>
            <label class="block text-sm font-medium text-slate-700 mb-2">Bed Type <span class="text-red-600">*</span></label>
            <select name="bed_type" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent @error('bed_type') border-red-500 @enderror" required>
              <option value="">Select Bed Type</option>
              <option value="single" {{ old('bed_type') === 'single' ? 'selected' : '' }}>Single</option>
              <option value="double" {{ old('bed_type') === 'double' ? 'selected' : '' }}>Double</option>
              <option value="twin" {{ old('bed_type') === 'twin' ? 'selected' : '' }}>Twin</option>
              <option value="king" {{ old('bed_type') === 'king' ? 'selected' : '' }}>King</option>
              <option value="queen" {{ old('bed_type') === 'queen' ? 'selected' : '' }}>Queen</option>
            </select>
            @error('bed_type')
              <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
            @enderror
          </div>

          <!-- Rate per Night -->
          <div>
            <label class="block text-sm font-medium text-slate-700 mb-2">Rate per Night ($) <span class="text-red-600">*</span></label>
            <input type="number" name="rate_per_night" value="{{ old('rate_per_night') }}" step="0.01" min="0" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent @error('rate_per_night') border-red-500 @enderror" required>
            @error('rate_per_night')
              <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
            @enderror
          </div>

          <!-- Max Occupancy -->
          <div>
            <label class="block text-sm font-medium text-slate-700 mb-2">Max Occupancy <span class="text-red-600">*</span></label>
            <input type="number" name="max_occupancy" value="{{ old('max_occupancy') }}" min="1" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent @error('max_occupancy') border-red-500 @enderror" required>
            @error('max_occupancy')
              <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
            @enderror
          </div>

          <!-- Status -->
          <div>
            <label class="block text-sm font-medium text-slate-700 mb-2">Status <span class="text-red-600">*</span></label>
            <select name="status" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent @error('status') border-red-500 @enderror" required>
              <option value="">Select Status</option>
              <option value="available" {{ old('status') === 'available' ? 'selected' : '' }}>Available</option>
              <option value="occupied" {{ old('status') === 'occupied' ? 'selected' : '' }}>Occupied</option>
              <option value="maintenance" {{ old('status') === 'maintenance' ? 'selected' : '' }}>Maintenance</option>
              <option value="reserved" {{ old('status') === 'reserved' ? 'selected' : '' }}>Reserved</option>
              <option value="cleaning" {{ old('status') === 'cleaning' ? 'selected' : '' }}>Cleaning</option>
            </select>
            @error('status')
              <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
            @enderror
          </div>
        </div>
      </div>

      <!-- Description -->
      <div class="border-t pt-8">
        <h2 class="text-xl font-semibold text-slate-900 mb-6">Description & Details</h2>
        <div>
          <label class="block text-sm font-medium text-slate-700 mb-2">Description</label>
          <textarea name="description" rows="4" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent @error('description') border-red-500 @enderror" placeholder="Room description...">{{ old('description') }}</textarea>
          @error('description')
            <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
          @enderror
        </div>
      </div>

      <!-- Amenities -->
      <div class="border-t pt-8">
        <h2 class="text-xl font-semibold text-slate-900 mb-6">Amenities</h2>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
          @foreach(['WiFi', 'AC', 'TV', 'Minibar', 'Safe', 'Balcony', 'Sea View', 'Room Service'] as $amenity)
            <label class="flex items-center space-x-2">
              <input type="checkbox" name="amenities[]" value="{{ $amenity }}"
                {{ in_array($amenity, old('amenities', [])) ? 'checked' : '' }}
                class="w-4 h-4 text-primary-600 rounded focus:ring-2 focus:ring-primary-500">
              <span class="text-sm text-slate-700">{{ $amenity }}</span>
            </label>
          @endforeach
        </div>
      </div>

      <!-- Room Images -->
      <div class="border-t pt-8">
        <h2 class="text-xl font-semibold text-slate-900 mb-6">Room Images</h2>
        <div class="border-2 border-dashed border-slate-300 rounded-lg p-8 text-center cursor-pointer hover:bg-slate-50 transition-colors duration-200" id="imageDropZone">
          <input type="file" name="images[]" multiple accept="image/*" class="hidden" id="imageInput">
          <svg class="w-12 h-12 text-slate-400 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
          </svg>
          <p class="text-slate-900 font-medium">Click to upload or drag and drop</p>
          <p class="text-slate-600 text-sm">PNG, JPG, GIF up to 10MB</p>
        </div>
        <div id="imagePreview" class="mt-4 grid grid-cols-4 gap-4"></div>
        @error('images.*')
          <p class="text-red-600 text-sm mt-2">{{ $message }}</p>
        @enderror
      </div>

      <!-- Form Actions -->
      <div class="border-t pt-8 flex justify-end space-x-4">
        <a href="{{ route('rooms.index') }}" class="px-6 py-2 border border-slate-300 rounded-lg text-slate-700 hover:bg-slate-50 transition-colors duration-200 font-medium">
          Cancel
        </a>
        <button type="submit" class="px-6 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors duration-200 font-medium">
          Create Room
        </button>
      </div>
    </form>
  </div>
</div>

<script>
  const imageDropZone = document.getElementById('imageDropZone');
  const imageInput = document.getElementById('imageInput');
  const imagePreview = document.getElementById('imagePreview');

  imageDropZone.addEventListener('click', () => imageInput.click());

  imageDropZone.addEventListener('dragover', (e) => {
    e.preventDefault();
    imageDropZone.classList.add('bg-slate-100');
  });

  imageDropZone.addEventListener('dragleave', () => {
    imageDropZone.classList.remove('bg-slate-100');
  });

  imageDropZone.addEventListener('drop', (e) => {
    e.preventDefault();
    imageDropZone.classList.remove('bg-slate-100');
    const files = e.dataTransfer.files;
    imageInput.files = files;
    updateImagePreview();
  });

  imageInput.addEventListener('change', updateImagePreview);

  function updateImagePreview() {
    imagePreview.innerHTML = '';
    const files = imageInput.files;

    for (let file of files) {
      const reader = new FileReader();
      reader.onload = (e) => {
        const div = document.createElement('div');
        div.className = 'relative';
        div.innerHTML = `
          <img src="${e.target.result}" alt="Preview" class="w-full h-32 object-cover rounded-lg">
          <div class="absolute inset-0 bg-black opacity-0 hover:opacity-10 rounded-lg transition-opacity duration-200"></div>
        `;
        imagePreview.appendChild(div);
      };
      reader.readAsDataURL(file);
    }
  }
</script>
@endsection