@extends('layouts.superadmin')

@section('title', "Map Columns: {$import->filename}")

@section('content')
<!-- Header Banner -->
<div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem;">
  <div>
    <h1 style="font-size: 1.6rem; font-family: var(--font-heading); margin: 0 0 0.35rem; color: #fff;">
      <i class="fas fa-network-wired" style="color: #F59E0B; margin-right: 0.5rem;"></i> Schema & Column Mapping
    </h1>
    <p style="margin: 0; font-size: 0.9rem; color: #94A3B8;">
      Map detected columns from <strong style="color: #fff;">{{ $import->filename }}</strong> to standard 
      <strong style="color: #38BDF8;">{{ $import->entity_type_label }}</strong> database fields.
    </p>
  </div>

  <div>
    <a href="{{ route('superadmin.bulk-imports.index') }}" class="btn btn-sm btn-outline">
      <i class="fas fa-times"></i> Cancel Ingestion
    </a>
  </div>
</div>

<!-- File Stats Banner -->
<div class="superadmin-card" style="padding: 1rem 1.25rem; margin-bottom: 1.5rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;">
  <div style="display: flex; gap: 2rem; align-items: center;">
    <div>
      <span style="font-size: 0.75rem; color: #94A3B8; text-transform: uppercase; letter-spacing: 0.5px; display: block;">Target Entity</span>
      <strong style="color: #38BDF8; font-size: 1rem;">{{ $import->entity_type_label }}</strong>
    </div>
    <div>
      <span style="font-size: 0.75rem; color: #94A3B8; text-transform: uppercase; letter-spacing: 0.5px; display: block;">Total Data Rows</span>
      <strong style="color: #10B981; font-size: 1rem;">{{ number_format($totalRows) }} records</strong>
    </div>
    <div>
      <span style="font-size: 0.75rem; color: #94A3B8; text-transform: uppercase; letter-spacing: 0.5px; display: block;">Detected Headers</span>
      <strong style="color: #F59E0B; font-size: 1rem;">{{ count($headers) }} columns</strong>
    </div>
  </div>
</div>

<!-- Sample Data Preview -->
<div class="superadmin-card" style="margin-bottom: 2rem; padding: 0; overflow: hidden;">
  <div style="padding: 1rem 1.25rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.02);">
    <h3 style="font-size: 1rem; color: #fff; margin: 0; font-family: var(--font-heading);">
      <i class="fas fa-table" style="color: #38BDF8; margin-right: 0.4rem;"></i> File Sample Preview (First 5 Rows)
    </h3>
  </div>

  <div class="table-responsive" style="max-height: 280px; overflow-y: auto;">
    <table style="width: 100%; border-collapse: collapse; font-size: 0.82rem; text-align: left;">
      <thead>
        <tr style="border-bottom: 1px solid rgba(255, 255, 255, 0.08); background: #0B111E; position: sticky; top: 0; z-index: 1;">
          <th style="padding: 0.65rem 0.85rem; color: #94A3B8; width: 40px;">#</th>
          @foreach($headers as $header)
            <th style="padding: 0.65rem 0.85rem; color: #F59E0B; font-weight: 600; white-space: nowrap;">
              {{ $header }}
            </th>
          @endforeach
        </tr>
      </thead>
      <tbody>
        @forelse($previewRows as $rowIndex => $row)
          <tr style="border-bottom: 1px solid rgba(255, 255, 255, 0.04);">
            <td style="padding: 0.65rem 0.85rem; color: #64748B; font-family: monospace;">{{ $rowIndex + 1 }}</td>
            @foreach($headers as $colIndex => $h)
              <td style="padding: 0.65rem 0.85rem; color: #CBD5E1; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                {{ $row[$colIndex] ?? '' }}
              </td>
            @endforeach
          </tr>
        @empty
          <tr>
            <td colspan="{{ count($headers) + 1 }}" style="text-align: center; padding: 2rem; color: #64748B;">
              No data rows found in uploaded file.
            </td>
          </tr>
        @endforelse
      </tbody>
    </table>
  </div>
</div>

