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

@section('title', 'Create Restaurant')
@section('page-title', 'Create Restaurant')

@section('content')
<form method="POST" action="{{ route('admin-dining.restaurants.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">Basic Information</h5>
                </div>
                <div class="card-body">
                    <!-- Title -->
                    <div class="mb-3">
                        <label for="title" class="form-label">Restaurant Title <span class="text-danger">*</span></label>
                        <input type="text" name="title" id="title" class="form-control @error('title') is-invalid @enderror" 
                               placeholder="Enter restaurant name" value="{{ old('title') }}" required>
                        @error('title')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Category -->
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label for="category" class="form-label">Category</label>
                            <input type="text" name="category" id="category" class="form-control @error('category') is-invalid @enderror" 
                                   placeholder="e.g., Fine Dining, Casual" value="{{ old('category') }}">
                            @error('category')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label for="cuisine" class="form-label">Cuisine</label>
                            <input type="text" name="cuisine" id="cuisine" class="form-control @error('cuisine') is-invalid @enderror" 
                                   placeholder="e.g., Indian, Italian, Multi-Cuisine" value="{{ old('cuisine') }}">
                            @error('cuisine')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <!-- Location & Type -->
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label for="hotel_id" class="form-label">Location (Hotel)</label>
                            <select name="hotel_id" id="hotel_id" class="form-select @error('hotel_id') is-invalid @enderror">
                                <option value="">Select Location</option>
                                @foreach($hotels as $hotel)
                                    <option value="{{ $hotel->id }}" {{ old('hotel_id') == $hotel->id ? 'selected' : '' }}>
                                        {{ $hotel->location }}
                                    </option>
                                @endforeach
                            </select>
                            @error('hotel_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label for="type" class="form-label">Type</label>
                            <input type="text" name="type" id="type" class="form-control @error('type') is-invalid @enderror" 
                                   placeholder="e.g., Restaurant, Cafe, Bar" value="{{ old('type') }}">
                            @error('type')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <!-- Level -->
                    <div class="mb-3">
                        <label for="level" class="form-label">Level</label>
                        <input type="text" name="level" id="level" class="form-control @error('level') is-invalid @enderror" 
                               placeholder="e.g., Ground Floor, First Floor, Level 2" value="{{ old('level') }}">
                        @error('level')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Seatings -->
                    <div class="mb-3">
                        <label for="seatings" class="form-label">Seatings</label>
                        <input type="text" name="seatings" id="seatings" class="form-control @error('seatings') is-invalid @enderror" 
                               placeholder="e.g., 50, 100, 75-100" value="{{ old('seatings') }}">
                        @error('seatings')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Description -->
                    <div class="mb-3">
                        <label for="description" class="form-label">Description</label>
                        <textarea name="description" id="description" class="form-control @error('description') is-invalid @enderror" 
                                  rows="5" placeholder="Enter restaurant description">{{ old('description') }}</textarea>
                        @error('description')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Address -->
                    <div class="mb-3">
                        <label for="address" class="form-label">Address</label>
                        <textarea name="address" id="address" class="form-control @error('address') is-invalid @enderror" 
                                  rows="3" placeholder="Enter full address">{{ old('address') }}</textarea>
                        @error('address')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Contact -->
                    <div class="mb-3">
                        <label for="enquiry_contact_no" class="form-label">Enquiry Contact No.</label>
                        <input type="text" name="enquiry_contact_no" id="enquiry_contact_no" class="form-control @error('enquiry_contact_no') is-invalid @enderror" 
                               placeholder="+91-XXXXXXXXXX" value="{{ old('enquiry_contact_no') }}">
                        @error('enquiry_contact_no')
                            <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">Restaurant Image</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label for="image" class="form-label">Upload Main 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">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>

            <!-- Multiple Images Upload -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">Additional Images</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label for="images" class="form-label">Upload Multiple Images</label>
                        <input type="file" name="images[]" id="images" class="form-control @error('images.*') is-invalid @enderror" 
                               accept="image/*" multiple onchange="previewMultipleImages(event)">
                        <small class="text-muted d-block mt-2">You can select multiple images at once (Max 2MB each)</small>
                        @error('images.*')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div id="multipleImagesPreview" class="mt-3 row g-2"></div>
                </div>
            </div>

            <!-- Status & Featured -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">Publishing</h5>
                </div>
                <div class="card-body">
                    <!-- Status -->
                    <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="draft" {{ old('status') == 'draft' ? 'selected' : '' }}>Draft</option>
                            <option value="published" {{ old('status') == 'published' ? 'selected' : '' }}>Published</option>
                            <option value="private" {{ old('status') == 'private' ? 'selected' : '' }}>Private</option>
                        </select>
                        @error('status')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Featured -->
                    <div class="form-check mb-3">
                        <input type="checkbox" name="is_featured" id="is_featured" class="form-check-input" 
                               value="1" {{ old('is_featured') ? 'checked' : '' }}>
                        <label class="form-check-label" for="is_featured">
                            <i class="bi bi-star"></i> Mark as Featured
                        </label>
                    </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 Restaurant
                </button>
                <a href="{{ route('admin-dining.restaurants.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);
        }
    }

    function previewMultipleImages(event) {
        const files = event.target.files;
        const previewContainer = document.getElementById('multipleImagesPreview');
        previewContainer.innerHTML = '';

        if (files.length > 0) {
            Array.from(files).forEach((file, index) => {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const col = document.createElement('div');
                    col.className = 'col-6 col-md-4';
                    col.innerHTML = `
                        <div class="position-relative">
                            <img src="${e.target.result}" alt="Preview ${index + 1}" 
                                 style="width: 100%; height: 100px; object-fit: cover; border-radius: 0.5rem;">
                            <small class="text-muted d-block mt-1 text-center">Image ${index + 1}</small>
                        </div>
                    `;
                    previewContainer.appendChild(col);
                };
                reader.readAsDataURL(file);
            });
        }
    }
</script>
@endsection