@extends('layouts.master')

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

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

  /* ---------- Karty „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;
  }
  body.light-mode .glass-box{ background: rgba(255,255,255,.78); border-color: rgba(255,255,255,.50); }
  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; }

  /* ---------- Szczegóły (LEWA kolumna) ---------- */
  .detail-item{ display:flex; gap:.5rem; margin:.45rem 0; }
  .detail-key { width: 150px; font-weight:600; opacity:.85; }
  .ticket-desc{
    white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word;
    border-radius:.6rem; padding:.9rem 1rem; border:1px solid; font-size:.96rem;
  }
  body.light-mode .ticket-desc{ background:#fff; border-color:#e6eaf2; color:#2a3140; }
  body.dark-mode  .ticket-desc{ background:#2b3041; border-color:#3a4054; color:#eef1f5; }

  .chip{
    display:inline-flex; align-items:center; gap:.45rem;
    padding:.28rem .65rem; border-radius:999px; font-size:.82rem; font-weight:700;
    border:1px solid transparent; white-space:nowrap;
  }
  .chip-prio-normal  { background:#f4f7fb; border-color:#cfd6e4; color:#1e2a3a; }
  .chip-prio-high    { background:#fff3cd; border-color:#ffe08a; color:#7a6000; }
  .chip-prio-critical{ background:#ffebee; border-color:#ef9a9a; color:#b71c1c; }
  .chip-status       { color:#fff; background:#607d8b; }

  .file-icon{ font-size:1.05rem; }

  /* ---------- Prawa kolumna: PANEL ROZMOWY (statyczny) ---------- */
  .chat-card{
    display:flex; flex-direction:column;
    height: 62vh;            /* stała wysokość panela */
    min-height: 420px;       /* sensowne minimum */
  }
  @media (max-width: 991.98px){
    .chat-card{ height: 52vh; min-height: 340px; }
  }

  .chat-window{
    flex:1;
    overflow-y:auto;
    padding: 1rem 1rem .75rem 1rem;
    border-bottom: 1px dashed rgba(0,0,0,.08);
  }
  body.dark-mode .chat-window{ border-color: rgba(255,255,255,.12); }

  .bubble{
    max-width: 78%;
    border-radius: 14px;
    padding: .85rem 1rem;
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
    font-size: .95rem;
  }
  /* użytkownik po prawej, serwis po lewej */
  .from-user{   margin-left:auto; background:#cfe2ff; border:1px solid #a7caff; color:#0e2a4a; border-top-right-radius: 4px; }
  .from-admin{  margin-right:auto; background:#ffffff; border:1px solid #e6eaf2; color:#2a3140; border-top-left-radius: 4px; }
  body.dark-mode .from-user { background:#3c5a7c; border-color:#40658f; color:#e9f3ff; }
  body.dark-mode .from-admin{ background:#2b3041; border-color:#3a4054; color:#eef1f5; }

  .bubble-meta{ font-size:.8rem; opacity:.8; margin-bottom:.4rem; }

  .reply-area{
    padding: .9rem; border-top: none;
  }
  .form-control{ border-radius:.6rem; }
  body.light-mode .form-control{ background:#fff; border-color:#cfd6e4; color:#212529; }
  body.dark-mode  .form-control{ 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="container py-4">
  <div class="row g-4">

    {{-- LEWA kolumna — informacje o zgłoszeniu --}}
    <div class="col-lg-4">
  <div class="glass-box p-4 h-100">
    <div class="d-flex flex-column gap-1 mb-2">
      <h3 class="heading mb-1">Zgłoszenie</h3>
      <h3 class="heading">{{ $ticket->ticket_code }}</h3>
    </div>


        @php
          $prio = (string)($ticket->priority ?? 'Normalny');
          $prioClass = match(strtolower($prio)){
            'wysoki' => 'chip-prio-high',
            'krytyczny' => 'chip-prio-critical',
            default => 'chip-prio-normal',
          };
          $statusName  = optional($ticket->status)->nazwa;
          $statusColor = optional($ticket->status)->kolor ?: '#607d8b';
        @endphp

        <div class="d-flex flex-wrap gap-2 mb-3">
          <span class="chip {{ $prioClass }}"><i class="fas fa-bolt"></i> Priorytet: {{ $ticket->priority ?? 'Normalny' }}</span>
          @if($statusName)
            <span class="chip chip-status" style="background: {{ $statusColor }}"><i class="fas fa-circle-check"></i> {{ $statusName }}</span>
          @endif
        </div>

        <div class="detail-item"><div class="detail-key">Temat:</div>        <div>{{ $ticket->subject }}</div></div>
        <div class="detail-item"><div class="detail-key">Firma:</div>        <div>{{ $ticket->company }}</div></div>
        <div class="detail-item"><div class="detail-key">Zgłaszający:</div>  <div>{{ $ticket->name }}</div></div>
        <div class="detail-item"><div class="detail-key">email:</div>  <div>{{ $ticket->email }}</div></div>
        <div class="detail-item"><div class="detail-key">Numer Tel. :</div>  <div>{{ $ticket->phone }}</div></div>
        <div class="mt-3">
          <div class="fw-semibold mb-2" style="opacity:.85">Opis zgłoszenia</div>
          <div class="ticket-desc">{!! nl2br(e($ticket->message)) !!}</div>
        </div>

        @if($ticket->attachment)
          @php
            $ext   = strtolower(pathinfo($ticket->attachment, PATHINFO_EXTENSION));
            $icons = [
              'pdf'=>['fa-file-pdf','text-danger'],
              'doc'=>['fa-file-word','text-primary'],'docx'=>['fa-file-word','text-primary'],
              'xls'=>['fa-file-excel','text-success'],'xlsx'=>['fa-file-excel','text-success'],
              'jpg'=>['fa-file-image','text-warning'],'jpeg'=>['fa-file-image','text-warning'],'png'=>['fa-file-image','text-warning'],
              'zip'=>['fa-file-archive','text-secondary'],
            ];
            $icon = $icons[$ext] ?? ['fa-file','text-muted'];
          @endphp
          <div class="mt-3">
            <a href="{{ route('ticket.attachment', $ticket) }}" class="d-inline-flex align-items-center gap-2 text-decoration-none">
              <i class="fas {{ $icon[0] }} {{ $icon[1] }} file-icon"></i>
              <span class="fw-semibold">Pobierz załącznik zgłoszenia</span>
            </a>
          </div>
        @endif
      </div>
    </div>

    {{-- PRAWA kolumna — PANEL ROZMOWY (statyczny) + formularz --}}
    <div class="col-lg-8">
      <div class="glass-box p-0 chat-card">
        {{-- nagłówek panela --}}
        <div class="d-flex align-items-center justify-content-between px-4 pt-3 pb-2">
          <h4 class="heading" style="font-size:1.1rem">Wiadomości</h4>
          <span class="small opacity-75">Ostatnia aktualizacja: {{ $ticket->updated_at?->format('Y-m-d H:i') }}</span>
        </div>

        {{-- okno rozmowy (przewija się tylko to) --}}
        <div class="chat-window" id="chat-window">
          @forelse($ticket->messages->sortBy('created_at') as $msg)
            @php
              $isAdmin = (bool)$msg->from_admin;
              $sender  = $isAdmin ? ($msg->user->name ?? 'Serwis') : 'Ty';
              $bubble  = $isAdmin ? 'from-admin' : 'from-user';

              $ext   = $msg->attachment ? strtolower(pathinfo($msg->attachment, PATHINFO_EXTENSION)) : '';
              $icon  = match($ext){
                'pdf'=>'fa-file-pdf',
                'doc','docx'=>'fa-file-word',
                'xls','xlsx'=>'fa-file-excel',
                'jpg','jpeg','png'=>'fa-file-image',
                'zip'=>'fa-file-archive',
                default=>'fa-file'
              };
            @endphp

            <div class="d-flex mb-3">
              <div class="bubble {{ $bubble }}">
                <div class="bubble-meta fw-semibold">
                  {{ $sender }} • {{ $msg->created_at->format('Y-m-d H:i') }}
                </div>
                <div>{!! nl2br(e($msg->message)) !!}</div>

                @if($msg->attachment)
                  <div class="mt-2">
                    <a href="{{ route('ticket.reply.attachment', $msg->id) }}"
                       class="d-inline-flex align-items-center gap-2 text-decoration-none">
                      <i class="fas {{ $icon }} file-icon"></i>
                      <span class="fw-semibold">Pobierz załącznik odpowiedzi</span>
                    </a>
                  </div>
                @endif
              </div>
            </div>
          @empty
            <div class="text-muted px-1">Brak wiadomości.</div>
          @endforelse
        </div>

        {{-- stopka: formularz odpowiedzi --}}
        <div class="reply-area px-3 pb-3 pt-2">
          <form method="POST" action="{{ route('ticket.reply', $ticket) }}" enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="email" value="{{ $ticket->email }}">
            <div class="mb-2">
              <textarea name="message" class="form-control" rows="3" placeholder="Twoja odpowiedź…" required></textarea>
            </div>
            <div class="d-flex gap-2 align-items-center">
              <input type="file" name="attachment" class="form-control form-control-sm"
                     accept=".jpg,.jpeg,.png,.pdf,.doc,.docx,.xls,.xlsx,.zip">
              <button type="submit" class="btn btn-primary">
                <i class="fas fa-paper-plane me-1"></i> Wyślij
              </button>
            </div>
          </form>
        </div>

      </div>
    </div>

  </div>
</div>

@push('scripts')
<script>
  // Autoscroll do dołu czatu po załadowaniu
  document.addEventListener('DOMContentLoaded', function(){
    const el = document.getElementById('chat-window');
    if(el){ el.scrollTop = el.scrollHeight; }
  });
</script>
@endpush
@endsection