@extends('layouts.master')

@section('content')
<style>
  /* --- Global --- */
  body.light-mode {
    background: linear-gradient(to bottom right, #e6f0ff, #ffffff);
    color: #212529;
  }
  body.dark-mode {
    background: linear-gradient(to bottom right, #1e1e2f, #2c2c3c);
    color: #f1f1f1;
  }

  /* --- Glass boxes --- */
  .glass-box {
    backdrop-filter: blur(12px);
    border-radius: 20px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.1);
    padding: 30px;
    transition: background 0.3s, border-color 0.3s, transform 0.3s;
  }
  body.light-mode .glass-box {
    background: rgba(255,255,255,0.7);
    border: 1px solid rgba(255,255,255,0.4);
  }
  body.dark-mode .glass-box {
    background: rgba(30,30,40,0.6);
    border: 1px solid rgba(255,255,255,0.1);
  }
  .glass-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 35px rgba(0,0,0,0.12);
  }

  /* --- Headings & text --- */
  .glass-box h3 {
    transition: color 0.3s;
  }
  body.light-mode .glass-box h3 { color: #1a237e; }
  body.dark-mode  .glass-box h3 { color: #90caf9 !important; }
  .text-muted {
    transition: color 0.3s;
  }
  body.light-mode .text-muted { color: #666 !important; }
  body.dark-mode  .text-muted { color: #aaa !important; }

  /* --- Inputs --- */
  .form-control {
    border-radius: 12px;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
  }
  body.light-mode .form-control {
    background-color: #fff;
    color: #333;
    border: 1px solid #ccc;
  }
  body.light-mode .form-control::placeholder { color: #aaa; }
  body.dark-mode .form-control {
    background-color: #2c2c3c;
    color: #e0e0e0;
    border: 1px solid #555;
  }
  body.dark-mode .form-control::placeholder { color: #888; }

  /* --- Buttons --- */
  .btn-primary, .btn-outline-primary {
    border-radius: 12px;
    font-weight: 500;
    transition: background-color 0.3s, border-color 0.3s, color 0.3s;
  }
  /* light */
  body.light-mode .btn-primary {
    background-color: #1a237e;
    border-color: #1a237e;
    color: #fff;
  }
  body.light-mode .btn-primary:hover {
    background-color: #283593;
    border-color: #283593;
  }
  body.light-mode .btn-outline-primary {
    background: transparent;
    color: #1a237e;
    border-color: #1a237e;
  }
  body.light-mode .btn-outline-primary:hover {
    background-color: #1a237e;
    color: #fff;
  }
  /* dark */
  body.dark-mode .btn-primary {
    background-color: #90caf9 !important;
    border-color: #90caf9 !important;
    color: #000 !important;
  }
  body.dark-mode .btn-primary:hover {
    background-color: #a5d6a7 !important;
    border-color: #a5d6a7 !important;
  }
  body.dark-mode .btn-outline-primary {
    background: transparent;
    color: #90caf9 !important;
    border-color: #90caf9 !important;
  }
  body.dark-mode .btn-outline-primary:hover {
    background-color: #90caf9 !important;
    color: #000 !important;
  }

  /* --- Banner --- */
  .banner-box { padding: 0; }
  .banner-box img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
  }
  @media (max-width: 768px) {
    .banner-box img {
      max-height: 200px;
      object-fit: contain;
    }
  }
</style>

<div class="container py-5">
  <div class="row g-4 justify-content-center align-items-stretch">

    <!-- Baner jako kafelka -->
    <div class="col-12 col-lg-10 mb-4">
      <div class="glass-box banner-box text-center">
        <img id="bannerImg" src="{{ asset('Baner1.svg') }}" alt="Baner EgaSupport">
      </div>
    </div>

    <!-- Box 1: Nowe zgłoszenie -->
    <div class="col-md-6 col-lg-5">
      <div class="glass-box h-100 d-flex flex-column justify-content-between">
        <div>
          <h3 class="mb-3">Utwórz nowe zgłoszenie</h3>
          <p class="text-muted">
            Masz problem, pytanie lub sugestię? Skontaktuj się z naszym zespołem wsparcia.
          </p>
        </div>
        <a href="{{ route('ticket.create') }}"
           class="btn btn-primary btn-lg w-100 shadow-sm mt-4">
          Nowe zgłoszenie
        </a>
      </div>
    </div>

    <!-- Box 2: Sprawdź status -->
    <div class="col-md-6 col-lg-5">
      <div class="glass-box h-100">
        <h3 class="mb-3">Sprawdź status zgłoszenia</h3>
        <form method="GET" action="{{ route('ticket.status') }}">
          <div class="mb-3">
            <label for="email" class="form-label">Adres e-mail</label>
            <input type="email" id="email" name="email"
                   class="form-control shadow-sm"
                   placeholder="np. kontakt@firma.pl" required>
          </div>
          <div class="mb-3">
            <label for="ticket_id" class="form-label">ID zgłoszenia</label>
            <input type="text" id="ticket_id" name="ticket_id"
                   class="form-control shadow-sm"
                   placeholder="np. TCKT-688B65F43EDB2" required>
          </div>
          <button type="submit"
                  class="btn btn-outline-primary w-100 shadow-sm mt-3">
            Sprawdź status
          </button>
        </form>
      </div>
    </div>

  </div>
</div>

@push('scripts')
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const banner      = document.getElementById('bannerImg');
    const themeSwitch = document.getElementById('themeSwitch');

    const setBanner = mode => {
      banner.src = mode === 'dark'
        ? "{{ asset('Baner2.svg') }}"
        : "{{ asset('Baner1.svg') }}";
    };

    // initial
    const saved = localStorage.getItem('theme') || 'light';
    setBanner(saved);

    // on toggle
    themeSwitch?.addEventListener('change', () => {
      const mode = themeSwitch.checked ? 'dark' : 'light';
      setBanner(mode);
    });
  });
</script>
@endpush
@endsection