@extends('base')

@section('content')

    <div class="alert alert-success text-center">LISTE DES VARIANTES DE FORMULE</div>
    <button class="btn btn-success" id="rafraichir"><i class="fas fa-sync-alt"></i> Rafraîchir</button>
    <div id="filtre"><button type="button" class="fermer btn btn-danger">X</button></div>
    <div id="affiche_formule_variant"></div>
    <div class="col-md-12 text-center" style="margin-top:0.5%">
        Nombre de variantes de formule : <span class="badge" style="background : #dff0d8; color: #000; font-size: 15px; margin-bottom:0.5%;">0</span>
    </div>
    <div class="table-responsive">
        <table class="table table-striped table-hover table-bordered" id="table_formule_variant" style="width:100%">
            <thead style="background-color:#28a745; color:white">
            <tr>
                <th scope="col" class="text-center">CODE</th>
                <th scope="col" class="text-center">LIBELLÉ</th>
                <th scope="col" class="text-center">STATUT EN PRODUCTION</th>
                <th scope="col" class="text-center">SUPPRIMER</th>
            </tr>
            </thead>
        </table>
    </div>

    <script>
        $(function() {
            $('title').text("VARIANTES FORMULES - SMART CENTRAL");

            $("#filtre").click(function(e) {
                e.preventDefault();
                $("#affiche_formule_variant").hide();
                $("#filtre").hide();
            });

            $(".fermer").click(function(e) {
                e.preventDefault();
                $("#filtre").click();
            });

            var table = $('#table_formule_variant').on('processing.dt', function (e, settings, processing) {
                $('.ring').css('display', processing ? 'block' : 'none');
                $('#filtre_loading').css('display', processing ? 'block' : 'none');
            }).DataTable({
                scrollX: true,
                orderCellsTop: true,
                scrollCollapse: true,
                autoWidth: true,
                iDisplayLength: '50',
                dom: 'lBfrtip',
                buttons: [
                    {
                        "extend": 'excel',
                        "text": 'Export excel',
                        "className": 'btn_export_excel',
                        title: 'Liste des variantes de formules',
                        "attr": {"style": "color: rgb(255, 255, 255); background-color: rgb(33, 136, 56);"}
                    }
                ],
                'ajax': {
                    'url': '{{url('formule_variant/table')}}',
                    'type': 'GET',
                    'dataSrc': function (json) {
                        $('.badge').html(json.recordsTotal);
                        return json.data;
                    },
                },
                columnDefs: [
                    { "className": "text-center align-middle modifier_formule_variant th_cursor_pointer font-weight-bold", "targets": [0, 1] },
                    { "className": "text-center align-middle", "targets": [2] },
                    { "className": "text-center align-middle", "targets": [3] },
                    { 'className': 'text-center align-middle', 'targets': '_all' },
                ],
            });

            $("#rafraichir").click(function (e){
                e.preventDefault();
                table.ajax.reload(null, false);
            });

            $('#table_formule_variant tbody').on('click', '.modifier_formule_variant', function(e) {
                e.preventDefault();
                var data = table.row($(this).parents('tr')).data();
                var id_formule_variant = data['DT_RowId'];
                $("#filtre").show();
                $("#affiche_formule_variant").empty();
                $("#affiche_formule_variant").show();

                $.get('{{url('formule_variant')}}/' + id_formule_variant + '/modifier', function(retour) {
                    $("#affiche_formule_variant").html(retour);
                }, 'html');
            });

            // Action activer une variante
            $('#table_formule_variant tbody').on('click', '.btn_activer_variante', function(e) {
                e.preventDefault();
                var id_formule_variant = $(this).data('id');

                $.post('{{url('formule_variant')}}/' + id_formule_variant + '/activer', {
                    _token: '{{ csrf_token() }}'
                }, function(retour) {
                    if (retour.success) {
                        $("#message").html(retour.message).show();
                        setTimeout(function() { $('#message').hide(); }, 3000);
                        table.ajax.reload(null, false);
                    } else {
                        $("#message_base_erreur").html(retour.message).show();
                        setTimeout(function() { $('#message_base_erreur').hide(); }, 3000);
                    }
                }, 'json');
            });

            // Action supprimer variante
            $('#table_formule_variant tbody').on('click', '.supprimer_formule_variant', function(e) {
                e.preventDefault();
                var data = table.row($(this).parents('tr')).data();
                var id_formule_variant = data['DT_RowId'];

                if (confirm("Êtes-vous sûr(e) ? Toutes les compositions associées à cette variante seront définitivement supprimées en cascade.")) {
                    $.ajax({
                        url: '{{url('formule_variant')}}/' + id_formule_variant + '/supprimer',
                        method: 'DELETE',
                        data: { _token: '{{ csrf_token() }}' },
                        success: function(retour) {
                            if (retour.success) {
                                $("#message_base_supprimer").html(retour.message).show();
                                setTimeout(function() { $('#message_base_supprimer').hide(); }, 3000);
                                table.ajax.reload(null, false);
                            } else {
                                $("#message_base_erreur").html(retour.message).show();
                                setTimeout(function() { $('#message_base_erreur').hide(); }, 3000);
                            }
                        },
                        error: function(xhr) {
                            console.error(xhr);
                        }
                    });
                }
            });
        });
    </script>
@endsection