{% extends 'base_rma.html.twig' %}

{% import 'macros/macro.html.twig' as macro %}

{% block title %}
    {{ parent() }}
    Certificat Gilair REP/CAL LOC
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('assets/js/plugins/datatables/dataTables.bootstrap4.css') }}">
    <link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.1.9/css/fixedHeader.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="{{ asset('salsa/SalsaCalendar.min.css') }}" media="all" />

    <style>
        tr.group,
        tr.group:hover {
            background-color: #f0f2f5 !important;
            font-weight: 900
        }
        div.dataTables_wrapper div.dataTables_filter input {
            width: 220px;
        }
        .button_save {
            width: 40vh;
            height: 7vh;
            background-color: #88b83d!important;
            margin-top: 2em;
            font-size: large;
        }
        .button_generate {
            margin-top: 2em;
            width: 40vh;
            height: 7vh;
            font-size: large;
        }
        .div_button {
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
            margin-bottom: 10px;
        }

        .radio-certif {
            display: flex;
            justify-content: center;
            align-content: center;
            flex-direction: column;
            text-align: center;
            font-size: larger;
        }

        .radio-certif-hanna {
            display: flex;
            justify-content: center;
            align-content: center;
            flex-direction: column;
            text-align: center;
            font-size: large;
        }

        .button-valid-certif {
            width: 10vh;
            height: 4vh;
            font-size: medium;
        }
    </style>
{% endblock %}

{% block body %}
    {{ parent() }}
    <div class="block" style="overflow: hidden;">
        <div  style="height: 60px; position: relative" class="block-header block-header-default bg-gray">
            {% if reploc.isRep %}
            <h4 class="font-w700" id="number-rma" style="margin: 0; display: -webkit-box">
                REPLOC {{ reploc.code }}
            </h4>
            {% else %}
            <h4 class="font-w700" id="number-rma" style="margin: 0; display: -webkit-box">
                CALLOC {{ reploc.code }}
            </h4>
            {% endif %}
        </div>
        <div class="block-content block-content-full">
            <div class="div_button">
                <button type="button" class="btn btn-primary main-action-btn monitoring-btn button_generate" onclick="displayRadio()">Générer un certificat</button>
                <div class="col-12 radio-certif" style="display: none" id="radio-certif">
                    <p>Sélectionner le certificat associé à la REP/CAL LOC :</p>
                    <div class="test">

                        <input type="radio" id="gilair" name="certif" value="Gilair">
                        <label for="gilair">Gilair</label><br/>

                        <input type="radio" id="pid_tiger" name="certif" value="PID Tiger">
                        <label for="pid_tiger">PID Tiger</label><br/>

                        <input type="radio" id="hanna" name="certif" value="Hanna">
                        <label for="hanna">Hanna</label><br/>

                        <input type="radio" id="odeon" name="certif" value="Odeon">
                        <label for="odeon">Odeon</label><br/>

                        <input type="radio" id="tripod" name="certif" value="Tripod">
                        <label for="tripod">Tripod</label><br/>

                        <input type="radio" id="multigaz" name="certif" value="Multigaz">
                        <label for="multigaz">Multigaz</label>

                    </div>

                    <div class="col-12 radio-certif-hanna" style="display: none" id="radio-certif-hanna">
                        <p>Sélectionner le.s  certificat.s Hanna associé.s à la REP/CAL LOC :</p>
                        <div style>
                            <input type="checkbox" id="boitier" name="certif-hanna" value="Boitier">
                            <label for="boitier">Boitier</label><br/>

                            <input type="checkbox" id="conductivite" name="certif-hanna" value="Conductivité">
                            <label for="conductivite">Conductivité</label><br/>

                            <input type="checkbox" id="oxygene" name="certif-hanna" value="Oxygène">
                            <label for="oxygene">Oxygène</label><br/>

                            <input type="checkbox" id="ph" name="certif-hanna" value="Ph">
                            <label for="ph">Ph</label><br/>
                        </div>
                    </div>

                    <div class="col-12 radio-certif-odeon" style="display: none" id="radio-certif-odeon">
                        <p>Sélectionner le.s  certificat.s Odeon associé.s à la REP/CAL LOC :</p>
                        <div style>
                            <input type="checkbox" id="boitierOdeon" name="certif-odeon" value="Boitier">
                            <label for="boitierOdeon">Boitier</label><br/>

                            <input type="checkbox" id="pheht" name="certif-odeon" value="Pheht">
                            <label for="pheht">Pheht</label><br/>

                            <input type="checkbox" id="optod" name="certif-odeon" value="Optod">
                            <label for="optod">Optod</label><br/>

                            <input type="checkbox" id="c4e" name="certif-odeon" value="C4e">
                            <label for="c4e">C4e</label><br/>

                        </div>
                    </div>
                    <div class="col-12 radio-certif-multigaz" style="display: none" id="radio-certif-multigaz">
                        <p>Sélectionner les gaz Multigaz associés à la REP/CAL LOC :</p>
                        <div style>
                            <input type="checkbox" id="lel" name="certif-multigaz" value="LEL">
                            <label for="lel">LEL</label><br/>

                            <input type="checkbox" id="h2s" name="certif-multigaz" value="H2S">
                            <label for="h2s">H2S</label><br/>

                            <input type="checkbox" id="co" name="certif-multigaz" value="CO">
                            <label for="co">CO</label><br/>

                            <input type="checkbox" id="o2" name="certif-multigaz" value="O2">
                            <label for="o2">O2</label><br/>

                            <input type="checkbox" id="co2" name="certif-multigaz" value="CO2">
                            <label for="co2">CO2</label><br/>
                        </div>
                    </div>

                    <div class="col-12 radio-certif-tripod" style="display: none" id="radio-certif-tripod">
                        <p>Sélectionner le.s  certificat.s Tripod associé.s à la REP/CAL LOC :</p>
                        <div style>
                            <input type="checkbox" id="boitierTri" name="certif-tripod" value="BoitierTri">
                            <label for="boitierTri">Boitier</label><br/>

                            <input type="checkbox" id="conductiviteTri" name="certif-tripod" value="ConductivitéTri">
                            <label for="conductiviteTri">Conductivité</label><br/>

                            <input type="checkbox" id="oxygeneTri" name="certif-tripod" value="OxygèneTri">
                            <label for="oxygeneTri">Oxygène</label><br/>

                            <input type="checkbox" id="phTri" name="certif-tripod" value="PhTri">
                            <label for="phTri">Ph</label><br/>
                        </div>
                    </div>
                    <button type="button" class="btn btn-primary main-action-btn monitoring-btn button_generate button-valid-certif" onclick="ValidCertif({{ reploc.id }})">Valider</button>
                </div>
                <button type="button" class="btn btn-primary main-action-btn monitoring-btn button_save" onclick="goToRoute('reploc_files','{{ reploc.id }}')">Enregistrer un certificat</button>
            </div>
        </div>
    </div>

