@extends($layoutView ?? 'admin.layout.app')

@section('content')
@php
    $selectedAmenityIds = collect(old('sub_amenities', isset($property) ? $property->amenities->pluck('id')->all() : []))
        ->map(fn ($id) => (int) $id)
        ->all();
    $rates = old('rates', isset($property) ? $property->rates->map(fn ($rate) => [
        'start' => $rate->start_date,
        'end' => $rate->end_date,
        'nightly' => $rate->nightly,
        'weekly' => $rate->weekly,
        'monthly' => $rate->monthly,
        'min_stay' => $rate->min_stay,
    ])->toArray() : []);
    $defaultRate = $property->defaultRate ?? null;
@endphp

<div class="d-flex flex-wrap justify-content-between align-items-center gap-3 mb-4">
    <div>
        <span class="section-kicker"><i class="bi bi-buildings"></i> Property Setup</span>
        <h2 class="section-title mb-1">{{ isset($property) ? 'Edit Property' : 'Add Property' }}</h2>
        <p class="section-copy">Legacy property fields, default rates, amenities aur seasonal pricing .</p>
    </div>
    <a href="{{ route(($routePrefix ?? 'admin') . '.property.index') }}" class="btn btn-outline-secondary rounded-pill px-4">
        <i class="bi bi-arrow-left me-2"></i>Back to list
    </a>
</div>

