@extends('layouts.app')
@section('title', __('Support') . ' - ' . $ticket->subject)
@section('content')

<div class="page-header">
  <a href="{{ route('support') }}" class="page-header-back"><i class="bi bi-arrow-left"></i></a>
  <div>
    <div class="page-header-title">{{ strtoupper(__('Support')) }}</div>
    <div class="page-header-sub">{{ app()->getLocale() === 'id' ? 'DETAIL TIKET' : 'TICKET DETAIL' }}</div>
  </div>
</div>

<div class="page" style="padding-bottom:2rem">
  <div class="section">

    {{-- INFO TIKET --}}
    <div style="background:var(--bg2);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-bottom:1rem;">
      <div style="padding:0.875rem 1rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;">
        <div style="font-family:var(--mono);font-size:0.6rem;color:var(--gold);letter-spacing:0.08em;">
          {{ app()->getLocale() === 'id' ? 'INFO TIKET' : 'TICKET INFO' }}
        </div>
        <span style="
          border-radius:4px;padding:0.1rem 0.5rem;font-family:var(--mono);font-size:0.48rem;
          background:{{ $ticket->status === 'open' ? 'rgba(245,158,11,0.12)' : ($ticket->status === 'replied' ? 'rgba(16,185,129,0.12)' : 'var(--bg3)') }};
          border:1px solid {{ $ticket->status === 'open' ? 'rgba(245,158,11,0.3)' : ($ticket->status === 'replied' ? 'rgba(16,185,129,0.3)' : 'var(--border)') }};
          color:{{ $ticket->status === 'open' ? 'var(--gold)' : ($ticket->status === 'replied' ? 'var(--green)' : 'var(--t2)') }};">
          {{ strtoupper($ticket->status) }}
        </span>
      </div>
      <div style="padding:1rem;">
        <div style="font-family:var(--display);font-size:0.95rem;font-weight:700;color:var(--t1);margin-bottom:0.5rem;">
          {{ $ticket->subject }}
        </div>
        <div style="font-family:var(--mono);font-size:0.5rem;color:var(--t2);margin-bottom:1rem;">
          <i class="bi bi-clock"></i> {{ $ticket->created_at->format('d M Y, H:i') }}
        </div>
        {{-- PESAN AWAL USER --}}
        <div style="font-family:var(--mono);font-size:0.6rem;color:var(--t2);margin-bottom:0.3rem;letter-spacing:0.06em;">
          {{ app()->getLocale() === 'id' ? 'PESAN KAMU' : 'YOUR MESSAGE' }}
        </div>
        <div style="background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:0.875rem;font-family:var(--sans);font-size:0.8rem;color:var(--t1);line-height:1.7;">
          {{ $ticket->message }}
        </div>
      </div>
    </div>

    {{-- THREAD REPLIES --}}
    @if($ticket->replies->count() > 0)
    <div style="font-family:var(--mono);font-size:0.6rem;color:var(--gold);letter-spacing:0.08em;margin-bottom:0.75rem;">
      {{ app()->getLocale() === 'id' ? 'PERCAKAPAN' : 'CONVERSATION' }}
    </div>
    @foreach($ticket->replies as $reply)
    <div style="margin-bottom:0.75rem;display:flex;flex-direction:column;align-items:{{ $reply->is_admin ? 'flex-start' : 'flex-end' }};">
      <div style="max-width:85%;">
        <div style="font-family:var(--mono);font-size:0.5rem;color:var(--t2);margin-bottom:0.25rem;{{ $reply->is_admin ? '' : 'text-align:right;' }}">
          {{ $reply->is_admin ? 'Admin' : auth()->user()->name }} · {{ $reply->created_at->format('d M Y, H:i') }}
        </div>
        <div style="
          background:{{ $reply->is_admin ? 'rgba(16,185,129,0.08)' : 'rgba(245,158,11,0.08)' }};
          border:1px solid {{ $reply->is_admin ? 'rgba(16,185,129,0.25)' : 'rgba(245,158,11,0.25)' }};
          border-radius:{{ $reply->is_admin ? '4px 12px 12px 12px' : '12px 4px 12px 12px' }};
          padding:0.75rem 0.875rem;
          font-family:var(--sans);font-size:0.8rem;
          color:var(--t1);line-height:1.7;">
          {{ $reply->message }}
        </div>
      </div>
    </div>
    @endforeach
    @endif

    {{-- FORM REPLY --}}
    @if($ticket->status !== 'closed')
    <div style="background:var(--bg2);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-top:1rem;margin-bottom:1rem;">
      <div style="padding:0.875rem 1rem;border-bottom:1px solid var(--border);font-family:var(--mono);font-size:0.6rem;color:var(--gold);letter-spacing:0.08em;">
        {{ app()->getLocale() === 'id' ? 'BALAS TIKET' : 'REPLY TICKET' }}
      </div>
      <div style="padding:1rem;">
        @if(session('success'))
        <div class="alert alert-success" style="margin-bottom:0.75rem;"><i class="bi bi-check-circle-fill"></i> {{ session('success') }}</div>
        @endif
        <form action="{{ route('support.ticket.reply', $ticket->id) }}" method="POST">
          @csrf
          <div class="form-group">
            <textarea name="message" class="form-input" rows="3"
              placeholder="{{ app()->getLocale() === 'id' ? 'Tulis balasan...' : 'Write your reply...' }}"
              required style="resize:none;"></textarea>
            @error('message')<div style="color:var(--red);font-size:0.6rem;margin-top:0.3rem;">{{ $message }}</div>@enderror
          </div>
          <button type="submit" class="btn-submit">
            <i class="bi bi-send-fill"></i> {{ app()->getLocale() === 'id' ? 'KIRIM' : 'SEND' }}
          </button>
        </form>
      </div>
    </div>
    @else
    <div style="background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:1rem;text-align:center;margin-bottom:1rem;">
      <div style="font-family:var(--mono);font-size:0.65rem;color:var(--t2);">
        <i class="bi bi-lock-fill"></i> {{ app()->getLocale() === 'id' ? 'Tiket ini sudah ditutup' : 'This ticket is closed' }}
      </div>
    </div>
    @endif

    <a href="{{ route('support') }}"
      style="display:flex;align-items:center;justify-content:center;gap:0.5rem;padding:0.75rem;background:var(--bg2);border:1px solid var(--border);border-radius:10px;font-family:var(--mono);font-size:0.65rem;color:var(--t2);text-decoration:none;"
      onmouseover="this.style.borderColor='rgba(245,158,11,0.3)';this.style.color='var(--gold)'"
      onmouseout="this.style.borderColor='var(--border)';this.style.color='var(--t2)'">
      <i class="bi bi-arrow-left"></i> {{ app()->getLocale() === 'id' ? 'Kembali ke Support' : 'Back to Support' }}
    </a>

  </div>
</div>

@endsection