{% extends 'base_layout.html' %}

{% block content%}
                <main>
                    <div class="container-fluid px-4">
                        <h1 class="mt-4"> Droni 
                            <!-- Button trigger modal -->
                            <button type="button" class="btn btn-outline-dark" data-bs-toggle="modal" data-bs-target="#addDrone">
                               <i class="fa-solid fa-plus"></i> Pievienot 
                            </button>
                        </h1>
                            <!-- Modal -->
                            <div class="modal fade " id="addDrone" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content ">
                                        <div class="modal-header">
                                            <h3 class="modal-title" id="staticBackdropLabel">Pievienot Dronu:</h3>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                        </div>
                                    <div class="modal-body">
                                            <form method = 'POST' enctype="multipart/form-data">
                                            {% csrf_token %}
                                            <table class = 'table'>
                                        <div class="form-group row">
                                            <label for="drone_name" class="col-4 col-form-label">Nosaukums:</label>
                                                <div class="col-8 mb-3">
                                                    <input id="drone_name" name="drone_name" type="text"  class="form-control" required>
                                                </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="drone_model" class="col-4 col-form-label">Modelis:</label>
                                                <div class="col-8 mb-3">
                                                    <select id="drone_model" name="drone_model" class="form-select">
                                                        {% for model in droneModels %}
                                                        <option value={{model.id}} >{{model.maker}} {{model.model}}</option>
                                                        {% endfor %}
                                                    </select>
                                                </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="drone_block" class="col-4 col-form-label">Kvartāls:</label>
                                                <div class="col-8 mb-3">
                                                    <select id="drone_block" name="drone_block" class="form-select">
                                                        {% for garden in gardens%}
                                                        {% for block in blocksDroneless%}
                                                        {% if block.garden_id == garden.id %}
                                                        <option value={{block.id}} >{{garden.name}}: {{block.name}}</option>
                                                        {% endif %}
                                                        {% endfor %}
                                                        {% endfor %}
                                                        <option value=0> Nenorādīt </option>
                                                    </select>
                                                </div>
                                        </div>
                                            </table>
                                    </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Atcelt</button>
                                            <button type="submit" name="addDrone" class="btn btn-success ">Saglabāt</button>
                                        </div>
                                            </form>
                                    </div>
                                </div>
                            </div>

                        
                        <div class="row">
                                <table class="table table-light table-bordered">
                                    <thead class="thead-light">
                                        <tr>
                                          <th scope="col">Nosaukums</th>
                                          <th scope="col">Modelis</th>
                                          <th scope="col">Kvartāls</th>
                                          <th scope="col">Aktivitāte</th>
                                        </tr>
                                      </thead>
                                    {% for drone in drones %}
                                    <tr>
                                      <th scope="row"> {{drone.name}} </th>
                                      {% for model in droneModels %}
                                        {% if drone.model_id == model.id%}
                                            <td> {{model.maker}} {{model.model}} </td>
                                        {% endif %}
                                      {% endfor %}
                                        {% if drone.block.id != Null %}
                                            {% for block in blocks%}
                                                {% if block.id == drone.block.id %}
                                                    <td>{{block.name}} </td>
                                                {% endif %}
                                            {% endfor %}
                                        {% else %}
                                            <td> Nav norādīts </td>
                                        {% endif %}
                                      <td>
                                        <button type="button" class="btn btn-outline-dark" data-bs-toggle="modal" data-bs-target="#editDrone{{drone.id}}">
                                            <i class="fa-solid fa-pencil"></i>
                                      </button>
                                        <div class="modal fade " id="editDrone{{drone.id}}" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                                            <div class="modal-dialog">
                                                <div class="modal-content ">
                                                    <div class="modal-header">
                                                        <h3 class="modal-title" id="staticBackdropLabel">Rediģēt dronu:</h3>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <form method = 'POST' enctype="multipart/form-data">
                                                        {% csrf_token %}
                                                        <table class = 'table'>
                                                            <div class="form-group row">
                                                                <input hidden id="droneID" name="droneID" type="text"  class="form-control" value="{{drone.id}}">
                                                                <label for="drone_name" class="col-4 col-form-label">Nosaukums:</label>
                                                                    <div class="col-8 mb-3">
                                                                        <input id="drone_name" name="drone_name" type="text"  class="form-control" value="{{ drone.name }}" required>
                                                                    </div>
                                                            </div>
                                                            <div class="form-group row">
                                                                <label for="drone_model" class="col-4 col-form-label">Modelis:</label>
                                                                    <div class="col-8 mb-3">
                                                                        <select id="drone_model" name="drone_model" class="form-select">
                                                                            {% for model in droneModels %}
                                                                            <option value={{model.id}} >{{model.maker}} {{model.model}}</option>
                                                                            {% endfor %}
                                                                        </select>
                                                                    </div>
                                                            </div>
                                                            <div class="form-group row">
                                                                <label for="drone_block" class="col-4 col-form-label">Kvartāls:</label>
                                                                    <div class="col-8 mb-3">
                                                                        <select id="drone_block" name="drone_block" class="form-select">
                                                                            {% for garden in gardens%}
                                                                            {% for block in blocks%}
                                                                                {% if block.garden_id == garden.id %}
                                                                                    {% if drone.block_id == block.id %}
                                                                                        <option value={{block.id}} selected >{{garden.name}}: {{block.name}}</option>
                                                                                    {% endif %}
                                                                                {% endif %}
                                                                            {% endfor %}
                                                                            {% for block in blocksDroneless%}
                                                                                {% if block.garden_id == garden.id %}
                                                                                    <option value={{block.id}} >{{garden.name}}: {{block.name}}</option>
                                                                                {% endif %}
                                                                            {% endfor %}
                                                                            {% endfor %}
                                                                            <option value=0> Nenorādīt </option>
                                                                        </select>
                                                                    </div>
                                                            </div>
                                                        </table>
                                                </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Atcelt</button>
                                                        <button type="submit" name="editDrone" class="btn btn-success ">Saglabāt</button>
                                                    </div>
                                                        </form>
                                                </div>
                                            </div>
                                        </div>
                                        <button type="submit" class="btn btn-outline-dark" data-bs-toggle="modal" data-bs-target="#confirmDelete{{drone.id}}">
                                            <i class="fa-solid fa-trash"></i>
                                        </button>

                                        <!-- Confirmation Modal -->
                                        <div class="modal fade" id="confirmDelete{{drone.id}}" tabindex="-1" aria-labelledby="confirmDeleteLabel{{drone.id}}" aria-hidden="true">
                                            <div class="modal-dialog">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title" id="confirmDeleteLabel{{drone.id}}">Dzēst Dronu: {{ drone.name }}</h5>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                    </div>
                                                    <div class="modal-body">
                                                        Vai esat parliecināts?
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Atcelt</button>
                                                        <button type="submit" name="deleteDrone" form="delete{{drone.id}}" class="btn btn-danger">Dzēst</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <form method="POST" id="delete{{drone.id}}">
                                            {% csrf_token %}
                                            <input hidden id="droneID" name="droneID" type="text" class="form-control" value="{{drone.id}}">
                                        </form>
                                    </td>
                                    </tr>
                                    {% endfor %}
                                </table>
                        </div>
                </main>
{% endblock %}