@extends('user.layouts')

@section('title', 'Help Request')

@section('header')

<style>

.help-view-page {
    padding-top: 22px;
    padding-bottom: 40px;
}

.help-view-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 22px;
}

.help-view-title {
    margin: 0;
    color: #20242a;
    font-size: 26px;
    font-weight: 700;
}

.help-view-subtitle {
    margin: 5px 0 0;
    color: #7b8494;
    font-size: 13px;
}

.back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 15px;
    border: 1px solid #dfe5ec;
    border-radius: 9px;
    background: #fff;
    color: #475569;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: .2s;
}

.back-btn:hover {
    background: #f8fafc;
    color: #2563eb;
}


/* MAIN CARD */

.help-detail-card {
    max-width: 950px;
    margin: auto;
    background: #fff;
    border: 1px solid #edf0f4;
    border-radius: 18px;
    box-shadow: 0 8px 25px rgba(15, 23, 42, .06);
    overflow: hidden;
}


/* USER HEADER */

.help-user-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px 25px;
    background: #f8fafc;
    border-bottom: 1px solid #edf0f4;
}

.help-user-avatar {
    width: 48px;
    height: 48px;
    min-width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef4ff;
    color: #2563eb;
    border-radius: 50%;
    font-size: 17px;
    font-weight: 700;
}

.help-user-name {
    margin: 0;
    color: #1f2937;
    font-size: 16px;
    font-weight: 700;
}

.help-user-meta {
    margin-top: 4px;
    color: #7b8494;
    font-size: 12px;
}


/* BODY */

.help-detail-body {
    padding: 25px;
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-bottom: 25px;
}

.detail-item {
    padding: 15px 16px;
    background: #fafbfc;
    border: 1px solid #edf0f4;
    border-radius: 11px;
}

.detail-label {
    margin-bottom: 6px;
    color: #94a3b8;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.detail-value {
    color: #1f2937;
    font-size: 13px;
    font-weight: 600;
}


/* SUBJECT */

.help-subject-section {
    margin-bottom: 20px;
}

.help-section-label {
    margin-bottom: 8px;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.help-subject {
    margin: 0;
    color: #1f2937;
    font-size: 19px;
    font-weight: 700;
}


/* MESSAGE */

.message-box {
    padding: 20px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}

.message-content {
    margin: 0;
    color: #475569;
    font-size: 14px;
    line-height: 1.8;
    white-space: pre-wrap;
    word-break: break-word;
}


/* DARK MODE */

body.dark-mode .help-detail-card {
    background: #172033;
    border-color: #273449;
}

body.dark-mode .help-view-title,
body.dark-mode .help-user-name,
body.dark-mode .detail-value,
body.dark-mode .help-subject {
    color: #f1f5f9;
}

body.dark-mode .help-user-header,
body.dark-mode .detail-item,
body.dark-mode .message-box {
    background: #111827;
    border-color: #273449;
}

body.dark-mode .message-content {
    color: #cbd5e1;
}

body.dark-mode .back-btn {
    background: #172033;
    border-color: #374151;
    color: #e2e8f0;
}


@media(max-width: 767px) {

    .help-view-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .detail-grid {
        grid-template-columns: 1fr;
    }

}

</style>

@endsection


@section('content')

@php

    $userName =
        optional($help->user)->name
        ?? 'N/A';

    $initial =
        $userName !== 'N/A'
            ? strtoupper(
                substr(
                    trim($userName),
                    0,
                    1
                )
            )
            : 'U';

@endphp


<div class="container-fluid page-wrapper help-view-page">


    {{-- HEADER --}}

    <div class="help-view-header">

        <div>

            <h3 class="help-view-title">
                Help Request
            </h3>

            <p class="help-view-subtitle">
                View complete support request details
            </p>

        </div>


        <a
            href="{{ route('helpcentre') }}"
            class="back-btn">

            <i class="fa-solid fa-arrow-left"></i>

            Back to Help Center

        </a>

    </div>



    {{-- DETAIL CARD --}}

    <div class="help-detail-card">


        {{-- USER HEADER --}}

        <div class="help-user-header">

            <div class="help-user-avatar">

                {{ $initial }}

            </div>


            <div>

                <h5 class="help-user-name">

                    {{ $userName }}

                </h5>

                <div class="help-user-meta">

                    Help Request #{{ $help->id }}

                </div>

            </div>

        </div>



        <div class="help-detail-body">


            {{-- DETAILS --}}

            <div class="detail-grid">


                {{-- USER ID --}}

                <div class="detail-item">

                    <div class="detail-label">
                        User ID
                    </div>

                    <div class="detail-value">

                        {{ $help->user_id ?? 'N/A' }}

                    </div>

                </div>



                {{-- AGENT ID --}}

                <div class="detail-item">

                    <div class="detail-label">
                        Agent ID
                    </div>

                    <div class="detail-value">

                        {{ optional($help->user)->agent_code ?? 'N/A' }}

                    </div>

                </div>



                {{-- CREATED DATE --}}

                <div class="detail-item">

                    <div class="detail-label">
                        Created Date
                    </div>

                    <div class="detail-value">

                        @if($help->created_at)

                            {{ $help->created_at->format('d-m-Y') }}

                        @else

                            N/A

                        @endif

                    </div>

                </div>



                {{-- CREATED TIME --}}

                <div class="detail-item">

                    <div class="detail-label">
                        Created Time
                    </div>

                    <div class="detail-value">

                        @if($help->created_at)

                            {{ $help->created_at->format('h:i A') }}

                        @else

                            N/A

                        @endif

                    </div>

                </div>

            </div>



            {{-- SUBJECT --}}

            <div class="help-subject-section">

                <div class="help-section-label">
                    Subject
                </div>

                <h4 class="help-subject">

                    {{ $help->subject ?? 'N/A' }}

                </h4>

            </div>



            {{-- MESSAGE --}}

            <div>

                <div class="help-section-label">
                    Message
                </div>

                <div class="message-box">

                    <p class="message-content">{{ $help->content ?? 'N/A' }}</p>

                </div>

            </div>

        </div>

    </div>

</div>

@endsection