{% extends 'base.html.twig' %}

{% block title %}Správa požadavků podpory - Administrace{% endblock %}

{% block body %}
    <section class="admin-header">
        <div class="container">
            <div class="admin-header-content">
                <div>
                    <h1>Support Tickets</h1>
                    <p>Manage and respond to customer support requests</p>
                </div>
                <div class="admin-header-actions">
                    <a href="{{ path('app_admin_dashboard') }}" class="btn btn-secondary">Dashboard</a>
                </div>
            </div>
        </div>
    </section>

    <section class="admin-content">
        <div class="container">
            <div class="admin-grid">
                <aside class="admin-sidebar">
                    <nav class="admin-nav">
                        <a href="{{ path('app_admin_dashboard') }}" class="admin-nav-item">
                            <span class="nav-icon">📊</span>
                            Dashboard
                        </a>
                        <a href="{{ path('app_admin_bookings') }}" class="admin-nav-item">
                            <span class="nav-icon">📅</span>
                            All Bookings
                        </a>
                        <a href="{{ path('app_admin_service_providers') }}" class="admin-nav-item">
                            <span class="nav-icon">👥</span>
                            Service Providers
                        </a>
                        <a href="{{ path('app_admin_support_tickets') }}" class="admin-nav-item active">
                            <span class="nav-icon">💬</span>
                            Support Tickets
                        </a>
                    </nav>
                </aside>

                <main class="admin-main">
                    <div class="admin-section">
                        <div class="section-header">
                            <h2>All Support Tickets ({{ tickets.getTotalItemCount }})</h2>
                        </div>

                        {% if tickets.getTotalItemCount > 0 %}
                            <div class="tickets-table">
                                <table>
                                    <thead>
                                        <tr>
                                            <th>ID</th>
                                            <th>Status</th>
                                            <th>Customer</th>
                                            <th>Email</th>
                                            <th>Subject</th>
                                            <th>Created</th>
                                            <th>Replied</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for ticket in tickets %}
                                            <tr>
                                                <td><strong>#{{ ticket.id }}</strong></td>
                                                <td>
                                                    <span class="badge {{ ticket.statusBadgeClass }}">
                                                        {{ ticket.statusLabel }}
                                                    </span>
                                                </td>
                                                <td>{{ ticket.customer.fullName }}</td>
                                                <td><small>{{ ticket.email }}</small></td>
                                                <td>
                                                    <strong>{{ ticket.subject }}</strong>
                                                    <br>
                                                    <small class="text-muted">
                                                        {{ ticket.message|length > 60 ? ticket.message|slice(0, 60) ~ '...' : ticket.message }}
                                                    </small>
                                                </td>
                                                <td><small>{{ ticket.createdAt|date('M d, Y g:i A') }}</small></td>
                                                <td>
                                                    {% if ticket.repliedAt %}
                                                        <small>{{ ticket.repliedAt|date('M d, Y g:i A') }}</small>
                                                    {% else %}
                                                        <small class="text-muted">-</small>
                                                    {% endif %}
                                                </td>
                                                <td>
                                                    <div class="table-actions">
                                                        <a href="{{ path('app_admin_support_ticket_reply', {id: ticket.id}) }}"
                                                           class="btn-table-action">{{ ticket.adminReply ? 'View' : 'Reply' }}</a>
                                                        {% if ticket.status != 'closed' %}
                                                            <form method="post"
                                                                  action="{{ path('app_admin_support_ticket_close', {id: ticket.id}) }}"
                                                                  style="display: inline;"
                                                                  onsubmit="return confirm('Are you sure you want to close this ticket?');">
                                                                <input type="hidden" name="_token" value="{{ csrf_token('close' ~ ticket.id) }}">
                                                                <button type="submit" class="btn-table-action btn-secondary">Close</button>
                                                            </form>
                                                        {% endif %}
                                                    </div>
                                                </td>
                                            </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>

                            {# Pagination controls #}
                            <div class="pagination-wrapper">
                                {{ knp_pagination_render(tickets) }}
                            </div>
                        {% else %}
                            <div class="no-tickets-state">
                                <div class="empty-icon">💬</div>
                                <h3>No Support Tickets Yet</h3>
                                <p>No customer support tickets have been submitted yet.</p>
                            </div>
                        {% endif %}
                    </div>
                </main>
            </div>
        </div>
    </section>

    <style>
        .tickets-table {
            background: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .tickets-table table {
            width: 100%;
            border-collapse: collapse;
        }

        .tickets-table th {
            background: #f8f9fa;
            padding: 1rem;
            text-align: left;
            font-weight: 600;
            color: #495057;
            border-bottom: 2px solid #dee2e6;
        }

        .tickets-table td {
            padding: 1rem;
            border-bottom: 1px solid #f1f1f1;
        }

        .tickets-table tr:last-child td {
            border-bottom: none;
        }

        .tickets-table tbody tr:hover {
            background-color: #f8f9fa;
        }

        .badge {
            display: inline-block;
            padding: 0.25rem 0.75rem;
            border-radius: 12px;
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
        }

        .badge-warning {
            background: #fff3cd;
            color: #856404;
        }

        .badge-info {
            background: #d1ecf1;
            color: #0c5460;
        }

        .badge-success {
            background: #d4edda;
            color: #155724;
        }

        .text-muted {
            color: #6c757d;
        }

        .table-actions {
            display: flex;
            gap: 0.5rem;
        }

        .btn-table-action {
            padding: 0.375rem 0.75rem;
            font-size: 0.875rem;
            border-radius: 4px;
            border: none;
            cursor: pointer;
            text-decoration: none;
            background-color: #667eea;
            color: white;
            transition: background-color 0.2s;
        }

        .btn-table-action:hover {
            background-color: #5568d3;
        }

        .btn-table-action.btn-secondary {
            background-color: #6c757d;
        }

        .btn-table-action.btn-secondary:hover {
            background-color: #5a6268;
        }

        .no-tickets-state {
            text-align: center;
            padding: 4rem 2rem;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .empty-icon {
            font-size: 4rem;
            margin-bottom: 1rem;
        }

        .no-tickets-state h3 {
            margin-bottom: 0.5rem;
        }

        .no-tickets-state p {
            color: #6c757d;
            margin-bottom: 0;
        }

        .pagination-wrapper {
            margin-top: 2rem;
            display: flex;
            justify-content: center;
        }
    </style>
{% endblock %}