{% extends "base.html" %}
{% load static %}
{% block title %}Booking Management{% endblock %}

{% block extra_css %}
    <link href="{% static 'assets/plugins/datatable/css/dataTables.bootstrap5.min.css' %}" rel="stylesheet" />
{% endblock %}

{% block content %}
<div class="page-breadcrumb d-none d-sm-flex align-items-center mb-1 justify-content-between">
    <div class="breadcrumb-title pe-3">Booking Management</div>
</div>

<div class="row">
    <hr>
    <div class="card">
        <div class="card-body">
            <form method="get" class="row g-2 mb-3">
                <div class="col-md-3">
                    <input type="search" name="q" value="{{ query }}" class="form-control" placeholder="Search booking id or mobile">
                </div>
                <div class="col-md-2">
                    <select name="status" class="form-select">
                        <option value="">All Status</option>
                        <option value="pending_confirmation" {% if status == 'pending_confirmation' %}selected{% endif %}>Pending</option>
                        <option value="confirmed" {% if status == 'confirmed' %}selected{% endif %}>Confirmed</option>
                        <option value="in_progress" {% if status == 'in_progress' %}selected{% endif %}>In Progress</option>
                        <option value="completed" {% if status == 'completed' %}selected{% endif %}>Completed</option>
                        <option value="cancelled" {% if status == 'cancelled' %}selected{% endif %}>Cancelled</option>
                        <option value="back_to_base" {% if status == 'back_to_base' %}selected{% endif %}>Back to Base</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <select name="pickup_type" class="form-select">
                        <option value="">All Pickup Types</option>
                        <option value="normal" {% if pickup_type == 'normal' %}selected{% endif %}>Normal</option>
                        <option value="express" {% if pickup_type == 'express' %}selected{% endif %}>Express</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <input type="date" name="date_from" value="{{ date_from }}" class="form-control" placeholder="From">
                </div>
                <div class="col-md-2">
                    <input type="date" name="date_to" value="{{ date_to }}" class="form-control" placeholder="To">
                </div>
                <div class="col-md-1">
                    <button class="btn btn-primary">Filter</button>
                </div>
            </form>
            <div class="table-responsive">
                <table id="booking_management" class="table table-striped table-bordered table-hover" style="width:100%">
                    <thead>
                        <tr>
                            <th>Booking ID</th>
                            <th>User</th>
                            <th>Status</th>
                            <th>Pickup Type</th>
                            <th>Schedule</th>
                            <th>Contact</th>
                            <th>Qty</th>
                            <th>Total</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for booking in bookings %}
                        <tr>
                            <td>{{ booking.booking_id|default:'None' }}</td>
                            <td>
                                {{ booking.user.first_name }} {{ booking.user.last_name }}
                            </td>
                            <td>
                                {% if booking.booking_status  ==  'completed' %}
                                    <span class="badge bg-success">{{ booking.get_booking_status_display }}</span>
                                {% elif booking.booking_status  ==  'cancelled' %}
                                    <span class="badge bg-danger">{{ booking.get_booking_status_display }}</span>
                                {% elif booking.booking_status  ==  'confirmed' %}
                                    <span class="badge bg-primary">{{ booking.get_booking_status_display }}</span>
                                {% elif booking.booking_status  ==  'back_to_base' %}
                                    <span class="badge bg-warning text-dark">{{ booking.get_booking_status_display }}</span>
                                {% else %}
                                    <span class="badge bg-secondary">{{ booking.get_booking_status_display }}</span>
                                {% endif %}
                            </td>
                            <td>{{ booking.get_pickup_type_display }}</td>
                            <td>{% if booking.schedule_pickup_date %}{{ booking.schedule_pickup_date|date:"M d, Y" }} <br> {{ booking.schedule_pickup_time }}{% endif %}</td>
                            <td>{{ booking.contact_name }}<br>{{ booking.contact_mobile }}</td>
                            <td>{{ booking.total_quantity }}</td>
                            <td>{{ booking.total_final_price }} {{ booking.currency_code }}</td>
                            <td>
                                <div class="d-flex gap-1">
                                    <a href="{% url 'booking-view' booking.id %}" class="btn btn-info btn-sm" title="View">
                                        <i class="bi bi-eye"></i>
                                    </a>
                                    <a href="{% url 'booking-edit' booking.id %}" class="btn btn-warning btn-sm" title="Edit">
                                        <i class="bi bi-pencil"></i>
                                    </a>
                                    <form action="{% url 'booking-delete' booking.id %}" method="post" onsubmit="return confirm('Are you sure you want to delete this booking?');" style="display:inline;">
                                        {% csrf_token %}
                                        <button type="submit" class="btn btn-danger btn-sm" title="Delete">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            
            <!-- Pagination -->
            {% if page_obj.has_other_pages %}
            <nav aria-label="Page navigation" class="mt-3">
                <ul class="pagination justify-content-center">
                    {% if page_obj.has_previous %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.previous_page_number }}&q={{ query|default:'' }}&status={{ status|default:'' }}&pickup_type={{ pickup_type|default:'' }}&date_from={{ date_from|default:'' }}&date_to={{ date_to|default:'' }}">Previous</a>
                    </li>
                    {% endif %}
                    
                    {% for num in page_obj.paginator.page_range %}
                        {% if page_obj.number == num %}
                        <li class="page-item active"><span class="page-link">{{ num }}</span></li>
                        {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                        <li class="page-item"><a class="page-link" href="?page={{ num }}&q={{ query|default:'' }}&status={{ status|default:'' }}&pickup_type={{ pickup_type|default:'' }}&date_from={{ date_from|default:'' }}&date_to={{ date_to|default:'' }}">{{ num }}</a></li>
                        {% endif %}
                    {% endfor %}

                    {% if page_obj.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.next_page_number }}&q={{ query|default:'' }}&status={{ status|default:'' }}&pickup_type={{ pickup_type|default:'' }}&date_from={{ date_from|default:'' }}&date_to={{ date_to|default:'' }}">Next</a>
                    </li>
                    {% endif %}
                </ul>
            </nav>
            {% endif %}
        </div>
    </div>
</div>

{% endblock %}

{% block extra_js %}
    <script src="{% static 'assets/plugins/datatable/js/jquery.dataTables.min.js' %}"></script>
    <script src="{% static 'assets/plugins/datatable/js/dataTables.bootstrap5.min.js' %}"></script>
    <script>
        $(document).ready(function() {
            $('#booking_management').DataTable({
                searching: false,
                paging: false,
                info: false,
                dom: 'Bfrtip',
                buttons: [
                    { extend: 'csv', exportOptions: { columns: ':not(:last-child)' } },
                    { extend: 'pdf', exportOptions: { columns: ':not(:last-child)' } },
                ]
            });
        });
    </script>
{% endblock %}