@extends('user.support.layout')

@section('title', 'Support Dashboard')

@section('content')
<div class="container my-4">
    <h4 class="mb-4 text-center fw-bold">🎫 Support Ticket Dashboard</h4>

    <div class="row g-3">
        {{-- Open Tickets --}}
        <div class="col-6 col-md-3">
            <a href="{{ route('ticket.open') }}" class="text-decoration-none">
                <div class="card shadow-sm border-0 text-center h-100">
                    <div class="card-body">
                        <div class="mb-2 text-primary">
                            <i class="bi bi-envelope-open display-5"></i>
                        </div>
                        <h6 class="card-title mb-1 fw-semibold">Open Tickets</h6>
                        <h3 class="fw-bold text-primary mb-0">{{ $openCount }}</h3>
                        <p class="text-muted mb-0 small">View all open tickets</p>
                    </div>
                </div>
            </a>
        </div>

        {{-- In Progress Tickets --}}
        <div class="col-6 col-md-3">
            <a href="{{ route('ticket.inprogress') }}" class="text-decoration-none">
                <div class="card shadow-sm border-0 text-center h-100">
                    <div class="card-body">
                        <div class="mb-2 text-warning">
                            <i class="bi bi-hourglass-split display-5"></i>
                        </div>
                        <h6 class="card-title mb-1 fw-semibold">In Progress</h6>
                        <h3 class="fw-bold text-warning mb-0">{{ $inProgressCount }}</h3>
                        <p class="text-muted mb-0 small">Tickets being worked on</p>
                    </div>
                </div>
            </a>
        </div>

        {{-- Closed Tickets --}}
        <div class="col-6 col-md-3">
            <a href="{{ route('ticket.closed') }}" class="text-decoration-none">
                <div class="card shadow-sm border-0 text-center h-100">
                    <div class="card-body">
                        <div class="mb-2 text-success">
                            <i class="bi bi-check-circle display-5"></i>
                        </div>
                        <h6 class="card-title mb-1 fw-semibold">Closed Tickets</h6>
                        <h3 class="fw-bold text-success mb-0">{{ $closedCount }}</h3>
                        <p class="text-muted mb-0 small">Resolved and completed</p>
                    </div>
                </div>
            </a>
        </div>

        {{-- Create New Ticket --}}
        <div class="col-6 col-md-3">
            <a href="{{ route('ticket.create') }}" class="text-decoration-none">
                <div class="card shadow-sm border-0 text-center h-100 bg-primary text-white">
                    <div class="card-body">
                        <div class="mb-2">
                            <i class="bi bi-plus-circle display-5"></i>
                        </div>
                        <h6 class="card-title mb-1 fw-semibold">New Ticket</h6>
                        <p class="mb-0 small text-white-50">Submit a new request</p>
                    </div>
                </div>
            </a>
        </div>
    </div>

    {{-- Recent tickets table --}}
    <div class="mt-4">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-light fw-bold">
                Recent Tickets
            </div>
            <div class="card-body p-0">
                <table class="table table-hover mb-0 align-middle">
                    <thead class="table-light">
                        <tr>
                            <th>#</th>
                            <th>Subject</th>
                            <th>Status</th>
                            <th>Date</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($tickets ?? [] as $ticket)
                            <tr>
                                <td>{{ $ticket->st_no }}</td>
                                <td>
                                    <a href="{{ route('ticket.reply', $ticket->st_id) }}" class="text-decoration-none">
                                        {{ Str::limit($ticket->st_subject, 30) }}
                                    </a>
                                </td>
                                <td>
                                    @if($ticket->st_status == 'Open')
                                        <span class="badge bg-primary">Open</span>
                                    @elseif($ticket->st_status == 'In Progress')
                                        <span class="badge bg-warning text-dark">In Progress</span>
                                    @elseif($ticket->st_status == 'Closed')
                                        <span class="badge bg-success">Closed</span>
                                    @endif
                                </td>
                                <td>{{ \Carbon\Carbon::parse($ticket->created_at)->format('d M Y') }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="text-center text-muted">No tickets found</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection