@extends('layouts.superadmin')

@section('title', 'Bulk Excel & CSV Data Export')

@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-file-export" style="color: #F59E0B; margin-right: 0.5rem;"></i> Bulk Excel & CSV Export Desk
    </h1>
    <p style="margin: 0; font-size: 0.9rem; color: #94A3B8;">
      Configure custom dataset extracts, pick target columns, filter by date or jurisdiction, and stream RFC-4180 CSVs with Microsoft Excel UTF-8 BOM compatibility.
    </p>
  </div>
</div>

@if(session('success'))
  <div class="alert alert-success" style="padding: 1rem 1.25rem; border-radius: var(--radius-md); background: rgba(16, 185, 129, 0.15); color: #10B981; border: 1px solid rgba(16, 185, 129, 0.3); margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.75rem;">
    <i class="fas fa-check-circle" style="font-size: 1.25rem;"></i>
    <div>{{ session('success') }}</div>
  </div>
@endif

@if($errors->any())
  <div class="alert alert-danger" style="padding: 1rem 1.25rem; border-radius: var(--radius-md); background: rgba(239, 68, 68, 0.15); color: #EF4444; border: 1px solid rgba(239, 68, 68, 0.3); margin-bottom: 1.5rem;">
    <strong style="display: block; margin-bottom: 0.5rem;"><i class="fas fa-exclamation-triangle"></i> Export could not be generated:</strong>
    <ul style="margin: 0; padding-left: 1.25rem;">
      @foreach($errors->all() as $err)
        <li>{{ $err }}</li>
      @endforeach
    </ul>
  </div>
@endif

