{% extends "traite/base.html" %}
{% load static %}
{% block content %}
<style>
    .step-content {
        margin-left: 0.10rem;
        margin-right: 0.10rem;
    }

    .steps {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
    }
    .step-button {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        border: none;
        background-color: var(--gray-color);
        transition: 0.4s;
        color: #fff;
        background-color: var(--dark-color);
        align-items: center;
        justify-content: center;
    }
    
    
    .step-item {
        z-index: 10;
        text-align: center;
    }

    .progress {
        -webkit-appearance: none;
        position: absolute;
        width: 50%;
        z-index: 5;
        height: 1px;
        border-top-width: 2px;
        border-top-color: var(--dark-color);
        border-top-style: dashed;
    /* margin-bottom: 18px;*/
    }
    /* .step-completed::-webkit-progress-bar {
        background-color: var(--dark-color);
    }
    .step-uncompleted::-webkit-progress-bar {
        background-color: var(color--gray-);
    } */

    #progress-step-1 {
        margin-left: 5%;
    }
    #progress-step-2 {
        margin-left: 55%;
        width: 35%;
    }
    /* to customize progress bar */
    .progress::-webkit-progress-value {
        background-color: var(--dark-color);
        transition: 0.5s ease;
    }

    .steps {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
    }
    .line {
        -webkit-appearance: none;
        position: absolute;
        width: 79%;
        z-index: 5;
        height: 2px;
        margin-bottom: 12px;
        margin-left: 208px ;
        border-top-color: var(--dark-color);
    /* margin-bottom: 18px;*/
    }
    
