@php
  $defaultPricings = function_exists('marketplaceDefaultCountryPricings') ? marketplaceDefaultCountryPricings() : [];
  $allCountrySections = function_exists('marketplaceCountrySections') ? marketplaceCountrySections() : [];
  
  // Build a lookup of existing defaults by name
  $existingKeys = collect($defaultPricings)->pluck('name')->map(fn($n) => strtolower(trim($n)))->all();
  
  // Add any other countries from countrySections that aren't already in the top 30
  $extraCountries = [];
  foreach ($allCountrySections as $sectionTitle => $cList) {
      foreach ($cList as $c) {
          $cName = trim($c['name'] ?? '');
          if ($cName !== '' && !in_array(strtolower($cName), $existingKeys, true)) {
              $existingKeys[] = strtolower($cName);
              $extraCountries[] = [
                  'name' => $cName,
                  'code' => strtolower(str_replace('fi fi-', '', $c['flag_class'] ?? 'gb')),
                  'flag_class' => $c['flag_class'] ?? 'fi fi-gb',
                  'amount' => 8.00,
                  'enabled' => false,
              ];
          }
      }
  }

  $combinedCountries = array_merge($defaultPricings, $extraCountries);

  // If editing an existing service, determine selected country & price
  $currentService = $service ?? null;
  $currentCountry = old('country', $currentService?->country ?? '');
  $currentServicePrice = (float) ($currentService?->price ?? 0);
@endphp

<!-- Country Selection Popup Modal -->
<div class="modal fade" id="countryPricingModal" tabindex="-1" aria-labelledby="countryPricingModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
    <div class="modal-content country-modal-content">
      
      <!-- Modal Header -->
      <div class="modal-header country-modal-header border-0 pb-2">
        <div class="d-flex align-items-center gap-3">
          <div class="country-modal-globe">
            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#f59e0b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <circle cx="12" cy="12" r="10"></circle>
              <line x1="2" y1="12" x2="22" y2="12"></line>
              <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
            </svg>
          </div>
          <div>
            <h5 class="modal-title country-modal-title mb-0" id="countryPricingModalLabel">Select Countries &amp; Monthly Price ($)</h5>
            <div class="country-modal-subtitle">Select countries and specify each country's base Monthly Price ($). Admin fee is configured in plans below.</div>
          </div>
        </div>

        <div class="d-flex align-items-center flex-wrap gap-2 ms-auto">
          <!-- Bulk Set Price -->
          <div class="input-group input-group-sm cpm-bulk-wrap" title="Set monthly price for all selected countries">
            <span class="input-group-text bg-dark text-warning border-secondary fw-bold">$</span>
            <input type="number" step="0.01" min="0" id="cpmBulkPriceInput" class="form-control form-control-sm cpm-bulk-input" placeholder="Bulk Price">
            <button type="button" id="cpmBtnApplyBulkPrice" class="btn btn-sm btn-warning text-dark fw-bold" title="Apply to selected countries">Apply to All</button>
          </div>

          <!-- Search Box -->
          <div class="country-modal-search">
            <i class="fa-solid fa-magnifying-glass search-icon"></i>
            <input type="text" id="cpmSearchInput" class="form-control cpm-search-field" placeholder="Search country..." autocomplete="off">
            <button type="button" id="cpmClearSearch" class="btn-clear-search d-none">&times;</button>
          </div>

          <!-- Quick Select All / None -->
          <div class="btn-group btn-group-sm">
            <button type="button" class="btn btn-sm btn-outline-secondary text-light border-secondary" id="cpmBtnSelectAll" title="Select all countries">All</button>
            <button type="button" class="btn btn-sm btn-outline-secondary text-light border-secondary" id="cpmBtnDeselectAll" title="Deselect all countries">None</button>
          </div>

          <button type="button" class="btn-close btn-close-white ms-1" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
      </div>

      <!-- Modal Body -->
      <div class="modal-body country-modal-body pt-2 pb-3">
        
        <div id="cpmCountryGrid" class="cpm-grid">
          @foreach($combinedCountries as $c)
            @php
              $cName = $c['name'];
              $cFlag = $c['flag_class'] ?? 'fi fi-gb';
              $cAmount = isset($c['amount']) ? (float) $c['amount'] : (isset($c['price']) ? (float) $c['price'] : 8.00);
              $cEnabled = false;
              if (!empty($currentCountry) && strtolower($cName) === strtolower($currentCountry)) {
                  $cEnabled = true;
                  if ($currentServicePrice > 0) {
                      $cAmount = $currentServicePrice;
                  }
              }
            @endphp
            <div class="cpm-card {{ $cEnabled ? 'is-active' : '' }}" 
                 data-country="{{ $cName }}" 
                 data-flag="{{ $cFlag }}"
                 data-default-price="{{ number_format($cAmount, 2, '.', '') }}">
              
              <!-- Left: Flag + Country Name -->
              <div class="cpm-left">
                <span class="cpm-flag {{ $cFlag }}"></span>
                <span class="cpm-name" title="{{ $cName }}">{{ $cName }}</span>
              </div>

              <!-- Middle: Monthly Price Input -->
              <div class="cpm-price-wrap" onclick="event.stopPropagation();">
                <div class="input-group input-group-sm cpm-price-group" title="Monthly Price ($) for {{ $cName }}">
                  <span class="input-group-text cpm-dollar">$</span>
                  <input type="number" step="0.01" min="0" 
                         class="form-control form-control-sm cpm-price-input" 
                         placeholder="8.00" 
                         value="{{ number_format($cAmount, 2, '.', '') }}" 
                         title="Monthly Price ($) for {{ $cName }}">
                </div>
              </div>

              <!-- Right: Amber Checkbox -->
              <div class="cpm-checkbox" title="Toggle country selection">
                <i class="fa-solid fa-check"></i>
              </div>

            </div>
          @endforeach
        </div>

        <div id="cpmNoResults" class="text-center py-5 d-none">
          <i class="fa-solid fa-earth-americas fa-2x text-muted mb-2"></i>
          <p class="text-muted mb-0">No countries match your search.</p>
        </div>

      </div>

      <!-- Modal Footer -->
      <div class="modal-footer country-modal-footer border-0 pt-2 pb-3 d-flex justify-content-between align-items-center">
        <div class="country-modal-counter">
          <span id="cpmSelectedCount" class="text-warning fw-bold">0</span> countries selected
        </div>

        <button type="button" id="cpmBtnSave" class="btn btn-country-save d-inline-flex align-items-center gap-2">
          <i class="fa-solid fa-floppy-disk"></i>
          <span>Save Selection &amp; Prices</span>
        </button>
      </div>

    </div>
  </div>
