@extends('layouts.client')
@section('title','Tiket #'.$ticket->ticket_number)
@section('content')
<div class="row">
<div class="col-lg-8">
  <div class="card mb-3">
    <div class="card-header">
      <span class="fw-bold text-primary">{{ $ticket->ticket_number }}</span>
      <span class="badge bg-{{ $ticket->status_badge }} ms-2">{{ str_replace('_',' ',strtoupper($ticket->status)) }}</span>
      <span class="badge bg-{{ $ticket->priority_badge }} ms-1">{{ strtoupper($ticket->priority) }}</span>
    </div>
    <div class="card-body">
      <h6 class="fw-bold">{{ $ticket->subject }}</h6>
      <p class="text-muted small" style="white-space:pre-wrap">{{ $ticket->description }}</p>
      @if($ticket->resolution)<div class="alert alert-success small"><strong>Resolusi:</strong> {{ $ticket->resolution }}</div>@endif
    </div>
  </div>

  <div class="card mb-3">
    <div class="card-header">Percakapan</div>
    <div class="card-body" style="max-height:350px;overflow-y:auto">
      @forelse($ticket->comments->where('is_internal',false) as $c)
      <div class="mb-3">
        <div class="d-flex gap-2">
          <div style="width:30px;height:30px;border-radius:50%;background:#eff6ff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0">{{ strtoupper(substr($c->author_name,0,1)) }}</div>
          <div style="flex:1">
            <div class="d-flex gap-2 align-items-center"><span class="fw-semibold small">{{ $c->author_name }}</span><span class="text-muted" style="font-size:11px">{{ $c->created_at->diffForHumans() }}</span></div>
            <div class="mt-1 p-2 rounded bg-light small" style="white-space:pre-wrap">{{ $c->body }}</div>
          </div>
        </div>
      </div>
      @empty<p class="text-center text-muted small py-3">Belum ada percakapan</p>
      @endforelse
    </div>
    @if(!in_array($ticket->status,['resolved','closed']))
    <div class="card-footer">
      <form action="{{ route('client.tickets.comment',$ticket) }}" method="POST">@csrf
        <div class="d-flex gap-2">
          <textarea name="body" class="form-control form-control-sm" rows="2" placeholder="Tulis pesan..." required></textarea>
          <button type="submit" class="btn btn-primary btn-sm align-self-end"><i class="fas fa-paper-plane"></i></button>
        </div>
      </form>
    </div>
    @endif
  </div>
</div>
<div class="col-lg-4">
  <div class="card">
    <div class="card-header">Detail Tiket</div>
    <div class="card-body p-0">
      <table class="table table-sm mb-0">
        <tr><td class="text-muted small">Teknisi</td><td class="small">{{ $ticket->assignedTo?->name ?? 'Belum ditugaskan' }}</td></tr>
        <tr><td class="text-muted small">Kategori</td><td class="small">{{ $ticket->category }}</td></tr>
        <tr><td class="text-muted small">Dibuat</td><td class="small">{{ $ticket->created_at->format('d/m/Y H:i') }}</td></tr>
        @if($ticket->resolved_at)<tr><td class="text-muted small">Selesai</td><td class="small">{{ $ticket->resolved_at->format('d/m/Y H:i') }}</td></tr>@endif
      </table>
    </div>
  </div>
</div>
</div>
@endsection
