@extends('layouts.master')

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

  /* Tło */
  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-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łówki */
  .heading{ font-weight:700; margin:0; line-height:1.2; }
  body.light-mode .heading{ color:#1a237e; }
  body.dark-mode  .heading{ color:#90caf9; }
  .sub{ font-size:.95rem; opacity:.85; }

  /* 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">
  {{-- Header --}}
  <div class="d-flex justify-content-between align-items-start flex-wrap gap-3 mb-3">
    <div>
      <h3 class="heading mb-1">✏️ Edycja konfiguracji SMTP</h3>
      <div class="sub">Zaktualizuj dane serwera pocztowego używanego do wysyłki e-maili.</div>
    </div>
  </div>

  {{-- Flash messages --}}
  @if(session('success'))
    <div class="alert alert-success mb-3">{{ session('success') }}</div>
  @endif

  {{-- Validation errors --}}
  @if ($errors->any())
    <div class="alert alert-danger mb-3">
      <div class="fw-semibold mb-1">Popraw poniższe błędy:</div>
      <ul class="mb-0">
        @foreach ($errors->all() as $error)
          <li>{{ $error }}</li>
        @endforeach
      </ul>
    </div>
  @endif

  {{-- Form --}}
  <form method="POST" action="{{ route('admin.smtp.update') }}">
    @csrf
    @method('PUT')

    @include('admin.smtp._form', ['smtp' => $smtp])

    <div class="d-flex justify-content-end gap-2 mt-3">
      <a href="{{ url()->previous() }}" class="btn btn-outline-secondary">Anuluj</a>
      <button type="submit" class="btn btn-primary">
        <i class="fas fa-save me-1"></i> Zapisz zmiany
      </button>
    </div>
  </form>
</div>
@endsection