@extends('admin.layouts.app')

@section('title', 'Support | EMI CREDITS Admin')

@section('page-title', 'Support')

@section('page-description', 'Manage client support tickets')

@section('content')

@push('styles')
<link rel="stylesheet" href="{{ asset('admin/css/support.css') }}">
@endpush

<div class="support-content">

    <div class="support-header">

        <h2>
            Client Support
        </h2>

        <p>
            View and manage client support conversations.
        </p>

    </div>


    @if(session('success'))

        <div style="
            margin-bottom:15px;
            padding:12px 14px;
            border-radius:9px;
            background:#ecfdf5;
            border:1px solid #bbf7d0;
            color:#166534;
            font-size:10px;
            font-weight:700;
        ">
            ✓ {{ session('success') }}
        </div>

    @endif


    @if(session('error'))

        <div style="
            margin-bottom:15px;
            padding:12px 14px;
            border-radius:9px;
            background:#fff1f2;
            border:1px solid #fecdd3;
            color:#be123c;
            font-size:10px;
            font-weight:700;
        ">
            ✕ {{ session('error') }}
        </div>

    @endif


    @if($tickets->count())

        <div class="ticket-list">

            @foreach($tickets as $ticket)

                <a
                    href="{{ route('admin.support.show', $ticket) }}"
                    class="ticket-card"
                >

                    <div class="ticket-main">

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

                        <div class="ticket-client">

                            Client:
                            {{ $ticket->client->name ?? 'Unknown' }}

                        </div>

                        <div class="ticket-date">

                            {{ $ticket->created_at
                                ? $ticket->created_at->format('d M Y, h:i A')
                                : ''
                            }}

                        </div>

                    </div>


                    <div class="ticket-right">

                        @if($ticket->status === 'pending')

                            <span class="status status-pending">
                                <span class="status-dot"></span>
                                Pending
                            </span>

                        @elseif($ticket->status === 'in_progress')

                            <span class="status status-progress">
                                <span class="status-dot"></span>
                                In Progress
                            </span>

                        @else

                            <span class="status status-closed">
                                <span class="status-dot"></span>
                                Closed
                            </span>

                        @endif

                    </div>

                </a>

            @endforeach

        </div>

    @else

        <div class="empty-box">
            No support tickets found.
        </div>

    @endif

</div>

@endsection