@extends('layouts.app')
@section('content')
@php $isEdit = ($mode ?? '') === 'edit'; @endphp

<div class="d-flex justify-content-between align-items-center flex-wrap grid-margin mb-3">
  <div>
    <h4 class="mb-0 fw-semibold">{{ $isEdit ? 'Edit PIN' : 'New PIN' }}</h4>
    <p class="text-muted small mb-0 mt-1">{{ $isEdit ? 'Update PIN details and department assignment.' : 'Create a new authorization PIN for gated outbound dialing.' }}</p>
  </div>
  <div class="mt-2 mt-md-0">
    <a href="{{ route('apps.pins.index') }}" class="btn btn-outline-secondary btn-sm">
      <i class="mdi mdi-arrow-left me-1"></i> Back to PINs
    </a>
  </div>
</div>

@if ($errors->any())
  <div class="alert alert-danger alert-dismissible fade show d-flex align-items-center gap-2">
    <i class="mdi mdi-alert-circle-outline fs-5"></i>
    <div>Please fix the highlighted fields below.</div>
    <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert"></button>
  </div>
@endif

<form method="POST" action="{{ $isEdit ? route('apps.pins.update', $row->id) : route('apps.pins.store') }}">
  @csrf
  @if($isEdit) @method('PUT') @endif

  {{-- Identity --}}
  <div class="card shadow-sm mb-3">
    <div class="card-header bg-white py-3">
      <h6 class="mb-0 fw-semibold"><i class="mdi mdi-account-outline me-2 text-primary"></i>Identity</h6>
    </div>
    <div class="card-body">
      <div class="row g-3">
        <div class="col-12 col-md-6">
          <label class="form-label fw-medium">Name <span class="text-danger">*</span></label>
          <input name="name" value="{{ old('name', $row->name ?? '') }}"
            class="form-control @error('name') is-invalid @enderror"
            placeholder="e.g. John Smith" required>
          <div class="form-text">The person this PIN is assigned to.</div>
          @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>

        <div class="col-12 col-md-6">
          <label class="form-label fw-medium">Label <span class="text-danger">*</span></label>
          <input name="label" value="{{ old('label', $row->label ?? '') }}"
            class="form-control @error('label') is-invalid @enderror"
            placeholder="e.g. Sales calls, After-hours" required>
          <div class="form-text">Short purpose or usage description.</div>
          @error('label')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>

        <div class="col-12">
          <label class="form-label fw-medium">Description</label>
          <input name="description" value="{{ old('description', $row->description ?? '') }}"
            class="form-control @error('description') is-invalid @enderror"
            placeholder="Optional notes about this PIN">
          @error('description')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>
      </div>
    </div>
  </div>

  {{-- PIN & Department --}}
  <div class="card shadow-sm mb-3">
    <div class="card-header bg-white py-3">
      <h6 class="mb-0 fw-semibold"><i class="mdi mdi-dialpad me-2 text-primary"></i>PIN & Department</h6>
    </div>
    <div class="card-body">
      <div class="row g-3">
        <div class="col-12 col-md-4">
          <label class="form-label fw-medium">PIN Code <span class="text-danger">*</span></label>
          <input name="pin" value="{{ old('pin', $row->pin ?? '') }}"
            class="form-control font-monospace @error('pin') is-invalid @enderror"
            placeholder="e.g. 1234" required autocomplete="off">
          <div class="form-text">Digits only (0–9). Must be unique across all PINs.</div>
          @error('pin')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>

        <div class="col-12 col-md-4">
          <label class="form-label fw-medium">Department</label>
          <select name="department_id" class="form-select @error('department_id') is-invalid @enderror">
            <option value="">— No department —</option>
            @foreach($departments as $dept)
              <option value="{{ $dept->id }}"
                {{ old('department_id', $row->department_id ?? '') == $dept->id ? 'selected' : '' }}>
                {{ $dept->name }}
              </option>
            @endforeach
          </select>
          <div class="form-text">Linked to CDR reporting by department.</div>
          @error('department_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>

        <div class="col-12 col-md-4">
          <label class="form-label fw-medium">Account Code</label>
          <input name="accountcode" value="{{ old('accountcode', $row->accountcode ?? '') }}"
            class="form-control @error('accountcode') is-invalid @enderror"
            placeholder="For billing or CDR reports">
          <div class="form-text">Stamped into <code>CDR(accountcode)</code> on successful auth.</div>
          @error('accountcode')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>
      </div>
    </div>
  </div>

  {{-- Status --}}
  <div class="card shadow-sm mb-4">
    <div class="card-header bg-white py-3">
      <h6 class="mb-0 fw-semibold"><i class="mdi mdi-toggle-switch-outline me-2 text-primary"></i>Status</h6>
    </div>
    <div class="card-body">
      <div class="form-check form-switch">
        <input type="hidden" name="enabled" value="0">
        <input type="checkbox" name="enabled" value="1" id="enabled"
          {{ old('enabled', $row->enabled ?? true) ? 'checked' : '' }}
          class="form-check-input" role="switch">
        <label for="enabled" class="form-check-label fw-medium">PIN Enabled</label>
        <div class="form-text">Disabled PINs will be rejected even if the code matches.</div>
      </div>
    </div>
  </div>

  <div class="d-flex gap-2">
    <button type="submit" class="btn btn-primary">
      <i class="mdi mdi-content-save-outline me-1"></i>
      {{ $isEdit ? 'Save Changes' : 'Create PIN' }}
    </button>
    <a href="{{ route('apps.pins.index') }}" class="btn btn-outline-secondary">Cancel</a>
  </div>
</form>

@endsection