@extends('layouts.app')
@section('content')

<div class="d-flex justify-content-between align-items-center flex-wrap grid-margin mb-3">
  <div>
    <h4 class="mb-0 fw-semibold">PIN Codes</h4>
    <p class="text-muted small mb-0 mt-1">Manage authorization PINs for gated outbound dialing.</p>
  </div>
  <div class="mt-2 mt-md-0 d-flex gap-2">
    <a href="{{ route('apps.pins.export') }}" class="btn btn-outline-secondary btn-sm">
      <i class="mdi mdi-download me-1"></i> Export
    </a>
    <button type="button" class="btn btn-outline-primary btn-sm" data-bs-toggle="modal" data-bs-target="#importPinsModal">
      <i class="mdi mdi-upload me-1"></i> Import
    </button>
    <a href="{{ route('apps.pins.create') }}" class="btn btn-primary btn-sm">
      <i class="mdi mdi-plus me-1"></i> New PIN
    </a>
  </div>
</div>

@if (!empty($missingTable) && $missingTable)
  <div class="alert alert-warning d-flex align-items-center gap-2">
    <i class="mdi mdi-alert-outline fs-5"></i>
    The <code>pins</code> table has not been created yet. Run <code>php artisan migrate</code>.
  </div>
@endif

@if (session('success'))
  <div class="alert alert-success alert-dismissible fade show" role="alert">
    <i class="mdi mdi-check-circle-outline me-1"></i> {{ session('success') }}
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  </div>
@endif
@if (session('error'))
  <div class="alert alert-danger alert-dismissible fade show" role="alert">
    <i class="mdi mdi-alert-circle-outline me-1"></i> {{ session('error') }}
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  </div>
@endif
@if (session('import_errors') && count(session('import_errors')))
  <div class="alert alert-warning alert-dismissible fade show" role="alert">
    <i class="mdi mdi-alert-outline me-1"></i>
    <strong>Some rows were skipped:</strong>
    <ul class="mb-0 mt-1 small">
      @foreach(session('import_errors') as $e)
        <li>{{ $e }}</li>
      @endforeach
    </ul>
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  </div>
@endif

{{-- Summary stats --}}
<div class="row g-3 mb-4">
  <div class="col-6 col-md-3">
    <div class="card border-0 shadow-sm">
      <div class="card-body py-3">
        <div class="text-muted small mb-1">Total PINs</div>
        <div class="fw-bold fs-4">{{ $rows->count() }}</div>
      </div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="card border-0 shadow-sm">
      <div class="card-body py-3">
        <div class="text-muted small mb-1">Active PINs</div>
        <div class="fw-bold fs-4 text-success">{{ $rows->where('enabled', 1)->count() }}</div>
      </div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="card border-0 shadow-sm">
      <div class="card-body py-3">
        <div class="text-muted small mb-1">Departments</div>
        <div class="fw-bold fs-4">{{ $rows->whereNotNull('department_name')->pluck('department_name')->unique()->count() }}</div>
      </div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="card border-0 shadow-sm">
      <div class="card-body py-3">
        <div class="text-muted small mb-1">Disabled PINs</div>
        <div class="fw-bold fs-4 text-muted">{{ $rows->where('enabled', 0)->count() }}</div>
      </div>
    </div>
  </div>
</div>

