@extends('layouts.master')
@section('body_id', 'vendor_edit_hotel_page')
@section('content')

    <section class="vendor_dashboard_main_wrapper">
        <div class="container">
            <div class="row">
                
                @include('frontend.vendor.partials.sidebar')

                <div class="col-lg-9 col-md-8 col-sm-12 col-xs-12">
                    <div class="premium-dashboard-core">
                        
                        <div class="elite-dashboard-header clearfix">
                            <div class="header-left-greetings">
                                <h2 class="main-welcome-heading">Edit Property Configurations</h2>
                                <p class="sub-welcome-caption">Modify configurations, upload assets, and adjust indexing tracking rules for your property logs.</p>
                            </div>
                            <div class="header-right-actions-group">
                                <a href="{{ route('vendor.hotels.index') }}" class="btn btn-elite-secondary"><i class="fa fa-arrow-left"></i> Back to List</a>
                            </div>
                        </div>

                        <div class="row table-content-row">
                            <div class="col-xs-12">
                                <div class="elite-form-card-wrapper">
                                    
                                    <form action="{{ route('vendor.hotels.update', $hotel->id) }}" method="POST" enctype="multipart/form-data" id="hotelEditForm">
                                        @csrf
                                        @method('PUT')
                                        
                                        <div class="form-section-title-bar">
                                            <h4><i class="fa fa-info-circle"></i> Basic Property Information</h4>
                                        </div>

                                        <div class="row">
                                            <div class="col-md-5 col-sm-5 col-xs-12 form-group custom-form-group">
                                                <label for="hotel_name" class="custom-form-label">Official Hotel Name <span class="required-star">*</span></label>
                                                <input type="text" class="form-control custom-form-input" id="hotel_name" name="hotel_name" value="{{ old('hotel_name', $hotel->hotel_name) }}" required placeholder="e.g. Grand Vista Resort">
                                                <span class="field-error-message" id="error_hotel_name"></span>
                                            </div>

                                            <div class="col-md-3 col-sm-3 col-xs-12 form-group custom-form-group">
                                                <label for="state" class="custom-form-label">State / Region <span class="required-star">*</span></label>
                                                <select class="form-control custom-form-input" id="state" name="state" required style="padding: 10px 15px;">
                                                    <option value="">-- Select State --</option>
                                                    @foreach($states as $state)
                                                        <option value="{{ $state->state_name }}" data-id="{{ $state->id }}" {{ old('state', $hotel->state) == $state->state_name ? 'selected' : '' }}>{{ $state->state_name }}</option>
                                                    @endforeach
                                                </select>
                                                <span class="field-error-message" id="error_state"></span>
                                            </div>

                                            <div class="col-md-4 col-sm-4 col-xs-12 form-group custom-form-group">
                                                <label for="city" class="custom-form-label">City / Location <span class="required-star">*</span></label>
                                                <select class="form-control custom-form-input" id="city" name="city" required style="padding: 10px 15px;">
                                                    <option value="">-- Select City --</option>
                                                    @foreach($cities as $city)
                                                        @php $cityName = isset($city->city_name) ? $city->city_name : $city->name; @endphp
                                                        <option value="{{ $cityName }}" {{ old('city', $hotel->city) == $cityName ? 'selected' : '' }}>{{ $cityName }}</option>
                                                    @endforeach
                                                </select>
                                                <span class="field-error-message" id="error_city"></span>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-xs-12 form-group custom-form-group-spaced">
                                                <label for="address" class="custom-form-label">Complete Physical Address <span class="required-star">*</span></label>
                                                <input type="text" class="form-control custom-form-input" id="address" name="address" value="{{ old('address', $hotel->address) }}" required placeholder="Plot No., Street, Landmark, Area details...">
                                                <span class="field-error-message" id="error_address"></span>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-xs-12 form-group custom-form-group-spaced">
                                                <label for="map_url" class="custom-form-label">Google Map Embed URL <span class="optional-text">(Optional)</span></label>
                                                <input type="url" class="form-control custom-form-input" id="map_url" name="map_url" value="{{ old('map_url', $hotel->map_url) }}" placeholder="Paste only src URL: https://www.google.com/maps/embed...">
                                                <small class="text-muted" style="display: block; margin-top: 5px; font-size: 11px; color: #64748b;">
                                                    <i class="fa fa-question-circle"></i> <strong>Tip:</strong> If changing, go to Google Maps -> Share -> Embed a map -> Copy only the <code>src="..."</code> address.
                                                </small>
                                                <span class="field-error-message" id="error_map_url"></span>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-xs-12 form-group custom-form-group-spaced">
                                                <label for="description" class="custom-form-label">Property Description <span class="optional-text">(Highly Recommended)</span></label>
                                                <textarea class="form-control custom-form-textarea" id="description" name="description" rows="4" placeholder="Briefly describe your hotel rooms...">{{ old('description', $hotel->description) }}</textarea>
                                            </div>
                                        </div>

                                        <div class="form-section-title-bar margin-top-30">
                                            <h4><i class="fa fa-camera"></i> Property Media & Display Uploads</h4>
                                        </div>

                                        <div class="row">
                                            <div class="col-md-12 col-xs-12 form-group custom-form-group">
                                                <label for="cover_image" class="custom-form-label">Primary Cover Image <span class="optional-text">(Leave empty to retain existing asset - Max 10MB)</span></label>
                                                
                                                @if($hotel->cover_image)
                                                    <div class="current-asset-preview-thumbnail" style="margin-bottom: 12px; max-width: 240px; border-radius: 8px; overflow: hidden; border: 1px solid #cbd5e1;">
                                                        <img src="{{ asset($hotel->cover_image) }}" alt="Current Cover" style="width: 100%; height: auto; object-fit: cover;">
                                                    </div>
                                                @endif

                                                <div class="file-upload-wrapper">
                                                    <input type="file" class="form-control custom-form-file-input" id="cover_image" name="cover_image" accept="image/*">
                                                    <div class="file-upload-box">
                                                        <i class="fa fa-cloud-upload"></i>
                                                        <p id="file-name-text">Click or drag your new main hotel image if you want to replace the current one...</p>
                                                    </div>
                                                </div>
                                                <span class="field-error-message" id="error_cover_image"></span>
                                            </div>
                                        </div>

                                        <div class="row" style="margin-top: 25px;">
                                            <div class="col-md-12 col-xs-12 form-group custom-form-group">
                                                <label for="gallery_images" class="custom-form-label">Upload Additional Gallery Images <span class="optional-text">(Multi-select queue, Max 10MB each)</span></label>
                                                
                                                @if(!empty($hotel->gallery_images) && is_array($hotel->gallery_images))
                                                    <div class="current-gallery-grid-flex" style="display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 15px;">
                                                        @foreach($hotel->gallery_images as $gallery_img)
                                                            <div style="width: 80px; height: 60px; border-radius: 4px; overflow: hidden; border: 1px solid #e2e8f0;">
                                                                <img src="{{ asset($gallery_img) }}" style="width: 100%; height: 100%; object-fit: cover;">
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                @endif

                                                <div class="file-upload-wrapper">
                                                    <input type="file" class="form-control custom-form-file-input" id="gallery_images" name="gallery_images[]" multiple accept="image/*">
                                                    <div class="file-upload-box">
                                                        <i class="fa fa-files-o"></i>
                                                        <p id="gallery-name-text">Click or drag files to add onto asset library logs...</p>
                                                    </div>
                                                </div>
                                                <span class="field-error-message" id="error_gallery_images"></span>
                                            </div>
                                        </div>

                                        <div class="form-section-title-bar margin-top-30">
                                            <h4><i class="fa fa-check-square-o"></i> Available Amenities & Facilities</h4>
                                        </div>

                                        @php 
                                            $activeAmenities = is_array($hotel->amenities) ? $hotel->amenities : []; 
                                        @endphp

                                        <div class="row">
                                            <div class="col-xs-12">
                                                <div class="amenities-grid-container">
                                                    @foreach(['Free Wi-Fi' => 'fa-wifi', 'Air Conditioning' => 'fa-snowflake-o', 'Complimentary Breakfast' => 'fa-coffee', 'Swimming Pool' => 'fa-life-ring', 'Free Parking Space' => 'fa-car', '24/7 Room Service' => 'fa-bell-o', 'Power Backup' => 'fa-bolt', 'CCTV Security' => 'fa-video-camera'] as $value => $icon)
                                                        <label class="amenity-checkbox-card">
                                                            <input type="checkbox" name="amenities[]" value="{{ $value }}" {{ in_array($value, $activeAmenities) ? 'checked' : '' }}>
                                                            <div class="amenity-content">
                                                                <i class="fa {{ $icon }}"></i> <span>{{ $value == 'Complimentary Breakfast' ? 'Breakfast' : ($value == 'Free Parking Space' ? 'Free Parking' : ($value == 'CCTV Security' ? 'CCTV Camera' : $value)) }}</span>
                                                            </div>
                                                        </label>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row margin-top-40">
                                            <div class="col-xs-12">
                                                <div class="form-action-footer-wrapper">
                                                    <button type="submit" id="submitHotelBtn" class="btn btn-elite-primary-submit">Save Modifed Settings Profile</button>
                                                </div>
                                            </div>
                                        </div>

                                    </form>

                                </div>
                            </div>
                        </div>

                    </div>
                </div>

            </div>
        </div>
    </section>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
    $(document).ready(function() {
        
        let basePath = window.location.origin + window.location.pathname.split('/vendor/')[0];

        // Dynamic Dependent Cascade Loader Routing Implementation
        $('#state').on('change', function() {
            let stateId = $(this).find(':selected').data('id');
            let cityDropdown = $('#city');

            cityDropdown.html('<option value="">-- Loading Cities... --</option>');

            if (stateId) {
                $.ajax({
                    url: basePath + '/get-cities/' + stateId,
                    type: "GET",
                    dataType: "json",
                    success: function(data) {
                        cityDropdown.html('<option value="">-- Select City --</option>');
                        $.each(data, function(key, value) {
                            let cityName = value.city_name ? value.city_name : value.name;
                            cityDropdown.append('<option value="' + cityName + '">' + cityName + '</option>');
                        });
                        $('#state').removeClass('is-invalid');
                        $('#error_state').text('').hide();
                    },
                    error: function() {
                        cityDropdown.html('<option value="">-- Error Loading Cities --</option>');
                    }
                });
            } else {
                cityDropdown.html('<option value="">-- Select State First --</option>');
            }
        });

        // Trigger dynamic monitoring checks validation including map_url
        $('#hotel_name, #address, #state, #city, #map_url').on('blur change keyup', function() {
            validateFormFields($(this));
        });

        // Track Cover File Label Interceptor Changes
        $('#cover_image').on('change', function() {
            let filename = $(this).val().split('\\').pop();
            if(filename) {
                $('#file-name-text').text("New Cover Selected: " + filename).css("color", "#0ea5e9");
            } else {
                $('#file-name-text').text("Click or drag your new main hotel image if you want to replace the current one...").css("color", "#64748b");
            }
        });
        
        // Track Gallery Array Selection Multi Logs Printer Link
        $('#gallery_images').on('change', function() {
            let files = $(this)[0].files;
            if(files.length > 0) {
                $('#gallery-name-text').text(files.length + " new gallery assets appended onto queue tracker").css("color", "#0ea5e9");
            } else {
                $('#gallery-name-text').text("Click or drag files to add onto asset library logs...").css("color", "#64748b");
            }
        });

        function validateFormFields(input) {
            let id = input.attr('id');
            let val = input.val() ? input.val().trim() : '';
            let errorSpan = $('#error_' + id);
            let isValid = true;
            let message = "";

            if (id === 'hotel_name' && val === '') { message = "Hotel name context structure validation flag failed."; isValid = false; }
            if (id === 'state' && val === '') { message = "State selector constraint violation detected."; isValid = false; }
            if (id === 'city' && val === '') { message = "City mapping coordinate pointer index validation error."; isValid = false; }
            if (id === 'address' && val === '') { message = "Physical localization baseline context index required."; isValid = false; }
            
            // Map URL Format Validation Check
            if (id === 'map_url' && val !== '') {
                if (!val.startsWith('http://') && !val.startsWith('https://')) {
                    message = "Please enter a valid absolute URL link starting with http:// or https://";
                    isValid = false;
                }
            }

            if (!isValid) {
                input.addClass('is-invalid');
                errorSpan.text(message).show();
            } else {
                input.removeClass('is-invalid');
                errorSpan.text('').hide();
            }
            return isValid;
        }

        // Intercept action payload validation processing loops pipeline
        $('#hotelEditForm').on('submit', function(e) {
            let isFormValid = true;

            $('#hotel_name, #state, #city, #address, #map_url').each(function() {
                if (!validateFormFields($(this))) { isFormValid = false; }
            });

            if (!isFormValid) {
                e.preventDefault();
                $('html, body').animate({
                    scrollTop: $('.is-invalid').first().offset().top - 120
                }, 500);
            }
        });
    });
    </script>

@endsection