<!-- Column Mapping Configuration -->
<div class="superadmin-card">
  <div style="margin-bottom: 1.5rem;">
    <h2 style="font-size: 1.2rem; color: #fff; margin: 0 0 0.35rem; font-family: var(--font-heading);">
      <i class="fas fa-sliders" style="color: #F59E0B; margin-right: 0.4rem;"></i> Column Mapping Assignment
    </h2>
    <p style="margin: 0; font-size: 0.85rem; color: #94A3B8;">
      The system automatically matched columns where possible. Review each assignment and map any unmapped columns.
    </p>
  </div>

  <form action="{{ route('superadmin.bulk-imports.process', $import->id) }}" method="POST">
    @csrf

    <div class="table-responsive" style="margin-bottom: 2rem;">
      <table style="width: 100%; border-collapse: collapse; font-size: 0.9rem; text-align: left;">
        <thead>
          <tr style="border-bottom: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.02); color: #94A3B8;">
            <th style="padding: 0.85rem 1rem; width: 30%;">Source Column in File</th>
            <th style="padding: 0.85rem 1rem; width: 30%;">Sample Value</th>
            <th style="padding: 0.85rem 1rem; width: 40%;">Target System Field</th>
          </tr>
        </thead>
        <tbody>
          @foreach($headers as $colIdx => $headerName)
            @php
              $sampleVal = $previewRows[0][$colIdx] ?? '—';
              $selectedMapping = $suggestedMapping[$colIdx] ?? '';
            @endphp
            <tr style="border-bottom: 1px solid rgba(255, 255, 255, 0.04);">
              <td style="padding: 0.85rem 1rem;">
                <strong style="color: #fff; font-size: 0.92rem;">{{ $headerName }}</strong>
                <span style="display: block; font-size: 0.75rem; color: #64748B; font-family: monospace;">Index [{{ $colIdx }}]</span>
              </td>

              <td style="padding: 0.85rem 1rem; color: #94A3B8; font-size: 0.85rem; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                <code style="background: rgba(255, 255, 255, 0.05); padding: 0.2rem 0.4rem; border-radius: 4px; color: #CBD5E1;">
                  {{ $sampleVal }}
                </code>
              </td>

              <td style="padding: 0.85rem 1rem;">
                <select name="mapping[{{ $colIdx }}]" 
                        style="width: 100%; padding: 0.55rem 0.85rem; background: #0B111E; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: var(--radius-sm); color: #fff; font-size: 0.88rem;">
                  <option value="">-- Ignore (Do Not Import) --</option>
                  @foreach($availableFields as $fKey => $fMeta)
                    <option value="{{ $fKey }}" {{ $selectedMapping === $fKey ? 'selected' : '' }}>
                      {{ $fMeta['label'] }} {{ $fMeta['required'] ? '(Required *)' : '' }}
                    </option>
                  @endforeach
                </select>
              </td>
            </tr>
          @endforeach
        </tbody>
      </table>
    </div>

    <!-- Required Fields Reminder -->
    <div style="padding: 1rem 1.25rem; background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.25); border-radius: var(--radius-md); margin-bottom: 2rem;">
      <strong style="color: #F59E0B; font-size: 0.85rem; display: block; margin-bottom: 0.35rem;">
        <i class="fas fa-asterisk" style="font-size: 0.75rem;"></i> Schema Requirements Check
      </strong>
      <div style="display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.4rem;">
        @foreach($availableFields as $fKey => $fMeta)
          @if($fMeta['required'])
            <span class="badge" style="background: rgba(245, 158, 11, 0.2); color: #F59E0B; font-size: 0.78rem;">
              {{ $fMeta['label'] }} (Required)
            </span>
          @endif
        @endforeach
      </div>
    </div>

    <div style="display: flex; justify-content: flex-end; gap: 1rem;">
      <a href="{{ route('superadmin.bulk-imports.index') }}" class="btn btn-outline">
        Cancel
      </a>
      <button type="submit" class="btn" style="background: #10B981; color: #000; font-weight: 700; padding: 0.75rem 2rem;">
        <i class="fas fa-play"></i> Ingest {{ number_format($totalRows) }} Records
      </button>
    </div>
  </form>
</div>
@endsection