@extends('admin')

@section('title')
    NotaireApp - Formules d'actes et clauses
@endsection

@section('menu-title')
    <!-- BEGIN: Breadcrumb -->
    <div class="-intro-x breadcrumb mr-auto hidden sm:flex"> <a href="{{ url('/admin') }}" class="">NotairesApp</a> <i
            data-feather="chevron-right" class="breadcrumb__icon"></i> <a href="#/" class="breadcrumb--active"> Formules
            d'actes et clauses</a> </div>
    <!-- END: Breadcrumb -->
@endsection

@section('content')
    <div class="box font-semibold">
        <form action="" id='form_data'>
            <div class="frm p-3">
                <div class="grid lg:grid-cols-2 md:grid-cols-2 sm:grid-cols-1 gap-2">
                    <div class="mt-2">
                        <label for="">Catégorie</label>
                        <select name="cat" class="input w-full border-2 mt-2 cad_sous_cat_form">
                            <option value="0" class="">Sélectionnez une catégorie</option>
                            @foreach ($FormCats as $item)
                                <option value="{{ $item->desc }}" data-id="{{ $item->id }}">{{ $item->desc }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mt-2">
                        <label for="">Sous Catégorie</label>
                        <select class="input w-full mt-2  border-2 l_sou_cat_formul" name="sous_cat">
                            <option value="-1" class="text-green-500 font-semibold">Sélectionnez une catégorie</option>
                        </select>
                    </div>
                    <div class="mt-2">
                        <label for="">Langue</label>
                        <select name="lang" class="input w-full border-2 mt-2 ">
                            <option value="0">Sélectionner une option</option>
                            <option value="Ar">Arabe</option>
                            <option value="Fr">Français</option>
                        </select>
                    </div>
                    <div class="mt-2">
                        <label for="">Pièce joint</label>
                        <input type="file" class="input w-full mt-2 joint border-2" name="joint" id="">
                    </div>

                </div>

                <div class="grid justify-items-center mt-4">
                    <button class="button w-32 mr-2 mb-2 flex items-center justify-center bg-theme-9 text-white save">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                            fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
                            stroke-linejoin="round" class="feather feather-save w-4 h-4 mr-2">
                            <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path>
                            <polyline points="17 21 17 13 7 13 7 21"></polyline>
                            <polyline points="7 3 7 8 15 8"></polyline>
                        </svg>Ajouter
                    </button>
                </div>
            </div>
        </form>
    </div>
    <div class="box font-semibold mt-2 p-2">
        <div class="overflow-x-auto ">

            <div class="overflow-scroll-y result" style="height:50vh;">
                @include('admin.forms.table-fromel-fill')
                @if (count($Formule) == 0)
                    <div class="text-center mt-5">
                        <span class="text-gray-500">Aucune formule</span>
                    </div>
                @endif
            </div>

        </div>
    </div>
@endsection
@section('script')
    <script>
        $('#formul').addClass('side-menu--active');
        $(document).ready(function() {
            $("body").on('change', '.cad_sous_cat_form', function() {

                if ($('.cad_sous_cat_form').find(':selected').data('id') != 0) {
                    $.ajax({
                        url: `{{ route('get_sous_cat') }}`,
                        type: 'post',
                        dataType: ' json',
                        data: {
                            cat_id: $('.cad_sous_cat_form').find(':selected').data('id'),
                            to: 'yes'
                        },
                        success: function(data) {
                            $('.l_sou_cat_formul').html(data);
                            console.log(data);
                        },
                        error: function(error) {
                            console.log(error);
                        },
                    });
                } else {
                    $('.l_sou_cat_formul').html(
                        `<option value = '-1' class = 'text-green-500 font-semibold'>Sélectionnez une catégorie</option>`
                    );
                }
            });
            $("body").on('click', '.save', function() {
                event.preventDefault();
                var form_data = new FormData(document.getElementById('form_data'));

                if ($('.cad_sous_cat_form').find(':selected').data('id') > 0) {
                    $.ajax({
                        url: `{{ route('add_formul') }}`,
                        type: 'post',
                        dataType: ' json',
                        // enctype:"multipart/form-data",
                        data: form_data,
                        processData: false,
                        contentType: false,
                        cache: false,

                        success: function(data) {
                            $('.result').html(data);

                            $('#table_id').DataTable({
                                    "aaSorting": [],
                                    "language": {

                                        "sEmptyTable": "Aucune donnée disponible dans le tableau",
                                        "sInfo": "Affichage de l'élément _START_ à _END_ sur _TOTAL_ éléments",
                                        "sInfoEmpty": "Affichage de l'élément 0 à 0 sur 0 élément",
                                        "sInfoFiltered": "(filtré à partir de _MAX_ éléments au total)",
                                        "sInfoThousands": ",",
                                        "sLengthMenu": "Afficher _MENU_ éléments",
                                        "sLoadingRecords": "Chargement...",
                                        "sProcessing": "Traitement...",
                                        "sSearch": "Rechercher :",
                                        "sZeroRecords": "Aucun élément correspondant trouvé",
                                        "oPaginate": {
                                            "sFirst": "Premier",
                                            "sLast": "Dernier",
                                            "sNext": "Suivant",
                                            "sPrevious": "Précédent"
                                        },
                                        "oAria": {
                                            "sSortAscending": ": activer pour trier la colonne par ordre croissant",
                                            "sSortDescending": ": activer pour trier la colonne par ordre décroissant"
                                        },
                                        "select": {
                                            "rows": {
                                                "_": "%d lignes sélectionnées",
                                                "0": "Aucune ligne sélectionnée",
                                                "1": "1 ligne sélectionnée"
                                            }
                                        }
                                    }

                                }

                            );
                            $('#table_id_filter input').addClass(
                                'input w-56 box pr-10 m-2 placeholder-theme-13 shadow-lg ml-8 h-10 serch'
                            );

                            $('#table_id_paginate a').addClass(
                                'hover:shadow-lg transition bg-none duration-150 ease-in-out transform hover:scale-125 font-bold py-2 px-4 rounded'
                            );
                            $('.current').attr('style',
                                'background: rgb(26, 56, 159); border-radius: 9px; padding: 12px; display: inline-block; width: 46px; border: none; font-weight: 600; color:white !important;'
                            )
                            $('.current').addClass('hover:shadow-lg ');

                            $('#table_id_filter input')
                                .attr('style',
                                    `
                                width: 14rem;
                                margin-left: 0.75rem;
                                border-radius: 0.5rem;
                                --border-opacity: 1;
                                border-color: #e2e8f0;
                                border-color: rgba(226, 232, 240, var(--border-opacity));
                                `);
                            $('#table_id_filter input')
                                .attr('placeholder', 'Recherche...');
                            $('#table_id_filter label').attr('class',
                                'font-semibold');
                            $('#table_id_length label').attr('class',
                                'font-semibold');
                            $('#table_id_length select').attr('class', 'h-10');
                            $('#table_id_length select').attr('style',
                                `
                                margin-left: 0.75rem;
                                border-radius: 0.5rem;
                                --border-opacity: 1;
                                border-color: #e2e8f0;
                                border-color: rgba(226, 232, 240, var(--border-opacity));
                            `);

                            console.log(data);
                        },
                        error: function(error) {
                            console.log(error);
                        },
                    });
                }
            });
            $("body").on('click', '.delete', function() {
                $.ajax({
                    url: `{{ route('delete_formul') }}`,
                    type: 'post',
                    dataType: 'json',
                    data: {
                        id_form: $(this).data('id')
                    },
                    success: function(data) {
                        Swal.fire({
                            title: 'Chargerment',
                            html: "un moment s'il vous plaît",
                            timer: 1000,
                            timerProgressBar: true,
                            didOpen: () => {
                                Swal.showLoading()
                                timerInterval = setInterval(() => {
                                    const content = Swal.getContent()
                                    if (content) {
                                        const b = content.querySelector('b')
                                        if (b) {
                                            b.textContent = Swal
                                                .getTimerLeft()
                                        }
                                    }
                                }, 100)
                            },
                            willClose: () => {
                                clearInterval(timerInterval)
                            }
                        }).then(() => {
                            $('.result').html(data);
                            $('#table_id').DataTable({
                                    "aaSorting": [],
                                    "language": {

                                        "sEmptyTable": "Aucune donnée disponible dans le tableau",
                                        "sInfo": "Affichage de l'élément _START_ à _END_ sur _TOTAL_ éléments",
                                        "sInfoEmpty": "Affichage de l'élément 0 à 0 sur 0 élément",
                                        "sInfoFiltered": "(filtré à partir de _MAX_ éléments au total)",
                                        "sInfoThousands": ",",
                                        "sLengthMenu": "Afficher _MENU_ éléments",
                                        "sLoadingRecords": "Chargement...",
                                        "sProcessing": "Traitement...",
                                        "sSearch": "Rechercher :",
                                        "sZeroRecords": "Aucun élément correspondant trouvé",
                                        "oPaginate": {
                                            "sFirst": "Premier",
                                            "sLast": "Dernier",
                                            "sNext": "Suivant",
                                            "sPrevious": "Précédent"
                                        },
                                        "oAria": {
                                            "sSortAscending": ": activer pour trier la colonne par ordre croissant",
                                            "sSortDescending": ": activer pour trier la colonne par ordre décroissant"
                                        },
                                        "select": {
                                            "rows": {
                                                "_": "%d lignes sélectionnées",
                                                "0": "Aucune ligne sélectionnée",
                                                "1": "1 ligne sélectionnée"
                                            }
                                        }
                                    }

                                }

                            );
                            $('#table_id_filter input').addClass(
                                'input w-56 box pr-10 m-2 placeholder-theme-13 shadow-lg ml-8 h-10 serch'
                            );

                            $('#table_id_paginate a').addClass(
                                'hover:shadow-lg transition bg-none duration-150 ease-in-out transform hover:scale-125 font-bold py-2 px-4 rounded'
                            );
                            $('.current').attr('style',
                                'background: rgb(26, 56, 159); border-radius: 9px; padding: 12px; display: inline-block; width: 46px; border: none; font-weight: 600; color:white !important;'
                            )
                            $('.current').addClass('hover:shadow-lg ');

                            $('#table_id_filter input')
                                .attr('style',
                                    `
                                width: 14rem;
                                margin-left: 0.75rem;
                                border-radius: 0.5rem;
                                --border-opacity: 1;
                                border-color: #e2e8f0;
                                border-color: rgba(226, 232, 240, var(--border-opacity));
                                `);
                            $('#table_id_filter input')
                                .attr('placeholder', 'Recherche...');
                            $('#table_id_filter label').attr('class',
                                'font-semibold');
                            $('#table_id_length label').attr('class',
                                'font-semibold');
                            $('#table_id_length select').attr('class', 'h-10');
                            $('#table_id_length select').attr('style',
                                `
                                margin-left: 0.75rem;
                                border-radius: 0.5rem;
                                --border-opacity: 1;
                                border-color: #e2e8f0;
                                border-color: rgba(226, 232, 240, var(--border-opacity));
                            `);
                        });

                    },
                    error: function(error) {
                        console.log(error);
                    },
                });
            })
        });
    </script>
@endsection