@php
    $commande=\App\Models\commande::find($commande_id);
@endphp

<div class="alert text-center" id="entete" style="background:#000000 !important; color: white !important;margin-top: 5%">
    <h1>Planification Automatique {{ $commande->commande_of == 1 ? '' : ' prévisionnel' }}</h1>
</div>

<div class="col-md-12 text-center row alert alert-danger" style="margin-left:0.4%">
    <div class="col-md-6 text-center">
        Quantité planifiée :
        <span class="badge badge-danger" id="badge_quantite_planifiee">0</span>
    </div>
    <div class="col-md-6 text-center">
        Quantité restant à planifier :
        <span class="badge badge-danger" id="badge_reste_a_planifier">0</span>
    </div>
</div>

<form action="" id="form_planification_auto">
    <div class="row">
        <div class="col-md-6">
            <div class="cadre border border-dark rounded" style="height:25.5vh;overflow-y:auto !important; margin-top:-3%">

                <div class="form-group row col-md-11" style="margin-bottom:1% !important">
                    <label for="numero_commande_of_auto" class="col-sm-4 col-form-label col-form-label-sm">Code</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control form-control-sm" id="numero_commande_of_auto"
                               value="{{ $commande->commande_code }}" style="color:black" disabled>
                    </div>
                </div>

                <div class="form-group row col-md-11" style="margin-bottom:1% !important">
                    <label for="client_id" class="col-sm-4 col-form-label col-form-label-sm">Client</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control form-control-sm" id="client_id"
                               value="{{ $commande->lier_client?->client_code??'' }} -> {{ $commande->lier_client?->client_nom ?? '' }}" style="color:black" disabled>
                    </div>
                </div>

                <div class="form-group row col-md-11" style="margin-bottom:1% !important">
                    <label for="chantier_id" class="col-sm-4 col-form-label col-form-label-sm">Chantier</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control form-control-sm" id="chantier_id"
                               value="{{ $commande->lier_chantier?->chantier_code ??'' }} -> {{ $commande->lier_chantier?->chantier_nom ??'' }}" style="color:black" disabled>
                    </div>
                </div>

                <div class="form-group row col-md-11" style="margin-bottom:1% !important">
                    <label for="centrale_id" class="col-sm-4 col-form-label col-form-label-sm">Centrale</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control form-control-sm" id="centrale_id"
                               value="{{ $commande->lier_centrale?->centrale_code ?? '' }} -> {{ $commande->lier_centrale?->centrale_nom??'' }}" style="color:black" disabled>
                    </div>
                </div>

                <div class="form-group row col-md-11" style="margin-bottom:1% !important">
                    <label for="formule_id" class="col-sm-4 col-form-label col-form-label-sm">Formule</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control form-control-sm" id="formule_id"
                               value="{{ $commande->lier_formule?->formule_code??'' }} -> {{ $commande->lier_formule?->formule_app_commerciale }}" style="color:black" disabled>
                    </div>
                </div>

            </div>
        </div>

        <div class="col-md-6">
            <div class="cadre border border-dark rounded" style="height:25.5vh;overflow-y:auto !important; margin-top:-3%">
                <div class="form-row col-md-11">

                    <div class="form-group col-md-4">
                        <label class="col-form-label-sm" for="quantite_commande_of_auto" style="margin-bottom: -10%;">Commandée</label>
                        <input type="text" class="form-control form-control-sm" id="quantite_commande_of_auto"
                               value="{{ $commande->commande_qte_commande }}" disabled>
                    </div>

                    <div class="form-group col-md-4">
                        <label class="col-form-label-sm" for="quantite_accepte_of_auto" style="margin-bottom: -10%;">Acceptée</label>
                        <input type="text" class="form-control form-control-sm" id="quantite_accepte_of_auto"
                               value="{{ $commande->commande_qte_commande - $commande->commande_qte_restant }}" disabled>
                    </div>

                    <div class="form-group col-md-4">
                        <label class="col-form-label-sm" for="quantite_reste_of_auto" style="margin-bottom: -10%;">Reste</label>
                        <input type="text" class="form-control form-control-sm" id="quantite_reste_of_auto"
                               value="{{ $commande->commande_qte_restant }}" disabled>
                    </div>

                    <div class="form-group col-md-6" style="margin-top:-5%">
                        <label class="col-form-label-sm" for="date_livraison_of_auto" style="margin-bottom: -10%;">Date</label>
                        <input type="date" class="form-control form-control-sm" id="date_livraison_of_auto"
                               value="{{ date('Y-m-d', strtotime($commande->commande_date_livraison)) }}" disabled>
                    </div>

                    <div class="form-group col-md-6" style="margin-top:-5%">
                        <label class="col-form-label-sm" for="heure_livraison_of_auto" style="margin-bottom: -10%;">Heure</label>
                        <input type="time" class="form-control form-control-sm" id="heure_livraison_of_auto"
                               value="{{ date('H:i', strtotime($commande->commande_heure_livraison)) }}" disabled>
                    </div>

                    <div class="form-group col-md-4" style="margin-top:-5%">
                        <label class="col-form-label-sm" for="cadencement_of_auto" style="margin-bottom: -10%;">Cadencement</label>
                        <input type="time" class="form-control form-control-sm" id="cadencement_of_auto"
                               value="{{ date('H:i', strtotime($commande->commande_cadence)) }}" disabled>
                    </div>

                    <div class="form-group col-md-4" style="margin-top:-5%">
                        <label class="col-form-label-sm" for="commande_tps_acces" style="margin-bottom: -10%;">Tps accés</label>
                        <input type="time" class="form-control form-control-sm" id="commande_tps_acces"
                               value="{{ date('H:i', strtotime($commande->commande_tps_acces)) }}" disabled>
                    </div>

                    <div class="form-group col-md-4" style="margin-top:-5%">
                        <label class="col-form-label-sm" for="tps_mort" style="margin-bottom: -10%;">Tps mort</label>
                        <input type="time" class="form-control form-control-sm" id="tps_mort" name="tps_mort" value="00:10">
                    </div>

                    <div class="form-group col-md-6" style="margin-top:-5%">
                        <label class="col-form-label-sm" for="moyen_dechargement_of_auto" style="margin-bottom: -10%;">Moy.Décharg</label>
                        <input type="text" class="form-control form-control-sm" id="moyen_dechargement_of_auto" value="" disabled>
                    </div>

                    <div class="form-group col-md-6" style="margin-top:-5%">
                        <label class="col-form-label-sm" for="type_vehicule_of_auto" style="margin-bottom: -10%;">TYPE VEHI</label>
                        <input type="text" class="form-control form-control-sm" id="type_vehicule_of_auto" value="" disabled>
                    </div>

                </div>
            </div>
        </div>

        <div class="col-md-12">
            <div class="cadre border border-dark rounded" style="height:21vh;overflow-y:auto !important">
                <table class="table table-sm table-hover table-bordered" id="table_vehicule_selectable" style="width:100%">
                    <thead style="background-color:#28a745; color:white">
                    <tr>
                        <th class="text-center" scope="col">select</th>
                        <th class="text-center" scope="col">CODE</th>
                        <th class="text-center" scope="col">LIBELLE</th>
                        <th class="text-center" scope="col">CAPACITE</th>
                        <th class="text-center" scope="col">TYPE VEHICULE</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>

    <div class="col-md-12 text-center" style="margin-top:0%">
        <button id="valider_planification_auto" style="margin-right:3%" type="button" class="btn btn-success btn-sm">
            Valider
        </button>

        <button type="button" class="btn btn-success btn-sm" id="reset_planification_auto">
            Nouveau
        </button>
    </div>