</div>

<style>
  /* Dark Modal Shell */
  .country-modal-content {
    background: #0b1329 !important;
    border: 1px solid #1e293b !important;
    border-radius: 18px !important;
    color: #e2e8f0 !important;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.75) !important;
    overflow: hidden;
  }

  .country-modal-header {
    background: #0b1329 !important;
    padding: 1.25rem 1.5rem 0.5rem 1.5rem;
  }

  .country-modal-globe {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(245, 158, 11, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .country-modal-title {
    color: #ffffff !important;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
  }

  .country-modal-subtitle {
    color: #94a3b8 !important;
    font-size: 0.82rem;
    margin-top: 2px;
  }

  /* Bulk Price Bar */
  .cpm-bulk-wrap {
    max-width: 190px;
  }
  .cpm-bulk-input {
    background: #111a2e !important;
    border: 1px solid #1e293b !important;
    color: #ffffff !important;
    font-weight: 700;
  }
  .cpm-bulk-input:focus {
    border-color: #f59e0b !important;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2) !important;
    color: #ffffff !important;
  }

  /* Search Bar */
  .country-modal-search {
    position: relative;
    min-width: 200px;
  }

  .country-modal-search .search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
    font-size: 0.85rem;
    pointer-events: none;
  }

  .cpm-search-field {
    background: #111a2e !important;
    border: 1px solid #1e293b !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    padding-left: 32px !important;
    padding-right: 28px !important;
    height: 32px;
    font-size: 0.85rem;
    transition: all 0.2s ease;
  }

  .cpm-search-field:focus {
    background: #15223c !important;
    border-color: #f59e0b !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15) !important;
    color: #ffffff !important;
  }

  .btn-clear-search {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
  }

  /* Grid Layout (3 Columns) */
  .country-modal-body {
    padding: 0.5rem 1.5rem 1rem 1.5rem;
  }

  .cpm-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 12px;
    max-height: 520px;
    overflow-y: auto;
    padding-right: 6px;
  }

  @media (max-width: 1199.98px) {
    .cpm-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 767.98px) {
    .cpm-grid {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  /* Sleek Scrollbar */
  .cpm-grid::-webkit-scrollbar {
    width: 6px;
  }
  .cpm-grid::-webkit-scrollbar-track {
    background: #0b1329;
  }
  .cpm-grid::-webkit-scrollbar-thumb {
    background: #1e293b;
    border-radius: 4px;
  }
  .cpm-grid::-webkit-scrollbar-thumb:hover {
    background: #334155;
  }

  /* Country Row / Card */
  .cpm-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #111a2e;
    border: 1px solid #1e293b;
    border-radius: 10px;
    padding: 8px 12px;
    min-height: 50px;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  }

  .cpm-card:hover {
    background: #15223c;
    border-color: #2b3b55;
    transform: translateY(-1px);
  }

  .cpm-card.is-active {
    background: #142240;
    border-color: #f59e0b;
    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.3);
  }

  .cpm-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
  }

  .cpm-flag {
    width: 22px;
    height: 15px;
    border-radius: 3px;
    flex-shrink: 0;
    background-size: cover;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  }

  .cpm-name {
    color: #f1f5f9;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .cpm-card.is-active .cpm-name {
    color: #ffffff;
    font-weight: 700;
  }

  /* Price Input inside Country Card */
  .cpm-price-wrap {
    width: 95px;
    flex-shrink: 0;
  }

  .cpm-price-group {
    background: #0b1329;
    border: 1px solid #334155;
    border-radius: 6px;
    overflow: hidden;
  }

  .cpm-card.is-active .cpm-price-group {
    border-color: #f59e0b;
  }

  .cpm-dollar {
    background: #1e293b;
    color: #f59e0b;
    font-weight: 700;
    border: none;
    padding: 0 5px;
    font-size: 0.78rem;
  }

  .cpm-price-input {
    background: #0b1329 !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 3px 5px !important;
    height: 28px !important;
  }

  .cpm-price-input:focus {
    box-shadow: none !important;
    background: #15223c !important;
    color: #fef08a !important;
  }

  /* Checkbox */
  .cpm-checkbox {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 2px solid #334155;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: transparent;
    transition: all 0.15s ease;
    background: #0b1329;
  }

  .cpm-card.is-active .cpm-checkbox {
    background: #f59e0b;
    border-color: #f59e0b;
    color: #0b1329;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
  }

  .cpm-checkbox i {
    font-size: 0.75rem;
    font-weight: 900;
  }

  /* Footer */
  .country-modal-footer {
    background: #0b1329 !important;
    border-top: 1px solid #1e293b !important;
    padding: 0.9rem 1.5rem;
  }

  .country-modal-counter {
    color: #cbd5e1;
    font-size: 0.95rem;
    font-weight: 500;
  }

  .btn-country-save {
    background: #f59e0b !important;
    color: #0b1329 !important;
    font-weight: 700 !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 0.6rem 1.6rem !important;
    font-size: 0.95rem !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35) !important;
    transition: all 0.2s ease !important;
  }

  .btn-country-save:hover {
    background: #d97706 !important;
    color: #0b1329 !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(245, 158, 11, 0.45) !important;
  }
