@extends('layouts.master')
@section('body_id', 'vendor_add_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">Add New Hotel Property</h2>
                                <p class="sub-welcome-caption">Register a new branch or accommodation property onto the global listing index.</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.store') }}" method="POST" enctype="multipart/form-data" id="hotelAddForm">
                                        @csrf
                                        @if ($errors->any())
                                            <div class="alert alert-danger" style="margin-top: 15px; color: red;">
                                                <ul>
                                                    @foreach ($errors->all() as $error)
                                                        <li>{{ $error }}</li>
                                                    @endforeach
                                                </ul>
                                            </div>
                                        @endif
                                        
                                        <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') }}" 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') == $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 State First --</option>
                                                </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') }}" 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') }}" placeholder="Paste only src URL: https://www.google.com/maps/embed?pb=...">
                                                <small class="text-muted" style="display: block; margin-top: 5px; font-size: 11px; color: #64748b;">
                                                    <i class="fa fa-question-circle"></i> <strong>How to get this?</strong> Go to Google Maps -> Share -> Embed a map -> Copy only the <code>src="..."</code> web address link.
                                                </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, highlights, dynamic vibes, near-by attractions, rules or premium packages...">{{ old('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="required-star">*</span> <span class="optional-text">(Max 2MB - JPEG, PNG, WEBP)</span></label>
                                                <div class="file-upload-wrapper">
                                                    <input type="file" class="form-control custom-form-file-input" id="cover_image" name="cover_image" required accept="image/*">
                                                    <div class="file-upload-box">
                                                        <i class="fa fa-cloud-upload"></i>
                                                        <p id="file-name-text">Click or drag your main hotel display image here...</p>
                                                    </div>
                                                </div>
                                                <span class="field-error-message" id="error_cover_image"></span>
                                            </div>
                                        </div>

                                        <div class="row" style="margin-top: 15px;">
                                            <div class="col-md-12 col-xs-12 form-group custom-form-group">
                                                <label for="gallery_images" class="custom-form-label">Property Gallery Images <span class="optional-text">(Optional - Multi-select, Max 2MB each)</span></label>
                                                <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 multiple gallery images here...</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>

                                        <div class="row">
                                            <div class="col-xs-12">
                                                <div class="amenities-grid-container">
                                                    <label class="amenity-checkbox-card">
                                                        <input type="checkbox" name="amenities[]" value="Free Wi-Fi">
                                                        <div class="amenity-content">
                                                            <i class="fa fa-wifi"></i> <span>Free Wi-Fi</span>
                                                        </div>
                                                    </label>
                                                    <label class="amenity-checkbox-card">
                                                        <input type="checkbox" name="amenities[]" value="Air Conditioning">
                                                        <div class="amenity-content">
                                                            <i class="fa fa-snowflake-o"></i> <span>Air Conditioning</span>
                                                        </div>
                                                    </label>
                                                    <label class="amenity-checkbox-card">
                                                        <input type="checkbox" name="amenities[]" value="Complimentary Breakfast">
                                                        <div class="amenity-content">
                                                            <i class="fa fa-coffee"></i> <span>Breakfast</span>
                                                        </div>
                                                    </label>
                                                    <label class="amenity-checkbox-card">
                                                        <input type="checkbox" name="amenities[]" value="Swimming Pool">
                                                        <div class="amenity-content">
                                                            <i class="fa fa-life-ring"></i> <span>Pool</span>
                                                        </div>
                                                    </label>
                                                    <label class="amenity-checkbox-card">
                                                        <input type="checkbox" name="amenities[]" value="Free Parking Space">
                                                        <div class="amenity-content">
                                                            <i class="fa fa-car"></i> <span>Free Parking</span>
                                                        </div>
                                                    </label>
                                                    <label class="amenity-checkbox-card">
                                                        <input type="checkbox" name="amenities[]" value="24/7 Room Service">
                                                        <div class="amenity-content">
                                                            <i class="fa fa-bell-o"></i> <span>Room Service</span>
                                                        </div>
                                                    </label>
                                                    <label class="amenity-checkbox-card">
                                                        <input type="checkbox" name="amenities[]" value="Power Backup">
                                                        <div class="amenity-content">
                                                            <i class="fa fa-bolt"></i> <span>Power Backup</span>
                                                        </div>
                                                    </label>
                                                    <label class="amenity-checkbox-card">
                                                        <input type="checkbox" name="amenities[]" value="CCTV Security">
                                                        <div class="amenity-content">
                                                            <i class="fa fa-video-camera"></i> <span>CCTV Camera</span>
                                                        </div>
                                                    </label>
                                                </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">Submit Property for Approval</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 AJAX Cascading Dropdown Chain Engine
        @if(old('state'))
            // Agar page validation fail hokar reload hua ho aur state selected ho
            setTimeout(function() {
                $('#state').trigger('change');
            }, 100);
        @endif

        $('#state').on('change', function() {
            let stateId = $(this).find(':selected').data('id');
            let cityDropdown = $('#city');
            let oldCity = "{{ old('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;
                            let selected = (oldCity === cityName) ? 'selected' : '';
                            cityDropdown.append('<option value="' + cityName + '" ' + selected + '>' + cityName + '</option>');
                        });
                        
                        $('#state').removeClass('is-invalid');
                        $('#error_state').text('').hide();
                    },
                    error: function(xhr, status, error) {
                        console.error("AJAX Error Details: ", status, error);
                        cityDropdown.html('<option value="">-- Error Loading Cities --</option>');
                    }
                });
            } else {
                cityDropdown.html('<option value="">-- Select State First --</option>');
            }
        });

        // Dropdowns, text inputs, and map trigger validation rules
        $('#hotel_name, #address, #state, #city, #map_url').on('blur change keyup', function() {
            validateFormFields($(this));
        });

        // Cover Image label tracking fix
        $('#cover_image').on('change', function() {
            let filename = $(this).val().split('\\').pop();
            if(filename) {
                $('#file-name-text').text("Selected Cover: " + filename).css("color", "#dc2626");
                $(this).removeClass('is-invalid');
                $('#error_cover_image').text('').hide();
            } else {
                $('#file-name-text').text("Click or drag your main hotel display image here...").css("color", "#64748b");
            }
        });
        
        // Gallery Images label printer tracking fix
        $('#gallery_images').on('change', function() {
            let files = $(this)[0].files;
            if(files.length > 0) {
                $('#gallery-name-text').text(files.length + " gallery images selected").css("color", "#dc2626");
            } else {
                $('#gallery-name-text').text("Click or drag multiple gallery images here...").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 = "Please enter your official hotel property name."; isValid = false; }
            if (id === 'state' && val === '') { message = "Please select a valid state from the list."; isValid = false; }
            if (id === 'city' && val === '') { message = "Please select a valid dependent city."; isValid = false; }
            if (id === 'address' && val === '') { message = "Complete physical address location is mandatory."; isValid = false; }
            
            // Map URL Format Check (Optional field but if filled, must be valid format)
            if (id === 'map_url' && val !== '') {
                if (!val.startsWith('http://') && !val.startsWith('https://')) {
                    message = "Please enter a valid absolute URL mapping 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;
        }

        // Final Intercept Form Submit Handler
        $('#hotelAddForm').on('submit', function(e) {
            let isFormValid = true;

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

            // Media verification element check
            let coverInput = $('#cover_image');
            if (coverInput.val() === '') {
                coverInput.addClass('is-invalid');
                $('#error_cover_image').text('A primary cover image is required to display your hotel.').show();
                isFormValid = false;
            }

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

@endsection