<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>Support Ticket - EMI CREDITS</title>

    <style>
        *{
            box-sizing:border-box;
        }

        html,body{
            margin:0;
            padding:0;
            background:#eef3f8;
            font-family:Inter,Arial,sans-serif;
            color:#344966;
        }

        body{
            min-height:100vh;
        }

        .app{
            width:100%;
            max-width:520px;
            min-height:100vh;
            margin:0 auto;
            background:#f5f7fb;
            padding-bottom:88px;
        }

        .top{
            padding:19px 17px 10px;
            display:flex;
            align-items:center;
            gap:12px;
        }

        .back-btn{
            width:38px;
            height:38px;
            flex:none;
            border-radius:8px;
            background:#fff;
            border:1px solid #dfe7f1;
            color:#0b5ed7;
            display:flex;
            align-items:center;
            justify-content:center;
            text-decoration:none;
            font-size:18px;
            font-weight:900;
        }

        .greeting{
            min-width:0;
        }

        .eyebrow{
            font-size:11px;
            color:#94a3b8;
            font-weight:800;
            text-transform:uppercase;
            letter-spacing:.5px;
        }

        .greeting h1{
            margin:4px 0 0;
            color:#102a43;
            font-size:20px;
            font-weight:900;
        }

        .content{
            padding:8px 14px 20px;
        }

        .ticket-card{
            background:#fff;
            border:1px solid #dfe7f1;
            border-radius:8px;
            box-shadow:0 7px 22px rgba(16,42,67,.055);
            overflow:hidden;
        }

        .ticket-header{
            padding:15px;
            border-bottom:1px solid #e9eef5;
        }

        .ticket-header-top{
            display:flex;
            align-items:flex-start;
            justify-content:space-between;
            gap:10px;
        }

        .ticket-subject{
            color:#102a43;
            font-size:15px;
            font-weight:900;
            line-height:1.35;
        }

        .ticket-id{
            margin-top:6px;
            color:#94a3b8;
            font-size:9px;
            font-weight:700;
        }

        .status{
            padding:5px 8px;
            border-radius:8px;
            font-size:9px;
            font-weight:900;
            text-transform:uppercase;
            white-space:nowrap;
        }

        .status-open{
            background:#e8f1ff;
            color:#0b5ed7;
        }

        .status-pending{
            background:#fff4df;
            color:#b7791f;
        }

        .status-closed{
            background:#edf2f7;
            color:#64748b;
        }

        .messages{
            padding:14px;
        }

        .message{
            display:flex;
            margin-bottom:12px;
        }

        .message:last-child{
            margin-bottom:0;
        }

        .message.client{
            justify-content:flex-end;
        }

        .message.admin{
            justify-content:flex-start;
        }

        .message-box{
            max-width:86%;
            padding:11px 12px;
            border-radius:8px;
            font-size:11px;
            line-height:1.5;
        }

        .message.client .message-box{
            background:#0b5ed7;
            color:#fff;
        }

        .message.admin .message-box{
            background:#f1f5f9;
            border:1px solid #dfe7f1;
            color:#344966;
        }

        .message-author{
            margin-bottom:4px;
            font-size:9px;
            font-weight:900;
        }

        .message-time{
            margin-top:6px;
            font-size:8px;
            opacity:.7;
        }

        .reply-card{
            margin-top:12px;
            background:#fff;
            border:1px solid #dfe7f1;
            border-radius:8px;
            box-shadow:0 7px 22px rgba(16,42,67,.055);
            padding:14px;
        }

        .reply-title{
            margin-bottom:9px;
            color:#102a43;
            font-size:13px;
            font-weight:900;
        }

        textarea{
            width:100%;
            min-height:105px;
            padding:11px 12px;
            resize:vertical;
            border:1px solid #dce5f0;
            border-radius:8px;
            background:#f9fbfd;
            color:#102a43;
            font-family:inherit;
            font-size:11px;
            outline:none;
            line-height:1.5;
        }

        textarea:focus{
            background:#fff;
            border-color:#0b5ed7;
            box-shadow:0 0 0 3px rgba(11,94,215,.08);
        }

        .reply-actions{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:10px;
            margin-top:9px;
        }

        .closed-note{
            padding:10px 12px;
            border-radius:8px;
            background:#f1f5f9;
            border:1px solid #dfe7f1;
            color:#64748b;
            font-size:10px;
            font-weight:700;
            line-height:1.45;
        }

        .send-btn{
            min-height:38px;
            padding:0 15px;
            border:0;
            border-radius:8px;
            background:linear-gradient(135deg,#0b2d5c,#0b5ed7);
            color:#fff;
            font-family:inherit;
            font-size:10px;
            font-weight:900;
            cursor:pointer;
            white-space:nowrap;
        }

        .error{
            margin-top:5px;
            color:#a52834;
            font-size:9px;
            font-weight:700;
        }

        @media(min-width:700px){
            body{
                background:#e8eef5;
            }

            .app{
                box-shadow:0 0 50px rgba(31,41,55,.08);
            }
        }
    </style>
</head>

<body>

<div class="app">

    {{-- HEADER --}}
    <div class="top">

        <a href="{{ route('client.support.index') }}"
           class="back-btn">
            ←
        </a>

        <div class="greeting">
            <div class="eyebrow">EMI CREDITS</div>
            <h1>Support Ticket</h1>
        </div>

    </div>


    <main class="content">

        {{-- TICKET --}}
        <div class="ticket-card">

            <div class="ticket-header">

                <div class="ticket-header-top">

                    <div>

                        <div class="ticket-subject">
                            {{ $ticket->subject }}
                        </div>

                        <div class="ticket-id">
                            Ticket #{{ $ticket->id }}
                            ·
                            {{ $ticket->created_at?->format('d M Y, h:i A') }}
                        </div>

                    </div>


                    @php
                        $status = strtolower($ticket->status ?? 'open');
                    @endphp

                    <span class="status
                        {{ $status === 'closed'
                            ? 'status-closed'
                            : ($status === 'pending'
                                ? 'status-pending'
                                : 'status-open') }}">

                        {{ ucfirst($status) }}

                    </span>

                </div>

            </div>


            {{-- MESSAGES --}}
            <div class="messages">

                {{-- Original ticket message --}}
                @if(!empty($ticket->message))

                    <div class="message client">

                        <div class="message-box">

                            <div class="message-author">
                                You
                            </div>

                            <div>
                                {!! nl2br(e($ticket->message)) !!}
                            </div>

                            <div class="message-time">
                                {{ $ticket->created_at?->format('d M Y, h:i A') }}
                            </div>

                        </div>

                    </div>

                @endif


                {{-- Replies --}}
                @if(isset($ticket->messages) && $ticket->messages->count())

                    @foreach($ticket->messages as $message)

                        @php
                            $isClient = false;

                            if (isset($message->user_id)) {
                                $isClient = $message->user_id == auth()->id();
                            }

                            if (isset($message->sender_type)) {
                                $isClient = strtolower($message->sender_type) === 'client';
                            }
                        @endphp


                        <div class="message {{ $isClient ? 'client' : 'admin' }}">

                            <div class="message-box">

                                <div class="message-author">

                                    {{ $isClient ? 'You' : 'Support Team' }}

                                </div>

                                <div>
                                    {!! nl2br(e($message->message ?? '')) !!}
                                </div>

                                <div class="message-time">
                                    {{ $message->created_at?->format('d M Y, h:i A') }}
                                </div>

                            </div>

                        </div>

                    @endforeach

                @endif

            </div>

        </div>


        {{-- REPLY --}}
        @if($status !== 'closed')

            <div class="reply-card">

                <div class="reply-title">
                    Reply to Support
                </div>


                <form method="POST"
                      action="{{ route('client.support.message', $ticket) }}">

                    @csrf


                    <textarea
                        name="message"
                        placeholder="Type your reply..."
                        required
                    >{{ old('message') }}</textarea>


                    @error('message')
                        <div class="error">
                            {{ $message }}
                        </div>
                    @enderror


                    <div class="reply-actions">

                        <div></div>

                        <button type="submit"
                                class="send-btn">
                            Send Reply
                        </button>

                    </div>

                </form>

            </div>

        @else

            <div class="reply-card">

                <div class="closed-note">
                    This support ticket has been closed. You cannot send new replies to this ticket.
                </div>

            </div>

        @endif

    </main>


    {{-- EXISTING CLIENT BOTTOM NAV --}}
    @include('client.partials.bottom-nav')

</div>

</body>
</html>