</style>
<div class="container px-4 ">
    
    <h2 class=" fw-bold my-4 text-center">Détails cas de traite :<span class="text-accent"> {{cas_traite.description}}</span></h2>
    <div class="d-flex ms-2 mb-2 justify-content-between">
        <div>
            <i class="bi bi-calendar-fill text-dark-blue fs-6"></i>
            <span class="mx-2 fs-5">{{cas_traite.date|date:"d/m/y" }}</span>
        </div>
        <div>
            <a class="btn btn-dark px-2">Modifier cas de traite</a>
        </div>
    </div>
    <div class="row mb-4  border-blue rounded-2 p-4 step-content">
        
        <div class="steps ">
        <progress id="progress-step-1"
                    class="progress step-uncompleted "
                    value="0"
                    max="100"></progress>
        <progress id="progress-step-2"
                    class="progress step-uncompleted"
                    value="0"
                    max="100"></progress>
        <div class="step-item ">
            <div  class="step-title fw-bold text-dark-blue">Zone de départ</div>
            <div id="step-number-1"
                    class="step-button text-center fs-4 mx-auto d-flex "
                   ><img src=" {% static '/assets/icons/depart.svg' %} " alt="" sizes="" srcset="" width="20px" height="20px"></div>
            <div  class=" text-center text-dark-blue">{% firstof cas_traite.pays_depart cas_traite.region_depart %}</div>
        </div>
        <div class="step-item ">
            <div  class="step-title fw-bold text-dark-blue">Zone d'interpellation</div>
            <div id="step-number-1"
                    class="step-button text-center fs-4 mx-auto d-flex "
                   ><img src=" {% static '/assets/icons/interpellation.svg' %} " alt="" sizes="" srcset="" width="20px" height="20px"></div>
            <div  class=" text-center text-dark-blue">{% firstof cas_traite.pays_interpellation cas_traite.region_interpellation %}</div>

        </div>
        <div class="step-item">
            <div  class="step-title fw-bold text-dark-blue">Zone de destination</div>
            <div id="step-number-1"
                    class="step-button text-center fs-4 mx-auto d-flex "
                   ><img src=" {% static '/assets/icons/destination.svg' %} " alt="" sizes="" srcset="" width="20px" height="20px"></div>
            <div  class=" text-center text-dark-blue"> {% firstof cas_traite.pays_destination cas_traite.region_destination %}</div>

        </div>
        </div>
    </div>
    <div class="overflow-hidden">
        <div class="row  mb-4">
            <div class="col">
                <div class="border-blue rounded h-100">
                    <div class="p-3">
                        <h2 class="fs-5 fw-bold text-dark-blue">Infractions</h2>
                        <ul class="list-group ">
                            {% for infraction in cas_traite.types_infraction.all %}
                            <li class="list-group-item  text-accent fs-6">
                                {{infraction}}
                            </li>

                            {% endfor %}
                        </ul>

                    </div>

                    <div class=" p-3 ">
                        <h2 class="fs-5 fw-bold text-dark-blue">Moyens Transports</h2>
                        <ol class="list-group ">
                            {% for moyen_transport in cas_traite.moyens_transport.all %}
                            <li class="list-group-item  text-accent fs-6">{{moyen_transport}}</li>

                            {% endfor %}
                        </ol>

                    </div>
                </div>
            </div>
            <div class="col">
            <div class="border-blue rounded h-100">
                <div class="p-3">
                <h2 class="fs-5 fw-bold text-dark-blue">Etats de la traite</h2>
                <div class="d-flex justify-content-between mb-2">
                    <div>Identification</div>
                    <div><span class="badge bg-success">{{cas_traite.phase_interpellation }}</span></div>
                </div>
                <div class="d-flex justify-content-between mb-2">
                    <div>Type de traite</div>
                    <div><span class="badge bg-success">{{cas_traite.type_traite }}</span></div>
                </div>
                <div class="d-flex justify-content-between mb-2">
                    <div>Moyens</div>
                    <div><span class="badge bg-success">{{cas_traite.prommesses_faites }}</span></div>
                </div>
                <div class="d-flex justify-content-between mb-2">
                    <div>Enquête effectuée </div>
                    <div>
                         <div>
                            {% if cas_traite.enquete_effectuee  %}
                                <span class="badge bg-success">Oui</span> 
                            {% else %}
                                <span class="badge bg-danger">Non</span>
                            {% endif %}
                        </div>
                    </div>
                </div>
                <div class="d-flex justify-content-between mb-2">
                    <div>Poursuites engagées</div>
                    <div>
                        {% if cas_traite.poursuites_engagees  %}
                            <span class="badge bg-success">Oui</span> 
                        {% else %}
                            <span class="badge bg-danger">Non</span>
                        {% endif %}
                    </div>
                </div>
                <div class="d-flex justify-content-between mb-2">
                    <div>Décision judiciaire</div>
                    <div>
                        
                            <span class="badge bg-success">{{ cas_traite.decisions_judiciaires  }}</span> 
                    </div>
                </div>
                <ul class="list-group ">
                  
                </ul>
            </div>
            </div>
            </div>
        </div>
    </div>
   
    <!--VICTIME TABLE-->
    <div >
        <div class="steps mt-3">
            <progress 
                        class="line"
                        value="0"
                        max="100"></progress>
            
            <div class="step-item">
                <div  class="step-title fw-bold text-dark-blue h5">  Victime(s) </div>
            </div>
        </div>
        <div class="text-end"><a class="btn btn-dark px-2">Ajouter victime</a></div>
        <div >
            {% include './partials/tableau-victime.html' with victimes=cas_traite.victimes_traite.all %}
        </div>
    </div>
    <!--FIN VICTIME TABLE-->

    <!--TRAFIQUA?T TABLE-->
    <div >
        <div class="row ">
        
            <div class="steps mt-3 ">
                <progress 
                            class="line"
                            value="0"
                            max="100"></progress>
                
                <div class="step-item">
                    <div  class="step-title fw-bold text-dark-blue h5">  Auteur(s) de la traite</div>
                </div>
            </div>
        </div>
        <div class="text-end"><a class="btn btn-dark px-2">Ajouter Auteur traite</a></div>
        
        <div class="col">
            {% include './partials/tableau-trafiquant.html' with trafiquants=cas_traite.trafiquants_traite.all %}
        </div>
    </div>
    <!--TRAFIQUANT VICTIME TABLE-->
    </div>
{% endblock content %}

{% block script %}
    <script>
        function deleteItem(itemType,itemId) {
            var csrf_token = $("input[name=csrfmiddlewaretoken]").val();
            var url ="";
            if (itemType =="VICTIME") {
                url =  $(`input[name=url_path_victime_${itemId}]`).val();
            }else if(itemType =="AUTEUR"){
                url =  $(`input[name=url_path_auteur_${itemId}]`).val();
            }
            
            console.log(url);
            Swal.fire({
                    title: "Êtes-vous sûr de vouloir supprimer ce cas de traite?",
                    showCancelButton: true,
                    confirmButtonColor: "#198754",
                    cancelButtonColor: "#d33",
                    confirmButtonText: "Oui",
                    cancelButtonText: "Non",
                }).then((result) => {
                    if (result.isConfirmed) {
                    $.ajax({
                        url: url,
                        type: "POST",
                        headers: {
                        "X-CSRFToken": csrf_token,
                        },
                        success: function (response) {
                            Swal.fire({
                                position: "top-end",
                                icon: "success",
                                title: "Traite supprimée avec succès",
                                showConfirmButton: false,
                                timer: 1500

                            });
                            setTimeout(()=>{
                                location.reload();
                            },1500);
                        },
                        error: function (response) {
                        console.log(response.responseJSON.error);
                        // Handle error, e.g., display an error message
                        },
                    });
                    }
                });
            
            }
  </script>
{% endblock script %}