@extends('layouts.admin')
@section('title', $ticket->ticket_number)

@section('content')

<div style="display:flex;align-items:center;gap:.75rem;margin-bottom:1.5rem">
  <a href="{{ route('admin.support.index') }}" class="btn btn-secondary btn-sm"><svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="flex-shrink:0"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg> Support</a>
  <span style="color:var(--muted-foreground)">/</span>
  <span style="font-size:.8125rem;color:var(--muted-foreground)">{{ $ticket->ticket_number }}</span>
</div>

@php
  $sc=['open'=>'b-blue','in_progress'=>'b-yellow','resolved'=>'b-green','closed'=>'b-gray'];
  $pc=['urgent'=>'b-red','high'=>'b-orange','medium'=>'b-yellow','low'=>'b-gray'];
  $isOpen = !in_array($ticket->status, ['resolved','closed']);
@endphp

<div style="display:grid;grid-template-columns:1fr 280px;gap:1.5rem;align-items:start">

  {{-- Conversation --}}
  <div>
    {{-- Ticket header --}}
    <div class="card" style="padding:1.375rem;margin-bottom:1rem">
      <div style="display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:.75rem">
        <h2 style="font-size:1.125rem;font-weight:700;color:var(--foreground);margin:0;line-height:1.3">{{ $ticket->subject }}</h2>
        <div style="display:flex;align-items:center;gap:.5rem;flex-shrink:0">
          <span class="badge {{ $sc[$ticket->status]??'b-gray' }}">{{ ucwords(str_replace('_',' ',$ticket->status)) }}</span>
          <span class="badge {{ $pc[$ticket->priority]??'b-gray' }}">{{ ucfirst($ticket->priority) }}</span>
        </div>
      </div>
      <div style="display:flex;align-items:center;gap:1rem;font-size:.8rem;color:var(--muted-foreground)">
        <span style="font-family:monospace">{{ $ticket->ticket_number }}</span>
        <span>{{ ucfirst($ticket->category) }}</span>
        @if($ticket->product)<span>{{ $ticket->product->name }}</span>@endif
        <span>{{ $ticket->created_at->format('M d, Y H:i') }}</span>
      </div>
    </div>

    {{-- Opening message --}}
    <div class="card" style="padding:1.375rem;margin-bottom:.75rem">
      <div style="display:flex;align-items:center;gap:.625rem;margin-bottom:.875rem">
        <div class="user-avatar" style="width:1.875rem;height:1.875rem;font-size:.7rem">
          {{ strtoupper(substr($ticket->user->name??'U',0,1)) }}
        </div>
        <div>
          <div style="font-size:.875rem;font-weight:600;color:var(--foreground)">{{ $ticket->user->name }}</div>
          <div style="font-size:.75rem;color:var(--muted-foreground)">{{ $ticket->created_at->format('M d, Y H:i') }}</div>
        </div>
      </div>
      <div style="font-size:.9rem;color:var(--foreground);line-height:1.7;white-space:pre-wrap">{{ $ticket->description }}</div>
    </div>

    {{-- Replies --}}
    @foreach($ticket->replies as $reply)
    @php $isAdmin = $reply->is_admin_reply; @endphp
    <div style="background:{{ $isAdmin ? '#f0f4ff' : 'var(--card)' }};
      border:1px solid {{ $isAdmin ? '#c7d2fe' : 'var(--border)' }};
      border-radius:var(--radius);padding:1.375rem;margin-bottom:.75rem">
      <div style="display:flex;align-items:center;gap:.625rem;margin-bottom:.875rem">
        <div style="width:1.875rem;height:1.875rem;border-radius:50%;
          background:{{ $isAdmin ? 'linear-gradient(135deg,#1d4ed8,#1e40af)' : 'linear-gradient(135deg,#6366f1,#7c3aed)' }};
          display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;color:#fff;flex-shrink:0">
          {{ strtoupper(substr($reply->user->name??'A',0,1)) }}
        </div>
        <div style="flex:1">
          <div style="display:flex;align-items:center;gap:.5rem">
            <span style="font-size:.875rem;font-weight:600;color:var(--foreground)">{{ $reply->user->name }}</span>
            @if($isAdmin)
            <span style="padding:.1rem .45rem;border-radius:.3rem;font-size:.65rem;font-weight:700;background:#c7d2fe;color:#1e40af">Support</span>
            @endif
          </div>
          <div style="font-size:.75rem;color:var(--muted-foreground)">{{ $reply->created_at->format('M d, Y H:i') }}</div>
        </div>
      </div>
      <div style="font-size:.9rem;color:var(--foreground);line-height:1.7;white-space:pre-wrap">{{ $reply->content }}</div>
    </div>
    @endforeach

    {{-- Admin reply form --}}
    <div class="card" style="overflow:hidden">
      <form method="POST" action="{{ route('admin.support.reply',$ticket) }}">
        @csrf
        <div style="padding:.375rem .625rem;border-bottom:1px solid var(--border);
          background:var(--muted);display:flex;align-items:center;justify-content:space-between">
          <span style="font-size:.8125rem;font-weight:500;color:var(--foreground)">Admin Reply</span>
          <select name="status" style="padding:.25rem .625rem;border:1px solid var(--border);
            border-radius:var(--radius);background:var(--background);color:var(--foreground);
            font-size:.75rem;font-family:inherit;outline:none;cursor:pointer">
            @foreach(['open'=>'Keep Open','in_progress'=>'Mark In Progress','resolved'=>'Mark Resolved','closed'=>'Close Ticket'] as $v=>$l)
            <option value="{{ $v }}" @selected($ticket->status===$v)>{{ $l }}</option>
            @endforeach
          </select>
        </div>
        <textarea name="content" rows="5" required
          placeholder="Type your reply to the customer..."
          style="width:100%;padding:.875rem 1rem;border:none;outline:none;resize:none;
            font-family:'Inter',system-ui,sans-serif;font-size:.875rem;line-height:1.6;
            color:var(--foreground);background:var(--background)">{{ old('content') }}</textarea>
        <div style="display:flex;justify-content:flex-end;padding:.625rem 1rem;
          border-top:1px solid var(--border);background:var(--muted)">
          <button type="submit" class="btn btn-secondary btn-sm">
            Send Reply
          </button>
        </div>
      </form>
    </div>
  </div>

  {{-- Sidebar --}}
  <div style="display:flex;flex-direction:column;gap:1rem;position:sticky;top:calc(3.5rem + 1.5rem)">

    {{-- Status --}}
    <div class="card" style="padding:1.125rem">
      <div style="font-size:.875rem;font-weight:600;color:var(--foreground);margin-bottom:.875rem">Update Status</div>
      <form method="POST" action="{{ route('admin.support.status',$ticket) }}">
        @csrf @method('PATCH')
        <select name="status" class="select" style="margin-bottom:.625rem">
          @foreach(['open'=>'Open','in_progress'=>'In Progress','resolved'=>'Resolved','closed'=>'Closed'] as $v=>$l)
          <option value="{{ $v }}" @selected($ticket->status===$v)>{{ $l }}</option>
          @endforeach
        </select>
        <button type="submit" class="btn btn-primary btn-sm" style="width:100%;justify-content:center">Update</button>
      </form>
    </div>

    {{-- Assign --}}
    <div class="card" style="padding:1.125rem">
      <div style="font-size:.875rem;font-weight:600;color:var(--foreground);margin-bottom:.875rem">Assign To</div>
      <form method="POST" action="{{ route('admin.support.assign',$ticket) }}">
        @csrf @method('PATCH')
        <select name="assigned_to" class="select" style="margin-bottom:.625rem">
          <option value="">Unassigned</option>
          @foreach($admins as $admin)
          <option value="{{ $admin->id }}" @selected($ticket->assigned_to===$admin->id)>{{ $admin->name }}</option>
          @endforeach
        </select>
        <button type="submit" class="btn btn-secondary btn-sm" style="width:100%;justify-content:center">Assign</button>
      </form>
    </div>

    {{-- Details --}}
    <div class="card" style="padding:1.125rem">
      <div style="font-size:.875rem;font-weight:600;color:var(--foreground);margin-bottom:.75rem">Details</div>
      @foreach([
        ['Customer', $ticket->user->name??'-'],
        ['Email',    $ticket->user->email??'-'],
        ['Category', ucfirst($ticket->category)],
        ['Priority', ucfirst($ticket->priority)],
        ['Product',  $ticket->product?->name??'None'],
        ['Replies',  $ticket->replies->count()],
        ['Opened',   $ticket->created_at->format('M d, Y')],
        ['Assigned', $ticket->assignee?->name??'Unassigned'],
      ] as [$k,$v])
      <div style="display:flex;justify-content:space-between;font-size:.78rem;
        padding:.375rem 0;border-bottom:1px solid var(--border)">
        <span style="color:var(--muted-foreground)">{{ $k }}</span>
        <span style="font-weight:500;color:var(--foreground);text-align:right;max-width:140px;
          white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ $v }}</span>
      </div>
      @endforeach
    </div>

  </div>
</div>

@endsection