@php
$assetPath = 'frontend_assets';
$langCode = session('lang_code', app()->getLocale());
@endphp

<div class="modal fade" tabindex="-1" id="languageModal" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered language-modal-dialog" style="max-width: 566px;">
    <div class="modal-content modal-language">

      <!-- HEADER -->
      <div class="modal-header border-0 align-items-start">
        <div>
          <h5 class="modal-title">{{ webTrans('language_and_country', 'modal') }}</h5>
          <p class="modal-sub">{{ webTrans('select_your_default_language_and_country', 'modal') }}</p>
        </div>
        <button class="btn-close" data-bs-dismiss="modal"></button>
      </div>


      <!-- BODY -->
      <div class="modal-body">

        <!-- COUNTRY -->
        <p class="modal-title-2">{{ webTrans('country', 'modal') }}</p>

        <div class="row g-3">

          @php
              $preferredCodes = ['UAE', 'OM', 'IN', 'QA', 'KSA', 'BH', 'KW', 'YE', 'EG'];
              $preferred = $countries->filter(fn($c) => in_array($c->code, $preferredCodes))
                  ->sortBy(fn($c) => array_search($c->code, $preferredCodes));
              $others = $countries->filter(fn($c) => !in_array($c->code, $preferredCodes));
              $sortedCountries = $preferred->merge($others);

              $sessionCountryId = session('country_id');
              $uaeCountryId = optional($countries->firstWhere('code', 'UAE'))->id;
              $selectedCountryId = $countries->contains('id', $sessionCountryId)
                  ? $sessionCountryId
                  : $uaeCountryId;
              $selectedCountryId = $selectedCountryId ?: optional($countries->first())->id;
          @endphp
          @foreach($sortedCountries as $country)
          <div class="col-6">
            <input type="radio"
              class="btn-check"
              name="country"
              id="{{ $country['id'] }}"
              value="{{ $country['code'] }}"
              {{ $selectedCountryId == $country['id'] ? 'checked' : '' }}>

            <label class="btn btn-outline-country w-100 d-flex align-items-center"
              for="{{ $country['id'] }}">
              <img src="{{ uploadedAsset($country->icon) }}"
                class="flag-icon me-3"
                alt="{{ $country->name }}">
              {{ $country->name }}
            </label>
          </div>
          @endforeach
        </div>

        <!-- LANGUAGE -->
        <p class="modal-title-2 mt-4">{{ webTrans('language', 'modal') }}</p>

        <div class="d-flex flex-wrap gap-2 mt-2" id="language-list-container">
          @foreach($languages as $lang)
          <div class="lang-item" data-lang-code="{{ strtolower($lang->code) }}">
            <input type="radio"
              class="btn-check"
              name="language"
              id="lang-{{ strtolower($lang->code) }}"
              value="{{ strtolower($lang->code) }}"
              {{ $langCode == strtolower($lang->code) ? 'checked' : '' }}>

            <label class="btn btn-outline-lang" for="lang-{{ strtolower($lang->code) }}">
              {{ $lang->name }}
            </label>
          </div>
          @endforeach
        </div>
      </div>

      <div class="modal-footer border-0">
        <button type="button" class="btn btn-next w-100" onclick="applySelection()">
          <span data-translate="next_button">
            {{ webTrans('submit', 'modal') }}
          </span>
        </button>
      </div>
    </div>
  </div>
</div>
<script>
  const countryLanguages = @json($countries->mapWithKeys(fn($c) => [$c->id => $c->languages->pluck('code')->map(fn($code) => strtolower($code))]));

  document.addEventListener('DOMContentLoaded', function() {
    const countryRadios = document.querySelectorAll('input[name="country"]');
    countryRadios.forEach(radio => {
      radio.addEventListener('change', function() {
        filterLanguages(this.id);
      });
    });

    // Initial filter
    const checkedCountry = document.querySelector('input[name="country"]:checked');
    if (checkedCountry) {
      filterLanguages(checkedCountry.id);
    }
  });

  function filterLanguages(countryId) {
    const allowedLanguages = countryLanguages[countryId] || [];
    const langItems = document.querySelectorAll('.lang-item');
    let firstVisible = null;

    // Get the currently selected language (dynamically, not from page-load const)
    const currentSelectedLang = document.querySelector('input[name="language"]:checked');
    const currentLang = currentSelectedLang ? currentSelectedLang.value : null;
    let currentStillVisible = false;

    // If a country has no languages mapped, default to 'en' so the user can still proceed
    const effectiveAllowed = allowedLanguages.length > 0 ? allowedLanguages : ['en'];

    langItems.forEach(item => {
      const langCode = item.getAttribute('data-lang-code');
      if (effectiveAllowed.includes(langCode)) {
        item.style.display = 'block';
        const input = item.querySelector('input');
        if (!firstVisible) firstVisible = input;
        if (langCode === currentLang) {
          currentStillVisible = true;
          input.checked = true;
        }
      } else {
        item.style.display = 'none';
        item.querySelector('input').checked = false;
      }
    });

    // If current selection is no longer visible, select the first available one
    if (!currentStillVisible && firstVisible) {
      firstVisible.checked = true;
    }
  }

  async function applySelection() {
    const selectedLang = document.querySelector('input[name="language"]:checked')?.value;
    const selectedCountry = document.querySelector('input[name="country"]:checked')?.id;

    if (!selectedLang || !selectedCountry) return;

    try {
      const btn = document.querySelector('#languageModal .btn-next');
      btn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Processing...';
      btn.disabled = true;

      // Run sequentially to avoid session race condition
      await fetch("/set-language/" + selectedLang);
      await fetch("/set-country/" + selectedCountry);

      window.location.reload();
    } catch (err) {
      console.error("applySelection error:", err);
      window.location.reload(); // Still reload if one fails partially
    }
  }
</script>