@extends('dashboard.user.layouts.app')
@section('content')
    <div class="page-container">

        <div class="page-title-head d-flex align-items-sm-center flex-sm-row flex-column gap-2">
            <div class="flex-grow-1">
                <h4 class="fs-18 fw-semibold mb-0">{{ $title }}</h4>
            </div>

            <div class="text-end">
                <x-dashboard.user.breadcrumbs :breadcrumbs="$breadcrumbs" />
            </div>
        </div>

        <div class="row">
            <div class="col-xl-12 col-lg-12">
                <div class="col-lg-10 mx-auto">
                    <div class="card border-0 shadow rounded-4 overflow-hidden">

                        {{-- ── CARD HEADER ── --}}
                        <div
                            class="card-header bg-light border-bottom px-4 px-md-5 py-3 d-flex justify-content-between align-items-center gap-2 flex-wrap">
                            <div>
                                <p class="text-uppercase text-muted fw-bold mb-0"
                                    style="font-size:.68rem;letter-spacing:.08em;">Support Ticket</p>
                                <span class="fw-semibold">User {{ $title }}</span>
                            </div>
                            <span class="badge rounded-pill px-3 py-2 spt-status-badge"
                                style="font-size:.72rem;letter-spacing:.04em;">
                                {{ $support->status }}
                            </span>
                        </div>

                        <div class="card-body px-4 px-md-5 py-4">

                            {{-- ── TITLE + META STRIP ── --}}
                            <div
                                class="d-flex justify-content-between align-items-start flex-wrap gap-2 mb-4 pb-3 border-bottom">
                                <div>
                                    <h5 class="fw-bold mb-1">{{ $support->title }}</h5>
                                    <div class="d-flex align-items-center gap-2 flex-wrap">
                                        <span class="spt-priority-chip spt-priority--{{ strtolower($support->priority) }}">
                                            <span class="spt-priority-dot"></span>
                                            {{ $support->priority }} Priority
                                        </span>
                                        <span class="text-muted" style="font-size:.78rem;">
                                            <i class="bi bi-clock me-1"></i>{{ $support->created_at->diffForHumans() }}
                                        </span>
                                    </div>
                                </div>
                            </div>

                            {{-- ── DESCRIPTION ── --}}
                            <p class="text-uppercase text-muted fw-bold mb-3 pb-2 border-bottom"
                                style="font-size:.68rem;letter-spacing:.1em;">
                                Description
                            </p>
                            <div class="bg-light rounded-3 px-4 py-3 mb-4">
                                <p class="mb-0" style="font-size:.92rem;line-height:1.75;">{{ $support->description }}</p>
                            </div>

                            {{-- ── TICKET INFO GRID ── --}}
                            <p class="text-uppercase text-muted fw-bold mb-3 pb-2 border-bottom"
                                style="font-size:.68rem;letter-spacing:.1em;">
                                Ticket Details
                            </p>

                            <div class="row g-0 mb-4">

                                <div class="col-12 col-sm-6 py-3 pe-sm-4 border-bottom">
                                    <p class="text-muted mb-1" style="font-size:.75rem;font-weight:500;">Status</p>
                                    <strong>{{ $support->status }}</strong>
                                </div>

                                <div class="col-12 col-sm-6 py-3 ps-sm-4 border-bottom spt-border-start-sm">
                                    <p class="text-muted mb-1" style="font-size:.75rem;font-weight:500;">Priority</p>
                                    <strong>{{ $support->priority }}</strong>
                                </div>

                                <div class="col-12 col-sm-6 py-3 pe-sm-4 border-bottom">
                                    <p class="text-muted mb-1" style="font-size:.75rem;font-weight:500;">Opened</p>
                                    <strong>{{ $support->created_at->diffForHumans() }}</strong>
                                </div>

                                <div class="col-12 col-sm-6 py-3 ps-sm-4 border-bottom spt-border-start-sm">
                                    <p class="text-muted mb-1" style="font-size:.75rem;font-weight:500;">Last Updated</p>
                                    <strong>{{ $support->updated_at->diffForHumans() }}</strong>
                                </div>

                            </div>

                            {{-- ── EMAIL NOTICE ── --}}
                            <div
                                class="rounded-3 border border-primary-subtle bg-primary-subtle px-4 py-3 mb-4 d-flex align-items-start gap-3">
                                <i class="bi bi-envelope-fill text-primary mt-1 flex-shrink-0 fs-5"></i>
                                <div>
                                    <p class="fw-semibold mb-1" style="font-size:.85rem;">Ticket Updates via Email</p>
                                    <ul class="mb-0 ps-3" style="font-size:.82rem;line-height:1.75;color:#084298;">
                                        <li>All replies and updates regarding this ticket will be sent to your registered
                                            email address. Please check your inbox (and spam folder) for responses from our
                                            support team.</li>
                                        <li>Ticket statuses and progress are managed internally by our team.</li>
                                    </ul>
                                </div>
                            </div>

                        </div>{{-- /card-body --}}

                        <div class="float-start">
                            <a href="{{ url()->previous() }}" class="btn btn-primary">
                                <i class="bi bi-arrow-left-circle me-1"></i> Back
                            </a>
                        </div>
                    </div>{{-- /card --}}
                </div>
            </div>

            <style>
                /* Priority chip */
                .spt-priority-chip {
                    display: inline-flex;
                    align-items: center;
                    gap: .35rem;
                    font-size: .7rem;
                    font-weight: 600;
                    letter-spacing: .04em;
                    text-transform: uppercase;
                    padding: .22rem .7rem;
                    border-radius: 20px;
                }

                .spt-priority-dot {
                    width: 6px;
                    height: 6px;
                    border-radius: 50%;
                    flex-shrink: 0;
                }

                .spt-priority--high {
                    background: #fff1f2;
                    color: #dc3545;
                }

                .spt-priority--high .spt-priority-dot {
                    background: #dc3545;
                }

                .spt-priority--medium {
                    background: #fffbea;
                    color: #b45309;
                }

                .spt-priority--medium .spt-priority-dot {
                    background: #ffc107;
                }

                .spt-priority--low {
                    background: #f0faf4;
                    color: #198754;
                }

                .spt-priority--low .spt-priority-dot {
                    background: #198754;
                }

                /* Status badge neutral fallback */
                .spt-status-badge {
                    background: #f1f3f5;
                    color: #495057;
                }

                /* Responsive left border */
                @media (min-width: 576px) {
                    .spt-border-start-sm {
                        border-left: 1px solid #dee2e6 !important;
                    }
                }
            </style>
        </div>
    </div>
@endsection