@extends('backend.layout.master-tailwind')
@section('title', __('Import Countries'))

@section('content')

<div class="page">

  <div class="page-head">
    <div>
      <h1 class="page-title">{{ __('Import Countries') }}</h1>
      <p class="page-sub">{{ __('Bulk-import countries from a CSV file.') }}</p>
    </div>
    <div class="page-actions">
      <a href="{{ route('admin.country.all') }}" class="btn ghost">
        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5"/><path d="m12 19-7-7 7-7"/></svg>
        {{ __('Back to Countries') }}
      </a>
    </div>
  </div>

  @if($errors->any())
  <div style="background:var(--danger-soft);border:1px solid color-mix(in oklch,var(--danger) 30%,transparent);border-radius:10px;padding:12px 16px;margin-bottom:14px;font-size:12px;color:var(--danger);line-height:1.7">
    <div style="display:flex;gap:8px;align-items:flex-start">
      <svg style="flex:none;margin-top:1px" class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l9 16H3z"/><path d="M12 10v4"/><circle cx="12" cy="17" r="0.6" fill="currentColor"/></svg>
      <ul style="margin:0;padding-left:16px">
        @foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach
      </ul>
    </div>
  </div>
  @endif

  {{-- Step indicator --}}
  <div style="display:flex;align-items:center;gap:0;margin-bottom:20px">
    <div style="display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;color:{{ empty($import_data) ? 'var(--accent)' : 'var(--text-3)' }}">
      <span style="width:22px;height:22px;border-radius:50%;background:{{ empty($import_data) ? 'var(--accent)' : 'var(--surface-2)' }};color:{{ empty($import_data) ? 'white' : 'var(--text-3)' }};display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;flex-shrink:0">1</span>
      {{ __('Upload CSV') }}
    </div>
    <div style="flex:0 0 40px;height:1px;background:var(--border);margin:0 10px"></div>
    <div style="display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;color:{{ !empty($import_data) ? 'var(--accent)' : 'var(--text-3)' }}">
      <span style="width:22px;height:22px;border-radius:50%;background:{{ !empty($import_data) ? 'var(--accent)' : 'var(--surface-2)' }};color:{{ !empty($import_data) ? 'white' : 'var(--text-3)' }};display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;flex-shrink:0">2</span>
      {{ __('Map Columns') }}
    </div>
  </div>

  @if(empty($import_data))

  {{-- Step 1: Upload --}}
  <div class="card" style="max-width:560px">
    <div class="card-head"><div class="card-title">{{ __('Upload CSV file') }}</div></div>
    <form action="{{ route('admin.country.import.csv.update.settings') }}" method="POST" enctype="multipart/form-data">
      @csrf
      <div style="padding:0 16px 16px">

        <div class="setting-row" style="border-bottom:none;padding-top:16px">
          <div class="info">
            <div class="ttl">{{ __('CSV file') }}</div>
            <div class="desc">{{ __('Only .csv files. Columns separated by commas.') }}</div>
          </div>
          <div>
            <label for="csv_file" style="display:inline-flex;align-items:center;gap:8px;padding:6px 12px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);font-size:12.5px;color:var(--text-2);cursor:pointer">
              <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
              <span id="file-label">{{ __('Choose file…') }}</span>
            </label>
            <input type="file" id="csv_file" name="csv_file" accept=".csv" required
                   style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none">
          </div>
        </div>

        <div style="background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;margin-top:4px;font-size:12px;color:var(--text-3);display:flex;gap:8px;align-items:flex-start">
          <svg class="icon" style="flex:none;margin-top:1px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 8v4"/><circle cx="12" cy="16" r=".6" fill="currentColor"/></svg>
          {{ __('The CSV must have a header row. Country names go in a single column. Duplicate entries are skipped automatically.') }}
        </div>

      </div>
      <div style="padding:12px 16px 16px;border-top:1px solid var(--border);display:flex;justify-content:flex-end">
        <button type="submit" class="btn primary loading-btn">
          <svg class="icon" id="upload-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
          {{ __('Upload & Continue') }}
        </button>
      </div>
    </form>
  </div>

  @else

  {{-- Step 2: Map columns --}}
  @php
    $csvHeaders = current($import_data);
  @endphp

  <div class="card" style="max-width:560px">
    <div class="card-head"><div class="card-title">{{ __('Map CSV columns') }}</div></div>
    <form action="{{ route('admin.country.import.database') }}" method="POST" enctype="multipart/form-data">
      @csrf
      <div>

        <div class="setting-row">
          <div class="info">
            <div class="ttl">{{ __('Country name') }}</div>
            <div class="desc">{{ __('Which CSV column contains the country name?') }}</div>
          </div>
          <div style="width:180px">
            <select class="input wide mapping_select" style="height:28px;appearance:auto">
              <option value="">{{ __('Select column') }}</option>
              @foreach($csvHeaders as $header)
                <option value="{{ trim($header) }}">{{ trim($header) }}</option>
              @endforeach
            </select>
            <input type="hidden" name="country">
          </div>
        </div>

        <div class="setting-row" style="border-bottom:none">
          <div class="info">
            <div class="ttl">{{ __('Import status') }}</div>
            <div class="desc">{{ __('Status applied to all imported countries.') }}</div>
          </div>
          <div style="width:180px">
            <select class="input wide mapping_select" style="height:28px;appearance:auto">
              <option value="1">{{ __('Active') }}</option>
              <option value="0">{{ __('Inactive') }}</option>
            </select>
            <input type="hidden" name="status" value="1">
          </div>
        </div>

      </div>
      <div style="padding:12px 16px 16px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between">
        <a href="{{ route('admin.country.import.csv.settings') }}" class="btn ghost sm">
          {{ __('← Start over') }}
        </a>
        <button type="submit" class="btn primary loading-btn">
          <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
          {{ __('Import countries') }}
        </button>
      </div>
    </form>
  </div>

  @endif

</div>

@endsection

@section('script')
<style>@keyframes spin { to { transform: rotate(360deg); } }</style>
<script>
(function ($) {
  'use strict';

  // Show selected filename
  document.getElementById('csv_file')?.addEventListener('change', function () {
    var name = this.files[0] ? this.files[0].name : '{{ __("Choose file…") }}';
    document.getElementById('file-label').textContent = name;
  });

  // Spinner on submit
  $(document).on('click', '.loading-btn', function () {
    var btn = $(this);
    btn.find('svg').replaceWith(
      '<svg style="width:14px;height:14px;animation:spin 1s linear infinite;flex-shrink:0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/></svg>'
    );
    btn.prop('disabled', true);
  });

  // Column mapping — sync hidden inputs and disable used options
  $(document).on('change', '.mapping_select', function () {
    // Restore all options first
    $('.mapping_select option').prop('disabled', false);
    // Sync this select → its next hidden input
    $(this).next('input[type=hidden]').val($(this).val());
    // Disable selected values in sibling selects
    $('.mapping_select').each(function () {
      var val = $(this).val();
      if (val) {
        $('.mapping_select').not(this).find('option[value="' + val + '"]').prop('disabled', true);
      }
    });
  });

}(jQuery));
</script>
@endsection