<form method="POST" action="{{ isset($property) ? route(($routePrefix ?? 'admin') . '.property.update', $property->id) : route(($routePrefix ?? 'admin') . '.property.store') }}" enctype="multipart/form-data" class="property-form-shell">
    @csrf
    @if(isset($property))
        @method('PUT')
    @endif

    <div class="property-form-card card">
        <div class="card-header">
            <span class="section-kicker"><i class="bi bi-pencil-square"></i> Basics</span>
            <h3 class="section-title">Property Information</h3>
             
        </div>
        <div class="card-body">
            <div class="basics-grid mb-3">
                <div>
                    <label class="form-label">Title</label>
                    <input type="text" name="title" value="{{ old('title', $property->title ?? '') }}" class="form-control">
                </div>
                <div>
                    <label class="form-label">Property Heading</label>
                    <input type="text" name="property_heading" value="{{ old('property_heading', $property->property_heading ?? '') }}" class="form-control">
                </div>
            </div>

            <div class="basics-grid mb-3">
                <div>
                    <label class="form-label">Property Head Title</label>
                    <input type="text" name="property_head_title" value="{{ old('property_head_title', $property->property_head_title ?? '') }}" class="form-control">
                </div>
                <div>
                    <label class="form-label">Average Night Rate</label>
                    <input type="text" name="avg_night_rates" value="{{ old('avg_night_rates', $property->avg_night_rates ?? '') }}" class="form-control">
                </div>
            </div>

            <div class="basics-grid mb-3">
                <div>
                    <label class="form-label">Featured Property</label>
                    <select name="featured_prop" class="form-select">
                        <option value="">Select option</option>
                        <option value="1" @selected(old('featured_prop', $property->featured_prop ?? '') == '1')>Yes</option>
                        <option value="0" @selected(old('featured_prop', $property->featured_prop ?? '') == '0')>No</option>
                    </select>
                </div>
                <div>
                    <label class="form-label">Property Type</label>
                    <input type="text" name="property_type" value="{{ old('property_type', $property->property_type ?? '') }}" class="form-control">
                </div>
            </div>

            <div class="mb-3">
                <label class="form-label">Short Description</label>
                <textarea name="description" class="form-control" rows="4">{{ old('description', $property->description ?? '') }}</textarea>
            </div>

            <div>
                <label class="form-label">Property Content</label>
                <textarea name="property_content" class="form-control" rows="6">{{ old('property_content', $property->property_content ?? '') }}</textarea>
            </div>
        </div>
    </div>

    <div class="property-form-card card">
        <div class="card-header">
            <span class="section-kicker"><i class="bi bi-geo-alt"></i> Location</span>
            <h3 class="section-title">Address, Map & Coordinates</h3>
           
        </div>
        <div class="card-body">
            <div class="location-grid mb-3">
                <div>
                    <label class="form-label">Country</label>
                    <select name="country_id" id="country" class="form-select" data-selected="{{ old('country_id', $property->country_id ?? '') }}">
                        <option value="">Select country</option>
                        @foreach($countries as $country)
                            <option value="{{ $country->id }}" @selected(old('country_id', $property->country_id ?? '') == $country->id)>{{ $country->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="form-label">State</label>
                    <select name="state_id" id="state" class="form-select" data-selected="{{ old('state_id', $property->state_id ?? '') }}" disabled>
                        <option value="">Select state</option>
                    </select>
                </div>
                <div>
                    <label class="form-label">City</label>
                    <select name="city_id" id="city" class="form-select" data-selected="{{ old('city_id', $property->city_id ?? '') }}" disabled>
                        <option value="">Select city</option>
                    </select>
                </div>
            </div>

            <div class="basics-grid mb-3">
                <div>
                    <label class="form-label">Address</label>
                    <input type="text" name="address" value="{{ old('address', $property->address ?? '') }}" class="form-control">
                </div>
                <div>
                    <label class="form-label">Property Address</label>
                    <input type="text" name="property_address" value="{{ old('property_address', $property->property_address ?? '') }}" class="form-control">
                </div>
            </div>

            <div class="location-grid mb-3">
                <div>
                    <label class="form-label">Latitude</label>
                    <input type="text" name="property_latt" value="{{ old('property_latt', $property->property_latt ?? '') }}" class="form-control">
                </div>
                <div>
                    <label class="form-label">Longitude</label>
                    <input type="text" name="property_long" value="{{ old('property_long', $property->property_long ?? '') }}" class="form-control">
                </div>
                <div>
                    <label class="form-label">Property Map URL / Embed</label>
                    <input type="text" name="property_map" value="{{ old('property_map', $property->property_map ?? '') }}" class="form-control">
                </div>
            </div>

            <div class="basics-grid">
                <div>
                    <label class="form-label">Youtube Video Link</label>
                    <input type="text" name="youtube_video_link" value="{{ old('youtube_video_link', $property->youtube_video_link ?? '') }}" class="form-control">
                </div>
                <div>
                    <label class="form-label">Base Price</label>
                    <input type="text" name="price" value="{{ old('price', $property->price ?? '') }}" class="form-control">
                </div>
            </div>
        </div>
    </div>

    <div class="property-form-card card">
        <div class="card-header">
            <span class="section-kicker"><i class="bi bi-house-gear"></i> Stay Details</span>
            <h3 class="section-title">Capacity, Size & Bed Mix</h3>
             
        </div>
        <div class="card-body">
            <div class="location-grid mb-3">
                <div>
                    <label class="form-label">Bedrooms</label>
                    <input type="text" name="property_no_of_bedrooms" value="{{ old('property_no_of_bedrooms', $property->property_no_of_bedrooms ?? '') }}" class="form-control">
                </div>
                <div>
                    <label class="form-label">Sleeps</label>
                    <input type="text" name="property_no_of_sleeps" value="{{ old('property_no_of_sleeps', $property->property_no_of_sleeps ?? '') }}" class="form-control">
                </div>
                <div>
                    <label class="form-label">Baths</label>
                    <input type="text" name="property_no_of_baths" value="{{ old('property_no_of_baths', $property->property_no_of_baths ?? '') }}" class="form-control">
                </div>
            </div>

            <div class="location-grid mb-3">
                <div>
                    <label class="form-label">Beds</label>
                    <input type="text" name="property_beds" value="{{ old('property_beds', $property->property_beds ?? '') }}" class="form-control">
                </div>
                <div>
                    <label class="form-label">Square Feet</label>
                    <input type="text" name="property_feet" value="{{ old('property_feet', $property->property_feet ?? '') }}" class="form-control">
                </div>
                <div>
                    <label class="form-label">Elevator</label>
                    <input type="text" name="property_elevator" value="{{ old('property_elevator', $property->property_elevator ?? '') }}" class="form-control">
                </div>
            </div>

            <div class="location-grid">
                <div><label class="form-label">King Bed</label><input type="text" name="pro_king_bed" value="{{ old('pro_king_bed', $property->pro_king_bed ?? '') }}" class="form-control"></div>
                <div><label class="form-label">Queen Bed</label><input type="text" name="pro_queen_bed" value="{{ old('pro_queen_bed', $property->pro_queen_bed ?? '') }}" class="form-control"></div>
                <div><label class="form-label">Single Bed</label><input type="text" name="pro_single_bed" value="{{ old('pro_single_bed', $property->pro_single_bed ?? '') }}" class="form-control"></div>
                <div><label class="form-label">Double Bed</label><input type="text" name="pro_double_bed" value="{{ old('pro_double_bed', $property->pro_double_bed ?? '') }}" class="form-control"></div>
                <div><label class="form-label">Twin Bed</label><input type="text" name="pro_twin_bed" value="{{ old('pro_twin_bed', $property->pro_twin_bed ?? '') }}" class="form-control"></div>
                <div><label class="form-label">Sofa Bed</label><input type="text" name="pro_sofa_bed" value="{{ old('pro_sofa_bed', $property->pro_sofa_bed ?? '') }}" class="form-control"></div>
                <div><label class="form-label">Bunk Bed</label><input type="text" name="pro_bunk_bed" value="{{ old('pro_bunk_bed', $property->pro_bunk_bed ?? '') }}" class="form-control"></div>
                <div><label class="form-label">Cribs</label><input type="text" name="pro_cribs" value="{{ old('pro_cribs', $property->pro_cribs ?? '') }}" class="form-control"></div>
                <div><label class="form-label">Cot</label><input type="text" name="pro_cot" value="{{ old('pro_cot', $property->pro_cot ?? '') }}" class="form-control"></div>
            </div>
        </div>
    </div>

    <div class="property-form-card card">
        <div class="card-header">
            <span class="section-kicker"><i class="bi bi-cash-coin"></i> Default Rate</span>
            <h3 class="section-title">One Default Rate Per Property</h3>
           
        </div>
        <div class="card-body">
            <div class="location-grid mb-3">
                <div><label class="form-label">Cleaning Fee</label><input type="text" name="pro_cleaning_fee" value="{{ old('pro_cleaning_fee', $defaultRate->pro_cleaning_fee ?? '') }}" class="form-control"></div>
                <div><label class="form-label">Refundable Amount</label><input type="text" name="pro_refundable_amt" value="{{ old('pro_refundable_amt', $defaultRate->pro_refundable_amt ?? '') }}" class="form-control"></div>
                <div><label class="form-label">Tax Fee</label><input type="text" name="pro_tax_fee" value="{{ old('pro_tax_fee', $defaultRate->pro_tax_fee ?? '') }}" class="form-control"></div>
                <div><label class="form-label">Average</label><input type="text" name="pro_avg" value="{{ old('pro_avg', $defaultRate->pro_avg ?? '') }}" class="form-control"></div>
                <div><label class="form-label">Extra</label><input type="text" name="pro_extra" value="{{ old('pro_extra', $defaultRate->pro_extra ?? '') }}" class="form-control"></div>
                <div><label class="form-label">Extra GST</label><input type="text" name="pro_extra_gst" value="{{ old('pro_extra_gst', $defaultRate->pro_extra_gst ?? '') }}" class="form-control"></div>
                <div><label class="form-label">Weekly Discount</label><input type="text" name="pro_week_dct" value="{{ old('pro_week_dct', $defaultRate->pro_week_dct ?? '') }}" class="form-control"></div>
                <div><label class="form-label">Monthly Discount</label><input type="text" name="pro_month_dct" value="{{ old('pro_month_dct', $defaultRate->pro_month_dct ?? '') }}" class="form-control"></div>
                <div><label class="form-label">Currency</label><input type="text" name="curency" value="{{ old('curency', $defaultRate->curency ?? 'USD') }}" class="form-control"></div>
            </div>

            <div class="mb-3">
                <label class="form-label">Cancellation Policies / Rules</label>
                <textarea name="can_polices_rules" class="form-control" rows="4">{{ old('can_polices_rules', $defaultRate->can_polices_rules ?? '') }}</textarea>
            </div>

            <div>
                <label class="form-label">Default Rate Notes</label>
                <textarea name="notes" class="form-control" rows="4">{{ old('notes', $defaultRate->notes ?? '') }}</textarea>
            </div>
        </div>
    </div>

    <div class="property-form-card card">
        <div class="card-header">
            <span class="section-kicker"><i class="bi bi-stars"></i> Amenities</span>
            <h3 class="section-title">Amenities Explorer</h3>
            <p class="section-copy"> Select all amenities by expanding each category.</p>
        </div>
        <div class="card-body">
            <div class="amenity-grid">
                @foreach($amenities as $amenity)
                    <div class="amenity-card">
                        <button type="button" class="amenity-toggle" data-target="amenity-panel-{{ $amenity->id }}">
                            <span class="amenity-meta">
                                <span class="amenity-icon"><i class="bi bi-ui-checks-grid"></i></span>
                                <span>
                                    <span class="d-block">{{ $amenity->name }}</span>
                                    <span class="amenity-count">{{ $amenity->subAmenities->count() }} options available</span>
                                </span>
                            </span>
                            <i class="bi bi-chevron-down"></i>
                        </button>

                        <div id="amenity-panel-{{ $amenity->id }}" class="amenity-panel{{ collect($amenity->subAmenities)->pluck('id')->intersect($selectedAmenityIds)->isNotEmpty() ? ' is-open' : '' }}">
                            <div class="sub-amenity-list">
                                @foreach($amenity->subAmenities as $subAmenity)
                                    <label class="sub-amenity-pill">
                                        <input type="checkbox" name="sub_amenities[]" value="{{ $subAmenity->id }}" @checked(in_array($subAmenity->id, $selectedAmenityIds, true))>
                                        <span>{{ $subAmenity->name }}</span>
                                    </label>
                                @endforeach
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>

    <div class="property-form-card card">
        <div class="card-header">
            <span class="section-kicker"><i class="bi bi-images"></i> Media</span>
            <h3 class="section-title">Main Image Upload</h3>
            <p class="section-copy">A main image will be uploaded from the property form, which will be saved as the default image.</p>
        </div>
        <div class="card-body">
            <label class="form-label">Main Image</label>
            <input type="file" name="main_image" class="form-control">
            @if(isset($property) && $property->mainImage)
                <div class="mt-3">
                    <div class="small text-muted mb-2">Current Main Image</div>
                    <img src="{{ asset('storage/' . $property->mainImage->image) }}" alt="Main property image" width="180" class="rounded-3 border">
                </div>
            @endif
        </div>
    </div>

    <div class="property-form-card card">
        <div class="card-header">
            <div class="toolbar-actions">
                <div>
                    <span class="section-kicker"><i class="bi bi-cash-stack"></i> Rates</span>
                    <h3 class="section-title">Seasonal Rate Planner</h3>
                  
                </div>
                <button type="button" class="btn btn-primary rounded-pill px-4" id="add-rate-btn">
                    <i class="bi bi-plus-lg me-2"></i>Add Rate
                </button>
            </div>
        </div>
        <div class="card-body">
            <div id="rates-wrapper" class="d-grid gap-3"></div>
        </div>
    </div>

    <div class="d-flex justify-content-end gap-2">
        <a href="{{ route(($routePrefix ?? 'admin') . '.property.index') }}" class="btn btn-light px-4 rounded-pill">Cancel</a>
        <button type="submit" class="btn btn-success px-4 rounded-pill">
            <i class="bi bi-check2-circle me-2"></i>{{ isset($property) ? 'Update Property' : 'Save Property' }}
        </button>
    </div>
</form>

<template id="rate-row-template">
    <div class="rate-row">
        <div class="d-flex justify-content-between align-items-center gap-3 mb-3">
            <strong class="text-dark">Season Rate</strong>
            <button type="button" class="btn btn-outline-danger btn-sm rounded-pill remove-rate">Remove</button>
        </div>
        <div class="rate-grid">
            <div>
                <label class="form-label">Start Date</label>
                <input type="date" name="rates[__INDEX__][start]" class="form-control" value="__START__">
            </div>
            <div>
                <label class="form-label">End Date</label>
                <input type="date" name="rates[__INDEX__][end]" class="form-control" value="__END__">
            </div>
            <div>
                <label class="form-label">Nightly</label>
                <input type="text" name="rates[__INDEX__][nightly]" class="form-control" value="__NIGHTLY__">
            </div>
            <div>
                <label class="form-label">Weekly</label>
                <input type="text" name="rates[__INDEX__][weekly]" class="form-control" value="__WEEKLY__">
            </div>
            <div>
                <label class="form-label">Monthly</label>
                <input type="text" name="rates[__INDEX__][monthly]" class="form-control" value="__MONTHLY__">
            </div>
            <div>
                <label class="form-label">Minimum Stay</label>
                <input type="text" name="rates[__INDEX__][min_stay]" class="form-control" value="__MIN_STAY__">
            </div>
        </div>
    </div>
</template>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const countrySelect = document.getElementById('country');
        const stateSelect = document.getElementById('state');
        const citySelect = document.getElementById('city');
        const statesUrl = "{{ url(($routePrefix ?? 'admin') === 'user' ? '/user/states' : '/admin/states') }}";
        const citiesUrl = "{{ url(($routePrefix ?? 'admin') === 'user' ? '/user/cities' : '/admin/cities') }}";
        const selectedState = stateSelect.dataset.selected;
        const selectedCity = citySelect.dataset.selected;
        const rateTemplate = document.getElementById('rate-row-template').innerHTML;
        const ratesWrapper = document.getElementById('rates-wrapper');
        const seedRates = @json($rates);
        let rateIndex = 0;

        const setOptions = (select, items, placeholder, selectedValue) => {
            select.innerHTML = `<option value="">${placeholder}</option>`;
            items.forEach((item) => {
                const option = document.createElement('option');
                option.value = item.id;
                option.textContent = item.name;
                option.selected = String(selectedValue) === String(item.id);
                select.appendChild(option);
            });
            select.disabled = items.length === 0;
        };

        const loadStates = async (countryId, stateId = '', cityId = '') => {
            setOptions(stateSelect, [], 'Select state', '');
            setOptions(citySelect, [], 'Select city', '');

            if (!countryId) return;

            const response = await fetch(`${statesUrl}/${countryId}`);
            const states = await response.json();
            setOptions(stateSelect, states, 'Select state', stateId);

            if (stateId) {
                await loadCities(stateId, cityId);
            }
        };

        const loadCities = async (stateId, cityId = '') => {
            setOptions(citySelect, [], 'Select city', '');

            if (!stateId) return;

            const response = await fetch(`${citiesUrl}/${stateId}`);
            const cities = await response.json();
            setOptions(citySelect, cities, 'Select city', cityId);
        };

        const addRateRow = (rate = {}) => {
            let rowHtml = rateTemplate
                .replaceAll('__INDEX__', rateIndex)
                .replace('__START__', rate.start ?? '')
                .replace('__END__', rate.end ?? '')
                .replace('__NIGHTLY__', rate.nightly ?? '')
                .replace('__WEEKLY__', rate.weekly ?? '')
                .replace('__MONTHLY__', rate.monthly ?? '')
                .replace('__MIN_STAY__', rate.min_stay ?? '');

            ratesWrapper.insertAdjacentHTML('beforeend', rowHtml);
            rateIndex += 1;
        };

        document.querySelectorAll('.amenity-toggle').forEach((button) => {
            button.addEventListener('click', () => {
                const panel = document.getElementById(button.dataset.target);
                panel.classList.toggle('is-open');
            });
        });

        document.getElementById('add-rate-btn').addEventListener('click', () => addRateRow());

        ratesWrapper.addEventListener('click', (event) => {
            if (event.target.classList.contains('remove-rate')) {
                event.target.closest('.rate-row').remove();
            }
        });

        countrySelect.addEventListener('change', async () => {
            await loadStates(countrySelect.value);
        });

        stateSelect.addEventListener('change', async () => {
            await loadCities(stateSelect.value);
        });

        if (seedRates.length) {
            seedRates.forEach((rate) => addRateRow(rate));
        } else {
            addRateRow();
        }

        if (countrySelect.value) {
            loadStates(countrySelect.value, selectedState, selectedCity);
        }
    });
</script>
@endsection