@extends('admin.layout')

@section('title', 'Tablero tickets')
@section('page_title', 'Tablero de incidencias')
@section('container_class', 'container-fluid py-3')

@section('header_actions')
    <button type="button" class="btn btn-outline-success btn-sm" id="export-csv-btn">Exportar CSV</button>
@endsection

@section('content')
        <section class="card mt-shell-card mb-3">
            <div class="card-body p-4">
                <p class="mt-kicker mb-2">Support operations</p>
                <h2 class="h5 mb-1">Triage por prioridad y SLA</h2>
                <p class="text-secondary mb-0">Actualiza estado y asignacion directamente en el tablero para reducir tiempo de resolucion.</p>
            </div>
        </section>

        @include('portal.partials.ui.feedback-alert', [
            'id' => 'admin-board-alert',
            'tone' => 'danger',
            'hidden' => true,
            'message' => '',
        ])

        <form method="GET" class="card card-body mb-3 mt-admin-filter-card">
            <div class="row g-2 align-items-end">
                <div class="col-12 col-md-3">
                    <label class="form-label small mb-1">Buscar (asunto / id / reporter)</label>
                    <input type="text" name="q" value="{{ $filters['q'] }}" class="form-control form-control-sm" placeholder="Texto, id, email...">
                </div>
                <div class="col-6 col-md-2">
                    <label class="form-label small mb-1">Prioridad</label>
                    <select name="priority" class="form-select form-select-sm">
                        <option value="">Todas</option>
                        @foreach($priorities as $priority)
                            <option value="{{ $priority }}" @selected($filters['priority'] === $priority)>{{ $priority }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-6 col-md-2">
                    <label class="form-label small mb-1">Categoria</label>
                    <select name="category" class="form-select form-select-sm">
                        <option value="">Todas</option>
                        @foreach($categories as $category)
                            <option value="{{ $category }}" @selected($filters['category'] === $category)>{{ $category }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-6 col-md-2">
                    <label class="form-label small mb-1">Asignado</label>
                    <select name="assignee_id" class="form-select form-select-sm">
                        <option value="">Cualquiera</option>
                        @foreach($assignableUsers as $user)
                            <option value="{{ $user->id }}" @selected($filters['assignee_id'] === $user->id)>{{ $user->name }} ({{ $user->role }})</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-6 col-md-2 d-flex align-items-center pt-3">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="overdue_only" value="1" id="overdueCheck" @checked($filters['overdue_only'])>
                        <label class="form-check-label small" for="overdueCheck">Solo SLA vencido</label>
                    </div>
                </div>
                <div class="col-12 col-md-1 d-grid">
                    <button type="submit" class="btn btn-primary btn-sm">Filtrar</button>
                </div>
            </div>
        </form>

        <div class="row g-3 mt-kanban-board">
            @foreach($statuses as $status)
                @php
                    $total = $totalsByStatus[$status];
                    $page = $columnPages[$status];
                    $shown = $ticketsByStatus[$status]->count();
                    $totalPages = max(1, (int) ceil($total / $pageSize));
                @endphp
                <div class="col-12 col-md-6 col-xl">
                    <div class="card h-100 mt-kanban-column">
                        <div class="card-header d-flex justify-content-between align-items-center small fw-semibold">
                            <span class="text-uppercase">{{ str_replace('_', ' ', $status) }}</span>
                            <span class="badge bg-secondary">{{ $total }}</span>
                        </div>
                        <div class="card-body p-2 overflow-auto mt-kanban-column-body">
                            @forelse($ticketsByStatus[$status] as $ticket)
                                @php
                                    $isOverdue = $ticket->sla_due_at && $ticket->sla_due_at->isPast() && !in_array($ticket->status, ['resolved','closed'], true);
                                    $isEscalated = $ticket->escalated_at !== null;
                                @endphp
                                <div class="card mb-2 mt-ticket-card" data-ticket-id="{{ $ticket->id }}">
                                    <div class="card-body p-2">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <a href="{{ route('admin.support_ticket_detail', $ticket) }}" class="fw-semibold text-decoration-none">#{{ $ticket->id }}</a>
                                            <div class="d-flex gap-1 align-items-center">
                                                <span class="badge bg-dark">{{ $ticket->priority }}</span>
                                                @if($isEscalated)
                                                    <span class="mt-badge mt-badge-danger">Escalado</span>
                                                @endif
                                            </div>
                                        </div>
                                        <div class="small fw-semibold mt-1 mt-ticket-title">
                                            <a href="{{ route('admin.support_ticket_detail', $ticket) }}" class="text-decoration-none text-dark">{{ $ticket->subject }}</a>
                                        </div>
                                        <div class="small text-secondary mt-1">Reporter: {{ $ticket->reporter?->name }}</div>
                                        <div class="small text-secondary">Asignado: {{ $ticket->assignee?->name ?? 'Sin asignar' }}</div>
                                        <div class="small mt-1">
                                            SLA:
                                            @if($isOverdue)
                                                <span class="text-danger fw-semibold">{{ $ticket->sla_due_at }}</span>
                                            @else
                                                <span>{{ $ticket->sla_due_at }}</span>
                                            @endif
                                        </div>
                                        <div class="d-flex gap-1 mt-2 flex-wrap mt-ticket-actions">
                                            <select class="form-select form-select-sm quick-status w-auto" data-ticket-id="{{ $ticket->id }}" aria-label="Estado del ticket {{ $ticket->id }}">
                                                @foreach($statuses as $optStatus)
                                                    <option value="{{ $optStatus }}" @selected($ticket->status === $optStatus)>{{ str_replace('_', ' ', $optStatus) }}</option>
                                                @endforeach
                                            </select>
                                            <select class="form-select form-select-sm quick-assign w-auto" data-ticket-id="{{ $ticket->id }}" aria-label="Asignar ticket {{ $ticket->id }}">
                                                <option value="">- asignar -</option>
                                                @foreach($assignableUsers as $user)
                                                    <option value="{{ $user->id }}" @selected($ticket->assigned_to_user_id === $user->id)>{{ $user->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            @empty
                                <div class="text-secondary small p-2">Sin tickets</div>
                            @endforelse
                        </div>
                        @if($total > $shown || $page > 1)
                            <div class="card-footer p-1 d-flex justify-content-between small">
                                @php
                                    $queryParams = request()->query();
                                @endphp
                                <a class="btn btn-link btn-sm @disabled($page <= 1)"
                                   href="?{{ http_build_query(array_merge($queryParams, ['page_'.$status => $page - 1])) }}">
                                   &laquo; anterior
                                </a>
                                <span class="text-secondary align-self-center">pag {{ $page }}/{{ $totalPages }}</span>
                                <a class="btn btn-link btn-sm @disabled($page >= $totalPages)"
                                   href="?{{ http_build_query(array_merge($queryParams, ['page_'.$status => $page + 1])) }}">
                                   siguiente &raquo;
                                </a>
                            </div>
                        @endif
                    </div>
                </div>
            @endforeach
        </div>
    </div>

@endsection

@push('scripts')
    <script src="{{ asset('js/admin-ticket-board.js') }}" defer></script>
@endpush