</style>

<script>
document.addEventListener('DOMContentLoaded', function () {
  const modalEl = document.getElementById('countryPricingModal');
  if (!modalEl) return;

  const countryCards = modalEl.querySelectorAll('.cpm-card');
  const searchInput = document.getElementById('cpmSearchInput');
  const clearSearchBtn = document.getElementById('cpmClearSearch');
  const noResultsEl = document.getElementById('cpmNoResults');
  const btnSelectAll = document.getElementById('cpmBtnSelectAll');
  const btnDeselectAll = document.getElementById('cpmBtnDeselectAll');
  const btnSave = document.getElementById('cpmBtnSave');
  const selectedCountEl = document.getElementById('cpmSelectedCount');
  const bulkPriceInput = document.getElementById('cpmBulkPriceInput');
  const btnApplyBulkPrice = document.getElementById('cpmBtnApplyBulkPrice');

  // Main Form Elements
  const hiddenJsonInput = document.getElementById('selectedCountriesJson');
  const primaryCountryInput = document.getElementById('primaryCountryInput');
  const countryDisplayInput = document.getElementById('countryDisplayInput');
  const countryBadgeCount = document.getElementById('countryBadgeCount');
  const previewContainer = document.getElementById('selectedCountriesPreview');
  const openModalBtn = document.getElementById('btnOpenCountryModal');
  const openModalTrigger = document.getElementById('openCountryModalTrigger');

  function escapeHtml(text) {
    if (!text) return '';
    return String(text)
        .replace(/&/g, "&amp;")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
        .replace(/"/g, "&quot;")
        .replace(/'/g, "&#039;");
  }

  // Trigger modal
  function showModal() {
    const modal = new bootstrap.Modal(modalEl);
    modal.show();
  }

  if (openModalBtn) {
    openModalBtn.addEventListener('click', function(e) {
      e.stopPropagation();
      showModal();
    });
  }

  if (openModalTrigger) {
    openModalTrigger.addEventListener('click', function() {
      showModal();
    });
  }

  // Card interaction
  countryCards.forEach(function (card) {
    const priceInput = card.querySelector('.cpm-price-input');

    card.addEventListener('click', function (e) {
      if (e.target.closest('.cpm-price-wrap')) {
        return; // Don't toggle card if clicking input
      }
      card.classList.toggle('is-active');
      updateSelectedCount();
    });

    if (priceInput) {
      priceInput.addEventListener('input', function () {
        if (!card.classList.contains('is-active')) {
          card.classList.add('is-active');
          updateSelectedCount();
        }
      });
      priceInput.addEventListener('click', function (e) {
        e.stopPropagation();
      });
      priceInput.addEventListener('focus', function (e) {
        e.stopPropagation();
      });
    }
  });

  // Bulk Price Apply
  if (btnApplyBulkPrice && bulkPriceInput) {
    btnApplyBulkPrice.addEventListener('click', function () {
      const bPrice = parseFloat(bulkPriceInput.value);
      if (isNaN(bPrice) || bPrice < 0) {
        alert('Please enter a valid price (e.g. 8.00)');
        bulkPriceInput.focus();
        return;
      }
      let appliedCount = 0;
      countryCards.forEach(function (card) {
        if (card.classList.contains('is-active')) {
          const pInp = card.querySelector('.cpm-price-input');
          if (pInp) {
            pInp.value = bPrice.toFixed(2);
            appliedCount++;
          }
        }
      });
      if (appliedCount === 0) {
        alert('Please select at least one country first, or click "All" to select all countries.');
      }
    });
  }

  // Search Filter
  if (searchInput) {
    searchInput.addEventListener('input', function () {
      const q = this.value.trim().toLowerCase();
      let visibleCount = 0;

      if (clearSearchBtn) {
        clearSearchBtn.classList.toggle('d-none', q === '');
      }

      countryCards.forEach(function (card) {
        const countryName = card.getAttribute('data-country').toLowerCase();
        const matches = countryName.includes(q);
        card.style.display = matches ? 'flex' : 'none';
        if (matches) visibleCount++;
      });

      if (noResultsEl) {
        noResultsEl.classList.toggle('d-none', visibleCount > 0);
      }
    });

    if (clearSearchBtn) {
      clearSearchBtn.addEventListener('click', function () {
        searchInput.value = '';
        searchInput.dispatchEvent(new Event('input'));
        searchInput.focus();
      });
    }
  }

  // Select All / Deselect All
  if (btnSelectAll) {
    btnSelectAll.addEventListener('click', function () {
      countryCards.forEach(function (card) {
        if (card.style.display !== 'none') {
          card.classList.add('is-active');
        }
      });
      updateSelectedCount();
    });
  }

  if (btnDeselectAll) {
    btnDeselectAll.addEventListener('click', function () {
      countryCards.forEach(function (card) {
        if (card.style.display !== 'none') {
          card.classList.remove('is-active');
        }
      });
      updateSelectedCount();
    });
  }

  function getSelectedData() {
    const list = [];
    countryCards.forEach(function (card) {
      if (card.classList.contains('is-active')) {
        const country = card.getAttribute('data-country');
        const flag = card.getAttribute('data-flag');
        const priceInput = card.querySelector('.cpm-price-input');
        const priceVal = priceInput ? (parseFloat(priceInput.value) || 0) : (parseFloat(card.getAttribute('data-default-price')) || 8.00);
        list.push({
          country: country,
          flag: flag,
          price: parseFloat(priceVal.toFixed(2)),
          amount: parseFloat(priceVal.toFixed(2)),
          enabled: true
        });
      }
    });
    return list;
  }

  function updateSelectedCount() {
    const count = modalEl.querySelectorAll('.cpm-card.is-active').length;
    if (selectedCountEl) {
      selectedCountEl.textContent = count;
    }
  }

  // Sync to Main Form
  function syncToMainForm() {
    const selected = getSelectedData();
    const count = selected.length;

    if (hiddenJsonInput) {
      hiddenJsonInput.value = JSON.stringify(selected);
    }

    if (primaryCountryInput) {
      primaryCountryInput.value = count > 0 ? selected[0].country : '';
    }

    if (countryBadgeCount) {
      countryBadgeCount.textContent = count + ' Countries Selected';
    }

    if (countryDisplayInput) {
      if (count === 0) {
        countryDisplayInput.value = '';
        countryDisplayInput.placeholder = 'Click to select countries & set monthly prices...';
      } else if (count === 1) {
        countryDisplayInput.value = selected[0].country + ' ($' + selected[0].price.toFixed(2) + '/mo)';
      } else {
        const summary = selected.slice(0, 3).map(s => s.country + ' ($' + s.price.toFixed(2) + ')').join(', ');
        countryDisplayInput.value = count + ' Countries: ' + summary + (count > 3 ? '...' : '');
      }
    }

    // Render Badges Preview
    if (previewContainer) {
      previewContainer.innerHTML = '';
      if (count === 0) {
        previewContainer.innerHTML = '<span class="text-muted small">No countries selected yet. Click above to select countries & monthly prices.</span>';
      } else {
        const maxDisplay = 12;
        selected.slice(0, maxDisplay).forEach(function (item) {
          const badge = document.createElement('span');
          badge.className = 'badge bg-dark text-warning border border-secondary py-1 px-2 d-inline-flex align-items-center gap-1 shadow-sm';
          badge.innerHTML = '<span class="' + item.flag + '" style="width: 14px; height: 10px; border-radius: 2px;"></span> ' +
                            escapeHtml(item.country) + 
                            ' <span class="badge bg-warning text-dark fw-bold ms-1" style="font-size: 10px;">$' + item.price.toFixed(2) + '/mo</span>';
          previewContainer.appendChild(badge);
        });

        if (count > maxDisplay) {
          const moreBadge = document.createElement('span');
          moreBadge.className = 'badge bg-label-warning py-1 px-2';
          moreBadge.textContent = '+' + (count - maxDisplay) + ' more countries';
          previewContainer.appendChild(moreBadge);
        }
      }
    }
  }

  // On Save button click
  if (btnSave) {
    btnSave.addEventListener('click', function () {
      syncToMainForm();
      const modal = bootstrap.Modal.getInstance(modalEl);
      if (modal) modal.hide();
    });
  }

  // Pre-load on page load if editing or old data exists
  function initPreload() {
    let preloaded = null;
    const oldJsonStr = hiddenJsonInput ? hiddenJsonInput.value : '';

    if (oldJsonStr && oldJsonStr !== '[]' && oldJsonStr !== '') {
      try {
        preloaded = JSON.parse(oldJsonStr);
      } catch (err) {}
    }

    // If preloaded exists, apply active status and prices
    if (Array.isArray(preloaded) && preloaded.length > 0) {
      const map = new Map();
      preloaded.forEach(function (item) {
        const name = (item.country || item.name || '').toLowerCase();
        if (name) {
          const p = item.price !== undefined ? parseFloat(item.price) : (item.amount !== undefined ? parseFloat(item.amount) : null);
          map.set(name, p);
        }
      });

      countryCards.forEach(function (card) {
        const cName = card.getAttribute('data-country').toLowerCase();
        if (map.has(cName)) {
          card.classList.add('is-active');
          const customPrice = map.get(cName);
          if (customPrice !== null && !isNaN(customPrice)) {
            const priceInp = card.querySelector('.cpm-price-input');
            if (priceInp) priceInp.value = customPrice.toFixed(2);
          }
        } else {
          card.classList.remove('is-active');
        }
      });
    } else {
      @if(empty($currentCountry))
        countryCards.forEach(function (card) {
          card.classList.remove('is-active');
        });
      @endif
    }

    updateSelectedCount();
    syncToMainForm();
  }

  initPreload();
});
</script>