@extends('base')

@section('content')

    <div id="message"></div>

    <div class="alert alert-success text-center">FORMULES MODIFICATIONS GROUPEES</div>

    <!-- LIGNE 1 : Action -->
    <div class="row" style="margin-bottom: 15px;">
        <div class="form-group col-md-12">
            <label for="action">Action</label>
            <select class="form-control" style="color:black !important;" id="action">
                <option value="0">Ne remplacer que les codes produits</option>
                <option value="1">Remplacer les codes produits sans vérifier les quantités d'origine</option>
                <option value="2">Remplacer les codes produits en vérifiant les quantités d'origine</option>
            </select>
        </div>
    </div>

    <!-- LIGNE 2 : 6 Critères de sélection -->
    <div class="row" style="margin-bottom: 15px;">
        <div class="form-group col-md-2">
            <label for="designation_beton_id">Désignation béton</label>
            <select class="form-control" style="color:black !important" id="designation_beton_id">
                <option value="">Toutes</option>
                @foreach($designation_betons as $db)
                    <option value="{{ $db->id_designation_beton }}">{{ $db->designation_beton_code }} ->
                        {{ $db->designation_beton_libelle }}
                    </option>
                @endforeach
            </select>
        </div>
        <div class="form-group col-md-2">
            <label for="classe_consistance_id">Classe consistance</label>
            <select class="form-control" style="color:black !important" id="classe_consistance_id">
                <option value="">Toutes</option>
                @foreach($classe_consistances as $cc)
                    <option value="{{ $cc->id_classe_consistance }}">{{ $cc->classe_consistance_code }} ->
                        {{ $cc->classe_consistance_libelle }}
                    </option>
                @endforeach
            </select>
        </div>
        <div class="form-group col-md-2">
            <label for="classe_resistance_id">Classe résistance</label>
            <select class="form-control" style="color:black !important" id="classe_resistance_id">
                <option value="">Toutes</option>
                @foreach($classe_resistances as $cr)
                    <option value="{{ $cr->id_classe_resistance }}">{{ $cr->classe_resistance_code }} ->
                        {{ $cr->classe_resistance_libelle }}
                    </option>
                @endforeach
            </select>
        </div>
        <div class="form-group col-md-2">
            <label for="type_beton_id">Type de béton</label>
            <select class="form-control" style="color:black !important" id="type_beton_id">
                <option value="">Tous</option>
                @foreach($type_betons as $tb)
                    <option value="{{ $tb->id_type_beton }}">{{ $tb->type_beton_code }} -> {{ $tb->type_beton_libelle }}
                    </option>
                @endforeach
            </select>
        </div>
        <div class="form-group col-md-2">
            <label for="classe_chlorure_id">Classe chlorure</label>
            <select class="form-control" style="color:black !important" id="classe_chlorure_id">
                <option value="">Toutes</option>
                @foreach($classe_chlorures as $cl)
                    <option value="{{ $cl->id_classe_chlorure }}">{{ $cl->classe_chlorure_code }} ->
                        {{ $cl->classe_chlorure_libelle }}
                    </option>
                @endforeach
            </select>
        </div>
        <div class="form-group col-md-2">
            <label for="classe_exposition_id">Classe exposition</label>
            <select class="form-control" style="color:black !important" id="classe_exposition_id">
                <option value="">Toutes</option>
                @foreach($classe_expositions as $ce)
                    <option value="{{ $ce->id_classe_exposition }}">{{ $ce->classe_exposition_code }} ->
                        {{ $ce->classe_exposition_libelle }}
                    </option>
                @endforeach
            </select>
        </div>
    </div>

    <!-- LIGNE 3 : Centrale, Variante, Type -->
    <div class="row" style="margin-bottom: 15px;">
        <div class="form-group col-md-4">
            <label for="centrale">Centrale</label>
            <select class="form-control" style="color:black !important" id="centrale">
                @foreach($centrales as $c)
                    <option value="{{ $c->id_centrale }}">{{ $c->centrale_code }} -> {{ $c->centrale_nom }}</option>
                @endforeach
            </select>
        </div>
        <div class="form-group col-md-4">
            <label for="formule_variant_id">Variante</label>
            <select class="form-control" style="color:black !important" id="formule_variant_id">
                @foreach($variants as $v)
                    <option value="{{ $v->id_formule_variant }}" {{ ($v->id_formule_variant == 1 || $v->formule_variant_code == 'STD') ? 'selected="selected"' : '' }}>{{ $v->formule_variant_code }} ->
                        {{ $v->formule_variant_libelle }}
                    </option>
                @endforeach
            </select>
        </div>
        <div class="form-group col-md-4">
            <label for="type_produit">Type</label>
            <select class="form-control" style="color:black !important" id="type_produit">
                <option value="9">Aucun</option>
                <option value="0">Gra</option>
                <option value="1">Liant</option>
                <option value="2">EAU</option>
                <option value="3">ADJ</option>
                <option value="5">Ajout</option>
            </select>
        </div>
    </div>

    <!-- LIGNES SUIVANTES : 5 Paires de produits et quantites -->
    <div class="card p-3 mb-3"
        style="background-color: #f8f9fa; border: 1px solid #dee2e6; border-radius: 5px; padding: 15px; margin-bottom: 15px;">
        <div class="row" style="margin-bottom: 15px; border-bottom: 1px solid #dee2e6; padding-bottom: 10px;">
            <div class="col-md-6" style="border-right: 2px solid #000; padding-right: 20px;">
                <h5 style="font-weight: bold; margin: 0; color: #000;">Produits à remplacer</h5>
            </div>
            <div class="col-md-6" style="padding-left: 20px;">
                <h5 style="font-weight: bold; margin: 0; color: #000;">Produits de remplacement</h5>
            </div>
        </div>
        @for($i = 1; $i <= 5; $i++)
            <div class="row product-pair-row" style="margin-bottom: 10px;">
                <div class="col-md-6" style="border-right: 2px solid #000; padding-right: 20px;">
                    <div class="form-row">
                        <div class="form-group col">
                            <label for="produit_{{ $i }}">Produit {{ $i }} à remplacer</label>
                            <select class="form-control produit-select" style="color:black !important" id="produit_{{ $i }}"
                                data-index="{{ $i }}">
                            </select>
                        </div>
                        <div class="form-group col-md-4 qte-remplacer-col" style="display: none;">
                            <label for="qte_produit_{{ $i }}">Qté {{ $i }} à remplacer</label>
                            <input type="number" step="any" min="0" class="form-control qte-input"
                                style="color:black !important" id="qte_produit_{{ $i }}" placeholder="Qté">
                        </div>
                    </div>
                </div>
                <div class="col-md-6" style="padding-left: 20px;">
                    <div class="form-row">
                        <div class="form-group col">
                            <label for="produit_substitution_{{ $i }}">Produit {{ $i }} de remplacement</label>
                            <select class="form-control produit-subst-select" style="color:black !important"
                                id="produit_substitution_{{ $i }}" data-index="{{ $i }}">
                            </select>
                        </div>
                        <div class="form-group col-md-4 qte-substitution-col">
                            <label for="qte_substitution_{{ $i }}">Qté {{ $i }} remplacement</label>
                            <input type="number" step="any" min="0" class="form-control qte-input"
                                style="color:black !important" id="qte_substitution_{{ $i }}" placeholder="Qté">
                        </div>
                    </div>
                </div>
            </div>
        @endfor
    </div>

    <!-- BOUTON VALIDER -->
    <div class="row mb-3" style="margin-bottom: 15px;">
        <div class="form-group col-md-12 text-center">
            <button class="btn btn-success" id="valider">Valider</button>
        </div>
    </div>

    <div class="col-md-12 text-center">Nombre de formule(s) : <span class="badge"
            style="background : #dff0d8; color :#000; font-size: 15px; margin-bottom:0.5%;"> </span></div>

    <div class="table-responsive">
        <table class="table table-striped table-hover table-bordered" id="table_liste_formule" style="width:100%">
            <thead style="background-color:#28a745; color:white">
                <tr>
                    <th class="text-center"><input type="checkbox" name="select_all" value="1" id="select_all"></th>
                    <th scope="col" class="text-center">CODE</th>
                    <th scope="col" class="text-center">APP COMMERCIALE</th>
                    <th scope="col" class="text-center">VARIANTE</th>
                    <th scope="col" class="text-center">PRODUIT 1</th>
                    <th scope="col" class="text-center">QTE PRODUIT 1</th>
                    <th scope="col" class="text-center">PRODUIT 2</th>
                    <th scope="col" class="text-center">QTE PRODUIT 2</th>
                    <th scope="col" class="text-center">PRODUIT 3</th>
                    <th scope="col" class="text-center">QTE PRODUIT 3</th>
                    <th scope="col" class="text-center">PRODUIT 4</th>
                    <th scope="col" class="text-center">QTE PRODUIT 4</th>
                    <th scope="col" class="text-center">PRODUIT 5</th>
                    <th scope="col" class="text-center">QTE PRODUIT 5</th>
                    <th scope="col" class="text-center">DÉSIGNATION BÉTON</th>
                    <th scope="col" class="text-center">CLASSE CONSISTANCE</th>
                    <th scope="col" class="text-center">CLASSE RÉSISTANCE</th>
                    <th scope="col" class="text-center">TYPE BÉTON</th>
                    <th scope="col" class="text-center">CLASSE CHLORURE</th>
                    <th scope="col" class="text-center">CLASSE EXPOSITION</th>
                </tr>
            </thead>
        </table>
    </div>

    <script>
        $(document).ready(function () {
            $('title').text("MODIFICATION GROUPEE FORMULE - SMART CENTRAL");

            function updateActionState() {
                var action = $("#action").val();
                if (action == "0") {
                    $(".qte-remplacer-col").hide();
                    $(".qte-substitution-col").hide();
                } else if (action == "1") {
                    $(".qte-remplacer-col").hide();
                    $(".qte-substitution-col").show();
                } else if (action == "2") {
                    $(".qte-remplacer-col").show();
                    $(".qte-substitution-col").show();
                }
            }

            $(document).on('keydown', '.qte-input, input[type="number"]', function (e) {
                if (['e', 'E', '+', '-'].includes(e.key)) {
                    e.preventDefault();
                }
            });

            $(document).on('input', '.qte-input, input[type="number"]', function () {
                this.value = this.value.replace(/[^0-9.,]/g, '');
            });

            $("#action").change(function () {
                updateActionState();
            });
            updateActionState();

            $("#type_produit").change(function (e) {
                e.preventDefault();
                var type_produit = $("#type_produit").val();
                var id_centrale = $("#centrale").val();

                function reponse1(retour) {
                    for (var i = 1; i <= 5; i++) {
                        $("#produit_" + i).html(retour.produit);
                    }
                    table_liste_formule.ajax.reload(null, false);
                }

                if (type_produit == 0 || type_produit == 1 || type_produit == 2 || type_produit == 3 || type_produit == 4) {
                    $.get("{{ url('formule_modification_groupee/liste_produit') }}", { 'type_produit': type_produit, 'centrale_id': id_centrale }, reponse1, 'json');
                } else if (type_produit == 5) {
                    $.get("{{ url('formule_modification_groupee/liste_produit') }}", { 'type_ajout': type_produit, 'centrale_id': id_centrale }, reponse1, 'json');
                } else {
                    for (var i = 1; i <= 5; i++) {
                        $("#produit_" + i).html("<option></option>");
                    }
                }

                function reponse2(retour) {
                    for (var i = 1; i <= 5; i++) {
                        $("#produit_substitution_" + i).html(retour.produit);
                    }
                }

                if (type_produit == 0 || type_produit == 1 || type_produit == 2 || type_produit == 3 || type_produit == 4) {
                    $.get("{{ url('formule_modification_groupee/liste_produit_substitution') }}", { 'type_produit': type_produit, 'centrale_id': id_centrale }, reponse2, 'json');
                } else if (type_produit == 5) {
                    $.get("{{ url('formule_modification_groupee/liste_produit_substitution') }}", { 'type_ajout': type_produit, 'centrale_id': id_centrale }, reponse2, 'json');
                } else {
                    for (var i = 1; i <= 5; i++) {
                        $("#produit_substitution_" + i).html("<option></option>");
                    }
                }
            });

            var table_liste_formule = $('#table_liste_formule').DataTable({
                scrollX: true,
                scrollCollapse: true,
                autoWidth: true,
                paging: false,
                iDisplayLength: 100,
                ajax: {
                    url: "{{ url('formule_modification_groupee/table') }}",
                    type: "GET",
                    beforeSend: function () {
                        $('.ring').show();
                        $('#filtre_loading').show();
                    },
                    data: {
                        'centrale_id': function () { return $('#centrale').val(); },
                        'produit_type': function () { return $("#type_produit").val(); },
                        'action': function () { return $("#action").val(); },
                        'produits_a_remplacer': function () {
                            var prods = [];
                            for (var i = 1; i <= 5; i++) {
                                var val = $("#produit_" + i).val();
                                if (val && val !== '') {
                                    prods.push(val);
                                }
                            }
                            return prods;
                        },
                        'qtes_a_remplacer': function () {
                            var qtes = [];
                            for (var i = 1; i <= 5; i++) {
                                var val = $("#qte_produit_" + i).val();
                                qtes.push(val !== undefined ? val : '');
                            }
                            return qtes;
                        },
                        'formule_variant_id': function () { return $("#formule_variant_id").val(); },
                        'designation_beton_id': function () { return $("#designation_beton_id").val(); },
                        'classe_consistance_id': function () { return $("#classe_consistance_id").val(); },
                        'classe_resistance_id': function () { return $("#classe_resistance_id").val(); },
                        'type_beton_id': function () { return $("#type_beton_id").val(); },
                        'classe_chlorure_id': function () { return $("#classe_chlorure_id").val(); },
                        'classe_exposition_id': function () { return $("#classe_exposition_id").val(); },
                    },
                    dataSrc: function (json) {
                        $('.ring').hide();
                        $('#filtre_loading').hide();
                        $(".badge").html(json.recordsTotal);
                        return json.data;
                    },
                    error: function () {
                        $('.ring').hide();
                        $('#filtre_loading').hide();
                    }
                },
                columnDefs: [
                    {
                        targets: 0,
                        searchable: false,
                        orderable: false,
                        data: function (json) {
                            var data_select = json['DT_RowId'];
                            return '<input type="checkbox" class="form-control formule_a_selecter" value="' + data_select + '">';
                        },
                        defaultContent: null
                    },
                    { className: "text-center align-middle", targets: "_all" },
                    { width: "20px", targets: [0] }
                ],
                order: [[1, 'asc']]
            });

            $('#select_all').on('click', function () {
                var rows = table_liste_formule.rows({ 'search': 'applied' }).nodes();
                $('input[type="checkbox"]', rows).prop('checked', this.checked);
            });

            $(document).on('change input', '.produit-select, .qte-remplacer-col input, #action, #formule_variant_id, #designation_beton_id, #classe_consistance_id, #classe_resistance_id, #type_beton_id, #classe_chlorure_id, #classe_exposition_id', function (e) {
                table_liste_formule.ajax.reload(null, false);
            });

            $("#centrale").change(function (e) {
                table_liste_formule.ajax.reload(null, false);
                $("#type_produit").change();
            });

            $("#valider").click(function (e) {
                e.preventDefault();
                if (confirm("Êtes-vous sûr(e) ?")) {
                    $('.ring').show();
                    $('#filtre_loading').show();
                    var formule_selected = [];

                    $(".formule_a_selecter:checked").each(function (index) {
                        formule_selected.push($(this).val());
                    });

                    if (formule_selected.length != 0) {
                        var pairs = [];
                        for (var i = 1; i <= 5; i++) {
                            var p_id = $("#produit_" + i).val();
                            var p_subst = $("#produit_substitution_" + i).val();
                            var q_prod = $("#qte_produit_" + i).val();
                            var q_subst = $("#qte_substitution_" + i).val();

                            if ((p_id && p_id !== '') || (p_subst && p_subst !== '')) {
                                pairs.push({
                                    'produit_id': (p_id && p_id !== '') ? p_id : 0,
                                    'qte_produit': q_prod,
                                    'produit_substitution': (p_subst && p_subst !== '') ? p_subst : 0,
                                    'qte_substitution': q_subst
                                });
                            }
                        }

                        if (pairs.length === 0) {
                            $('.ring').hide();
                            $('#filtre_loading').hide();
                            alert("Veuillez sélectionner au moins une paire de produits à remplacer.");
                            return;
                        }

                        function reponse(retourPHP) {
                            $('.ring').hide();
                            $('#filtre_loading').hide();
                            $('#message').html(retourPHP.message);
                            $('#message').show();
                            setTimeout(function () { $('#message').hide(); }, 3000);
                            setTimeout(function () { table_liste_formule.ajax.reload(null, false); }, 3000);
                        }

                        $.post("{{ url('formule_modification_groupee/valider') }}", {
                            "_token": "{{ csrf_token() }}",
                            "action": $("#action").val(),
                            "formule": formule_selected,
                            "centrale_id": $("#centrale").val(),
                            "type_produit": $("#type_produit").val(),
                            "formule_variant_id": $("#formule_variant_id").val(),
                            "pairs": pairs
                        }, reponse, "json");
                    } else {
                        $('.ring').hide();
                        $('#filtre_loading').hide();
                        alert("Veuillez cocher au moins une formule dans le tableau.");
                    }
                }
            });
        });
    </script>

@endsection