{% extends 'base_layout.html' %}

{% block content%}
                <main>
                    <div class="container-fluid px-4">
                        <h1 class="mt-4"> Koku šķirnes 
                            <!-- Button trigger modal -->
                            <button type="button" class="btn btn-outline-dark" data-bs-toggle="modal" data-bs-target="#addBreed">
                               <i class="fa-solid fa-plus"></i> Pievienot
                            </button>
                        </h1>
                            <!-- Modal -->
                            <div class="modal fade " id="addBreed" 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 šķirni:</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 %}
                                            <div class="form-group row">
                                                <label for="cultivare" class="col-4 col-form-label">Koks:</label>
                                                    <div class="col-8 mb-3">
                                                        <select id="cultivare" name="cultivare" class="form-select">
                                                            {% for cultivare in cultivares %}
                                                                <option value={{cultivare.id}}> {{cultivare.title}}</option>
                                                            {% endfor %}
                                                        </select>
                                                    </div>
                                            </div>
                                            <div class="form-group row">
                                                <label for="breed_name" class="col-4 col-form-label">Šķirne:</label>
                                                    <div class="col-8 mb-3">
                                                        <input id="breed_name" name="breed_name" type="text"  class="form-control" placeholder="Obligāti" required>
                                                    </div>
                                            </div>
                                            <div class="form-group row">
                                                <label for="breed_height" class="col-4 col-form-label">Augstums:</label>
                                                    <div class="col-8 mb-3">
                                                        <div class="input-group">
                                                        <input id="breed_height" name="breed_height"  type="text"  class="form-control" placeholder="Obligāti" pattern="[0-9]+([,\.][0-9]+)?" required>
                                                        <span class="input-group-text">m</span>
                                                        </div>
                                                    </div>
                                            </div>
                                            <div class="form-group row">
                                                <label for="breed_width" class="col-4 col-form-label">Platums:</label>
                                                    <div class="col-8 mb-3">
                                                        <div class="input-group">
                                                        <input id="breed_width" name="breed_width"  type="text"  class="form-control" placeholder="Obligāti" pattern="[0-9]+([,\.][0-9]+)?" required>
                                                        <span class="input-group-text">m</span>
                                                        </div>
                                                    </div>
                                            </div>
                                            <div class="form-group row">
                                                <label for="breed_yields" class="col-4 col-form-label">Ražība:</label>
                                                    <div class="col-8 mb-3">
                                                        <div class="input-group">
                                                        <input id="breed_yields" name="breed_yields"  type="text"  class="form-control" pattern="[0-9]+([,\.][0-9]+)?" placeholder="Neobligāti">
                                                        <span class="input-group-text">kg</span>
                                                        </div>
                                                    </div>
                                            </div>
                                            <div class="form-group row">
                                                <label for="breed_injection" class="col-4 col-form-label">Pote:</label>
                                                    <div class="col-8 mb-3">
                                                        <input id="breed_injection" name="breed_injection" type="text"  class="form-control" placeholder="Neobligāti">
                                                    </div>
                                            </div>
                                            <div class="form-group row">
                                                <label for="breed_planting_distance" class="col-4 col-form-label">Stādīšanas attālums:</label>
                                                    <div class="col-8 mb-3">
                                                        <div class="input-group">
                                                        <input id="breed_planting_distance" name="breed_planting_distance" type="text"  class="form-control" pattern="[0-9]+([,\.][0-9]+)?" placeholder="Obligāti" required>
                                                        <span class="input-group-text">m</span>
                                                        </div>
                                                    </div>
                                            </div>
                                    </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Atcelt</button>
                                            <button type="submit" name="addBreed" 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">Koks</th>
                                      <th scope="col">Šķirne</th>
                                      <th scope="col">Augstums</th>
                                      <th scope="col">Platums</th>
                                      <th scope="col">Ražība</th>
                                      <th scope="col">Pote</th>
                                      <th scope="col">Stādīšanas attālums</th>
                                      <th scope="col">Aktivitāte</th>
                                    </tr>
                                </thead>
                                {% for breed in TreeBreeds %}
                                <tr>
                                  <th scope="row">
                                    {% for cultivare in cultivares%}
                                        {% if cultivare.id == breed.cultivar_id %}
                                            {{cultivare.title}}
                                        {% endif %}
                                    {% endfor%}
                                    </th>
                                  <td>{{breed.title}} </td>
                                  <td>{{breed.height}}m </td>
                                  <td> {{breed.width}}m </td>
                                    <td>
                                        {% if breed.yields != None %}
                                        {{breed.yields}} 
                                        {% else%}
                                            Nav informācijas
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if breed.injection != None %}
                                        {{breed.injection}} 
                                        {% else%}
                                            Nav informācijas
                                        {% endif %}
                                    </td>
                                  <td> {{breed.planting_distance}}m </td>
                                    <td>
                                        <button type="button" class="btn btn-outline-dark" data-bs-toggle="modal" data-bs-target="#editBreed{{breed.id}}">
                                            <i class="fa-solid fa-pencil"></i>
                                        </button>
                                        <div class="modal fade " id="editBreed{{breed.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">Dārzs</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 %}
                                                            <div class="form-group row">
                                                                <label for="cultivare" class="col-4 col-form-label">Koks:</label>
                                                                    <div class="col-8 mb-3">
                                                                        <select id="cultivare" name="cultivare" class="form-select">
                                                                            {% for cultivare in cultivares %}
                                                                            <option value={{cultivare.id}}> {{cultivare.title}}</option>
                                                                            {% endfor %}
                                                                            </select>
                                                                    </div>
                                                            </div>
                                                            <input hidden id="breedID" name="breedID" type="text"  class="form-control" value="{{breed.id}}">
                                                            <div class="form-group row">
                                                                <label for="breed_name" class="col-4 col-form-label">Šķirne:</label>
                                                                    <div class="col-8 mb-3">
                                                                        <input id="breed_name" name="breed_name" type="text"  class="form-control" value="{{breed.title}}">
                                                                    </div>
                                                            </div>
                                                            <div class="form-group row">
                                                                <label for="breed_height" class="col-4 col-form-label">Augstums:</label>
                                                                    <div class="col-8 mb-3">
                                                                        <div class="input-group">
                                                                        <input id="breed_height" name="breed_height" type="text"  class="form-control" pattern="[0-9]+([,\.][0-9]+)?" value="{{breed.height}}">
                                                                        <span class="input-group-text">m</span>
                                                                        </div>
                                                                    </div>
                                                            </div>
                                                            <div class="form-group row">
                                                                <label for="breed_width" class="col-4 col-form-label">Platums:</label>
                                                                    <div class="col-8 mb-3">
                                                                        <div class="input-group">
                                                                        <input id="breed_width" name="breed_width" type="text"  class="form-control" pattern="[0-9]+([,\.][0-9]+)?" value="{{breed.width}}">
                                                                        <span class="input-group-text">m</span>
                                                                        </div>
                                                                    </div>
                                                            </div>
                                                            <div class="form-group row">
                                                                <label for="breed_yields" class="col-4 col-form-label">Ražība:</label>
                                                                    <div class="col-8 mb-3">
                                                                        <div class="input-group">
                                                                        <input id="breed_yields" name="breed_yields" type="text"  class="form-control" pattern="[0-9]+([,\.][0-9]+)?" {% if breed.yields != None %} value="{{breed.yields}}" {% endif %}>
                                                                        <span class="input-group-text">kg</span>
                                                                        </div>
                                                                    </div>
                                                            </div>
                                                            <div class="form-group row">
                                                                <label for="breed_injection" class="col-4 col-form-label">Pote:</label>
                                                                    <div class="col-8 mb-3">
                                                                        <input id="breed_injection" name="breed_injection" type="text"  class="form-control" {% if breed.injection != None %} value="{{breed.injection}}" {% endif %}>
                                                                    </div>
                                                            </div>
                                                            <div class="form-group row">
                                                                <label for="breed_planting_distance input-group" class="col-4 col-form-label">Stādīšanas attālums:</label>
                                                                    <div class="col-8 mb-3">
                                                                        <div class="input-group">
                                                                        <input id="breed_planting_distance" name="breed_planting_distance" type="text" pattern="[0-9]+([,\.][0-9]+)?"  class="form-control" value="{{breed.planting_distance}}">
                                                                        <span class="input-group-text">m</span>
                                                                        </div>
                                                                    </div>
                                                            </div>
                                                </div>
                                            
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Atcelt</button>
                                                        <button type="submit" name="editBreed" 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{{breed.id}}">
                                            <i class="fa-solid fa-trash"></i>
                                        </button>
                                        <div class="modal fade" id="confirmDelete{{breed.id}}" tabindex="-1" aria-labelledby="confirmDeleteLabel{{breed.id}}label" aria-hidden="true">
                                            <div class="modal-dialog">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title" id="confirmDeleteLabel{{breed.id}}">Dzēst Koku škirni: {{ breed.title }}</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="deleteMeteostation" form="delete{{breed.id}}" class="btn btn-danger">Dzēst</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <form method = 'POST' id="delete{{breed.id}}">
                                            {% csrf_token %}
                                            <input hidden id="breedID" name="breedID" type="text"  class="form-control" value="{{breed.id}}">
                                        </form>
                                    </td>
                                </tr>
                                {% endfor %}
                            </table>
                        </div>
                </main>
{% endblock %}