{% endblock %}

{% block modal %}
{% endblock %}

{% block javascripts %}
    {{ parent() }}

    <script src="{{ asset('assets/js/plugins/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/js/plugins/datatables/dataTables.bootstrap4.min.js') }}"></script>
    <script src="https://cdn.datatables.net/fixedheader/3.1.9/js/dataTables.fixedHeader.min.js"></script>

    <link href="https://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="Stylesheet"/>
    <script src="https://code.jquery.com/ui/1.10.2/jquery-ui.js" ></script>
    <script type="text/javascript">

        var display = 0;
        function displayRadio() {
            if (display == 0) {
                $(".radio-certif").css('display', 'block');
                display++;
            }
            else {
                $(".radio-certif").css('display', 'none');
                display--;
            }
        }

        function ValidCertif(replocId) {
            var boit = 0;
            var cond = 0;
            var oxyg = 0;
            var ph = 0;
            var boitTri = 0;
            var condTri = 0;
            var oxygTri = 0;
            var phTri = 0;
            var lel = 0;
            var h2s = 0;
            var co = 0;
            var o2 = 0;
            var co2 = 0;
            var boitOdeon = 0;
            var pheht = 0;
            var optod = 0;
            var c4e = 0;
            var path = "";
            if ($('#hanna').is(':checked')) {
                if ($('#boitier').is(':checked')) {
                    boit = 1;
                }
                if ($('#conductivite').is(':checked')) {
                    cond = 1;
                }
                if ($('#oxygene').is(':checked')) {
                    oxyg = 1;
                }
                if ($('#ph').is(':checked')) {
                    ph = 1;
                }
                if (ph === 0 && oxyg === 0 && cond === 0 && boit === 0) {
                    alert('Veuillez sélectionner un certificat Hanna');
                }
                else {
                    path = "{{ path('certificat_reploc_hanna_formulaire') }}?id=" + replocId + "&boit=" + boit + "&cond=" + cond + "&oxyg=" + oxyg + "&ph=" + ph;
                    // console.log(path);
                    window.location.href = path;
                }
            }
            else if ($('#tripod').is(':checked')) {
                if ($('#boitierTri').is(':checked')) {
                    boitTri = 1;
                }
                if ($('#conductiviteTri').is(':checked')) {
                    condTri = 1;
                }
                if ($('#oxygeneTri').is(':checked')) {
                    oxygTri = 1;
                }
                if ($('#phTri').is(':checked')) {
                    phTri = 1;
                }
                if (phTri === 0 && oxygTri === 0 && condTri === 0 && boitTri === 0) {
                    alert('Veuillez sélectionner un certificat Tripod');
                }
                else {
                    path = "{{ path('certificat_reploc_tripod_formulaire') }}?id=" + replocId + "&boit=" + boitTri + "&cond=" + condTri + "&oxyg=" + oxygTri + "&ph=" + phTri;
                    // console.log(path);
                    window.location.href = path;
                }
            }
            else if ($('#odeon').is(':checked')) {
                if ($('#boitierOdeon').is(':checked')) {
                    boitOdeon = 1;
                }
                if ($('#pheht').is(':checked')) {
                    pheht = 1;
                }
                if ($('#optod').is(':checked')) {
                    optod = 1;
                }
                if ($('#c4e').is(':checked')) {
                    c4e = 1;
                }
                if (c4e === 0 && optod === 0 && pheht === 0 && boitOdeon === 0) {
                    alert('Veuillez sélectionner un certificat Odeon');
                }
                else {
                    path = "{{ path('certificat_reploc_odeon_formulaire') }}?id=" + replocId + "&boitOdeon=" + boitOdeon + "&pheht=" + pheht + "&optod=" + optod + "&c4e=" + c4e;
                    // console.log(path);
                    window.location.href = path;
                }
            }
            else if ($('#gilair').is(':checked')) {
                path = "{{ path('certificat_reploc_gilair_formulaire') }}?id=" + replocId;
                // console.log(path);
                window.location.href = path;
            }
            else if ($('#pid_tiger').is(':checked')) {
                path = "{{ path('certificat_reploc_pid_formulaire') }}?id=" + replocId;
                // console.log(path);
                window.location.href = path;
            }
            else if ($('#multigaz').is(':checked')) {
                if ($('#lel').is(':checked')) {
                    lel = 1;
                }
                if ($('#h2s').is(':checked')) {
                    h2s = 1;
                }
                if ($('#co').is(':checked')) {
                    co = 1;
                }
                if ($('#o2').is(':checked')) {
                    o2 = 1;
                }
                if ($('#co2').is(':checked')) {
                    co2 = 1;
                }
                if (lel === 0 && h2s === 0 && co === 0 && o2 === 0 && co2 === 0) {
                    alert('Veuillez sélectionner un ou plusieurs gaz');
                }
                else {
                    path = "{{ path('certificat_reploc_multigaz_formulaire') }}?id=" + replocId + "&lel=" + lel + "&h2s=" + h2s + "&co=" + co + "&o2=" + o2 + "&co2=" + co2;
                    // console.log(path);
                    window.location.href = path;
                }
            }
            else {
                alert('Veuillez sélectionner un certificat');
            }
        }

        function goToRoute(route, replocId) {

            var path = "";

            if (route === "reploc_files") {
                path = "{{ path('reploc_files') }}?id=" + replocId + '&redirect=certificat_redirect&certif=true';
            }
            else if (route === "certificat_reploc_gilair_formulaire") {
                path = "{{ path('certificat_reploc_gilair_formulaire') }}?id=" + replocId;
            }
            window.location.href = path;
        }

        const radios = document.querySelectorAll('div.test > input')
        for (const radio of radios) {
            radio.onclick = (e) => {
                if (e.target.value == "Hanna") {
                    $(".radio-certif-hanna").css('display', 'block');
                }
                else {
                    $(".radio-certif-hanna").css('display', 'none');
                }
                if (e.target.value == "Multigaz") {
                    $(".radio-certif-multigaz").css('display', 'block');
                }
                else {
                    $(".radio-certif-multigaz").css('display', 'none');
                }
                if (e.target.value == "Odeon") {
                    $(".radio-certif-odeon").css('display', 'block');
                }
                else {
                    $(".radio-certif-odeon").css('display', 'none');
                }
                if (e.target.value == "Tripod") {
                    $(".radio-certif-tripod").css('display', 'block');
                }
                else {
                    $(".radio-certif-tripod").css('display', 'none');
                }
            }
        }

    </script>
{% endblock %}