@extends('unit-admin.layout')
@section('title', 'Bulk Import Members')
@section('page_title', 'Bulk Import Members')

@section('content')

{{-- IMPORT RESULTS --}}
@if(session('import_results'))
  @php $results = session('import_results'); @endphp

  {{-- SUMMARY --}}
  <div style="display:grid;grid-template-columns:repeat(3,1fr);
              gap:12px;margin-bottom:20px;">
    <div class="card" style="margin:0">
      <div style="padding:16px;text-align:center;">
        <div style="font-family:'Instrument Serif',serif;
                    font-size:32px;color:var(--text);">
          {{ $results['total'] }}
        </div>
        <div style="font-size:11px;color:var(--text-dim);">
          Total Rows
        </div>
      </div>
    </div>
    <div class="card" style="margin:0">
      <div style="padding:16px;text-align:center;">
        <div style="font-family:'Instrument Serif',serif;
                    font-size:32px;color:var(--green);">
          {{ $results['created'] }}
        </div>
        <div style="font-size:11px;color:var(--text-dim);">
          ✅ Created
        </div>
      </div>
    </div>
    <div class="card" style="margin:0">
      <div style="padding:16px;text-align:center;">
        <div style="font-family:'Instrument Serif',serif;
                    font-size:32px;color:var(--red);">
          {{ $results['failed'] }}
        </div>
        <div style="font-size:11px;color:var(--text-dim);">
          ❌ Failed
        </div>
      </div>
    </div>
  </div>

  {{-- SUCCESS --}}
  @if(count($results['success']) > 0)
  <div class="card" style="margin-bottom:18px;">
    <div class="ch">
      <div class="ct">
        <i class="fas fa-check-circle"
           style="color:var(--green)"></i>
        Successfully Created
        ({{ count($results['success']) }})
      </div>
    </div>
    <div class="tw">
      <table>
        <thead>
          <tr>
            <th>Row</th>
            <th>Name</th>
            <th>Email</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          @foreach($results['success'] as $s)
          <tr>
            <td style="color:var(--text-dim)">#{{ $s['row'] }}</td>
            <td>{{ $s['name'] }}</td>
            <td style="color:var(--text-dim)">{{ $s['email'] }}</td>
            <td><span class="badge bap">Created</span></td>
          </tr>
          @endforeach
        </tbody>
      </table>
    </div>
  </div>
  @endif

  {{-- ERRORS --}}
  @if(count($results['errors']) > 0)
  <div class="card" style="margin-bottom:18px;">
    <div class="ch">
      <div class="ct">
        <i class="fas fa-times-circle"
           style="color:var(--red)"></i>
        Failed Rows
        ({{ count($results['errors']) }})
      </div>
    </div>
    <div class="tw">
      <table>
        <thead>
          <tr>
            <th>Row</th>
            <th>Name</th>
            <th>Email</th>
            <th>Errors</th>
          </tr>
        </thead>
        <tbody>
          @foreach($results['errors'] as $e)
          <tr>
            <td style="color:var(--text-dim)">#{{ $e['row'] }}</td>
            <td>{{ $e['name'] }}</td>
            <td style="color:var(--text-dim)">{{ $e['email'] }}</td>
            <td>
              @foreach($e['errors'] as $err)
              <div style="font-size:11px;color:var(--red);">
                • {{ $err }}
              </div>
              @endforeach
            </td>
          </tr>
          @endforeach
        </tbody>
      </table>
    </div>
  </div>
  @endif
@endif

{{-- UNIT INFO BANNER --}}
<div style="background:rgba(79,142,247,0.07);
            border:1px solid rgba(79,142,247,0.15);
            border-radius:10px;padding:14px 18px;
            margin-bottom:18px;
            display:flex;align-items:center;gap:12px;">
  <div style="width:36px;height:36px;border-radius:9px;
              background:rgba(79,142,247,0.15);
              display:flex;align-items:center;
              justify-content:center;font-size:16px;">
    🏢
  </div>
  <div>
    <div style="font-size:13px;font-weight:600;">
      {{ $myUnit->name }}
    </div>
    <div style="font-size:11px;color:var(--text-dim);">
      All imported members will be
      automatically assigned to this unit ·
      {{ $myUnit->district->name }} ·
      {{ $myUnit->district->state->name }}
    </div>
  </div>
