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

@section('content')
    <div class="page-head">
        <div>
            <h1>{{ $ticket->ticket_number }}</h1>
            <p>
                <a href="{{ route('customers.show', $ticket->customer) }}">{{ $ticket->customer->display_name }}</a>
                &middot; <span class="badge {{ match ($ticket->priority) { 'urgent' => 'danger', 'high' => 'warning', default => 'muted' } }}">
                    {{ $ticket->priority }}
                </span>
                &middot; <span class="badge {{ status_color($ticket->status) }}"><span class="dot"></span>{{ title_case_words($ticket->status) }}</span>
                @if ($ticket->is_breached)
                    &middot; <span class="badge danger">SLA breached</span>
                @endif
            </p>
        </div>
        <div class="page-actions">
            @if ($ticket->status !== 'resolved' && $ticket->status !== 'closed')
                <form method="POST" action="{{ route('tickets.resolve', $ticket) }}">@csrf
                    <button type="submit" class="btn success">Resolve</button>
                </form>
                <button type="button" class="btn secondary" data-modal="dispatch-modal">Dispatch technician</button>
            @else
                <form method="POST" action="{{ route('tickets.reopen', $ticket) }}">@csrf
                    <button type="submit" class="btn warning">Reopen</button>
                </form>
            @endif
            <button type="button" class="btn" data-modal="assign-modal">Reassign</button>
        </div>
    </div>

    <div class="grid grid-4 mb-2">
        @include('components.kpi', ['label' => 'First response', 'value' => $ticket->first_response_minutes !== null
            ? round($ticket->first_response_minutes).' min' : 'Pending',
            'variant' => $ticket->is_breached ? 'bad' : 'good', 'href' => '#'])
        @include('components.kpi', ['label' => 'Open for', 'value' => $ticket->created_at->diffForHumans(null, true),
            'href' => '#'])
        @include('components.kpi', ['label' => 'Replies', 'value' => $ticket->replies()->count(), 'variant' => 'info', 'href' => '#conversation'])
        @include('components.kpi', ['label' => 'Priority', 'value' => title_case_words($ticket->priority),
            'variant' => $ticket->priority === 'urgent' ? 'bad' : '', 'href' => '#'])
    </div>

    <div class="grid grid-2">
        {{-- Conversation --}}
        <div class="card" id="conversation">
            <div class="card-head">
                <h3>Conversation</h3>
                <span class="sub">{{ $ticket->replies()->count() }} message(s)</span>
            </div>
            <div class="card-body">
                @if ($ticket->replies->isNotEmpty())
                    <div class="timeline">
                        @foreach ($ticket->replies as $reply)
                            <div class="timeline-item {{ $reply->is_internal ? '' : ($reply->is_customer_reply ? '' : 'ok') }}">
                                <div class="t-head">
                                    {{ $reply->author_name }}
                                    @if ($reply->is_internal)
                                        <span class="badge warning">internal note</span>
                                    @elseif ($reply->is_customer_reply)
                                        <span class="badge muted">customer</span>
                                    @else
                                        <span class="badge info">agent</span>
                                    @endif
                                </div>
                                <div class="t-meta">{{ $reply->created_at->format('d M Y H:i') }}</div>
                                <div class="t-body" style="white-space:pre-wrap;">{{ $reply->body }}</div>
                            </div>
                        @endforeach
                    </div>
                @else
                    @include('components.empty-state', ['icon' => '&#9993;', 'title' => 'No replies yet'])
                @endif

                <hr style="border:none;border-top:1px solid var(--ink-200);margin:1rem 0;">

                <form method="POST" action="{{ route('tickets.reply', $ticket) }}">
                    @csrf
                    <div class="field mb-1">
                        <label>Add a reply <span class="req">*</span></label>
                        <textarea name="body" rows="5" required placeholder="Type your response…"></textarea>
                    </div>
                    <div class="flex-between">
                        <div class="flex gap-2">
                            <label class="check"><input type="checkbox" name="is_internal" value="1"> Internal note only</label>
                            <label class="check"><input type="checkbox" name="notify_customer" value="1" checked> Notify customer</label>
                        </div>
                        <div class="btn-group">
                            @if ($canned->isNotEmpty())
                                <select id="canned-select" class="small">
                                    <option value="">Insert canned response…</option>
                                    @foreach ($canned as $response)
                                        <option value="{{ $response->body }}">{{ $response->title }}</option>
                                    @endforeach
                                </select>
                            @endif
                            <button type="submit" class="btn">Send reply</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        {{-- Details --}}
        <div>
            <div class="card mb-2">
                <div class="card-head"><h3>Ticket detail</h3></div>
                <div class="card-body">
                    <dl class="dl">
                        <dt>Ticket number</dt><dd class="mono">{{ $ticket->ticket_number }}</dd>
                        <dt>Subject</dt><dd>{{ $ticket->subject }}</dd>
                        <dt>Category</dt><dd>{{ $ticket->category?->name ?? 'General' }}</dd>
                        <dt>Channel</dt><dd>{{ title_case_words($ticket->channel) }}</dd>
                        <dt>Opened by</dt><dd>{{ $ticket->createdBy?->name ?? 'System' }}</dd>
                        <dt>Assignee</dt><dd>{{ $ticket->assignee?->name ?? 'Unassigned' }}</dd>
                        <dt>Service</dt>
                        <dd>@if ($ticket->service)
                                <a href="{{ route('services.show', $ticket->service) }}" class="mono">{{ $ticket->service->service_number }}</a>
                            @else — @endif</dd>
                        <dt>Work order</dt>
                        <dd>@if ($ticket->workOrders->count() > 0)
                                <a href="{{ route('work-orders.show', $ticket->workOrders->first()) }}" class="mono">
                                    {{ $ticket->workOrders->first()->work_order_number }}</a>
                            @else — @endif</dd>
                        <dt>Linked alert</dt>
                        <dd>@if ($ticket->alert)
                                {{ $ticket->alert->title }}
                            @else — @endif</dd>
                    </dl>
                </div>
            </div>

            <div class="card mb-2">
                <div class="card-head"><h3>SLA</h3></div>
                <div class="card-body">
                    <dl class="dl">
                        <dt>First response due</dt>
                        <dd>{{ $ticket->first_response_due_at?->format('d M Y H:i') ?? '—' }}
                            @if ($ticket->first_responded_at)
                                <span class="badge success">met</span>
                            @elseif ($ticket->first_response_due_at && $ticket->first_response_due_at->isPast())
                                <span class="badge danger">missed</span>
                            @endif
                        </dd>
                        <dt>First response at</dt><dd>{{ $ticket->first_responded_at?->format('d M Y H:i') ?? 'Not yet' }}</dd>
                        <dt>Resolution due</dt>
                        <dd>{{ $ticket->resolution_due_at?->format('d M Y H:i') ?? '—' }}
                            @if ($ticket->resolved_at)
                                <span class="badge success">met</span>
                            @elseif ($ticket->resolution_due_at && $ticket->resolution_due_at->isPast())
                                <span class="badge danger">missed</span>
                            @endif
                        </dd>
                        <dt>Resolved at</dt><dd>{{ $ticket->resolved_at?->format('d M Y H:i') ?? 'Not resolved' }}</dd>
                        <dt>Resolution</dt><dd>{{ $ticket->resolution ?: '—' }}</dd>
                        <dt>Customer rating</dt>
                        <dd>{{ $ticket->satisfaction_rating ? str_repeat('★', $ticket->satisfaction_rating).str_repeat('☆', 5 - $ticket->satisfaction_rating) : 'Not rated' }}</dd>
                    </dl>
                </div>
            </div>

            @if ($ticket->status === 'resolved')
                <div class="card">
                    <div class="card-head"><h3>Close out</h3></div>
                    <div class="card-body">
                        <form method="POST" action="{{ route('tickets.rate', $ticket) }}" class="mb-2">
                            @csrf
                            <div class="field mb-1">
                                <label>Record customer satisfaction (1–5) <span class="req">*</span></label>
                                <select name="rating" required>
                                    @for ($i = 5; $i >= 1; $i--)
                                        <option value="{{ $i }}">{{ str_repeat('★', $i) }} {{ $i }}</option>
                                    @endfor
                                </select>
                            </div>
                            <div class="field mb-1">
                                <label>Feedback</label>
                                <textarea name="feedback" rows="2"></textarea>
                            </div>
                            <button type="submit" class="btn secondary sm">Save rating</button>
                        </form>
                        <form method="POST" action="{{ route('tickets.close', $ticket) }}">
                            @csrf
                            <button type="submit" class="btn sm">Close ticket</button>
                        </form>
                    </div>
                </div>
            @endif
        </div>
    </div>

    <div class="modal-backdrop" id="assign-modal">
        <div class="modal">
            <form method="POST" action="{{ route('tickets.assign', $ticket) }}">
                @csrf
                <div class="modal-head"><h3>Reassign ticket</h3>
                    <button type="button" class="modal-close" data-modal-close>&times;</button></div>
                <div class="modal-body">
                    <div class="form-grid cols-1">
                        <div class="field"><label>Assignee <span class="req">*</span></label>
                            <select name="assigned_to" required>
                                <option value="">Unassigned (queue)</option>
                                @foreach ($assignees as $assignee)
                                    <option value="{{ $assignee->id }}" @selected($ticket->assigned_to == $assignee->id)>{{ $assignee->name }}</option>
                                @endforeach
                            </select></div>
                        <div class="field"><label>Priority <span class="req">*</span></label>
                            <select name="priority" required>
                                @foreach (['low','normal','high','urgent'] as $p)
                                    <option value="{{ $p }}" @selected($ticket->priority === $p)>{{ title_case_words($p) }}</option>
                                @endforeach
                            </select></div>
                        <div class="field"><label>Note</label>
                            <textarea name="note" rows="2" placeholder="Why the reassignment?"></textarea></div>
                    </div>
                </div>
                <div class="modal-foot">
                    <button type="button" class="btn secondary" data-modal-close>Cancel</button>
                    <button type="submit" class="btn">Reassign</button>
                </div>
            </form>
        </div>
    </div>

    <div class="modal-backdrop" id="dispatch-modal">
        <div class="modal">
            <form method="POST" action="{{ route('tickets.dispatch', $ticket) }}">
                @csrf
                <div class="modal-head"><h3>Dispatch a technician</h3>
                    <button type="button" class="modal-close" data-modal-close>&times;</button></div>
                <div class="modal-body">
                    <div class="form-grid cols-1">
                        <div class="field"><label>Job type <span class="req">*</span></label>
                            <select name="type" required>
                                @foreach (['repair','maintenance','inspection'] as $t)
                                    <option value="{{ $t }}">{{ title_case_words($t) }}</option>
                                @endforeach
                            </select></div>
                        <div class="field"><label>Technician</label>
                            <select name="technician_id">
                                <option value="">Assign later</option>
                                @foreach ($technicians as $technician)
                                    <option value="{{ $technician->id }}" @disabled(! $technician->is_available)>
                                        {{ $technician->name }} {{ $technician->is_available ? '' : '(at capacity)' }}
                                    </option>
                                @endforeach
                            </select></div>
                        <div class="field"><label>Scheduled start</label>
                            <input type="datetime-local" name="scheduled_start"></div>
                        <div class="field"><label>Priority <span class="req">*</span></label>
                            <select name="priority" required>
                                @foreach (['low','normal','high','urgent'] as $p)
                                    <option value="{{ $p }}" @selected($ticket->priority === $p)>{{ title_case_words($p) }}</option>
                                @endforeach
                            </select></div>
                        <div class="field"><label>Job description</label>
                            <textarea name="description" rows="3">{{ $ticket->subject }}</textarea></div>
                    </div>
                </div>
                <div class="modal-foot">
                    <button type="button" class="btn secondary" data-modal-close>Cancel</button>
                    <button type="submit" class="btn">Create work order</button>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
<script>
(function () {
    var select = document.getElementById('canned-select');
    var textarea = document.querySelector('textarea[name=body]');
    if (select && textarea) {
        select.addEventListener('change', function () {
            if (select.value) {
                textarea.value = (textarea.value ? textarea.value + '\n\n' : '') + select.value;
                textarea.focus();
                select.selectedIndex = 0;
            }
        });
    }
})();
</script>
@endpush