{% extends 'stela_control/base_list.html' %}
{% load static %}
{% load i18n %}
{% load crispy_forms_tags %}
{% block bsCall %}

{% endblock  %}
{% block title %}
            <h1 class="oxanium mx-4 text-dark pt-3">{% trans "Booking Control" %} <i class="bi-briefcase-fill"></i></h1>
{% endblock  %}
{% block side_title %}
            <h3 class="oxanium mx-4 d-flex justify-content-end"><b>STELA {% trans "CONTROL DYNAMIC" %} | {% trans "Orders" %}</b></h3>
{% endblock  %}
{% block topButtons %}
    <div class="col-lg-2 col-md-6">
        <button type="submit" data-bs-toggle="modal" data-bs-target="#removeObj" onclick="removeObjListRequest('Booking')" class="btn btn-danger btn-danger px-3 mb-3 mx-2 delete-product hide" id="delete_btn">{% trans "Remove" %} <i class="fas fa-trash"></i></button>
    </div>
{% endblock  %}
{% block listTitle %}
        <h3 class="text-center fw-bold oxanium fs-4 my-2">{% trans "Booking List" %}</h3>
{% endblock  %}

{% block thead %}
    <th style="width: 5%;">Id</th>
    <th style="width: 20%;">{% trans "Customer" %}</th>
    <th style="width: 25%;">{% trans "Apointment Date" %}</th>
    <th style="width: 20%;">{% trans "Service" %}</th>
    <th style="width: 10%;">{% trans "View" %}</th>
    <th style="width: 10%;" class="text-center"> <input type="checkbox"  name="" id="parent"></th>          
{% endblock  %} 
{% block tbody %}
    {% for item in booking %}
        <tr>
            <td>{{item.id}}</td>
            <td class=text-link>{{item.name}}</td>
            
            <td>{{item.date}}</td>
            <td>
                <ul>
                    {% for list in item.booking_items.all %}
                        <li>{{list.service.title}}</li>
                    {% endfor %}
                </ul>
            </td>
            <td class="my-1"><a class="btn btn-sm btn-shappire" href="{{item.get_absolute_url}}" target=""><i class="fa-solid fa-right-to-bracket"></i></a></td>
            <td class="text-center check-product"><input type="checkbox" class="child" name="product_id[]" value="{{item.id}}" id="delete_product"></td>
        </tr>
    {% endfor %}
{% endblock  %}
{% block errors %}
{% endblock  %}
{% block extratable %}
        
{% endblock  %}
{% block modals %}
    <div class="modal fade max-overlay" id="removeObj" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="mb-3">
            <div class="container">
                <div class="row">
                    <div class="col-12"> 
                        <h3 class="text-center alert-title oxanium">{% trans "Are you sure?" %}</h3>
                        <div class="iconhigh">
                            <div id="anicon">

                            </div> 
                        </div>
                        <div id="contentAlert">
                            <p class="text-center text-dark">{% trans "This option cannot be reversed" %}.</p>   
                            <div class="d-flex justify-content-center">
                                <input type="hidden" id="removeData">
                                <input type="hidden" id="modelParent">
                                <button onclick="removeObjListComplete()" class="btn btn-danger remove-btn">{% trans "Remove" %}</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            </div>                   
        </div>
        </div>
    </div>
    <script>
        
    </script>
    <script src="https://stelacdn.s3.amazonaws.com/static/js/stela/booking-control/functions.js"></script>   
{% endblock  %}