<!-- Export Configuration Card -->
<div class="superadmin-card" style="margin-bottom: 2rem;">
  <form id="exportForm" action="{{ route('superadmin.bulk-exports.export') }}" method="POST">
    @csrf

    <!-- Step 1: Dataset Selector -->
    <div style="margin-bottom: 1.75rem;">
      <label style="display: block; font-size: 0.88rem; font-weight: 700; color: #CBD5E1; margin-bottom: 0.75rem;">
        1. Select Target Dataset to Export <span style="color: #EF4444;">*</span>
      </label>

      <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem;">
        @foreach($datasetDefinitions as $key => $ds)
          <label class="dataset-card" style="display: flex; align-items: flex-start; gap: 0.85rem; padding: 1.1rem; border-radius: var(--radius-md); border: 1px solid rgba(255, 255, 255, 0.1); background: #0B111E; cursor: pointer; transition: all 0.2s ease;">
            <input type="radio" name="dataset" value="{{ $key }}" {{ $loop->first ? 'checked' : '' }} style="margin-top: 4px; accent-color: #F59E0B;" onchange="switchDataset('{{ $key }}')">
            <div>
              <strong style="color: #fff; display: block; font-size: 0.95rem;">
                <i class="{{ $ds['icon'] }}" style="color: #F59E0B; margin-right: 0.4rem;"></i> {{ $ds['title'] }}
              </strong>
              <span style="font-size: 0.8rem; color: #94A3B8; display: block; margin-top: 3px; line-height: 1.35;">
                {{ $ds['description'] }}
              </span>
            </div>
          </label>
        @endforeach
      </div>
    </div>

    <!-- Step 2: Selective Columns Matrix -->
    <div style="margin-bottom: 1.75rem;">
      <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem;">
        <label style="font-size: 0.88rem; font-weight: 700; color: #CBD5E1; margin: 0;">
          2. Choose Output Columns <span style="color: #EF4444;">*</span>
        </label>
        <div style="display: flex; gap: 0.5rem;">
          <button type="button" class="btn btn-sm btn-outline" style="font-size: 0.75rem; padding: 0.25rem 0.6rem;" onclick="toggleColumns(true)">
            Select All
          </button>
          <button type="button" class="btn btn-sm btn-outline" style="font-size: 0.75rem; padding: 0.25rem 0.6rem;" onclick="toggleColumns(false)">
            Deselect All
          </button>
        </div>
      </div>

      @foreach($datasetDefinitions as $key => $ds)
        <div id="columns-group-{{ $key }}" class="columns-container" style="display: {{ $loop->first ? 'grid' : 'none' }}; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.75rem; background: #0B111E; padding: 1.25rem; border-radius: var(--radius-md); border: 1px solid rgba(255, 255, 255, 0.08);">
          @foreach($ds['columns'] as $colKey => $colLabel)
            <label style="display: flex; align-items: center; gap: 0.6rem; color: #CBD5E1; font-size: 0.85rem; cursor: pointer;">
              <input type="checkbox" name="columns[]" value="{{ $colKey }}" {{ $loop->first ? 'checked' : 'checked' }} class="dataset-col-{{ $key }}" style="accent-color: #38BDF8;">
              <span>{{ $colLabel }}</span>
            </label>
          @endforeach
        </div>
      @endforeach
    </div>

    <!-- Step 3: Date & Filter Criteria -->
    <div style="margin-bottom: 2rem;">
      <label style="display: block; font-size: 0.88rem; font-weight: 700; color: #CBD5E1; margin-bottom: 0.75rem;">
        3. Optional Filtering Criteria
      </label>

      <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;">
        <div>
          <label style="display: block; font-size: 0.8rem; color: #94A3B8; margin-bottom: 0.35rem;">Created / Filed From</label>
          <input type="date" name="date_from" style="width: 100%; padding: 0.55rem 0.85rem; background: #0B111E; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-sm); color: #fff; font-size: 0.88rem;">
        </div>

        <div>
          <label style="display: block; font-size: 0.8rem; color: #94A3B8; margin-bottom: 0.35rem;">Created / Filed To</label>
          <input type="date" name="date_to" style="width: 100%; padding: 0.55rem 0.85rem; background: #0B111E; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-sm); color: #fff; font-size: 0.88rem;">
        </div>

        <div>
          <label style="display: block; font-size: 0.8rem; color: #94A3B8; margin-bottom: 0.35rem;">Filter by District</label>
          <select name="district" style="width: 100%; padding: 0.55rem 0.85rem; background: #0B111E; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-sm); color: #fff; font-size: 0.88rem;">
            <option value="">All Maharashtra Districts</option>
            @foreach($districts as $district)
              <option value="{{ $district->name }}">{{ $district->name }}</option>
            @endforeach
          </select>
        </div>

        <div>
          <label style="display: block; font-size: 0.8rem; color: #94A3B8; margin-bottom: 0.35rem;">Filter by Status</label>
          <input type="text" name="status" placeholder="e.g. active, verified, open" style="width: 100%; padding: 0.55rem 0.85rem; background: #0B111E; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-sm); color: #fff; font-size: 0.88rem;">
        </div>
      </div>
    </div>

    <div style="display: flex; justify-content: flex-end; align-items: center; gap: 1rem;">
      <span style="font-size: 0.82rem; color: #94A3B8;">
        <i class="fas fa-file-excel" style="color: #10B981;"></i> Output Format: RFC 4180 CSV with Excel UTF-8 BOM
      </span>
      <button type="submit" class="btn" style="background: #F59E0B; color: #000; font-weight: 700; padding: 0.75rem 2rem; font-size: 0.95rem;">
        <i class="fas fa-file-arrow-down"></i> Stream & Download CSV
      </button>
    </div>
  </form>
</div>

<!-- Historical Exports Audit Table -->
<div class="superadmin-card" style="padding: 0; overflow: hidden;">
  <div style="padding: 1.25rem 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08);">
    <h3 style="font-size: 1.15rem; color: #fff; margin: 0 0 0.25rem; font-family: var(--font-heading);">
      <i class="fas fa-clock-rotate-left" style="color: #F59E0B; margin-right: 0.4rem;"></i> Historical Export Audit Log
    </h3>
    <p style="margin: 0; font-size: 0.82rem; color: #94A3B8;">
      Audit records of exported datasets, row counts, and requesting administrator accounts.
    </p>
  </div>

  <div class="table-responsive">
    <table style="width: 100%; border-collapse: collapse; font-size: 0.88rem; 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: 1rem 1.25rem;">ID</th>
          <th style="padding: 1rem 1.25rem;">Dataset</th>
          <th style="padding: 1rem 1.25rem;">Columns Picked</th>
          <th style="padding: 1rem 1.25rem;">Rows Streamed</th>
          <th style="padding: 1rem 1.25rem;">Filters Applied</th>
          <th style="padding: 1rem 1.25rem;">Exported By</th>
          <th style="padding: 1rem 1.25rem; text-align: right;">Timestamp</th>
        </tr>
      </thead>
      <tbody>
        @forelse($exports as $export)
          <tr style="border-bottom: 1px solid rgba(255, 255, 255, 0.04);">
            <td style="padding: 1rem 1.25rem; font-family: monospace; color: #94A3B8;">
              #{{ $export->id }}
            </td>

            <td style="padding: 1rem 1.25rem;">
              <span class="badge" style="background: rgba(56, 189, 248, 0.15); color: #38BDF8; font-size: 0.75rem; font-weight: 600;">
                {{ $export->dataset_label }}
              </span>
            </td>

            <td style="padding: 1rem 1.25rem; color: #CBD5E1; font-size: 0.82rem;">
              {{ count($export->selected_columns ?? []) }} columns
            </td>

            <td style="padding: 1rem 1.25rem; color: #10B981; font-weight: 700;">
              {{ number_format($export->row_count) }} rows
            </td>

            <td style="padding: 1rem 1.25rem; color: #94A3B8; font-size: 0.8rem; font-family: monospace;">
              @php
                $activeFilters = array_filter($export->filters ?? []);
              @endphp
              @if(!empty($activeFilters))
                {{ json_encode($activeFilters) }}
              @else
                <span style="color: #64748B;">None (Statewide)</span>
              @endif
            </td>

            <td style="padding: 1rem 1.25rem; color: #CBD5E1; font-size: 0.85rem;">
              {{ $export->user->name ?? 'System' }}
            </td>

            <td style="padding: 1rem 1.25rem; text-align: right; color: #94A3B8; font-size: 0.82rem; white-space: nowrap;">
              {{ $export->created_at->format('d M Y, h:i A') }}
            </td>
          </tr>
        @empty
          <tr>
            <td colspan="7" style="text-align: center; padding: 3rem; color: #64748B;">
              No historical exports recorded yet.
            </td>
          </tr>
        @endforelse
      </tbody>
    </table>
  </div>

  @if($exports->hasPages())
    <div style="padding: 1rem 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.08);">
      {{ $exports->links() }}
    </div>
  @endif
</div>

<script>
  let activeDataset = 'candidates';

  function switchDataset(key) {
    activeDataset = key;
    // Hide all containers
    document.querySelectorAll('.columns-container').forEach(el => {
      el.style.display = 'none';
      // Uncheck checkboxes for other datasets to avoid form submission pollution
      el.querySelectorAll('input[type="checkbox"]').forEach(chk => chk.disabled = true);
    });

    // Show active container
    const activeCont = document.getElementById('columns-group-' + key);
    if (activeCont) {
      activeCont.style.display = 'grid';
      activeCont.querySelectorAll('input[type="checkbox"]').forEach(chk => {
        chk.disabled = false;
        chk.checked = true;
      });
    }
  }

  function toggleColumns(select) {
    const activeCont = document.getElementById('columns-group-' + activeDataset);
    if (activeCont) {
      activeCont.querySelectorAll('input[type="checkbox"]').forEach(chk => chk.checked = select);
    }
  }

  // Initial setup: disable other containers so only candidates are submitted
  document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.columns-container').forEach(el => {
      if (el.id !== 'columns-group-candidates') {
        el.querySelectorAll('input[type="checkbox"]').forEach(chk => chk.disabled = true);
      }
    });
  });
</script>
@endsection