</div>

{{-- HOW TO USE --}}
<div class="card" style="margin-bottom:18px;">
  <div class="ch">
    <div class="ct">
      <i class="fas fa-info-circle"></i>How to Import
    </div>
  </div>
  <div style="padding:20px;">
    <div style="display:grid;
                grid-template-columns:repeat(3,1fr);
                gap:16px;">
      <div style="text-align:center;padding:12px;">
        <div style="width:40px;height:40px;border-radius:50%;
                    background:rgba(79,142,247,0.1);
                    display:flex;align-items:center;
                    justify-content:center;
                    margin:0 auto 10px;font-size:18px;">
          1️⃣
        </div>
        <div style="font-weight:600;font-size:12px;
                    margin-bottom:4px;">
          Download Template
        </div>
        <div style="font-size:11px;color:var(--text-dim);">
          Get the CSV template with correct columns
        </div>
      </div>
      <div style="text-align:center;padding:12px;">
        <div style="width:40px;height:40px;border-radius:50%;
                    background:rgba(79,142,247,0.1);
                    display:flex;align-items:center;
                    justify-content:center;
                    margin:0 auto 10px;font-size:18px;">
          2️⃣
        </div>
        <div style="font-weight:600;font-size:12px;
                    margin-bottom:4px;">
          Fill Member Data
        </div>
        <div style="font-size:11px;color:var(--text-dim);">
          Fill in Excel or Google Sheets and save as CSV
        </div>
      </div>
      <div style="text-align:center;padding:12px;">
        <div style="width:40px;height:40px;border-radius:50%;
                    background:rgba(79,142,247,0.1);
                    display:flex;align-items:center;
                    justify-content:center;
                    margin:0 auto 10px;font-size:18px;">
          3️⃣
        </div>
        <div style="font-weight:600;font-size:12px;
                    margin-bottom:4px;">
          Upload & Import
        </div>
        <div style="font-size:11px;color:var(--text-dim);">
          Upload CSV and members are created instantly
        </div>
      </div>
    </div>
  </div>
</div>

{{-- PLANS REFERENCE --}}
<div class="card" style="margin-bottom:18px;">
  <div class="ch">
    <div class="ct">
      <i class="fas fa-tags"></i>
      Available Plans (use plan_id in CSV)
    </div>
  </div>
  <div class="tw">
    <table>
      <thead>
        <tr>
          <th>Plan ID</th>
          <th>Plan Name</th>
          <th>Type</th>
          <th>Amount</th>
          <th>Duration</th>
        </tr>
      </thead>
      <tbody>
        @foreach($plans as $plan)
        <tr>
          <td>
            <span style="font-family:monospace;
                         font-size:13px;font-weight:700;
                         color:var(--accent);">
              {{ $plan->id }}
            </span>
          </td>
          <td><b>{{ $plan->name }}</b></td>
          <td>
            <span class="badge
              {{ $plan->type == 'LIFE' ? 'bli' : 'bac' }}">
              {{ $plan->type }}
            </span>
          </td>
          <td style="color:var(--green);font-weight:600;">
            ₹{{ number_format($plan->amount, 0) }}
          </td>
          <td style="color:var(--text-dim)">
            {{ $plan->duration_months == 0
              ? 'Lifetime'
              : $plan->duration_months . ' months' }}
          </td>
        </tr>
        @endforeach
      </tbody>
    </table>
  </div>
</div>

