@extends('layout.mainlayout')

@section('content')
    <div class="page-wrapper cardhead">
        <div class="content container-fluid">

            @component('components.breadcrumb')
                @slot('title')
                    Ticket #{{ $ticket->id }}
                @endslot
            @endcomponent

            @if (session('success'))
                <div class="alert alert-success">{{ session('success') }}</div>
            @endif
            @if (session('error'))
                <div class="alert alert-danger">{{ session('error') }}</div>
            @endif
            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul class="mb-0">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            @php
                $currentUserId = Auth::id();
                $isAssignee = $currentUserId === $ticket->assignee_id;
                $isResolver = $currentUserId === $ticket->resolver_id;
                $canAssign = Auth::user()->can('ticket-assign');
                $canResolve = Auth::user()->can('ticket-resolve');
                $showActionGroup = $isAssignee || $isResolver || $canAssign || $canResolve;

                $statusClass = match ($ticket->status) {
                    'OPEN' => 'bg-warning text-dark',
                    'ASSIGNED' => 'bg-primary',
                    'IN_PROGRESS' => 'bg-info text-dark',
                    'PENDING' => 'bg-secondary',
                    'RESOLVED' => 'bg-success',
                    'CLOSED' => 'bg-dark',
                    'REOPENED' => 'bg-danger',
                    'ESCALATED' => 'bg-danger',
                    default => 'bg-light text-dark',
                };

                $priorityClass = match ($ticket->priority) {
                    'CRITICAL' => 'bg-danger',
                    'HIGH' => 'bg-danger',
                    'MEDIUM' => 'bg-warning text-dark',
                    'LOW' => 'bg-info text-dark',
                    default => 'bg-light text-dark',
                };
            @endphp

            <div class="ticket-hero card border-0 mb-3">
                <div class="card-body">
                    <div class="d-flex flex-wrap justify-content-between align-items-start gap-3">
                        <div>
                            <div class="ticket-kicker">Support Ticket</div>
                            <h3 class="mb-2">#{{ $ticket->id }} - {{ $ticket->subject }}</h3>
                            <div class="d-flex flex-wrap gap-2">
                                <span class="badge {{ $statusClass }}">{{ $ticket->status }}</span>
                                @if (!empty($ticket->priority))
                                    <span class="badge {{ $priorityClass }}">{{ $ticket->priority }} Priority</span>
                                @endif
                            </div>
                        </div>
                        <div class="ticket-meta">
                            <div><span>Created:</span> {{ $ticket->created_at?->format('d M Y, h:i A') ?? '—' }}</div>
                            <div><span>Due:</span> {{ $ticket->tat_at?->format('d M Y, h:i A') ?? '—' }}</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row g-3">
                <div class="col-xl-8">
                    <div class="card ticket-panel border-0 mb-3">
                        <div class="card-header border-0 pb-0">
                            <h5 class="mb-0">Ticket Summary</h5>
                        </div>
                        <div class="card-body">
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <div class="ticket-info-item">
                                        <div class="label">Raised By</div>
                                        <div class="value">{{ $ticket->user->name ?? '—' }}</div>
                                        <div class="hint">{{ $ticket->user->email ?? '—' }}</div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="ticket-info-item">
                                        <div class="label">Phone</div>
                                        <div class="value">{{ $ticket->user_phone ?? '—' }}</div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="ticket-info-item">
                                        <div class="label">Location</div>
                                        <div class="value">{{ $ticket->location->name ?? ($ticket->location_name ?? '—') }}</div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="ticket-info-item">
                                        <div class="label">Project</div>
                                        <div class="value">{{ $ticket->project->name ?? ($ticket->project_name ?? '—') }}</div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="ticket-info-item">
                                        <div class="label">Department</div>
                                        <div class="value">{{ $ticket->department->name ?? '—' }}</div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="ticket-info-item">
                                        <div class="label">Attachment</div>
                                        <div class="value">
                                            @if (!empty($ticket->attachment_path))
                                                <a href="{{ asset('storage/' . $ticket->attachment_path) }}" target="_blank" class="btn btn-sm btn-outline-primary">
                                                    View / Download
                                                </a>
                                            @else
                                                —
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <hr>
                            <div class="ticket-info-item">
                                <div class="label">Details</div>
                                <div class="value ticket-description">{{ $ticket->details }}</div>
                            </div>
                        </div>
                    </div>

                    <div class="card ticket-panel border-0">
                        <div class="card-header border-0 pb-0">
                            <h5 class="mb-0">Activity Timeline</h5>
                        </div>
                        <div class="card-body">
                            @if ($ticket->updates->isEmpty())
                                <p class="text-muted mb-0">No updates yet.</p>
                            @else
                                <div class="ticket-timeline">
                                    @foreach ($ticket->updates->sortByDesc('created_at') as $log)
                                        <div class="timeline-entry">
                                            <div class="timeline-dot"></div>
                                            <div class="timeline-card">
                                                <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
                                                    <div class="fw-semibold">{{ $log->user->name ?? 'System' }}</div>
                                                    <small class="text-muted">{{ $log->created_at?->format('d M Y, h:i A') }}</small>
                                                </div>
                                                @if ($log->old_status || $log->new_status)
                                                    <div class="small text-muted mt-1">
                                                        Status: {{ $log->old_status ?? '—' }} → {{ $log->new_status ?? '—' }}
                                                    </div>
                                                @endif
                                                @if ($log->priority_from || $log->priority_to)
                                                    <div class="small text-muted mt-1">
                                                        Priority: {{ $log->priority_from ?? '—' }} → {{ $log->priority_to ?? '—' }}
                                                    </div>
                                                @endif
                                                @if ($log->tat_due_at)
                                                    <div class="small text-muted mt-1">
                                                        TAT set to: {{ \Carbon\Carbon::parse($log->tat_due_at)->format('d M Y, h:i A') }}
                                                    </div>
                                                @endif
                                                @if ($log->comment)
                                                    <p class="mb-1 mt-2">{{ $log->comment }}</p>
                                                @endif
                                                @if (!empty($log->attachment_path))
                                                    <a href="{{ asset('storage/' . $log->attachment_path) }}" target="_blank" class="btn btn-sm btn-outline-primary mt-1">
                                                        View Attachment
                                                    </a>
                                                @endif
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            @endif
                        </div>
                    </div>
                </div>

                <div class="col-xl-4">
                    <div class="card ticket-panel border-0 mb-3">
                        <div class="card-header border-0 pb-0">
                            <h5 class="mb-0">Assignment</h5>
                        </div>
                        <div class="card-body">
                            <div class="ticket-info-item mb-3">
                                <div class="label">Assignee</div>
                                <div class="value">{{ $ticket->assignee->name ?? '—' }}</div>
                                <div class="hint">{{ $ticket->assignee->email ?? '' }}</div>
                            </div>
                            <div class="ticket-info-item">
                                <div class="label">Resolver</div>
                                <div class="value">{{ $ticket->resolver->name ?? '—' }}</div>
                                <div class="hint">{{ $ticket->resolver->email ?? '' }}</div>
                            </div>

                            @if (Auth::user()->can('ticket-assign'))
                                <hr>
                                <form action="{{ route('tickets.assign', $ticket->id) }}" method="POST">
                                    @csrf
                                    <div class="mb-2">
                                        <label class="form-label">{{ $ticket->resolver_id ? 'Transfer / Reassign Resolver' : 'Assign Resolver' }}</label>
                                        <select name="resolver_id" class="form-control" required>
                                            <option value="">Select Resolver</option>
                                            @foreach (\App\Models\TicketDepartmentRole::where('department_id', $ticket->department_id)->where('role', 'RESOLVER')->with('user')->get() as $map)
                                                <option value="{{ $map->user_id }}" @selected((int) $ticket->resolver_id === (int) $map->user_id)>
                                                    {{ $map->user->name ?? ('User #' . $map->user_id) }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="mb-2">
                                        <label class="form-label">Priority</label>
                                        <select name="priority" class="form-control" required>
                                            <option value="LOW" {{ $ticket->priority === 'LOW' ? 'selected' : '' }}>Low</option>
                                            <option value="MEDIUM" {{ $ticket->priority === 'MEDIUM' || !$ticket->priority ? 'selected' : '' }}>Medium</option>
                                            <option value="HIGH" {{ $ticket->priority === 'HIGH' ? 'selected' : '' }}>High</option>
                                            <option value="CRITICAL" {{ $ticket->priority === 'CRITICAL' ? 'selected' : '' }}>Critical</option>
                                        </select>
                                    </div>
                                    <div class="mb-2">
                                        <label class="form-label">Remark (optional)</label>
                                        <input type="text" name="remark" class="form-control" placeholder="Reason for transfer/reassign">
                                    </div>
                                    <button type="submit" class="btn btn-outline-primary w-100"
                                        onclick="return confirm('Confirm transfer/reassignment?')">
                                        {{ $ticket->resolver_id ? 'Transfer Ticket' : 'Assign Ticket' }}
                                    </button>
                                </form>
                            @endif
                        </div>
                    </div>

                    <div class="card ticket-panel border-0">
                        <div class="card-header border-0 pb-0">
                            <h5 class="mb-0">Actions</h5>
                        </div>
                        <div class="card-body">
                            @can('accept', $ticket)
                                @if ($ticket->status !== 'IN_PROGRESS')
                                    <form action="{{ route('tickets.accept', $ticket->id) }}" method="POST" class="mb-3">
                                        @csrf
                                        <label class="form-label">Accept & Set TAT</label>
                                        <input type="datetime-local" name="tat_at"
                                            value="{{ $ticket->tat_at ? $ticket->tat_at->format('Y-m-d\TH:i') : '' }}"
                                            class="form-control mb-2" required>
                                        <button type="submit" class="btn btn-outline-primary w-100"
                                            onclick="return confirm('Accept this ticket and set TAT?')">
                                            Accept & Set TAT
                                        </button>
                                    </form>
                                @endif
                            @endcan

                            @if ($showActionGroup)
                                <form action="{{ route('tickets.update-log', $ticket->id) }}" method="POST" enctype="multipart/form-data" class="mb-3">
                                    @csrf
                                    <label class="form-label">Add Remark / Update</label>
                                    <textarea name="comment" rows="3" class="form-control mb-2" placeholder="Describe action or update..." required>{{ old('comment') }}</textarea>
                                    <input type="file" name="attachment" class="form-control mb-2">
                                    <button type="submit" class="btn btn-secondary w-100">Add Update</button>
                                </form>

                                <form action="{{ route('tickets.update-status', $ticket->id) }}" method="POST" class="mb-3">
                                    @csrf
                                    <label class="form-label">Change Status</label>
                                    <select name="status" class="form-control mb-2" required>
                                        <option value="">Select Status</option>
                                        <option value="OPEN" {{ $ticket->status === 'OPEN' ? 'selected' : '' }}>Open</option>
                                        <option value="ASSIGNED" {{ $ticket->status === 'ASSIGNED' ? 'selected' : '' }}>Assigned</option>
                                        <option value="IN_PROGRESS" {{ $ticket->status === 'IN_PROGRESS' ? 'selected' : '' }}>In Progress</option>
                                        <option value="PENDING" {{ $ticket->status === 'PENDING' ? 'selected' : '' }}>Pending</option>
                                        <option value="RESOLVED" {{ $ticket->status === 'RESOLVED' ? 'selected' : '' }}>Resolved</option>
                                        <option value="CLOSED" {{ $ticket->status === 'CLOSED' ? 'selected' : '' }}>Closed</option>
                                        <option value="REOPENED" {{ $ticket->status === 'REOPENED' ? 'selected' : '' }}>Reopened</option>
                                        <option value="ESCALATED" {{ $ticket->status === 'ESCALATED' ? 'selected' : '' }}>Escalated</option>
                                    </select>
                                    <input type="text" name="message" class="form-control mb-2" placeholder="Optional remark">
                                    <input type="datetime-local" name="tat_due_at"
                                        value="{{ $ticket->tat_at ? $ticket->tat_at->format('Y-m-d\TH:i') : '' }}"
                                        class="form-control mb-2">
                                    <button type="submit" class="btn btn-primary w-100"
                                        onclick="return confirm('Save status change?')">
                                        Save Status
                                    </button>
                                </form>
                            @endif

                            @if ($isResolver || $canResolve)
                                <form action="{{ route('tickets.resolve', $ticket->id) }}" method="POST" class="mb-2">
                                    @csrf
                                    <input type="hidden" name="comment" value="Resolved by {{ Auth::user()->name ?? Auth::user()->email }}">
                                    <button type="submit" class="btn btn-success w-100"
                                        onclick="return confirm('Mark ticket as resolved?')">
                                        Mark Resolved
                                    </button>
                                </form>
                            @endif

                            <div class="d-flex flex-wrap gap-2 mt-2">
                                @can('reopen', $ticket)
                                    @if (in_array($ticket->status, ['RESOLVED', 'CLOSED']))
                                        <form action="{{ route('tickets.reopen', $ticket->id) }}" method="POST">
                                            @csrf
                                            <button class="btn btn-warning btn-sm" onclick="return confirm('Re-open this ticket?')">Reopen</button>
                                        </form>
                                    @endif
                                @endcan

                                @can('escalate', $ticket)
                                    @if (!in_array($ticket->status, ['CLOSED', 'ESCALATED']))
                                        <form action="{{ route('tickets.escalate', $ticket->id) }}" method="POST">
                                            @csrf
                                            <button class="btn btn-danger btn-sm" onclick="return confirm('Escalate this ticket?')">Escalate</button>
                                        </form>
                                    @endif
                                @endcan
                            </div>
                        </div>
                    </div>

                    <div class="mt-3">
                        <a href="{{ route('tickets.index') }}" class="btn btn-light w-100">
                            Back to Tickets
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
<style>
.ticket-hero,
.ticket-panel {
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(15, 23, 42, .08);
}
.ticket-hero {
    background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);
}
.ticket-kicker {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 11px;
    color: #64748b;
    font-weight: 700;
}
.ticket-meta {
    font-size: 13px;
    color: #475569;
}
.ticket-meta span {
    color: #0f172a;
    font-weight: 600;
}
.ticket-info-item .label {
    font-size: 12px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
    margin-bottom: 4px;
}
.ticket-info-item .value {
    font-size: 15px;
    color: #0f172a;
}
.ticket-info-item .hint {
    font-size: 13px;
    color: #64748b;
}
.ticket-description {
    white-space: pre-wrap;
    line-height: 1.6;
}
.ticket-timeline {
    position: relative;
}
.timeline-entry {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}
.timeline-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #2563eb;
    margin-top: 9px;
    flex: 0 0 auto;
}
.timeline-card {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px;
    width: 100%;
    background: #fff;
}
</style>
@endpush