{% extends "pos/base.html" %}
{% load static %}

{% block title %}Order‑Bookers{% endblock %}
{% block stylesheets %}
<link href="{% static 'vendor/datatables/dataTables.bootstrap4.min.css' %}" rel="stylesheet">
<link href="{% static 'css/pagination_buttons.css' %}" rel="stylesheet">
{% endblock %}

{% block heading %}Order‑Bookers{% endblock %}

{% block content %}
<div class="row ml-0 mb-3">
    <a href="{% url 'products:order_booker_add' %}">
        <button class="btn btn-success font-weight-bold">
            <i class="fas fa-plus mr-2"></i>Create new order‑booker
        </button>
    </a>

    <a href="{% url 'customers:booker_reassign' %}" class="btn btn-outline-success font-weight-bold">
      <i class="fas fa-plus mr-2"></i> Shift Old Areas to New Booker
    </a>


    
</div>

<div class="card shadow mb-12">
    <div class="card-header py-3">
        <h6 class="m-0 font-weight-bold text-primary">Order‑Booker list</h6>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-bordered table-hover" id="dataTable" width="100%" cellspacing="0">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th style="width:7%">#</th>
                        <th>Name</th>
                        <th>Address</th>
                        <th>Mobile</th>
                        <th>Phone</th>
                        <th class="text-center" style="width:15%">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for ob in order_bookers %}
                    <tr>
                        <td>{{ ob.id }}</td>
                        <td>{{ forloop.counter }}</td>
                        <td>{{ ob.name }}</td>
                        <td>{{ ob.address }}</td>
                        <td>{{ ob.mobile }}</td>
                        <td>{{ ob.phone }}</td>
                        <td class="text-center">
                            <a href="{% url 'products:order_booker_update' ob.id %}" class="text-decoration-none">
                                <button class="btn btn-warning btn-sm" data-bs-toggle="tooltip" title="Update">
                                    <i class="fas fa-pen"></i>
                                </button>
                            </a>
                            <button rel="delete" class="btn btn-danger btn-sm" data-toggle="modal"
                                    data-target="#deleteModal{{ob.id}}">
                                <i class="fas fa-trash"></i>
                            </button>

                            <!-- Modal -->
                            <div class="modal fade" id="deleteModal{{ob.id}}" tabindex="-1">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title">Delete order‑booker</h5>
                                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                                        </div>
                                        <div class="modal-body">
                                            Are you sure you want to delete {{ ob.name }}?
                                        </div>
                                        <div class="modal-footer">
                                            <button class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                                            <a href="{% url 'products:order_booker_delete' ob.id %}" class="text-decoration-none">
                                                <button class="btn btn-danger">Delete</button>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
<script src="{% static 'vendor/datatables/jquery.dataTables.min.js' %}"></script>
<script src="{% static 'vendor/datatables/dataTables.bootstrap4.min.js' %}"></script>
<script>
    $(function () {
        $('#dataTable').DataTable({
            deferRender: true,
            columnDefs: [
                { targets: [0], visible: false, searchable: false },
                { targets: [-1], orderable: false }
            ]
        });
    });
</script>
{% endblock %}