@extends('layouts.master')

@section('page-content')
@push('styles')
<style>
  :root{
    --brand-1:#1a237e;   /* light brand */
    --brand-2:#90caf9;   /* dark accent */
  }

  /* Tło (light/dark) */
  body.light-mode { background: radial-gradient(1200px 600px at 10% 0%, #e8f0ff 0%, #ffffff 60%) fixed; color:#212529; }
  body.dark-mode  { background: radial-gradient(1200px 600px at 10% 0%, #161827 0%, #232636 60%) fixed; color:#eef1f5; }

  /* Karta / glass */
  .glass-box{
    backdrop-filter: blur(12px);
    border-radius: 16px;
    transition: transform .2s ease, box-shadow .2s ease, background .3s ease, border-color .3s ease;
    box-shadow: 0 8px 30px rgba(0,0,0,.10);
    border:1px solid;
    max-width: 980px;
    margin: 2rem auto;
  }
  body.light-mode .glass-box{ background: rgba(255,255,255,.78); border-color: rgba(255,255,255,.45); }
  body.dark-mode  .glass-box{ background: rgba(30,30,40,.70);  border-color: rgba(255,255,255,.12); }
  .glass-box:hover{ transform: translateY(-2px); box-shadow: 0 12px 36px rgba(0,0,0,.14); }

  /* Nagłówek */
  .heading{ font-weight:700; margin:0; line-height:1.2; }
  body.light-mode .heading{ color:#1a237e; }
  body.dark-mode  .heading{ color:#90caf9; }

  /* Chipy/statusy */
  .chip{
    display:inline-flex; align-items:center; gap:.4rem;
    padding:.3rem .7rem; border-radius:999px; font-size:.8rem; font-weight:700;
    border:1px solid transparent; white-space:nowrap;
  }
  .chip-on    { background:#e8f5e9; border-color:#a5d6a7; color:#1b5e20; }
  .chip-off   { background:#ffebee; border-color:#ef9a9a; color:#b71c1c; }

  /* Pola/info */
  .kv-row{ display:flex; gap:.75rem; padding:.5rem 0; border-bottom:1px dashed rgba(0,0,0,.08); }
  .kv-row:last-child{ border-bottom:none; }
  .kv-key{ width: 220px; font-weight:600; opacity:.85; }
  .kv-val{ flex:1; word-break: break-word; }
  body.dark-mode .kv-row{ border-color: rgba(255,255,255,.12); }

  /* Formularze i przyciski */
  .form-control, .form-select{ border-radius:.6rem; }
  body.light-mode .form-control, body.light-mode .form-select{ background:#fff; border-color:#cfd6e4; color:#212529; }
  body.dark-mode  .form-control, body.dark-mode  .form-select{ background:#2b3041; border-color:#3a4054; color:#eef1f5; }

  .btn{ border-radius:.6rem; font-weight:600; }
  body.light-mode .btn-primary{ background:#1a237e; border-color:#1a237e; }
  body.light-mode .btn-primary:hover{ background:#283593; border-color:#283593; }
  body.dark-mode  .btn-primary{ background:#90caf9!important; border-color:#90caf9!important; color:#0b1220!important; }
  body.dark-mode  .btn-primary:hover{ filter:brightness(1.06); }
</style>
@endpush

<div class="glass-box p-4">

  {{-- Top bar --}}
  <div class="d-flex justify-content-between align-items-start flex-wrap gap-3 mb-3">
    <div>
      <h3 class="heading mb-1">📧 Konfiguracja SMTP</h3>
      <div class="small text-muted">Ustawienia wysyłki wiadomości e-mail w systemie.</div>
    </div>

    @if($smtp)
      <div class="d-flex align-items-center gap-2">
        <span class="chip {{ $smtp->aktywne ? 'chip-on' : 'chip-off' }}">
          {{ $smtp->aktywne ? 'Aktywne' : 'Nieaktywne' }}
        </span>
        <a href="{{ route('admin.smtp.edit') }}" class="btn btn-primary">
          <i class="fas fa-pen me-1"></i> Edytuj
        </a>
        <form method="POST" action="{{ route('admin.smtp.test') }}">
          @csrf
          <button type="submit" class="btn btn-outline-success">
            <i class="fas fa-vial me-1"></i> Testuj połączenie
          </button>
        </form>
      </div>
    @endif
  </div>

  {{-- Alerts --}}
  @if(session('success'))
    <div class="alert alert-success mb-3">{{ session('success') }}</div>
  @endif
  @if(session('test_success'))
    <div class="alert alert-success mb-3">{{ session('test_success') }}</div>
  @endif
  @if(session('test_error'))
    <div class="alert alert-danger mb-3">{{ session('test_error') }}</div>
  @endif

  {{-- Content --}}
  @if($smtp)
    <div class="mt-2">
      <div class="kv-row">
        <div class="kv-key">Host</div>
        <div class="kv-val">{{ $smtp->host }}</div>
      </div>
      <div class="kv-row">
        <div class="kv-key">Port</div>
        <div class="kv-val">{{ $smtp->port }}</div>
      </div>
      <div class="kv-row">
        <div class="kv-key">Szyfrowanie</div>
        <div class="kv-val">{{ strtoupper($smtp->encryption ?? 'brak') }}</div>
      </div>
      <div class="kv-row">
        <div class="kv-key">Użytkownik</div>
        <div class="kv-val">{{ $smtp->username }}</div>
      </div>
      <div class="kv-row">
        <div class="kv-key">E-mail nadawcy</div>
        <div class="kv-val">{{ $smtp->from_address }}</div>
      </div>
      <div class="kv-row">
        <div class="kv-key">Nazwa nadawcy</div>
        <div class="kv-val">{{ $smtp->from_name }}</div>
      </div>
      <div class="kv-row">
        <div class="kv-key">Status</div>
        <div class="kv-val">
          <span class="chip {{ $smtp->aktywne ? 'chip-on' : 'chip-off' }}">
            {{ $smtp->aktywne ? 'Aktywne' : 'Nieaktywne' }}
          </span>
        </div>
      </div>
    </div>
  @else
    <div class="py-2">
      <p class="mb-3">Brak zapisanej konfiguracji SMTP.</p>
      <a href="{{ route('admin.smtp.create') }}" class="btn btn-primary">
        <i class="fas fa-plus me-1"></i> Dodaj konfigurację
      </a>
    </div>
  @endif

</div>
@endsection