{{-- resources/views/admin/tickets/show.blade.php --}}
@extends('admin.layouts.admin')
@section('title','Ticket #' . $ticket->id)
@section('page-title','Ticket #' . $ticket->id . ' — ' . Str::limit($ticket->subject, 40))

@section('admin-content')

<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem;flex-wrap:wrap;gap:0.5rem;">
    <a href="{{ route('admin.tickets.index') }}" style="font-size:0.8rem;color:#9ca3af;text-decoration:none;">← All Tickets</a>
    <form action="{{ route('admin.tickets.status',$ticket) }}" method="POST" style="display:flex;align-items:center;gap:0.5rem;">
        @csrf @method('PATCH')
        <select name="status" class="form-field" style="width:auto;font-size:0.78rem;">
            @foreach(['open','in_progress','resolved','closed'] as $s)
            <option value="{{ $s }}" {{ $ticket->status === $s ? 'selected' : '' }}>{{ ucfirst($s) }}</option>
            @endforeach
        </select>
        <button type="submit" class="btn btn-outline btn-sm">Update Status</button>
    </form>
</div>

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

    <div style="display:flex;flex-direction:column;gap:1rem;">

        {{-- Ticket info --}}
        <div class="admin-card">
            <div style="display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1rem;">
                <div>
                    <h2 style="font-family:'Fraunces',serif;font-size:1.05rem;font-weight:700;color:#0f0f14;margin-bottom:0.5rem;">{{ $ticket->subject }}</h2>
                    <div style="display:flex;gap:0.5rem;flex-wrap:wrap;align-items:center;">
                        <span class="pill" style="background:{{ $ticket->status_color }}18;color:{{ $ticket->status_color }};">{{ ucfirst($ticket->status) }}</span>
                        <span class="pill" style="font-size:0.62rem;{{ $ticket->priority_badge }}">{{ ucfirst($ticket->priority) }}</span>
                        @if($ticket->category)<span style="font-size:0.7rem;color:#9ca3af;">{{ ucfirst($ticket->category) }}</span>@endif
                        <span style="font-size:0.7rem;color:#9ca3af;">Opened {{ $ticket->created_at->format('d M Y, H:i') }}</span>
                    </div>
                </div>
            </div>
        </div>

        {{-- Thread --}}
        <div class="admin-card">
            <h3 style="font-family:'Fraunces',serif;font-size:0.9rem;font-weight:700;margin-bottom:1rem;">Conversation</h3>
            <div style="display:flex;flex-direction:column;gap:1rem;">

                {{-- Original message --}}
                <div style="display:flex;gap:0.75rem;">
                    <div style="width:2rem;height:2rem;border-radius:8px;background:#eff6ff;display:flex;align-items:center;justify-content:center;font-size:0.72rem;font-weight:700;color:#2d3aff;flex-shrink:0;">
                        {{ strtoupper(substr($ticket->client->contact_name,0,2)) }}
                    </div>
                    <div style="flex:1;">
                        <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.35rem;flex-wrap:wrap;">
                            <span style="font-size:0.78rem;font-weight:600;color:#0f0f14;">{{ $ticket->client->contact_name }}</span>
                            <span style="font-size:0.62rem;background:#f1f5f9;color:#475569;padding:0.1rem 0.4rem;border-radius:999px;font-weight:600;">Client</span>
                            <span style="font-size:0.65rem;color:#9ca3af;">{{ $ticket->created_at->format('d M Y, H:i') }}</span>
                        </div>
                        <div style="background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:0.85rem 1rem;font-size:0.82rem;color:#374151;line-height:1.7;">
                            {{ $ticket->body }}
                        </div>
                    </div>
                </div>

                {{-- Replies --}}
                @foreach($ticket->replies as $reply)
                <div style="display:flex;gap:0.75rem;{{ $reply->is_staff ? 'flex-direction:row-reverse;' : '' }}">
                    <div style="width:2rem;height:2rem;border-radius:8px;background:{{ $reply->is_staff ? '#fef9c3' : '#eff6ff' }};display:flex;align-items:center;justify-content:center;font-size:0.68rem;font-weight:700;color:{{ $reply->is_staff ? '#854d0e' : '#2d3aff' }};flex-shrink:0;">
                        {{ strtoupper(substr($reply->author?->name ?? 'K', 0, 2)) }}
                    </div>
                    <div style="flex:1;">
                        <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.35rem;flex-wrap:wrap;{{ $reply->is_staff ? 'flex-direction:row-reverse;' : '' }}">
                            <span style="font-size:0.78rem;font-weight:600;color:#0f0f14;">
                                {{ $reply->is_staff ? ($reply->author?->name ?? 'KiruDev Team') : $ticket->client->contact_name }}
                            </span>
                            @if($reply->is_staff)
                            <span style="font-size:0.62rem;background:#fef9c3;color:#854d0e;padding:0.1rem 0.4rem;border-radius:999px;font-weight:600;">KiruDev Staff</span>
                            @endif
                            <span style="font-size:0.65rem;color:#9ca3af;">{{ $reply->created_at->format('d M Y, H:i') }}</span>
                        </div>
                        <div style="background:{{ $reply->is_staff ? '#fefce8' : '#f8fafc' }};border:1px solid {{ $reply->is_staff ? '#fde68a' : '#e2e8f0' }};border-radius:8px;padding:0.85rem 1rem;font-size:0.82rem;color:#374151;line-height:1.7;">
                            {{ $reply->body }}
                        </div>
                    </div>
                </div>
                @endforeach
            </div>

            {{-- Staff reply form --}}
            @if(!in_array($ticket->status, ['closed']))
            <div style="margin-top:1.25rem;padding-top:1.25rem;border-top:1px solid #f3f4f6;">
                <form action="{{ route('admin.tickets.reply',$ticket) }}" method="POST">
                    @csrf
                    <label class="form-label">Staff Reply</label>
                    <textarea name="body" rows="4" class="form-field" placeholder="Write your response to the client…" required style="margin-bottom:0.75rem;"></textarea>
                    <button type="submit" class="btn btn-primary">Send Reply to Client</button>
                </form>
            </div>
            @endif
        </div>
    </div>

    {{-- Sidebar --}}
    <div class="admin-card">
        <h3 style="font-family:'Fraunces',serif;font-size:0.9rem;font-weight:700;margin-bottom:0.85rem;">Client Details</h3>
        <dl style="display:grid;gap:0.5rem;">
            @foreach([
                ['Client',   $ticket->client->display_name],
                ['Email',    $ticket->client->email],
                ['Phone',    $ticket->client->phone ?? '—'],
                ['Replies',  $ticket->replies->count()],
            ] as [$label,$value])
            <div style="display:flex;justify-content:space-between;padding:0.35rem 0;border-bottom:1px solid #f9fafb;">
                <dt style="font-size:0.68rem;color:#9ca3af;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;">{{ $label }}</dt>
                <dd style="font-size:0.78rem;color:#0f0f14;font-weight:500;">{{ $value }}</dd>
            </div>
            @endforeach
        </dl>
        <div style="margin-top:1rem;">
            <a href="{{ route('admin.clients.show',$ticket->client) }}" class="btn btn-outline btn-sm" style="width:100%;justify-content:center;">View Client Profile</a>
        </div>
    </div>
</div>

@endsection