@extends('layouts.app')

@section('title', 'Tickets de Soporte')

@section('content')
<div x-data="{ viewMode: localStorage.getItem('viewMode_tickets') || 'list' }" class="animate-fadeIn">
    <div class="page-header">
        <div class="page-header-top">
            <h1 class="page-title">
                <i class="ph ph-ticket" style="color: var(--primary);"></i>
                Tickets de Soporte
                <span class="count">({{ $tickets->total() }} registros)</span>
            </h1>
            <div class="d-flex gap-sm" style="align-items: center; flex-wrap: wrap; justify-content: flex-end;">
                <div class="view-toggle-group">
                    <button @click="viewMode = 'list'; localStorage.setItem('viewMode_tickets', 'list')"
                            :class="{'active': viewMode === 'list'}"
                            class="view-toggle-btn"
                            title="Vista de Lista">
                        <i class="ph ph-list"></i>
                    </button>
                    <button @click="viewMode = 'card'; localStorage.setItem('viewMode_tickets', 'card')"
                            :class="{'active': viewMode === 'card'}"
                            class="view-toggle-btn"
                            title="Vista de Tarjetas">
                        <i class="ph ph-grid-four"></i>
                    </button>
                </div>
                @if(!Auth::user()->isTechnician() || Auth::user()->isAdmin())
                <a href="{{ route('tickets.create') }}" class="btn btn-primary btn-sm">
                    <i class="ph ph-plus"></i>
                    <span class="desktop-only">Nuevo Ticket</span>
                </a>
                @endif
                <a href="{{ route('support.chat') }}" class="btn btn-secondary btn-sm">
                    <i class="ph ph-headset"></i>
                    <span class="desktop-only">Chat de Soporte</span>
                </a>
            </div>
        </div>
    </div>

    <div class="card" style="margin-bottom: 20px; padding: 15px;">
        <form method="GET" action="{{ route('tickets.index') }}" style="display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end;">
            @php
                $currentStatus = request('status', '');
            @endphp
            <input type="hidden" name="status" value="{{ $currentStatus }}">

            <div class="form-group" style="margin: 0;">
                <label style="display: block; margin-bottom: 8px; font-size: 0.9rem; font-weight: 600; color: var(--text-secondary);">Filtrar por Estado</label>
                <div style="display: flex; gap: 8px; flex-wrap: wrap;">
                    <a href="{{ request()->fullUrlWithQuery(['status' => '']) }}" class="btn btn-sm" style="border: 1px solid #94a3b8; background: {{ $currentStatus == '' ? '#f1f5f9' : 'transparent' }}; color: {{ $currentStatus == '' ? '#0f172a' : 'var(--text-secondary)' }}; box-shadow: none; font-weight: 500;">Todos</a>
                    <a href="{{ request()->fullUrlWithQuery(['status' => 'open']) }}" class="btn btn-sm" style="border: 1px solid var(--warning); background: {{ $currentStatus == 'open' ? 'var(--warning)' : 'transparent' }}; color: {{ $currentStatus == 'open' ? '#fff' : 'var(--warning)' }}; box-shadow: none; font-weight: 500;">Abierto</a>
                    <a href="{{ request()->fullUrlWithQuery(['status' => 'in_progress']) }}" class="btn btn-sm" style="border: 1px solid var(--info); background: {{ $currentStatus == 'in_progress' ? 'var(--info)' : 'transparent' }}; color: {{ $currentStatus == 'in_progress' ? '#fff' : 'var(--info)' }}; box-shadow: none; font-weight: 500;">En Progreso</a>
                    <a href="{{ request()->fullUrlWithQuery(['status' => 'resolved']) }}" class="btn btn-sm" style="border: 1px solid var(--success); background: {{ $currentStatus == 'resolved' ? 'var(--success)' : 'transparent' }}; color: {{ $currentStatus == 'resolved' ? '#fff' : 'var(--success)' }}; box-shadow: none; font-weight: 500;">Resuelto</a>
                    <a href="{{ request()->fullUrlWithQuery(['status' => 'closed']) }}" class="btn btn-sm" style="border: 1px solid var(--text-muted); background: {{ $currentStatus == 'closed' ? 'var(--bg-hover)' : 'transparent' }}; color: {{ $currentStatus == 'closed' ? 'var(--text-secondary)' : 'var(--text-muted)' }}; box-shadow: none; font-weight: 500;">Cerrado</a>
                </div>
            </div>

            @if(Auth::user()->isAdmin())
            <div class="form-group" style="margin: 0;">
                <label for="technician_id" style="display: block; margin-bottom: 8px; font-size: 0.9rem; font-weight: 600; color: var(--text-secondary);">Técnico Asignado</label>
                <select name="technician_id" id="technician_id" style="padding: 4px 30px 4px 10px; border: 1px solid #94a3b8; border-radius: 4px; width: auto; font-size: 0.875rem; font-weight: 500; height: 36px; outline: none; background-color: transparent; color: var(--text-secondary); cursor: pointer;" onchange="this.form.submit()">
                    <option value="">Todos los técnicos</option>
                    @foreach($technicians as $tech)
                        <option value="{{ $tech->id }}" {{ request('technician_id') == $tech->id ? 'selected' : '' }}>{{ $tech->name }}</option>
                    @endforeach
                </select>
            </div>
            @endif

            @if(request()->hasAny(['status', 'technician_id']) && (request('status') !== '' || request('technician_id') !== ''))
                <a href="{{ route('tickets.index') }}" class="btn btn-outline btn-sm" style="height: 36px;">Limpiar filtros</a>
            @endif
        </form>
    </div>

    @php
        $statusLabels = ['open' => 'Abierto', 'in_progress' => 'En Progreso', 'resolved' => 'Resuelto', 'closed' => 'Cerrado'];
        $priorityLabels = ['low' => 'Baja', 'medium' => 'Media', 'high' => 'Alta', 'urgent' => 'Urgente'];
    @endphp

    @if($tickets->count() > 0)
        {{-- VISTA LISTA: Tabla --}}
        <div x-show="viewMode === 'list'" class="card" x-cloak>
            <div class="table-responsive">
                <table class="table" style="width: 100%; text-align: left; border-collapse: collapse;">
                    <thead>
                        <tr style="border-bottom: 1px solid var(--border-color, #eee);">
                            <th style="padding: 10px;">Ticket</th>
                            <th style="padding: 10px;">Empresa</th>
                            <th style="padding: 10px;">Título</th>
                            <th style="padding: 10px;">Estado</th>
                            <th style="padding: 10px;">Prioridad</th>
                            <th style="padding: 10px;">Asignado a</th>
                            <th style="padding: 10px;">Fecha</th>
                            <th style="padding: 10px;">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($tickets as $ticket)
                            <tr style="border-bottom: 1px solid var(--border-color, #eee);">
                                <td style="padding: 10px;"><strong>{{ $ticket->ticket_number }}</strong></td>
                                <td style="padding: 10px;">{{ $ticket->company ? $ticket->company->name : 'N/A' }}</td>
                                <td style="padding: 10px;">{{ $ticket->title }}</td>
                                <td style="padding: 10px;">
                                    @if(Auth::user()->isAdmin() || (Auth::user()->isTechnician() && $ticket->assigned_to === Auth::id()))
                                    <form action="{{ route('tickets.status', $ticket) }}" method="POST" style="margin: 0;">
                                        @csrf
                                        <select name="status" class="badge" style="padding: 4px 8px; border-radius: 4px; font-size: 0.8rem; background: {{ $ticket->status == 'open' ? '#ffc107' : ($ticket->status == 'resolved' ? '#28a745' : ($ticket->status == 'closed' ? '#6c757d' : '#17a2b8')) }}; color: {{ $ticket->status == 'open' ? '#000' : '#fff' }}; border: none; outline: none; cursor: pointer; text-transform: uppercase; font-weight: 600;" onchange="this.form.submit()">
                                            <option value="open" style="background: #fff; color: #000;" {{ $ticket->status == 'open' ? 'selected' : '' }}>Abierto</option>
                                            <option value="in_progress" style="background: #fff; color: #000;" {{ $ticket->status == 'in_progress' ? 'selected' : '' }}>En Progreso</option>
                                            <option value="resolved" style="background: #fff; color: #000;" {{ $ticket->status == 'resolved' ? 'selected' : '' }}>Resuelto</option>
                                            <option value="closed" style="background: #fff; color: #000;" {{ $ticket->status == 'closed' ? 'selected' : '' }}>Cerrado</option>
                                        </select>
                                    </form>
                                    @else
                                    <span class="badge" style="padding: 4px 8px; border-radius: 4px; font-size: 0.8rem; background: {{ $ticket->status == 'open' ? '#ffc107' : ($ticket->status == 'resolved' ? '#28a745' : ($ticket->status == 'closed' ? '#6c757d' : '#17a2b8')) }}; color: {{ $ticket->status == 'open' ? '#000' : '#fff' }}; text-transform: uppercase; font-weight: 600;">
                                        {{ $statusLabels[$ticket->status] ?? ucfirst($ticket->status) }}
                                    </span>
                                    @endif
                                </td>
                                <td style="padding: 10px;">{{ $priorityLabels[$ticket->priority] ?? ucfirst($ticket->priority) }}</td>
                                <td style="padding: 10px;">{{ $ticket->assignee ? $ticket->assignee->name : 'Sin asignar' }}</td>
                                <td style="padding: 10px;">{{ $ticket->created_at->format('d/m/Y H:i') }}</td>
                                <td style="padding: 10px;">
                                    <div class="d-flex gap-sm align-items-center">
                                        <a href="{{ route('tickets.show', $ticket) }}" class="btn btn-secondary" style="padding: 4px 10px; font-size: 0.9rem;">Ver</a>
                                        @if(auth()->user()->isAdmin())
                                            <form action="{{ route('tickets.destroy', $ticket) }}" method="POST" style="margin: 0;" onsubmit="return confirmDelete(event, '¿Estás seguro de que deseas eliminar este ticket? Esta acción no se puede deshacer.');">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-danger" style="padding: 4px 10px; font-size: 0.9rem;" title="Eliminar Ticket">
                                                    <i class="ph ph-trash"></i>
                                                </button>
                                            </form>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

        {{-- VISTA TARJETAS: Grid responsivo --}}
        <div class="card-grid-container" x-show="viewMode === 'card'" x-cloak>
            @foreach($tickets as $ticket)
                <div class="mobile-card">
                    <div class="mobile-card-header" style="align-items: flex-start;">
                        <div class="d-flex gap-sm" style="flex: 1; min-width: 0; margin-right: var(--space-sm); flex-wrap: wrap; align-items: center;">
                            <span style="font-weight: 700; color: var(--secondary); font-size: 1.05rem; word-break: break-all;">{{ $ticket->ticket_number }}</span>
                            @if(Auth::user()->isAdmin() || (Auth::user()->isTechnician() && $ticket->assigned_to === Auth::id()))
                            <form action="{{ route('tickets.status', $ticket) }}" method="POST" style="margin: 0;">
                                @csrf
                                <select name="status" class="badge" style="padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; background: {{ $ticket->status == 'open' ? '#ffc107' : ($ticket->status == 'resolved' ? '#28a745' : ($ticket->status == 'closed' ? '#6c757d' : '#17a2b8')) }}; color: {{ $ticket->status == 'open' ? '#000' : '#fff' }}; border: none; outline: none; cursor: pointer; text-transform: uppercase; font-weight: 600;" onchange="this.form.submit()">
                                    <option value="open" style="background: #fff; color: #000;" {{ $ticket->status == 'open' ? 'selected' : '' }}>Abierto</option>
                                    <option value="in_progress" style="background: #fff; color: #000;" {{ $ticket->status == 'in_progress' ? 'selected' : '' }}>En Progreso</option>
                                    <option value="resolved" style="background: #fff; color: #000;" {{ $ticket->status == 'resolved' ? 'selected' : '' }}>Resuelto</option>
                                    <option value="closed" style="background: #fff; color: #000;" {{ $ticket->status == 'closed' ? 'selected' : '' }}>Cerrado</option>
                                </select>
                            </form>
                            @else
                            <span class="badge" style="padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; background: {{ $ticket->status == 'open' ? '#ffc107' : ($ticket->status == 'resolved' ? '#28a745' : ($ticket->status == 'closed' ? '#6c757d' : '#17a2b8')) }}; color: {{ $ticket->status == 'open' ? '#000' : '#fff' }}; text-transform: uppercase; font-weight: 600;">
                                {{ $statusLabels[$ticket->status] ?? ucfirst($ticket->status) }}
                            </span>
                            @endif
                        </div>
                        <span class="badge badge-muted" style="font-size: 0.75rem; flex-shrink: 0; margin-top: 4px;">
                            {{ $priorityLabels[$ticket->priority] ?? ucfirst($ticket->priority) }}
                        </span>
                    </div>

                    <div class="mobile-card-body">
                        <div style="font-weight: 600; font-size: 0.95rem; margin-bottom: var(--space-sm); color: var(--text-primary); line-height: 1.4;">
                            {{ $ticket->title }}
                        </div>
                        <div class="mobile-card-row" style="flex-direction: row; justify-content: space-between; align-items: center;">
                            <span class="mobile-card-label">Empresa</span>
                            <span class="mobile-card-value">{{ $ticket->company ? $ticket->company->name : 'N/A' }}</span>
                        </div>
                        <div class="mobile-card-row" style="flex-direction: row; justify-content: space-between; align-items: center;">
                            <span class="mobile-card-label">Asignado a</span>
                            <span class="mobile-card-value">
                                <i class="ph ph-user" style="font-size: 0.8rem; vertical-align: middle;"></i> {{ $ticket->assignee ? $ticket->assignee->name : 'Sin asignar' }}
                            </span>
                        </div>
                        <div class="mobile-card-row" style="flex-direction: row; justify-content: space-between; align-items: center;">
                            <span class="mobile-card-label">Fecha</span>
                            <span class="mobile-card-value" style="font-size: 0.8rem;">{{ $ticket->created_at->format('d/m/Y H:i') }}</span>
                        </div>
                    </div>

                    <div class="mobile-card-actions" style="display: flex; gap: 8px;">
                        <a href="{{ route('tickets.show', $ticket) }}" class="btn btn-outline btn-sm" style="flex: 1;">
                            <i class="ph ph-eye"></i> Ver Detalles
                        </a>
                        @if(auth()->user()->isAdmin())
                            <form action="{{ route('tickets.destroy', $ticket) }}" method="POST" style="margin: 0;" onsubmit="return confirmDelete(event, '¿Estás seguro de que deseas eliminar este ticket?');">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-danger btn-sm" title="Eliminar Ticket">
                                    <i class="ph ph-trash"></i>
                                </button>
                            </form>
                        @endif
                    </div>
                </div>
            @endforeach
        </div>

        {{-- Paginación --}}
        <div class="pagination-wrapper" style="margin-top: 15px;">
            {{ $tickets->links() }}
        </div>
    @else
        <div class="card">
            <div class="empty-state" style="padding: 40px; text-align: center;">
                <i class="ph ph-ticket" style="font-size: 3rem; color: var(--text-muted); margin-bottom: var(--space-sm);"></i>
                <h3>No hay tickets registrados</h3>
                <p>No se encontraron tickets en esta vista.</p>
            </div>
        </div>
    @endif
</div>

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        @if(session('swal_error'))
            Swal.fire({
                title: 'Acceso Denegado',
                text: "{{ session('swal_error') }}",
                icon: 'warning',
                confirmButtonText: 'Entendido',
                customClass: {
                    confirmButton: 'btn btn-primary'
                }
            });
        @endif
    });
</script>
@endpush
@endsection