<div class="card shadow-sm">
  <div class="card-header bg-white d-flex justify-content-between align-items-center py-3">
    <span class="fw-semibold">Authorization PINs</span>
    <span class="text-muted small">PIN-protected extensions are asked for a PIN on outbound calls</span>
  </div>
  <div class="card-body p-0">
    <div class="table-responsive">
      <table class="table table-hover align-middle mb-0">
        <thead class="table-light">
          <tr>
            <th>PIN</th>
            <th>Name</th>
            <th>Label / Description</th>
            <th>Department</th>
            <th>Account Code</th>
            <th class="text-center">Enabled</th>
            <th class="text-end">Actions</th>
          </tr>
        </thead>
        <tbody>
          @forelse($rows as $r)
            <tr id="pin-row-{{ $r->id }}">
              <td>
                <span class="badge bg-dark font-monospace fs-6 px-2 py-1">{{ $r->pin }}</span>
              </td>
              <td>
                <span class="fw-medium text-body">{{ $r->name ?: '—' }}</span>
              </td>
              <td>
                <div class="fw-medium small text-body">{{ $r->label }}</div>
                @if($r->description)
                  <div class="text-muted x-small">{{ $r->description }}</div>
                @endif
              </td>
              <td>
                @if($r->department_name)
                  <span class="badge bg-info-subtle text-info border border-info-subtle">
                    <i class="mdi mdi-office-building me-1"></i>{{ $r->department_name }}
                  </span>
                @else
                  <span class="text-muted small">—</span>
                @endif
              </td>
              <td>
                @if($r->accountcode)
                  <code class="small">{{ $r->accountcode }}</code>
                @else
                  <span class="text-muted small">—</span>
                @endif
              </td>
              <td class="text-center">
                <div class="form-check form-switch d-inline-flex justify-content-center mb-0">
                  <input class="form-check-input pin-toggle" type="checkbox" role="switch"
                    data-id="{{ $r->id }}"
                    {{ $r->enabled ? 'checked' : '' }}
                    style="cursor:pointer;">
                </div>
              </td>
              <td class="text-end">
                <a href="{{ route('apps.pins.edit', $r->id) }}" class="btn btn-primary btn-sm">
                  <i data-lucide="pencil" style="width:14px;height:14px;"></i>
                </a>
                <form action="{{ route('apps.pins.destroy', $r->id) }}" method="POST" class="d-inline">
                  @csrf @method('DELETE')
                  <button type="submit"
                    onclick="return confirm('Delete PIN {{ $r->pin }} ({{ $r->name }})? This cannot be undone.')"
                    class="btn btn-danger btn-sm">
                    <i data-lucide="trash-2" style="width:14px;height:14px;"></i>
                  </button>
                </form>
              </td>
            </tr>
          @empty
            <tr>
              <td colspan="7" class="text-center text-muted py-5">
                <i class="mdi mdi-dialpad mdi-48px d-block mb-2 opacity-25"></i>
                No PINs configured yet.
                <a href="{{ route('apps.pins.create') }}" class="ms-1">Create the first one</a>.
              </td>
            </tr>
          @endforelse
        </tbody>
      </table>
    </div>
  </div>
</div>

<div class="modal fade" id="importPinsModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <form method="POST" action="{{ route('apps.pins.import') }}" enctype="multipart/form-data">
        @csrf
        <div class="modal-header">
          <h5 class="modal-title"><i class="mdi mdi-upload me-1 text-primary"></i> Import PINs from CSV</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <p class="small text-muted">
            Upload a CSV with the columns
            <code>First Name</code>, <code>Last Name</code>, <code>Department</code>,
            <code>Staff Pin</code>, <code>Status</code>.
          </p>
          <ul class="small text-muted">
            <li>Departments are matched by name and <strong>created automatically</strong> if they don't exist.</li>
            <li><strong>Status</strong>: "Active" enables the PIN, anything else disables it.</li>
            <li>If a <strong>PIN already exists it is updated, never duplicated</strong>.</li>
          </ul>
          <div class="mb-2">
            <a href="{{ route('apps.pins.import-template') }}" class="small">
              <i class="mdi mdi-download me-1"></i> Download CSV template
            </a>
          </div>
          <input type="file" name="file" accept=".csv,text/csv" required
            class="form-control @error('file') is-invalid @enderror">
          @error('file')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary"><i class="mdi mdi-upload me-1"></i> Import</button>
        </div>
      </form>
    </div>
  </div>
</div>

@push('scripts')
<script>
document.querySelectorAll('.pin-toggle').forEach(function(sw) {
  sw.addEventListener('change', function() {
    const id = this.dataset.id;
    const checked = this.checked;
    fetch(`{{ route('apps.pins.index') }}/${id}/toggle`, {
      method: 'POST',
      headers: {
        'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content,
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      }
    })
    .then(r => r.json())
    .then(data => {
      // Optionally show a brief toast — silently succeeds
    })
    .catch(() => {
      this.checked = !checked; // revert on error
    });
  });
});
</script>
@endpush

@endsection