@extends('layouts.app')

@section('content')
<style>
  /* --- Glass box --- */
  .glass-box {
    backdrop-filter: blur(12px);
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.1);
    transition: background 0.3s, border-color 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 h3 {
    margin-bottom: 1.5rem;
    transition: color 0.3s;
  }
  body.light-mode .glass-box h3 {
    color: #1a237e;
  }
  body.dark-mode .glass-box h3 {
    color: #90caf9 !important;
  }

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

  /* --- Buttons --- */
  .btn-primary, .btn-outline-secondary, .btn-danger {
    border-radius: 12px;
    font-weight: 500;
    transition: background-color 0.3s, border-color 0.3s, color 0.3s;
  }

  /* Submit */
  body.light-mode .btn-primary {
    background: #1a237e;
    border-color: #1a237e;
    color: #fff;
  }
  body.light-mode .btn-primary:hover {
    background: #283593;
    border-color: #283593;
  }
  body.dark-mode .btn-primary {
    background: #90caf9 !important;
    border-color: #90caf9 !important;
    color: #000 !important;
  }
  body.dark-mode .btn-primary:hover {
    background: #a5d6a7 !important;
    border-color: #a5d6a7 !important;
  }

  /* Reset */
  body.light-mode .btn-outline-secondary {
    color: #1a237e;
    border-color: #1a237e;
    background: transparent;
  }
  body.light-mode .btn-outline-secondary:hover {
    background: #1a237e;
    color: #fff;
  }
  body.dark-mode .btn-outline-secondary {
    color: #90caf9 !important;
    border-color: #90caf9 !important;
    background: transparent;
  }
  body.dark-mode .btn-outline-secondary:hover {
    background: #90caf9 !important;
    color: #000 !important;
  }

  /* Cancel */
  .btn-danger {
    background: #dc3545;
    border-color: #dc3545;
    color: #fff;
  }
  .btn-danger:hover {
    background: #c82333;
    border-color: #c82333;
  }
</style>

<div class="container py-5">
  <div class="row justify-content-center">
    <div class="col-lg-8">
      <div class="glass-box">
        <h3>Nowe zgłoszenie</h3>

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

        <form action="{{ route('ticket.store') }}" method="POST" enctype="multipart/form-data">
          @csrf
          <p class="mb-4">Proszę wypełnić formularz, aby wysłać nowe zgłoszenie.</p>

          {{-- Imię i nazwisko --}}
          <div class="row mb-3">
            <div class="col-md-6 mb-3 mb-md-0">
              <label for="name" class="form-label">Nazwisko i imię *</label>
              <input
                id="name"
                type="text"
                name="name"
                class="form-control @error('name') is-invalid @enderror"
                value="{{ old('name', $prefillName) }}"
                required
              >
              @error('name')
                <div class="invalid-feedback">{{ $message }}</div>
              @enderror
            </div>

            {{-- Email --}}
            <div class="col-md-6">
              <label for="email" class="form-label">Email *</label>
              <input
                id="email"
                type="email"
                name="email"
                class="form-control @error('email') is-invalid @enderror"
                value="{{ old('email', $prefillEmail) }}"
                required
              >
              <small class="text-muted">Sprawdź poprawność adresu e-mail!</small>
              @error('email')
                <div class="invalid-feedback">{{ $message }}</div>
              @enderror
            </div>
          </div>

          {{-- Telefony --}}
          <div class="row mb-3">
            <div class="col-md-6 mb-3 mb-md-0">
              <label for="phone" class="form-label">Telefon</label>
              <input id="phone" type="text" name="phone" class="form-control" value="{{ old('phone') }}">
            </div>
            <div class="col-md-6">
              <label for="phone_internal" class="form-label">Telefon wewnętrzny</label>
              <input id="phone_internal" type="text" name="phone_internal" class="form-control" value="{{ old('phone_internal') }}">
            </div>
          </div>

          {{-- Firma --}}
          <div class="mb-3">
            <label for="company_id" class="form-label">Firma *</label>
            <select
              id="company_id"
              name="company_id"
              class="form-select @error('company_id') is-invalid @enderror"
              required
            >
              <option value="" disabled {{ old('company_id', $prefillAgency) ? '' : 'selected' }}>
                -- wybierz firmę --
              </option>
              @foreach($companies as $c)
                <option
                  value="{{ $c->id }}"
                  {{ (old('company_id', $prefillAgency) == $c->id) ? 'selected' : '' }}
                >
                  {{ $c->name }}
                </option>
              @endforeach
            </select>
            @error('company_id')
              <div class="invalid-feedback">{{ $message }}</div>
            @enderror
          </div>

          {{-- Temat pomocy --}}
          <div class="mb-3">
            <label for="help_topic_id" class="form-label">Temat pomocy *</label>
            <select
              id="help_topic_id"
              name="help_topic_id"
              class="form-select @error('help_topic_id') is-invalid @enderror"
              required
            >
              <option value="" disabled {{ old('help_topic_id') ? '' : 'selected' }}>
                -- wybierz temat --
              </option>
              @foreach($topics as $topic)
                <option
                  value="{{ $topic->id }}"
                  {{ old('help_topic_id') == $topic->id ? 'selected' : '' }}
                >
                  {{ $topic->name }}
                </option>
              @endforeach
            </select>
            @error('help_topic_id')
              <div class="invalid-feedback">{{ $message }}</div>
            @enderror
          </div>

          {{-- Temat zgłoszenia --}}
          <div class="mb-3">
            <label for="subject" class="form-label">Temat *</label>
            <input
              id="subject"
              type="text"
              name="subject"
              class="form-control @error('subject') is-invalid @enderror"
              value="{{ old('subject') }}"
              required
            >
            @error('subject')
              <div class="invalid-feedback">{{ $message }}</div>
            @enderror
          </div>

          {{-- Wiadomość --}}
          <div class="mb-3">
            <label for="message" class="form-label">Wiadomość</label>
            <textarea id="message" name="message" class="form-control" rows="5">{{ old('message') }}</textarea>
          </div>

          {{-- Priorytet i załącznik --}}
          <div class="row mb-4">
            <div class="col-md-6 mb-3 mb-md-0">
              <label for="priority" class="form-label">Priorytet</label>
              <select id="priority" name="priority" class="form-select">
                <option value="Normal" {{ old('priority')=='Normal'?'selected':'' }}>Normal</option>
                <option value="Wysoki" {{ old('priority')=='Wysoki'?'selected':'' }}>Wysoki</option>
                <option value="Krytyczny" {{ old('priority')=='Krytyczny'?'selected':'' }}>Krytyczny</option>
              </select>
            </div>
            <div class="col-md-6">
              <label for="attachment" class="form-label">Załącznik</label>
              <input id="attachment" type="file" name="attachment" class="form-control @error('attachment') is-invalid @enderror">
              @error('attachment')
                <div class="invalid-feedback">{{ $message }}</div>
              @enderror
            </div>
          </div>

          {{-- Przyciski --}}
          <div class="d-flex gap-2">
            <button type="submit" class="btn btn-primary">Wyślij zgłoszenie</button>
            <button type="reset" class="btn btn-outline-secondary">Wyczyść</button>
            <a href="{{ url()->previous() }}" class="btn btn-danger">Anuluj</a>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
@endsection