{{-- UPLOAD FORM --}}
<div class="card">
  <div class="ch">
    <div class="ct">
      <i class="fas fa-upload"></i>Upload CSV File
    </div>
    <a href="{{ route('unit-admin.bulk-import.template') }}"
       class="btn bo bsm">
      <i class="fas fa-download"></i>Download Template
    </a>
  </div>

  <form method="POST"
        action="{{ route('unit-admin.bulk-import.process') }}"
        enctype="multipart/form-data">
    @csrf
    <div style="padding:24px;">

      {{-- DROP ZONE --}}
      <div id="dropZone"
           style="border:2px dashed var(--border);
                  border-radius:12px;padding:40px;
                  text-align:center;cursor:pointer;
                  transition:all 0.2s;"
           onclick="document.getElementById('csvFile').click()"
           ondragover="event.preventDefault();
                      this.style.borderColor='var(--accent)';
                      this.style.background='rgba(79,142,247,0.05)'"
           ondragleave="this.style.borderColor='var(--border)';
                       this.style.background='transparent'"
           ondrop="handleDrop(event)">
        <div style="font-size:32px;margin-bottom:12px;">📄</div>
        <div style="font-size:14px;font-weight:600;
                    margin-bottom:6px;">
          Click or drag & drop CSV file here
        </div>
        <div id="fileName"
             style="font-size:11px;color:var(--text-dim);">
          .csv files only · Max 2MB
        </div>
      </div>

      <input type="file" id="csvFile" name="csv_file"
             accept=".csv,.txt" style="display:none"
             onchange="showFileName(this)">

      {{-- COLUMN GUIDE --}}
      <div style="margin-top:20px;padding:14px 16px;
                  background:rgba(255,255,255,0.02);
                  border:1px solid var(--border);
                  border-radius:8px;">
        <div style="font-weight:600;font-size:11px;
                    color:var(--text);margin-bottom:10px;">
          📋 CSV Column Order:
        </div>
        <div style="display:flex;flex-wrap:wrap;gap:6px;">
          @foreach([
            'name',
            'email',
            'phone',
            'password',
            'dob (YYYY-MM-DD)',
            'gender (male/female/other)',
            'organization',
            'designation',
            'experience',
            'address',
            'pincode',
            'plan_id',
            'website (optional)'
          ] as $i => $col)
          <span style="background:rgba(79,142,247,0.1);
                       color:var(--accent-2);
                       padding:2px 8px;border-radius:4px;
                       font-size:10px;font-weight:500;">
            {{ $i+1 }}. {{ $col }}
          </span>
          @endforeach
        </div>

        {{-- NOTE: no state/district/unit needed --}}
        <div style="margin-top:12px;padding:8px 12px;
                    background:rgba(52,211,153,0.06);
                    border:1px solid rgba(52,211,153,0.15);
                    border-radius:7px;font-size:11px;
                    color:var(--text-dim);">
          <i class="fas fa-check-circle"
             style="color:var(--green)"></i>
          No need to fill state/district/unit —
          members will be auto-assigned to
          <b style="color:var(--accent)">
            {{ $myUnit->name }}
          </b>
        </div>
      </div>

      <div style="margin-top:16px;
                  display:flex;
                  justify-content:space-between;
                  align-items:center;
                  flex-wrap:wrap;gap:8px;">
        <div style="font-size:11px;color:var(--text-dim);">
          <i class="fas fa-info-circle"
             style="color:var(--accent)"></i>
          Imported members will have
          <b style="color:var(--orange)">PENDING</b>
          status. You can approve them from Members page.
        </div>
        <button type="submit" class="btn bp" id="importBtn">
          <i class="fas fa-upload"></i>Import Members
        </button>
      </div>
    </div>
  </form>
</div>

@endsection

@section('scripts')
<script>
function showFileName(input) {
  const file = input.files[0];
  if (file) {
    document.getElementById('fileName').textContent =
      '✅ ' + file.name;
    document.getElementById('fileName').style.color =
      'var(--green)';
    document.getElementById('dropZone').style.borderColor =
      'var(--accent)';
  }
}

function handleDrop(e) {
  e.preventDefault();
  document.getElementById('dropZone').style.borderColor =
    'var(--border)';
  document.getElementById('dropZone').style.background =
    'transparent';

  const file = e.dataTransfer.files[0];
  if (file && (file.name.endsWith('.csv') ||
               file.name.endsWith('.txt'))) {
    const input = document.getElementById('csvFile');
    const dt    = new DataTransfer();
    dt.items.add(file);
    input.files = dt.files;
    showFileName(input);
  } else {
    alert('Please upload a .csv file!');
  }
}

document.querySelector('form').addEventListener(
  'submit', function() {
    document.getElementById('importBtn').innerHTML =
      '<i class="fas fa-spinner fa-spin"></i> Importing...';
    document.getElementById('importBtn').disabled = true;
  }
);
</script>
@endsection