@include('htmlpage.frontent.layout.app')
<div class="theme_slider bg-black p-0">
    <!-- Page Header -->


 <div class="page_header">  
     <div class="page_header_inner">
         <ul class="grid_lines d-none d-md-flex justify-content-between">
             <li class="grid_line"></li>
             <li class="grid_line"></li>
             <li class="grid_line"></li>
             <li class="grid_line"></li>
             <li class="grid_line"></li>
             <li class="grid_line"></li>
             <li class="grid_line"></li>
         </ul>   
         <div class="container">
             <div class="page_header_content d-flex align-items-center justify-content-between">
                 
                 <ul class="breadcrumb d-flex align-items-center">
                     <li><a href="/">Home</a></li>
                     <li class="active">Locations</li>
                 </ul>
             </div>
         </div>
     </div>        
 </div>
 <!-- Main Wrapper-->
 <main class="wrapper">
     <!-- Service Section -->
    <section class="bg-dark landing">
     <ul class="grid_lines d-none d-md-flex justify-content-between">
         <li class="grid_line"></li>
         <li class="grid_line"></li>
         <li class="grid_line"></li>
         <li class="grid_line"></li>
         <li class="grid_line"></li>
         <li class="grid_line"></li>
         <li class="grid_line"></li>
     </ul>   
     <div class="container mt-4">
      <div class="accordion" id="accordionExample">
        @if (!empty($countries))
            @foreach ($countries as $countryCode => $countryName)
                <div class="accordion-item">
                    <h2 class="accordion-header" id="heading-{{ $countryCode }}">
                      <button class="accordion-button" type="button" data-bs-toggle="collapse"
                      data-bs-target="#collapse-{{ $countryCode }}" aria-expanded="true"
                      aria-controls="collapse-{{ $countryCode }}" data-country-code="{{ $countryCode }}">
                      <i class="fa fa-flag mr-3" aria-hidden="true"></i>
                      {{ $countryName }}
                  </button>
                    </h2>
                    <div id="collapse-{{ $countryCode }}" class="accordion-collapse collapse"
                        aria-labelledby="heading-{{ $countryCode }}" data-bs-parent="#accordionExample">
                        <div class="accordion-body">
                            <div class="container mt-4">
                                <ul class="nav nav-tabs" id="tabs-{{ $countryCode }}" role="tablist">
                                    <!-- Tabs for states will be dynamically added here -->
                                </ul>
                                <div class="tab-content mt-2" id="tab-content-{{ $countryCode }}">
                                    <!-- Tab content for states will be dynamically added here -->
                                </div>
                            </div>
                        </div>
                        
                    </div>
                </div>
            @endforeach
        @endif
    </div>
       </div>
    </section>
 </main>
<!-- Custom JavaScript -->
<script>
document.addEventListener("DOMContentLoaded", function() {
    function fetchStates(countryCode) {
        console.log(`Fetching states for country code: ${countryCode}`);

        fetch(`/homestates/${countryCode}`)
            .then(response => {
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                return response.json();
            })
            .then(states => {
                console.log('States fetched:', states);
                renderTabs(states, countryCode);
            })
            .catch(error => console.error('Error fetching states:', error));
    }

    function fetchDistricts(stateCode, countryCode, tabPane) {
    console.log(`Fetching districts for state code: ${stateCode}`);

    // Convert stateCode and countryCode to lowercase and replace codes with full names
    const formattedCountry = countryCode.toLowerCase(); // Assuming you already have 'in' instead of 'IN'
    const formattedState = stateCode.toLowerCase(); // Convert state code to lowercase

    // Create a mapping from state code to full state name (you should define this map based on your data)
    const stateNameMap = {
        'kl': 'kerala',
        'ka': 'karnataka',
        'du': 'dubai',
        'tn': 'tamil-nadu',
        // Add more state code to full name mappings as needed
    };

    const formattedStateName = stateNameMap[formattedState] || formattedState;

    fetch(`/homedistricts/${stateCode}`)
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.json();
        })
        .then(districts => {
            console.log('Districts fetched:', districts);
            if (!Array.isArray(districts)) {
                console.error('Expected an array of districts, but received:', districts);
                return;
            }
            const container = document.createElement('div');
            container.className = 'container';
            const row = document.createElement('div');
            row.className = 'row';

            districts.forEach(district => {
                const districtName = district.name;
                const districtCode = district.code ? district.code : districtName.toLowerCase().replace(/\s+/g, '-');
                const col = document.createElement('div');
                col.className = 'col-md-2';
                col.innerHTML = `
                    <a href="/${formattedCountry}/${formattedStateName}/${districtCode}">
                        <div class="district mb-2"><p>${districtName}</p></div>
                    </a>
                `;
                row.appendChild(col);
            });

            container.appendChild(row);
            tabPane.innerHTML = ''; // Clear existing content
            tabPane.appendChild(container);

            console.log('TabPane content updated:', tabPane.innerHTML);
        })
        .catch(error => console.error('Error fetching districts:', error));
}


    function renderTabs(states, countryCode) {
        const tabsContainer = document.getElementById('tabs-' + countryCode);
        const tabContentContainer = document.getElementById('tab-content-' + countryCode);

        tabsContainer.innerHTML = '';
        tabContentContainer.innerHTML = '';

        states.forEach((state, index) => {
            const stateCode = state.code;
            const stateName = state.name;

            const tabLink = document.createElement('li');
            tabLink.className = 'nav-item';
            tabLink.innerHTML = `
                <a class="nav-link ${index === 0 ? 'active' : ''}" id="tab-${countryCode}-${stateCode}" data-bs-toggle="tab" href="#state-${countryCode}-${stateCode}">
                    ${stateName}
                </a>
            `;
            tabsContainer.appendChild(tabLink);

            const tabContent = document.createElement('div');
            tabContent.id = `state-${countryCode}-${stateCode}`;
            tabContent.className = `tab-pane fade ${index === 0 ? 'show active' : ''}`;
            tabContentContainer.appendChild(tabContent);

            // Pass countryCode along with stateCode
            fetchDistricts(stateCode, countryCode, tabContent);
        });
    }

    document.querySelectorAll('.accordion-button').forEach(button => {
        button.addEventListener('click', function() {
            const countryCode = this.getAttribute('data-country-code');
            console.log(`Accordion button clicked for country code: ${countryCode}`);
            fetchStates(countryCode);
        });
    });
});

</script>
  
@include('htmlpage.frontent.layout.footer')