@include('partials.header') <!-- Include the header -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/choices.js/1.1.6/choices.min.js"></script>





<script src="https://cdn.jsdelivr.net/npm/tsparticles@2.0.0/tsparticles.bundle.min.js"></script>
<!-- Select2 CSS -->
<!-- Tagify CSS -->
<!-- Choices CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css" />

<!-- Choices JS -->
<script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>
<br>
<br>
<br>
<br>
<br>
<br>
<section id="ts-hero" class="d-flex justify-content-center align-items-center" style="min-height: 100vh;">
    <div class="container">



        @auth
            <div class="row justify-content-center">
                <div class="col-md-8">
                    <div class="card shadow rounded-4 border-0">
                        <div class="card-body text-center p-5">
                            <img src="https://ui-avatars.com/api/?name={{ urlencode(Auth::user()->name) }}&background=537bb4&color=fff&size=128"
                                class="rounded-circle mb-4" alt="User Avatar">

                            <h3 class="mb-1">{{ Auth::user()->name }}</h3>
                            <p class="text-muted mb-3">{{ Auth::user()->email }}</p>

                            <div class="row mt-4 text-start">
                                <div class="col-6">
                                    <strong>Joined:</strong>
                                    <p>{{ Auth::user()->created_at->format('F j, Y') }}</p>
                                </div>
                                <div class="col-6">
                                    <strong>Role:</strong>
                                    <p>{{ ucfirst(Auth::user()->role ?? 'user') }}</p>
                                </div>
                            </div>

                            <a href="{{ route('logout') }}"
                                onclick="event.preventDefault(); document.getElementById('logout-form').submit();"
                                class="btn btn-outline-danger mt-4">
                                Logout
                            </a>

                            <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
                                @csrf
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row justify-content-center mt-5">
                <div class="col-md-10">
                    <div class="card shadow border-0 rounded-4">
                        <div class="card-body">
                            <h4 style="text-align: right;" dir="rtl" class="mb-4">اهتمامات المستخدم</h4>

                            {{-- List existing interests --}}
                            @if (!empty($interests) && count($interests))
                                <ul class="list-group mb-4">
                                    @foreach ($interests1 as $interest)
                                        <li class="list-group-item d-flex justify-content-between align-items-center">
                                            <span>
                                                مدينة: {{ $interest->city->name ?? '---' }},
                                                حي: {{ $interest->neighborhood }},
                                                نوع العقار: {{ $interest->property->name ?? '---' }}
                                            </span>
                                            <form action="{{ route('interests.delete', $interest->id) }}" method="POST">
                                                @csrf
                                                @method('DELETE')
                                                <button class="btn btn-sm btn-outline-danger">حذف</button>
                                            </form>
                                        </li>
                                    @endforeach
                                </ul>
                            @else
                                <p style="text-align: right;" dir="rtl" class="text-muted">لا توجد اهتمامات حالياً.</p>
                            @endif

                            <!-- =============================================================================================================-->
                            <section id="subscribe" dir="rtl" class="ts-block"
                                data-bg-pattern="assets/img/bg-pattern-topo.png" data-bg-color="#f4f4f4">
                                <div class="container">
                                    <div dir="rtl" style="text-align: right;" class="offset-lg-1 col-lg-10">

                                        <!-- Ensure your templating engine (like Blade) correctly processes this route -->
                                        <form id="subscribeForm" method="POST" action="{{ route('interests.store') }}">
                                            @csrf
                                            <div class="row">

                                                <!-- Inline script for phone input validation (Moved outside the form structure for clarity, but ensure it runs after the element exists) -->
                                                <script>
                                                    document.addEventListener('DOMContentLoaded', function() { // Ensure DOM is loaded
                                                        const phoneInputForValidation = document.getElementById('phone');
                                                        if (phoneInputForValidation) {
                                                            phoneInputForValidation.addEventListener('input', function(e) {
                                                                // Allow only digits
                                                                this.value = this.value.replace(/\D/g, '');
                                                                // Restrict to 9 digits
                                                                if (this.value.length > 9) {
                                                                    this.value = this.value.slice(0, 9);
                                                                }
                                                            });
                                                        }
                                                    });
                                                </script>



                                                <!-- City Selection -->
                                                <div class="col-md-6">
                                                    <div class="form-group mb-3">
                                                        <label for="cityTags" class="form-label">اختر المدن</label>
                                                        <select id="cityTags" name="cityTags[]" multiple
                                                            class="form-control" required>
                                                            <!-- Populate cities using Blade -->
                                                            @foreach (App\Models\Lookups\City::all() as $data)
                                                                <option value="{{ $data->id }}">{{ $data->name }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>

                                                <!-- Neighborhood Selection -->
                                                <div class="col-md-6">
                                                    <div class="form-group mb-3">
                                                        <label for="neighborhoodTags" class="form-label">اختر
                                                            الأحياء</label>
                                                        <select class="form-control" id="neighborhoodTags"
                                                            name="neighborhoodIDs[]" multiple required>
                                                            <!-- Populate ALL neighborhoods using Blade, including data-city-id -->
                                                            <!-- The script will filter these based on selected cities -->
                                                            @foreach (App\Models\Lookups\Neighborhood::all() as $data)
                                                                <option value="{{ $data->id }}"
                                                                    data-city-id="{{ $data->city_id }}">
                                                                    {{ $data->name }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                                <!-- Property Type -->
                                                <div class="col-md-6">
                                                    <div class="form-group mb-3">
                                                        <select class="form-control" id="property" name="propertyID"
                                                            required>
                                                            <option value="">اختر نوع العقار</option>
                                                            @foreach (App\Models\Lookups\PropertyType::all() as $data)
                                                                <option value="{{ $data->id }}">{{ $data->name }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                                <!-- Button -->
                                                <div class="col-md-12 text-center mt-3">
                                                    <button type="submit" class="btn btn-outline-dark w-50">اشتراك</button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </section>

                        </div>
                    </div>
                </div>
            </div>
        @else
            <div class="text-center py-5">
                <h4>Please <a href="{{ route('login') }}">log in</a> to view your profile.</h4>
            </div>
        @endauth
    </div>
</section>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Ensure Choices.js is loaded
        if (typeof Choices === 'undefined') {
            console.error('Choices.js library not found. Please ensure it is loaded.');
            return;
        }

        const cityElement = document.getElementById('cityTags');
        const neighborhoodElement = document.getElementById('neighborhoodTags');

        if (!cityElement || !neighborhoodElement) {
            console.error('City or Neighborhood select element not found.');
            return;
        }

        // --- Store all neighborhood options from the initially rendered HTML ---
        const allNeighborhoodOptions = [];
        const initialNeighborhoodSelectOptions = neighborhoodElement.querySelectorAll('option');
        initialNeighborhoodSelectOptions.forEach(option => {
            // Only add options that have a value and a cityId
            const cityId = option.getAttribute('data-city-id');
            if (option.value && cityId) {
                allNeighborhoodOptions.push({
                    value: option.value,
                    label: option.textContent || option
                        .innerText, // Use textContent or innerText
                    customProperties: {
                        cityId: cityId
                    }, // Store cityId here
                    selected: false,
                    disabled: false,
                    placeholder: false
                });
            }
        });
        // Clear original options from the select element as Choices.js will manage them
        // neighborhoodElement.innerHTML = ''; // Choices.js usually handles this, but can be done explicitly

        // --- Initialize Choices.js for Cities ---
        const cityChoices = new Choices(cityElement, {
            removeItemButton: true,
            searchPlaceholderValue: 'بحث...',
            placeholderValue: 'اختر المدن...',
            searchResultLimit: 10,
            shouldSort: false,
            allowHTML: false,
            // classNames: { /* Add custom classes if needed */ }
        });

        // --- Initialize Choices.js for Neighborhoods ---
        const neighborhoodChoices = new Choices(neighborhoodElement, {
            removeItemButton: true,
            searchPlaceholderValue: 'بحث...',
            placeholderValue: 'اختر الأحياء...', // Initial placeholder
            searchResultLimit: 10,
            shouldSort: false,
            allowHTML: false,
            // classNames: { /* Add custom classes if needed */ }
        });

        // --- Function to filter and update neighborhoods (Client-Side) ---
        const updateNeighborhoods = () => {
            const selectedCityValues = cityChoices.getValue(
                true); // Get selected city IDs as an array of strings

            // Get currently selected neighborhood values before clearing
            const previouslySelectedNeighborhoods = neighborhoodChoices.getValue(true);

            // Clear current neighborhood choices in the dropdown
            neighborhoodChoices.clearStore();

            if (selectedCityValues && selectedCityValues.length > 0) {
                // Filter the master list of neighborhood options based on selected city IDs
                const filteredOptions = allNeighborhoodOptions.filter(option => {
                    // Check if the option's cityId is included in the selectedCityValues array
                    return option.customProperties && selectedCityValues.includes(String(option
                        .customProperties.cityId));
                });

                if (filteredOptions.length > 0) {
                    // Enable the dropdown
                    neighborhoodChoices.enable();
                    // Set the filtered choices
                    neighborhoodChoices.setChoices(filteredOptions, 'value', 'label',
                        true); // true to replace existing choices

                    // Re-select previously selected neighborhoods if they are still in the filtered list
                    const validSelections = previouslySelectedNeighborhoods.filter(prevValue =>
                        filteredOptions.some(opt => opt.value === prevValue)
                    );
                    if (validSelections.length > 0) {
                        neighborhoodChoices.setValue(validSelections);
                    }

                } else {
                    // No neighborhoods match the selected cities
                    neighborhoodChoices.disable(); // Disable the dropdown
                    neighborhoodChoices.setChoices([{
                        value: '',
                        label: 'لا توجد أحياء للمدن المختارة',
                        selected: false,
                        disabled: true,
                        placeholder: true
                    }], 'value', 'label', true);
                }
            } else {
                // No cities selected, disable and set placeholder
                neighborhoodChoices.disable();
                neighborhoodChoices.setChoices([{
                    value: '',
                    label: 'اختر مدينة أولاً',
                    selected: false,
                    disabled: true,
                    placeholder: true
                }], 'value', 'label', true);
            }
        };

        // --- Event Listener ---
        // Listen for changes on the city Choices.js instance
        cityElement.addEventListener('change', updateNeighborhoods);

        // --- Initial State ---
        // Set the initial state for the neighborhood dropdown (disabled, placeholder)
        // Important: Call this *after* initializing Choices.js for neighborhoods
        updateNeighborhoods();

    });
</script>

<style>
    /* General Choices.js styling (apply your theme's adjustments) */
    .choices {
        margin-bottom: 1rem;
        /* Add some space below the dropdowns */
    }

    .choices__inner {
        min-height: 45px;
        border-radius: 0.5rem;
        background: #f9f9f9;
        border: 1px solid #ccc;
        padding: 8px 12px;
        font-size: 1rem;
        width: 100%;
        /* Ensure it takes full width */
    }

    .choices__list--multiple .choices__item {
        background-color: #537bb4;
        color: #fff;
        border-radius: 25px;
        padding: 5px 10px;
        margin: 3px;
        font-size: 0.9rem;
    }

    .choices__list--multiple .choices__item.is-highlighted {
        background-color: #3d5e91;
    }

    .choices__input {
        margin: 5px 0;
        background-color: transparent !important;
        /* Fix potential background issues */
    }

    .choices__list--dropdown .choices__item--selectable.is-highlighted {
        background-color: #f2f2f2;
        /* Adjust highlight color for dropdown items */
    }

    .choices[data-type*="select-multiple"] .choices__button,
    .choices[data-type*="text"] .choices__button {
        border-left: 1px solid #ccc;
        /* Adjust remove button style */
        /* Using an inline SVG for the remove icon for better compatibility */
        background-image: url('data:image/svg+xml;utf8,<svg width="10" height="10" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 1.41L5 4.99 1.41 1.41 0 2.82l3.59 3.59L0 10l1.41 1.41L5 7.83l3.59 3.58L10 10 6.41 6.41 10 2.82z" fill="%236c757d"/></svg>');
        margin-left: 5px;
        margin-right: -5px;
        /* Adjust spacing */
        background-repeat: no-repeat;
        background-position: center;
    }

    /* Ensure labels are above the dropdowns */
    .form-label {
        display: block;
        margin-bottom: 0.5rem;
    }

    /* Adjust layout for better spacing */
    .form-group.mb-3 {
        margin-bottom: 1.5rem !important;
        /* Increase bottom margin */
    }

    /* Style for disabled neighborhood dropdown */
    .choices.is-disabled .choices__inner,
    .choices.is-disabled .choices__input {
        background-color: #e9ecef;
        /* Lighter background for disabled state */
        cursor: not-allowed;
    }
</style>
@include('partials.footer') <!-- Include the footer -->