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

{% block title %}Manage Bookings - Admin{% endblock %}

{% block body %}
    <section class="admin-header">
        <div class="container">
            <div class="admin-header-content">
                <div>
                    <h1>All Bookings</h1>
                    <p>Manage and monitor all customer bookings</p>
                </div>
                <div class="admin-header-actions">
                    <a href="{{ path('app_admin_booking_new') }}" class="btn btn-primary">+ New Booking</a>
                    <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 active">
                            <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">
                            <span class="nav-icon">💬</span>
                            Support Tickets
                        </a>
                    </nav>
                </aside>

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

                        {% if bookings.getTotalItemCount > 0 %}
                            <div class="bookings-table">
                                <table>
                                    <thead>
                                        <tr>
                                            <th>ID</th>
                                            <th>Date & Time</th>
                                            <th>Customer</th>
                                            <th>Contact</th>
                                            <th>Provider</th>
                                            <th>Service</th>
                                            <th>Hours</th>
                                            <th>Amount</th>
                                            <th>Status</th>
                                            <th>Booked On</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for booking in bookings %}
                                            <tr>
                                                <td><strong>#{{ booking.id }}</strong></td>
                                                <td>
                                                    {{ booking.serviceDate|date('M d, Y') }}<br>
                                                    <small>{{ booking.serviceTime|date('g:i A') }}</small>
                                                </td>
                                                <td>{{ booking.customerName }}</td>
                                                <td>
                                                    <small>{{ booking.customerEmail }}</small><br>
                                                    <small>{{ booking.customerPhone }}</small>
                                                </td>
                                                <td>{{ booking.serviceProvider.user.fullName }}</td>
                                                <td>{{ booking.service.name }}</td>
                                                <td>{{ booking.hours }}h</td>
                                                <td><strong>${{ booking.totalPrice }}</strong></td>
                                                <td>
                                                    <span class="badge badge-{{ booking.status }}">
                                                        {{ booking.status|title }}
                                                    </span>
                                                </td>
                                                <td><small>{{ booking.createdAt|date('M d, Y') }}</small></td>
                                                <td>
                                                    <div class="table-actions">
                                                        <a href="{{ path('app_admin_booking_edit', {id: booking.id}) }}" 
                                                           class="btn-table-action">Edit</a>
                                                        <form method="post" 
                                                              action="{{ path('app_admin_booking_delete', {id: booking.id}) }}" 
                                                              style="display: inline;"
                                                              onsubmit="return confirm('Are you sure you want to delete this booking?');">
                                                            <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ booking.id) }}">
                                                            <button type="submit" class="btn-table-action btn-danger">Delete</button>
                                                        </form>
                                                    </div>
                                                </td>
                                            </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>

                            {# Pagination controls #}
                            <div class="pagination-wrapper">
                                {{ knp_pagination_render(bookings) }}
                            </div>
                        {% else %}
                            <div class="no-bookings-state">
                                <div class="empty-icon">📅</div>
                                <h3>No Bookings Yet</h3>
                                <p>No customer bookings have been created yet.</p>
                                <a href="{{ path('app_admin_booking_new') }}" class="btn btn-primary">+ Create First Booking</a>
                            </div>
                        {% endif %}
                    </div>
                </main>
            </div>
        </div>
    </section>
{% endblock %}