{{-- resources/views/support/index.blade.php --}}
@extends('layouts.app')
@section('title', 'Support')
@section('page_title', 'Support')
@section('page_subtitle', 'Get help from the Kubhuka team')

@section('content')

{{-- Stats --}}
<div class="row g-3 mb-3">
    <div class="col-md-4">
        <div class="stat-card">
            <div class="stat-icon si-warning">
                <i class="bi bi-ticket"></i>
            </div>
            <div>
                <div class="stat-value">{{ $stats['open'] }}</div>
                <div class="stat-label">Open</div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="stat-card">
            <div class="stat-icon si-info">
                <i class="bi bi-arrow-repeat"></i>
            </div>
            <div>
                <div class="stat-value">{{ $stats['in_progress'] }}</div>
                <div class="stat-label">In Progress</div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="stat-card">
            <div class="stat-icon si-success">
                <i class="bi bi-check-circle"></i>
            </div>
            <div>
                <div class="stat-value">{{ $stats['resolved'] }}</div>
                <div class="stat-label">Resolved</div>
            </div>
        </div>
    </div>
</div>

{{-- Filters --}}
<div class="card mb-3">
    <div class="card-body" style="padding:12px 16px;">
        <form method="GET"
              class="d-flex align-items-center gap-2 flex-wrap">

            <select name="status"
                    class="form-select form-select-sm"
                    style="width:auto;"
                    onchange="this.form.submit()">
                <option value="">All Statuses</option>
                @foreach(['open','in_progress','resolved','closed'] as $s)
                    <option value="{{ $s }}"
                            {{ request('status') === $s ? 'selected' : '' }}>
                        {{ ucfirst(str_replace('_', ' ', $s)) }}
                    </option>
                @endforeach
            </select>

            <select name="priority"
                    class="form-select form-select-sm"
                    style="width:auto;"
                    onchange="this.form.submit()">
                <option value="">All Priorities</option>
                @foreach(['low','medium','high','urgent'] as $p)
                    <option value="{{ $p }}"
                            {{ request('priority') === $p ? 'selected' : '' }}>
                        {{ ucfirst($p) }}
                    </option>
                @endforeach
            </select>

            @if(request()->hasAny(['status','priority']))
                <a href="{{ tenant_route('support.index') }}"
                   class="btn btn-sm btn-outline-secondary">
                    Clear
                </a>
            @endif

            <div class="ms-auto">
                <a href="{{ tenant_route('support.create') }}"
                   class="btn btn-primary btn-sm">
                    <i class="bi bi-plus-lg me-1"></i>New Ticket
                </a>
            </div>
        </form>
    </div>
</div>

{{-- Tickets --}}
<div class="card">
    <div class="card-header">
        <span class="card-title">
            Support Tickets
            <span style="font-size:.75rem;font-weight:400;
                         color:var(--muted);margin-left:6px;">
                {{ $tickets->total() }} total
            </span>
        </span>
    </div>

    @if($tickets->isEmpty())
        <div class="card-body text-center py-5">
            <i class="bi bi-headset"
               style="font-size:2.5rem;color:var(--muted)"></i>
            <p class="fw-semibold mt-3 mb-1">No support tickets yet</p>
            <p class="text-muted" style="font-size:.82rem;">
                Need help? Open a ticket and our team will respond.
            </p>
            <a href="{{ tenant_route('support.create') }}"
               class="btn btn-primary btn-sm mt-2">
                Open a Ticket
            </a>
        </div>
    @else
        <div class="card-body" style="padding:0;">
            @foreach($tickets as $ticket)
                @php
                    $statusConfig = [
                        'open'        => ['bg'=>'#fef3c7','color'=>'#92400e'],
                        'in_progress' => ['bg'=>'#dbeafe','color'=>'#1e40af'],
                        'resolved'    => ['bg'=>'#d1fae5','color'=>'#065f46'],
                        'closed'      => ['bg'=>'#f1f5f9','color'=>'#64748b'],
                    ];
                    $sc = $statusConfig[$ticket->status] ?? $statusConfig['open'];

                    $priorityConfig = [
                        'low'    => ['color'=>'#64748b'],
                        'medium' => ['color'=>'#f59e0b'],
                        'high'   => ['color'=>'#ef4444'],
                        'urgent' => ['color'=>'#991b1b'],
                    ];
                    $pc = $priorityConfig[$ticket->priority] ?? $priorityConfig['medium'];
                @endphp

                <a href="{{ tenant_route('support.show', ['ticket' => $ticket->id]) }}"
                   style="text-decoration:none;color:inherit;display:block;">
                    <div style="display:flex;align-items:flex-start;gap:14px;
                                padding:16px 18px;
                                border-bottom:1px solid var(--border);
                                transition:background .1s;"
                         onmouseover="this.style.background='#fafbfc'"
                         onmouseout="this.style.background='transparent'">

                        {{-- Priority dot --}}
                        <div style="width:8px;height:8px;border-radius:50%;
                                    background:{{ $pc['color'] }};
                                    flex-shrink:0;margin-top:6px;"></div>

                        <div style="flex:1;min-width:0;">
                            <div style="display:flex;align-items:flex-start;
                                        justify-content:space-between;gap:12px;
                                        flex-wrap:wrap;">
                                <div>
                                    <div class="fw-semibold"
                                         style="font-size:.86rem;">
                                        {{ $ticket->subject }}
                                    </div>
                                    <div style="font-size:.72rem;
                                                color:var(--muted);
                                                margin-top:3px;
                                                display:flex;gap:10px;
                                                flex-wrap:wrap;">
                                        <span style="color:var(--clay);
                                                     font-weight:600;">
                                            {{ $ticket->reference }}
                                        </span>
                                        <span>
                                            {{ ucfirst(str_replace('_', ' ', $ticket->category)) }}
                                        </span>
                                        <span>
                                            {{ ucfirst($ticket->priority) }} priority
                                        </span>
                                        @if($ticket->admin)
                                            <span>
                                                Assigned to
                                                {{ $ticket->admin->name }}
                                            </span>
                                        @endif
                                    </div>
                                </div>
                                <div style="display:flex;align-items:center;
                                            gap:8px;flex-shrink:0;">
                                    <span style="font-size:.7rem;font-weight:600;
                                                 padding:2px 8px;border-radius:20px;
                                                 background:{{ $sc['bg'] }};
                                                 color:{{ $sc['color'] }};">
                                        {{ str_replace('_', ' ', $ticket->status) }}
                                    </span>
                                    <span style="font-size:.72rem;color:var(--muted);">
                                        {{ $ticket->created_at->diffForHumans() }}
                                    </span>
                                </div>
                            </div>
                        </div>

                        <i class="bi bi-chevron-right"
                           style="color:var(--border);font-size:.8rem;
                                  flex-shrink:0;margin-top:4px;"></i>
                    </div>
                </a>
            @endforeach
        </div>

        @if($tickets->hasPages())
            <div class="card-body"
                 style="border-top:1px solid var(--border);padding:12px 16px;">
                {{ $tickets->links() }}
            </div>
        @endif
    @endif
</div>

@endsection