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

{% block title %}displayClaims{% endblock %}

{% block body %}

    {% include '/loader/loader.html.twig' %}
    <div id="createMission" class="Page">
        <div class="">
            {% include '/mission/top_menu.html.twig' %}
        </div>
        {% for message in app.flashes('success') %}
            <div class="alert alert-success position-absolute" style="width: 100% !important; z-index: 3000">
                {{ message }}
            </div>
        {% endfor %}
        {% for message in app.flashes('warning') %}
            <div class="alert alert-warning position-absolute" style="width: 100% !important; z-index: 3000">
                {{ message }}
            </div>
        {% endfor %}

        <div class="container-fluid Fill">
            <div class="row"><!-- invoice list -->
                <div class="col-12">
                    <div class="Text mt-2 mb-2">
                        <div class="Size-2 Bold">
                            Espace de création de mission
                        </div>
                    </div>
                </div>
            </div>
            {{ form_start(form) }}
            <div class="row Black" id="formCreateREN" style="padding-top: 0">
                <div class="col-12">
                    <div class="container-fluid">
                        <div class="row"><!-- invoice list -->
                            <div class="col-12">
                                <div class="mt-2 mb-2">
                                    <div class="Size-3">
                                        Veillez à remplir toutes les informations obligatoires afin
                                        de valider la création de votre mission
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <h5 class="col-12 Black">
                            </h5>
                        </div>
                        <div class="row d-none">
                            <div class="my-custom-class-for-errors">
                                {{ form_errors(form) }}
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12 createMissionSubTitle">Identification</div>
                            <div class="col-lg-6 col-md-12 col-sm-12">
                                <div class="formCreateMissionItem">
                                    {{ form_label(form.fileNumber) }}
                                    {{ form_widget(form.fileNumber) }}
                                </div>
                                <div class="formCreateMissionItem">
                                    {{ form_label(form.fileCreatedBy) }}
                                    {{ form_widget(form.fileCreatedBy) }}
                                </div>
                                <div class="formCreateMissionItem">
                                    {{ form_label(form.fileCreatedAt) }}
                                    {{ form_widget(form.fileCreatedAt) }}
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-12 col-sm-12">
                                <div class="formCreateMissionItem">
                                    {{ form_label(form.delegateName) }}
                                    {{ form_widget(form.delegateName) }}
                                    {{ form_label(form.delegateInsuredID) }}
                                    {{ form_widget(form.delegateInsuredID) }}
                                </div>
                                <div class="formCreateMissionItem">
                                    {{ form_label(form.policyID) }}
                                    {{ form_widget(form.policyID) }}
                                </div>
                                <div class="formCreateMissionItem">
                                    {{ form_label(form.catastropheID) }}
                                    {{ form_widget(form.catastropheID) }}
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-6 col-md-12 col-sm-12">
                                <div class="createMissionSubTitle">Informations concernant le sinistre</div>
                                <div class="formCreateMissionItem">
                                    {{ form_label(form.sinisterType) }}
                                    {{ form_widget(form.sinisterType) }}
                                </div>
                                <div class="formCreateMissionItem">
                                    {{ form_label(form.sinisterDate) }}
                                    {{ form_widget(form.sinisterDate) }} {{ form_widget(form.sinisterTime) }}
                                </div>
                                <div class="formCreateMissionItem">
                                    {{ form_label(form.sinisterRoom) }}
                                    <input type="text" onclick="selectRooms()"
                                           class="form-control cursor-pointer createMissionField" id="roomList"
                                           readonly/>
                                </div>
                                <div class="createMissionSubTitle">Lieu du sinistre</div>
                                <div class="formCreateMissionItem">
                                    {{ form_label(form.sinisterAddress) }}
                                    {{ form_widget(form.sinisterAddress) }}
                                </div>
                                <div class="formCreateMissionItem">
                                    {{ form_label(form.sinisterAddressCpl) }}
                                    {{ form_widget(form.sinisterAddressCpl) }}
                                </div>
                                <div class="formCreateMissionItem">
                                    {{ form_label(form.sinisterPostcode) }}
                                    {{ form_widget(form.sinisterPostcode) }}
                                </div>
                                <div class="formCreateMissionItem">
                                    {{ form_label(form.sinisterCity) }}
                                    {{ form_widget(form.sinisterCity) }}
                                </div>
                                <div class="formCreateMissionItem">
                                    {{ form_label(form.sinisterBuiltYear) }}
                                    {{ form_widget(form.sinisterBuiltYear) }}
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-12 col-sm-12">
                                <div class="createMissionSubTitle">Informations de l'assuré</div>
                                <div>
                                    <input class="ml-1 mr-1" type="radio" name="type" value="Particulier" checked>Particulier
                                    <input class="ml-1 mr-1" type="radio" name="type" value="Professionel">Professionel
                                </div>
                                <div class="formCreateMissionItem agency">
                                    {{ form_label(form.insuredCompanyName) }}
                                    {{ form_widget(form.insuredCompanyName) }}
                                </div>
                                <div class="formCreateMissionItem">
                                    {{ form_label(form.insuredGender) }}
                                    {{ form_widget(form.insuredGender) }}
                                </div>
                                <div class="formCreateMissionItem">
                                    {{ form_label(form.insuredLastname) }}
                                    {{ form_widget(form.insuredLastname) }}
                                </div>
                                <div class="formCreateMissionItem">
                                    {{ form_label(form.insuredFirstname) }}
                                    {{ form_widget(form.insuredFirstname) }}
                                </div>
                                <div class="formCreateMissionItem">
                                    {{ form_label(form.insuredPhone) }}
                                    {{ form_widget(form.insuredPhone) }}
                                </div>
                                <div class="formCreateMissionItem">
                                    {{ form_label(form.insuredMobile) }}
                                    {{ form_widget(form.insuredMobile) }}
                                </div>
                                <div class="formCreateMissionItem">
                                    {{ form_label(form.insuredEmail) }}
                                    {{ form_widget(form.insuredEmail) }}
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12 createMissionSubTitle">Informations complémentaires</div>
                            <div class="col-lg-6 col-md-12 col-sm-12">
                                <input type="checkbox" id="checkAddr" onclick="displayAddr()"> Adresse de résidence
                                principale différente du lieu du sinistre
                                <div id="addr" style="display: none">
                                    <div class="formCreateMissionItem">
                                        {{ form_label(form.insuredAddress) }}
                                        {{ form_widget(form.insuredAddress) }}
                                    </div>
                                    <div class="formCreateMissionItem">
                                        {{ form_label(form.insuredAddressCpl) }}
                                        {{ form_widget(form.insuredAddressCpl) }}
                                    </div>
                                    <div class="formCreateMissionItem">
                                        {{ form_label(form.insuredPostcode) }}
                                        {{ form_widget(form.insuredPostcode) }}
                                    </div>
                                    <div class="formCreateMissionItem">
                                        {{ form_label(form.insuredCity) }}
                                        {{ form_widget(form.insuredCity) }}
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-12 col-sm-12">
                                <input type="checkbox" id="checkInsured" onclick="display2ndInsured()"> 2ème contact
                                assuré
                                <div id="scnInsured" style="display: none">
                                    <div class="formCreateMissionItem">
                                        {{ form_label(form.insured2Gender) }}
                                        {{ form_widget(form.insured2Gender) }}
                                    </div>
                                    <div class="formCreateMissionItem">
                                        {{ form_label(form.insured2Lastname) }}
                                        {{ form_widget(form.insured2Lastname) }}
                                    </div>
                                    <div class="formCreateMissionItem">
                                        {{ form_label(form.insured2Firstname) }}
                                        {{ form_widget(form.insured2Firstname) }}
                                    </div>
                                    <div class="formCreateMissionItem">
                                        {{ form_label(form.insured2Phone) }}
                                        {{ form_widget(form.insured2Phone) }}
                                    </div>
                                    <div class="formCreateMissionItem">
                                        {{ form_label(form.insured2Mobile) }}
                                        {{ form_widget(form.insured2Mobile) }}
                                    </div>
                                    <div class="formCreateMissionItem">
                                        {{ form_label(form.insured2Email) }}
                                        {{ form_widget(form.insured2Email) }}
                                    </div>
                                    <div class="formCreateMissionItem">
                                        {{ form_label(form.insured2relationship) }}
                                        {{ form_widget(form.insured2relationship) }}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-6 col-md-12 col-sm-12">
                                <div class="createMissionSubTitle">Police d'assurance</div>
                                <div class="formCreateMissionItem">
                                    {{ form_label(form.policyType) }}
                                    {{ form_widget(form.policyType) }}
                                </div>
                                <div class="formCreateMissionItem">
                                    {{ form_label(form.policyDate1) }}
                                    {{ form_widget(form.policyDate1) }}
                                    {{ form_label(form.policyDate2) }}
                                    {{ form_widget(form.policyDate2) }}
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-12 col-sm-12">
                                <div class="createMissionSubTitle">Informations franchise</div>
                                <div class="createMissionLabel">
                                    Franchise :
                                </div>
                                <div>
                                    <input class="ml-1 mr-1" type="radio" name="franchise" value="Oui" checked> Oui
                                    <input class="ml-1 mr-1" type="radio" name="franchise" value="Non"> Non
                                </div>
                                <div class="franchise">
                                    <div class="formCreateMissionItem">
                                        {{ form_label(form.franchiseType) }}
                                        {{ form_widget(form.franchiseType) }}
                                    </div>
                                    <div class="formCreateMissionItem">
                                        {{ form_label(form.franchiseMin) }}
                                        {{ form_widget(form.franchiseMin) }}
                                    </div>
                                    <div class="formCreateMissionItem">
                                        {{ form_label(form.franchisePercent) }}
                                        {{ form_widget(form.franchisePercent) }}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12 createMissionSubTitle">Couverture</div>
                            <div class="col-lg-6 col-md-12 col-sm-12">
                                <div class="formCreateMissionItem">
                                    {{ form_label(form.franchiseCoverType) }}
                                    {{ form_widget(form.franchiseCoverType) }}
                                </div>
                                <div class="formCreateMissionItem">
                                    {{ form_label(form.franchiseLimit) }}
                                    {{ form_widget(form.franchiseLimit) }}
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12 createMissionSubTitle">Informations expertise</div>
                            <div class="col-lg-6 col-md-12 col-sm-12">
                                <div class="formCreateMissionItem">
                                    {{ form_label(form.expertID) }}
                                    {{ form_widget(form.expertID) }}
                                </div>
                                <div class="formCreateMissionItem">
                                    {{ form_label(form.expertCompany) }}
                                    {{ form_widget(form.expertCompany) }}
                                </div>
                                <div class="formCreateMissionItem">
                                    {{ form_label(form.expertAddress) }}
                                    {{ form_widget(form.expertAddress) }}
                                </div>
                                <div class="formCreateMissionItem">
                                    {{ form_label(form.expertAddressCpl) }}
                                    {{ form_widget(form.expertAddressCpl) }}
                                </div>
                                <div class="formCreateMissionItem">
                                    {{ form_label(form.expertPostcode) }}
                                    {{ form_widget(form.expertPostcode) }}
                                </div>
                                <div class="formCreateMissionItem">
                                    {{ form_label(form.expertCity) }}
                                    {{ form_widget(form.expertCity) }}
                                </div>
                                <div class="formCreateMissionItem">
                                    {{ form_label(form.expertStandard) }}
                                    {{ form_widget(form.expertStandard) }}
                                </div>
                                <div class="formCreateMissionItem">
                                    {{ form_label(form.expertCompanyMail) }}
                                    {{ form_widget(form.expertCompanyMail) }}
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-12 col-sm-12">
                                <div class="formCreateMissionItem">
                                    {{ form_label(form.expertLastname) }}
                                    {{ form_widget(form.expertLastname) }}
                                </div>
                                <div class="formCreateMissionItem">
                                    {{ form_label(form.expertFirstname) }}
                                    {{ form_widget(form.expertFirstname) }}
                                </div>
                                <div class="formCreateMissionItem">
                                    {{ form_label(form.expertPhone) }}
                                    {{ form_widget(form.expertPhone) }}
                                </div>
                                <div class="formCreateMissionItem">
                                    {{ form_label(form.expertMobile) }}
                                    {{ form_widget(form.expertMobile) }}
                                </div>
                                <div class="formCreateMissionItem">
                                    {{ form_label(form.expertEmail) }}
                                    {{ form_widget(form.expertEmail) }}
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12 createMissionSubTitle">Éléments déclaratifs</div>
                            <div class="formCreateMissionItem col-3">
                                {{ form_row(form.text1) }}
                            </div>
                            <div class="formCreateMissionItem  col-3">
                                {{ form_row(form.text2) }}
                            </div>
                            <div class="formCreateMissionItem  col-3">
                                {{ form_row(form.text3) }}
                            </div>
                            <div class="formCreateMissionItem  col-3">
                                {{ form_row(form.text4) }}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group col-4 ml-auto mr-auto mb-3 mt-3">
                    {{ form_row(form.save) }}
                </div>
            </div>
            {{ form_end(form) }}
            <div id="dialogRoom" title="Pièces endommagés" class="jquery_dialog">
                <div class="repeater-default">
                    <div data-repeater-list="contact">
                        <div class="row">
                            <div class="col-12 mb-2">
                                <button class="btn btn-icon rounded-circle btn-primary" type="button"
                                        data-repeater-create="">
                                    <i class="bx bx-plus"></i>
                                </button>
                                <span class="ml-1 font-weight-bold text-primary">Ajouté une pièce</span>
                            </div>
                            <div class="col-md-5 col-5 mb-50">
                                <label class="text-nowrap">Pièce impliquée</label>
                            </div>
                            <div class="col-md-5 col-5 mb-50">
                                <label class="text-nowrap">Etage</label>
                            </div>
                        </div>
                        <div id="list" class="row justify-content-between" data-repeater-item="">
                            <div class="col-md-5 col-12 form-group d-flex align-items-center">
                                <i class="bx bx-menu mr-1"></i>
                                <select class="form-control" name="room"
                                        required>
                                    <option readonly="readonly"></option>
                                    <{% for room in rooms %}
                                    <option>{{ room.name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-md-5 col-12 form-group">
                                <input type="text" class="form-control" name="floor" placeholder="Etage" required>
                            </div>
                            <div class="col-md-2 col-12 form-group">
                                <button class="btn btn-icon btn-danger rounded-circle" type="button"
                                        data-repeater-delete="">
                                    <i class="bx bx-x"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="ExpertCompany" title="Selectionner une entreprise d'experts" class="jquery_dialog">
                <div class="table-responsive bg-white" id="modalPage1">
                    <table id="expert-Cp" class="table table-striped compact w-100">
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>Nom du cabinet</th>
                            <th>Voie</th>
                            <th>Ville</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for expertComp in experts %}
                            <tr id="tr-{{ expertComp.id }}" onclick="setCPExpert('{{ expertComp.id }}')"
                                style="color: black">
                                <td><span class="">{{ expertComp.id }}</span></td>
                                <td><span class="">{{ expertComp.name }}</span></td>
                                <td><span class="">{{ expertComp.place.address }}</span></td>
                                <td><span class="">{{ expertComp.place.city }}</span></td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
            <div id="ExpertUser" title="Selectionner un expert" class="jquery_dialog">
                <div class="table-responsive bg-white" id="modalPage2">
                    <table id="expert-User" class="table table-striped compact w-100">
                        <thead>
                        <tr>
                            <th>Nom</th>
                            <th>Prénom</th>
                        </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block javascripts %}

    <script type="text/javascript" class="code-js">

        var date = null;
        var CPexpertId = null;
        var expertId = null;
        var rooms = "";
        var table1;
        var table2;

        function selectRooms() {
            $("#dialogRoom").css("display", "block");
            $("#dialogRoom").dialog({
                resizable: false,
                modal: true,
                width: "fit-content",
                buttons: {
                    "Valider": function () {
                        $("#roomList").val("");
                        $(".repeater-default").find('select[name*="room"]').each(function () {
                            if ($("#roomList").val().length > 0)
                                $("#roomList").val($("#roomList").val() + ', ' + $(this).val());
                            else
                                $("#roomList").val($(this).val());
                        });
                        $(".repeater-default #list").each(function () {
                            let val = ($(this).find('select[name*="room"]').val() + ' : ' + $(this).find('input[name*="floor"]').val());
                            if (rooms.length > 0)
                                rooms += ', ' + val;
                            else
                                rooms = val;
                        });
                        $("#create_mission_emergency_sinisterRoom").val(rooms);
                        $(this).dialog("close");
                    },
                    "Annuler": function () {
                        $(this).dialog("close");
                    }
                }
            });
        }

        function getExpertCompany() {
            let val = $("#searchBar").val();
            $.ajax({
                method: "POST",
                url: "{{ path('getCompanyExpert') }}",
                data: {
                    nb: 1,
                    cpName: val
                },
                success: function (responses) {
                    let i = 0;
                    $("#modalPage1 tbody").empty();
                    while (responses.CompanyExpert[i] != null) {
                        $("#modalPage1 tbody").append("<tr id=\"tr-" + responses.CompanyExpert[i].id + "\" onclick=\"setCPExpert('" + responses.CompanyExpert[i].id + "')\" style=\"color: black\"> " +
                            "<td><span>" + responses.CompanyExpert[i].id + "</span></td>" +
                            "<td><span>" + responses.CompanyExpert[i].name + "</span></td>" +
                            "<td><span>" + responses.CompanyExpert[i].place.address + "</span></td>" +
                            "<td><span>" + responses.CompanyExpert[i].place.city + "</span></td>" +
                            "</tr>");
                        i++;
                    }
                },
            })
        }

        function setCPExpert(id) {
            if (CPexpertId != null) {
                $("#tr-" + CPexpertId).css("background-color", "white");
                $("#tr-" + CPexpertId).css("color", "black");
            }
            CPexpertId = id;
            $("#tr-" + CPexpertId).css("background-color", "#5a8dee");
            $("#tr-" + CPexpertId).css("color", "white");
        }

        function setExpert(id) {
            if (expertId != null) {
                $("#tr-ex-" + expertId).css("background-color", "white");
                $("#tr-ex-" + expertId).css("color", "black");
            }
            expertId = id;
            $("#tr-ex-" + expertId).css("background-color", "#5a8dee");
            $("#tr-ex-" + expertId).css("color", "white");
        }

        function displayAddr() {
            var checkBox = document.getElementById("checkAddr");
            var text = document.getElementById("addr");
            if (checkBox.checked === true) {
                text.style.display = "block";
            } else {
                text.style.display = "none";
            }
        }

        function display2ndInsured() {
            var checkBox = document.getElementById("checkInsured");
            var text = document.getElementById("scnInsured");
            if (checkBox.checked === true) {
                text.style.display = "block";
            } else {
                text.style.display = "none";
            }
        }

        function displayOn() {
            document.getElementById("loader").style.display = "none";
            document.getElementById("createMission").style.display = "flex";
        }

        function displayOff() {
            document.getElementById("loader").style.display = "block";
        }

        function selectExpert() {
            $("#ExpertUser").css("display", "block");
            $("#ExpertUser").dialog({
                resizable: false,
                modal: true,
                width: "50vw",
                buttons: {
                    "Valider": function () {
                        displayOff();
                        $.ajax({
                            method: "POST",
                            url: "{{ path('getExpert') }}",
                            data: {
                                expertId: expertId,
                            },
                            success: function (responses) {
                                $('#create_mission_emergency_expertID').val(responses.Expert[0].id);
                                $('#create_mission_emergency_expertLastname').val(responses.Expert[0].lastname);
                                $('#create_mission_emergency_expertFirstname').val(responses.Expert[0].firstname);
                                $('#create_mission_emergency_expertPhone').val(responses.Expert[0].phone);
                                $('#create_mission_emergency_expertMobile').val(responses.Expert[0].mobile);
                                $('#create_mission_emergency_expertEmail').val(responses.Expert[0].email);
                            },
                        })
                        displayOn();
                        $(this).dialog("close");
                    },
                    "Retour": function () {
                        $(this).dialog("close");
                        selectCompanyExpert();
                    }
                }
            });
        }

        function selectCompanyExpert() {
            $("#ExpertCompany").css("display", "block");
            $("#ExpertCompany").dialog({
                resizable: false,
                modal: true,
                width: "50vw",
                buttons: {
                    "Valider": function () {
                        displayOff();
                        $.ajax({
                            method: "POST",
                            url: "{{ path('getCompanyExpert') }}",
                            data: {
                                nb: 0,
                                cpName: CPexpertId,
                            },
                            async: false,
                            success: function (responses) {
                                $('#create_mission_emergency_expertID').val(CPexpertId);
                                $('#create_mission_emergency_expertCompany').val(responses.CompanyExpert[0].name);
                                $('#create_mission_emergency_expertAddress').val(responses.CompanyExpert[0].place.address);
                                $('#create_mission_emergency_expertAddressCpl').val(responses.CompanyExpert[0].place.addressCpl);
                                $('#create_mission_emergency_expertPostcode').val(responses.CompanyExpert[0].place.postcode);
                                $('#create_mission_emergency_expertCity').val(responses.CompanyExpert[0].place.city);
                                $('#create_mission_emergency_expertStandard').val(responses.CompanyExpert[0].phone);
                                $('#create_mission_emergency_expertCompanyMail').val(responses.CompanyExpert[0].email);
                                let i = 0;
                                $("#modalPage2 tbody").empty();
                                while (responses.CompanyExpert[0].users[i] != null) {
                                    table2.row.add([
                                        responses.CompanyExpert[0].users[i].lastname,
                                        responses.CompanyExpert[0].users[i].firstname,
                                    ]).draw(false).node().id = "tr-ex-" + responses.CompanyExpert[0].users[i].id;
                                    $("#tr-ex-" + responses.CompanyExpert[0].users[i].id).click(function(event) {
                                        setExpert(event.currentTarget.id.split('-')[2]);
                                    });
                                    i++;
                                }


                            },
                            complete: function (response)
                            {
                                displayOn();
                            }
                        })
                        $(this).dialog("close");
                        selectExpert();
                    },
                    "Annuler": function () {
                        $(this).dialog("close");
                    }
                }
            });
        }


        $(document).ready(function () {
            $('input[type="radio"]').click(function () {
                if ($(this).attr("value") == "Particulier") {
                    $(".agency").hide('slow');
                }
                if ($(this).attr("value") == "Professionel") {
                    $(".agency").show('slow');

                }
            });

            $('input[type="radio"]').click(function () {
                if ($(this).attr("value") == "Non") {
                    $(".franchise").hide('slow');
                }
                if ($(this).attr("value") == "Oui") {
                    $(".franchise").show('slow');

                }
            });

            $('input[type="radio"]').trigger('click');  // trigger the event

            $('#create_mission_emergency_expertID').on('click', function () {
                selectCompanyExpert()
            });

            $("#ModalExpert-validate").on("click", function (event) {
                document.getElementById("modalPage1").style.display = "none";
                document.getElementById("modalPage2").style.display = "block";
            });

            $('.repeater-default').repeater({
                show: function () {
                    $(this).slideDown();
                },
                hide: function (deleteElement) {
                    $(this).slideUp(deleteElement);
                }
            });

            table1 = $("#expert-Cp").DataTable({
                "sDom": '<"row view-filter"<"col-sm-12"<"pull-left"l><"pull-right"f><"clearfix">>>t<"row view-pager"<"col-sm-12"<"text-center"ip>>>',
                iDiDisplayLength: -1,
                paging: false,
                info: false,
                "sScrollY": "200px",
                language: {
                    url: '//cdn.datatables.net/plug-ins/1.10.24/i18n/French.json'
                },
                columnDefs: [
                    {
                        targets: "_all",
                        className: 'text-center',
                    },
                    {
                        targets: "_all",
                        className: 'dt-head-center',
                    },
                ],
            });

            table2 = $("#expert-User").DataTable({
                "sDom": '<"row view-filter"<"col-sm-12"<"pull-left"l><"pull-right"f><"clearfix">>>t<"row view-pager"<"col-sm-12"<"text-center"ip>>>',
                iDiDisplayLength: -1,
                paging: false,
                info: false,
                "sScrollY": "200px",
                language: {
                    url: '//cdn.datatables.net/plug-ins/1.10.24/i18n/French.json'
                },
                columnDefs: [
                    {
                        targets: "_all",
                        className: 'text-center',
                    },
                    {
                        targets: "_all",
                        className: 'dt-head-center',
                    },
                ],
            });

            date = new Date(Date.now()).toLocaleString();
            $("#create_mission_emergency_fileCreatedAt").val(date);

            displayOn();

        });
    </script>

{% endblock %}