@extends('layouts.app')

@section('content')
<div class="container-fluid px-4">
    <!-- Header Section -->
    <div class="d-flex justify-content-between align-items-center pt-3 pb-4 mb-4 border-bottom">
        <div>
            <h1 class="h2 mb-1">
                <i class="bi bi-plus-circle me-2 text-primary"></i>Add New Property
            </h1>
            <p class="text-muted mb-0">Create a new bookable property, service, or accommodation</p>
        </div>
        <a href="{{ route('booking.properties.index', $website) }}" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left me-2"></i>Back to Properties
        </a>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <form action="{{ route('booking.properties.store', $website) }}" method="POST">
                @csrf
                
                <!-- Basic Information Card -->
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0">
                            <i class="bi bi-info-circle me-2"></i>Basic Information
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-8 mb-3">
                                <label for="name" class="form-label">Property Name *</label>
                                <input type="text" class="form-control @error('name') is-invalid @enderror" 
                                       id="name" name="name" value="{{ old('name') }}" required>
                                @error('name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-4 mb-3">
                                <label for="type" class="form-label">Property Type *</label>
                                <select class="form-select @error('type') is-invalid @enderror" id="type" name="type" required>
                                    <option value="">Select Type</option>
                                    <option value="accommodation" {{ old('type') === 'accommodation' ? 'selected' : '' }}>Accommodation</option>
                                    <option value="service" {{ old('type') === 'service' ? 'selected' : '' }}>Service</option>
                                    <option value="event" {{ old('type') === 'event' ? 'selected' : '' }}>Event Space</option>
                                    <option value="rental" {{ old('type') === 'rental' ? 'selected' : '' }}>Equipment Rental</option>
                                </select>
                                @error('type')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label for="short_description" class="form-label">Short Description</label>
                            <textarea class="form-control @error('short_description') is-invalid @enderror" 
                                      id="short_description" name="short_description" rows="2" 
                                      placeholder="Brief description for listings">{{ old('short_description') }}</textarea>
                            @error('short_description')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="mb-3">
                            <label for="description" class="form-label">Full Description</label>
                            <textarea class="form-control @error('description') is-invalid @enderror" 
                                      id="description" name="description" rows="5" 
                                      placeholder="Detailed description of the property">{{ old('description') }}</textarea>
                            @error('description')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Pricing & Capacity Card -->
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header bg-success text-white">
                        <h5 class="mb-0">
                            <i class="bi bi-currency-dollar me-2"></i>Pricing & Capacity
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="base_price" class="form-label">Base Price (RM) *</label>
                                <input type="number" class="form-control @error('base_price') is-invalid @enderror" 
                                       id="base_price" name="base_price" value="{{ old('base_price', 0) }}" 
                                       min="0" step="0.01" required>
                                @error('base_price')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="price_type" class="form-label">Price Type *</label>
                                <select class="form-select @error('price_type') is-invalid @enderror" 
                                        id="price_type" name="price_type" required>
                                    <option value="per_night" {{ old('price_type') === 'per_night' ? 'selected' : '' }}>Per Night</option>
                                    <option value="per_hour" {{ old('price_type') === 'per_hour' ? 'selected' : '' }}>Per Hour</option>
                                    <option value="per_day" {{ old('price_type') === 'per_day' ? 'selected' : '' }}>Per Day</option>
                                    <option value="fixed" {{ old('price_type') === 'fixed' ? 'selected' : '' }}>Fixed Price</option>
                                </select>
                                @error('price_type')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-4 mb-3">
                                <label for="max_guests" class="form-label">Maximum Guests *</label>
                                <input type="number" class="form-control @error('max_guests') is-invalid @enderror" 
                                       id="max_guests" name="max_guests" value="{{ old('max_guests', 1) }}" 
                                       min="1" required>
                                @error('max_guests')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-4 mb-3">
                                <label for="min_booking_duration" class="form-label">Min. Duration *</label>
                                <input type="number" class="form-control @error('min_booking_duration') is-invalid @enderror" 
                                       id="min_booking_duration" name="min_booking_duration" 
                                       value="{{ old('min_booking_duration', 1) }}" min="1" required>
                                @error('min_booking_duration')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div class="form-text">Minimum booking duration (hours/days/nights based on price type)</div>
                            </div>
                            <div class="col-md-4 mb-3">
                                <label for="max_booking_duration" class="form-label">Max. Duration</label>
                                <input type="number" class="form-control @error('max_booking_duration') is-invalid @enderror" 
                                       id="max_booking_duration" name="max_booking_duration" 
                                       value="{{ old('max_booking_duration') }}" min="1">
                                @error('max_booking_duration')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div class="form-text">Leave empty for no limit</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Amenities & Features Card -->
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header bg-info text-white">
                        <h5 class="mb-0">
                            <i class="bi bi-star me-2"></i>Amenities & Features
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label class="form-label">Select Amenities</label>
                            <div class="row">
                                @php
                                $amenities = [
                                    'wifi' => 'Wi-Fi',
                                    'parking' => 'Parking',
                                    'air_conditioning' => 'Air Conditioning',
                                    'kitchen' => 'Kitchen',
                                    'pool' => 'Swimming Pool',
                                    'gym' => 'Gym/Fitness Center',
                                    'pet_friendly' => 'Pet Friendly',
                                    'wheelchair_accessible' => 'Wheelchair Accessible',
                                    'breakfast' => 'Breakfast Included',
                                    'laundry' => 'Laundry Service',
                                    'tv' => 'TV/Entertainment',
                                    'balcony' => 'Balcony/Terrace'
                                ];
                                @endphp
                                @foreach($amenities as $key => $label)
                                <div class="col-md-4 col-sm-6 mb-2">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="amenities[]" 
                                               value="{{ $key }}" id="amenity_{{ $key }}"
                                               {{ in_array($key, old('amenities', [])) ? 'checked' : '' }}>
                                        <label class="form-check-label" for="amenity_{{ $key }}">
                                            {{ $label }}
                                        </label>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Submit Buttons -->
                <div class="card border-0 shadow-sm">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <a href="{{ route('booking.properties.index', $website) }}" class="btn btn-outline-secondary">
                                <i class="bi bi-x-circle me-2"></i>Cancel
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-check-circle me-2"></i>Create Property
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>

        <!-- Help Sidebar -->
        <div class="col-lg-4">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-light">
                    <h6 class="mb-0">
                        <i class="bi bi-lightbulb me-2"></i>Tips for Creating Properties
                    </h6>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <h6 class="text-primary">Property Types</h6>
                        <ul class="small mb-0">
                            <li><strong>Accommodation:</strong> Hotels, apartments, rooms</li>
                            <li><strong>Service:</strong> Consultation, maintenance, etc.</li>
                            <li><strong>Event Space:</strong> Meeting rooms, venues</li>
                            <li><strong>Rental:</strong> Equipment, vehicles, tools</li>
                        </ul>
                    </div>
                    
                    <div class="mb-3">
                        <h6 class="text-primary">Pricing Types</h6>
                        <ul class="small mb-0">
                            <li><strong>Per Night:</strong> Hotels, accommodations</li>
                            <li><strong>Per Hour:</strong> Meeting rooms, services</li>
                            <li><strong>Per Day:</strong> Equipment rentals</li>
                            <li><strong>Fixed:</strong> One-time services, events</li>
                        </ul>
                    </div>
                    
                    <div class="alert alert-info small">
                        <i class="bi bi-info-circle me-1"></i>
                        You can add photos, detailed policies, and availability settings after creating the property.
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection