@include('htmlpage.frontent.layout.app')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">

<style>
/* === Container === */
.region-tabs {
    min-width: 220px;
    height: 100%;
    overflow-y: auto;
    background: #f9f9fb;
    padding: 15px 0;
}

.region-tabs .nav-link {
    background: white;
    margin: 5px 10px;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    padding: 12px 15px;
    font-weight: 600;
    color: #333;
}
.region-tabs .nav-link.active {
    background: linear-gradient(90deg,#05102d,#40507b);
    color: white !important;
    box-shadow: 0 4px 12px rgba(0,123,255,0.25);
}
.region-tabs .nav-link:hover {
    transform: translateX(3px);
}

/* === Right Panel === */
.right-panel {
    min-height: 500px;
    background: #f7f9fc;
    border-radius: 12px;
    padding: 20px;
    position: relative;
}

/* === Back Button === */
.back-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
    color: #007bff;
    cursor: pointer;
    margin-bottom: 15px;
    background: transparent;
    border: none;
}
.back-btn:hover {
    text-decoration: underline;
}

/* === Cards === */
.item-card {
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    padding: 15px 20px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.3s ease;
    cursor: pointer;
}
.item-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* === Icons === */
.icon {
    margin-right: 10px;
    font-size: 1.2rem;
}
/* === Right Panel Cards Grid === */
.right-panel h4 {
    margin-bottom: 20px;
    font-weight: 600;
    color: #333;
}

.grid-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.grid-card {
    background: linear-gradient(135deg, #ffffff, #f7f9fc);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    flex: 1 1 calc(33.333% - 10px);
    min-width: 200px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
}

.grid-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 18px rgba(0,123,255,0.2);
}

.grid-card i.icon {
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: #007bff;
}

.grid-card span.title {
    font-weight: 600;
    font-size: 1.05rem;
    color: #333;
}

.grid-card span.subtitle {
    font-size: 0.875rem;
    color: #555;
    margin-top: 5px;
}

/* === Back Button === */
.back-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
    color: #007bff;
    cursor: pointer;
    margin-bottom: 20px;
    background: transparent;
    border: none;
}
.back-btn:hover {
    text-decoration: underline;
}

/* Responsive tweaks */
@media(max-width: 992px){
    .grid-card {
        flex: 1 1 calc(50% - 10px);
    }
}
@media(max-width: 576px){
    .grid-card {
        flex: 1 1 100%;
    }
}
    .locationpage{min-height: 0px}
</style>

<div class="hero-slider hero-slider-3 with-floating-header locationpage">
    <div class="slider-card  overlay">
        <picture class="slider-media">
            {{--  <source media="(max-width: 575px)" srcset="assets/img/slider/h4-575.jpg">
            <source media="(max-width: 991px)" srcset="assets/img/slider/h4-991.jpg"> --}}
            <img src="{{ asset('images/slider/h4.jpg') }}" width="1920" height="1000" loading="eager" alt="Hero Image">
        </picture>
        <div class="slider-content">
            <div class="container height-100 d-flex align-items-center justify-content-center text-center">
                <div class="section-headings">
                    <h2 class="heading text-80 fw-500 aos-init aos-animate" data-aos="fade-up" data-aos-delay="100">
                        Our Global Solution & Service Locations For Digital, Web, Mobile App & IT 
                      
                    </h2>
                    <div class="text text-18 aos-init aos-animate" data-aos="fade-up" data-aos-delay="200">
                        We provide full-stack web development, mobile apps, AI-powered software solutions, and digital
                        services worldwide.
                    </div>
                    <div class="buttons d-flex justify-content-center gap-4 flex-wrap aos-init aos-animate"
                        data-aos="fade-up" data-aos-delay="300">
                        <a href="contact.html" class="button button--primary" aria-label="hero button">
                            Free Consultation
                            <span class="svg-wrapper">
                                <svg class="icon-20" width="20" height="20" viewBox="0 0 20 20" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M13.3365 7.84518L6.16435 15.0173L4.98584 13.8388L12.158 6.66667H5.83652V5H15.0032V14.1667H13.3365V7.84518Z"
                                        fill="currentColor"></path>
                                </svg>
                            </span>
                        </a>
                        <a href="#view-services" class="button button--secondary button-without-icon"
                            aria-label="hero button">
                            View Our Services
                        </a>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container pt-100">
    <div class="row">
        <!-- LEFT: Regions -->
        <div class="col-md-3 region-tabs">
            <div class="nav flex-column nav-pills" id="regionTab" role="tablist" aria-orientation="vertical">
                @foreach ($georegions as $index => $region)
                    <button class="nav-link {{ $index == 0 ? 'active' : '' }}" data-region-id="{{ $region->id }}">
                        <i class="bi bi-globe2 icon"></i> {{ $region->name }}
                    </button>
                @endforeach
            </div>
        </div>

        <!-- RIGHT: Progressive Panel -->
        <div class="col-md-9">
            <div class="right-panel" id="rightPanel">
                <h4>Select a Region</h4>
            </div>
        </div>
    </div>
</div>

<script>
const georegions = @json($georegions);

const rightPanel = document.getElementById('rightPanel');

// Track navigation stack
let navStack = [];

// Render countries for a region
function showCountries(regionId) {
    const region = georegions.find(r => r.id == regionId);
    if(!region) return;

    navStack.push({type: 'region', id: regionId, title: region.name});

    rightPanel.innerHTML = `
        <button class="back-btn" onclick="goBack()"><i class="bi bi-arrow-left"></i> Back</button>
        <h4>${region.name} - Countries</h4>
        <div class="grid-row">
            ${region.countries.map(c => `
                <div class="grid-card" onclick="showProvinces(${regionId}, ${c.id})">
                    <i class="bi bi-flag icon"></i>
                    <span class="title">${c.name}</span>
                    <span class="subtitle">Click to view provinces</span>
                    <i class="bi bi-chevron-right" style="position:absolute; top:15px; right:15px; color:#007bff;"></i>
                </div>
            `).join('')}
        </div>
    `;
}

// Render provinces for a country
function showProvinces(regionId, countryId) {
    const region = georegions.find(r => r.id == regionId);
    const country = region.countries.find(c => c.id == countryId);
    navStack.push({type: 'country', id: countryId, title: country.name});

    rightPanel.innerHTML = `
        <button class="back-btn" onclick="goBack()"><i class="bi bi-arrow-left"></i> Back</button>
        <h4>${country.name} - Provinces</h4>
        <div class="grid-row">
            ${country.provinces.map(p => `
                <div class="grid-card" onclick="showPlaces(${regionId}, ${countryId}, ${p.id})">
                    <i class="bi bi-map icon"></i>
                    <span class="title">${p.name}</span>
                    <span class="subtitle">Click to view areas & places</span>
                    <i class="bi bi-chevron-right" style="position:absolute; top:15px; right:15px; color:#007bff;"></i>
                </div>
            `).join('')}
        </div>
    `;
}

// Render places for a province
function showPlaces(regionId, countryId, provinceId) {
    const region = georegions.find(r => r.id == regionId);
    const country = region.countries.find(c => c.id == countryId);
    const province = country.provinces.find(p => p.id == provinceId);
    navStack.push({ type: 'province', id: provinceId, title: province.name });

    rightPanel.innerHTML = `
        <button class="back-btn" onclick="goBack()"><i class="bi bi-arrow-left"></i> Back</button>
        <h4>${province.name} - Areas & Places</h4>
        <div class="accordion" id="provinceAccordion">
            <div class="row g-3">
                ${province.areas.map((a, index) => `
                    <div class="col-md-4">
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="heading${index}">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse${index}" aria-expanded="false" aria-controls="collapse${index}">
                                    <i class="bi bi-building icon"></i> ${a.name}
                                </button>
                            </h2>
                            <div id="collapse${index}" class="accordion-collapse collapse" aria-labelledby="heading${index}" data-bs-parent="#provinceAccordion">
                                <div class="accordion-body">
                                    <ul>
                                        ${a.places.map(pl => {
                                            const regionSlug = region.name.toLowerCase().replace(/\s+/g, '-');
                                            const countrySlug = country.name.toLowerCase().replace(/\s+/g, '-');
                                            const provinceSlug = province.name.toLowerCase().replace(/\s+/g, '-');
                                            const areaSlug = a.name.toLowerCase().replace(/\s+/g, '-');
                                            const placeLocationSlug = pl.location.toLowerCase().replace(/\s+/g, '-');
                                            const placeSlug = pl.slug;
                                            const url = `/${regionSlug}/${countrySlug}/${provinceSlug}/${areaSlug}/${placeLocationSlug}/${placeSlug}`;

                                            return `<li>
                                                <i class="bi bi-house icon"></i>
                                                 <a href="${url}" target="_blank">${pl.title} - ${placeLocationSlug}</a>
                                            </li>`;
                                        }).join('')}
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                `).join('')}
            </div>
        </div>
    `;

    // Re-initialize Bootstrap collapse for dynamically added elements
    const collapseElements = rightPanel.querySelectorAll('.accordion-collapse');
    collapseElements.forEach(el => {
        new bootstrap.Collapse(el, { toggle: false });
    });
}


// Region click events
document.querySelectorAll('.region-tabs .nav-link').forEach(btn => {
    btn.addEventListener('click', function() {
        const regionId = this.getAttribute('data-region-id');

        // 1️⃣ Remove active from all
        document.querySelectorAll('.region-tabs .nav-link').forEach(b => b.classList.remove('active'));

        // 2️⃣ Add active to clicked
        this.classList.add('active');

        // 3️⃣ Show countries in right panel
        showCountries(regionId);
    });
});


// Go back one step
function goBack() {
    navStack.pop(); // remove current
    const last = navStack.pop(); // previous
    if(!last){
        rightPanel.innerHTML = '<h4>Select a Region</h4>';
        return;
    }

    if(last.type === 'region') showCountries(last.id);
    else if(last.type === 'country') showProvinces(navStack[navStack.length-1].id, last.id);
    else if(last.type === 'province') showPlaces(navStack[navStack.length-2].id, navStack[navStack.length-1].id, last.id);
}
    
// Region click events
document.querySelectorAll('.region-tabs .nav-link').forEach(btn=>{
    btn.addEventListener('click', function(){
        const regionId = this.getAttribute('data-region-id');
        showCountries(regionId);
    });
});
</script>
<script>
// Existing georegions and functions here...

// Region click events
document.querySelectorAll('.region-tabs .nav-link').forEach(btn => {
    btn.addEventListener('click', function() {
        const regionId = this.getAttribute('data-region-id');

        // Remove active from all
        document.querySelectorAll('.region-tabs .nav-link').forEach(b => b.classList.remove('active'));

        // Add active to clicked
        this.classList.add('active');

        // Show countries in right panel
        showCountries(regionId);
    });
});

// ✅ Default load: select first region and show its countries
window.addEventListener('DOMContentLoaded', () => {
    const firstRegionBtn = document.querySelector('.region-tabs .nav-link');
    if(firstRegionBtn){
        firstRegionBtn.classList.add('active');
        const firstRegionId = firstRegionBtn.getAttribute('data-region-id');
        showCountries(firstRegionId);
    }
});
</script>


@include('htmlpage.frontent.layout.footer')