@extends('layouts.master')

@section('content')
<style>
  .glass-box {
    backdrop-filter: blur(12px);
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 8px 30px rgba(0,0,0,0.1);
    transition: background 0.3s, border-color 0.3s;
    max-width: 900px;
    margin: 2rem auto;
  }
  body.light-mode .glass-box {
    background: rgba(255,255,255,0.8);
    border: 1px solid rgba(255,255,255,0.5);
    color: #212529;
  }
  body.dark-mode .glass-box {
    background: rgba(30,30,40,0.8);
    border: 1px solid rgba(255,255,255,0.15);
    color: #f1f1f1;
  }

  .glass-box h2 {
    margin-bottom: 1.5rem;
    transition: color 0.3s;
    font-size: 1.75rem;
    font-weight: 600;
  }
  body.light-mode .glass-box h2 { color: #1a237e; }
  body.dark-mode .glass-box h2  { color: #90caf9; }

  .section { margin-bottom: 2rem; }
  .section + .section {
    border-top: 1px solid rgba(0,0,0,0.1);
    padding-top: 1.5rem;
  }
  body.dark-mode .section + .section { border-color: rgba(255,255,255,0.15); }

  .details p { margin-bottom: .75rem; font-size: 1rem; }
  .details strong { display: inline-block; width: 140px; color: inherit; }

  .attachment-link {
    margin-bottom: 1.5rem;
    display: inline-block;
  }

  .messages {
    max-height: 300px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding-right: .5rem;
  }
  .messages h5 {
    margin-bottom: 1rem;
    font-size: 1.25rem;
    font-weight: 500;
    transition: color 0.3s;
  }
  body.light-mode .messages h5 { color: #1a237e; }
  body.dark-mode .messages h5  { color: #90caf9; }

  .msg {
    max-width: 70%;
    padding: 1rem;
    border-radius: 1.25rem;
    position: relative;
    word-wrap: break-word;
    transition: background 0.3s;
    font-size: 0.95rem;
  }
  .msg.from-user {
    align-self: flex-end;
    background: #cceeff;
    border-top-right-radius: 0;
  }
  .msg.from-admin {
    align-self: flex-start;
    background: #ececec;
    border-top-left-radius: 0;
  }
  body.dark-mode .msg.from-user { background: #375a7f; }
  body.dark-mode .msg.from-admin { background: #444; }

  .msg .meta {
    font-size: .75rem;
    margin-bottom: .5rem;
    opacity: .7;
    color: inherit;
  }

  .reply textarea {
    resize: vertical;
    border-radius: 12px;
    transition: background 0.3s, color 0.3s, border-color 0.3s;
    font-size: 1rem;
  }
  body.light-mode .reply .form-control {
    background: #fff;
    color: #212529;
    border: 1px solid #ccc;
  }
  body.dark-mode .reply .form-control {
    background: #2c2c3c;
    color: #e0e0e0;
    border: 1px solid #555;
  }

  .reply .btn-primary {
    border-radius: 12px;
    font-weight: 500;
    transition: background 0.3s, border-color 0.3s, color 0.3s;
    padding: 0.5rem 1.5rem;
    font-size: 1rem;
  }
  body.light-mode .reply .btn-primary {
    background: #1a237e;
    border-color: #1a237e;
    color: #fff;
  }
  body.light-mode .reply .btn-primary:hover {
    background: #283593;
    border-color: #283593;
  }
  body.dark-mode .reply .btn-primary {
    background: #90caf9 !important;
    border-color: #90caf9 !important;
    color: #000 !important;
  }
  body.dark-mode .reply .btn-primary:hover {
    background: #a5d6a7 !important;
    border-color: #a5d6a7 !important;
  }
</style>

<div class="glass-box">
  <h2>Szczegóły zgłoszenia #{{ $ticket->ticket_code }}</h2>

  <div class="section details">
    <p><strong>Temat:</strong> {{ $ticket->subject }}</p>
    <p><strong>Firma:</strong> {{ $ticket->company }}</p>
    <p><strong>Priorytet:</strong> {{ $ticket->priority }}</p>
    <p><strong>Zgłaszający:</strong> {{ $ticket->name }} ({{ $ticket->email }})</p>
    <p><strong>Opis zgłoszenia:</strong> {{ $ticket->message }}</p>

    @if($ticket->attachment)
      <a href="{{ route('ticket.attachment', $ticket) }}" class="btn btn-outline-primary attachment-link">
        Pobierz załącznik zgłoszenia
      </a>
    @endif
  </div>

  <div class="section messages">
    <h5>Wiadomości</h5>
    @foreach($ticket->messages->sortBy('created_at') as $msg)
      @php
        $nazwaNadawcy = $msg->from_admin
            ? ($msg->user->name ?? 'Nieznany serwisant')
            : 'Ty';
        $cls = $msg->from_admin ? 'from-admin' : 'from-user';
      @endphp
      <div class="msg {{ $cls }}">
        <div class="meta"><strong>{{ $nazwaNadawcy }}</strong> — {{ $msg->created_at->format('Y-m-d H:i') }}</div>
        <div>{{ $msg->message }}</div>
        @if($msg->attachment)
          <div class="mt-2">
            <a href="{{ route('ticket.reply.attachment', $msg->id) }}" class="btn btn-sm btn-outline-secondary">
    Pobierz załącznik odpowiedzi
</a>

          </div>
        @endif
      </div>
    @endforeach
  </div>

  <div class="section reply">
    <form method="POST" action="{{ route('ticket.reply', $ticket) }}" enctype="multipart/form-data">
      @csrf
      <input type="hidden" name="email" value="{{ $ticket->email }}">
      <div class="mb-3">
        <textarea name="message" class="form-control" rows="4" placeholder="Twoja odpowiedź..." required></textarea>
      </div>
      <div class="mb-3">
        <label for="attachment" class="form-label">Załącznik (opcjonalny)</label>
        <input type="file" name="attachment" id="attachment" class="form-control">
      </div>
      <button type="submit" class="btn btn-primary">Wyślij odpowiedź</button>
    </form>
  </div>
</div>
@endsection