</form>

<script>
    $(function () { // DOM ready

        function verifier_quantite_planifier() {
            var id_commande = {{ $commande->id_commande }};

            function reponse(retour) {
                $("#badge_quantite_planifiee").html(retour.quantite_planifiee);
                $("#badge_reste_a_planifier").html(retour.reste_a_planifier);
            }

            $.get('{{ route('planning.verifier_quantite_planifier') }}', {id_commande: id_commande}, reponse, 'json');
        }

        verifier_quantite_planifier();

        var table_vehicule_selectable = $('#table_vehicule_selectable').DataTable({
            scrollX: true,
            searching: false,
            bLengthChange: false,
            scrollCollapse: true,
            autoWidth: true,
            paging: false,
            "ajax": {
                "url": '{{ route('planning.vehicule_selectable') }}',
                "type": "GET",
            },
            columnDefs: [
                {
                    "targets": 0,
                    "data": function (json) {
                        var data_select = json['DT_RowId'];
                        return '<input type="checkbox" class="form-control vehicule_select" value="' + data_select + '"> ';
                    },
                    "defaultContent": null
                },
                {"className": "text-center align-middle ", "targets": "_all"},
            ],
            createdRow: function (row, data, index) {
                $(row).addClass('vehicule_a_selectee');
            }
        });

        $("#valider_planification_auto").click(function (e) {
            e.preventDefault();

            var tableau_vehicule_selected = [];

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

            if (tableau_vehicule_selected.length == 0) {
                alert("Choisissez vos véhicules");
                return;
            }

            $("#filtre_loading").show();
            $(".ring").show();
            $("#span_loading").show();

            function reponse(retour) {
                $("#filtre_loading").hide();
                $(".ring").hide();
                $("#span_loading").hide();

                $("#message").removeClass('alert-success alert-danger').addClass(retour.success ? 'alert-success' : 'alert-danger');
                $("#message").html(retour.message);
                $("#message").show();

                verifier_quantite_planifier();
                setTimeout('$("#message").hide()', 3000);

                if (retour.success) {
                    setTimeout(function () {
                        $("#reset_planification_auto").click();
                    }, 2000);
                    $(".refrech").click();
                }
            }

            $.post('{{ route('planning.of_auto_valider') }}', {
                _token: '{{ csrf_token() }}',
                tableau_vehicule_selected: tableau_vehicule_selected,
                id_commande: {{ $commande->id_commande }},
                tps_mort: $("#tps_mort").val()
            }, reponse, "json");
        });

        $("#reset_planification_auto").click(function (e) {
            e.preventDefault();
            $('.vehicule_select').filter(':checkbox').prop('checked', false);
        });

    }); // Fin dom ready
</script>