@php use App\Models\profil;
use Carbon\Carbon; @endphp

@extends('base')

@section('content')
<div id="message"></div>
<div class="alert alert-danger text-center" id="message_base_supprimer"></div>
<div class="alert alert-danger text-center" id="message_base_erreur"></div>

<div class="alert alert-success text-center">LISTE DES DEMANDES D'ACTIONS</div>

<div class="row">
    <div class="form-group col-md-2">
        <label for="date_debut">Début:</label>
        <input type="date" class="form-control" style="color:black !important" id="date_debut" value="{{Carbon::now()->format('Y-m-d')}}">
    </div>
    <div class="form-group col-md-2">
        <label for="date_fin">Fin:</label>
        <input type="date" class="form-control" style="color:black !important" id="date_fin" value="{{Carbon::now()->format('Y-m-d')}}">
    </div>



</div>

<div class="row">
<div class="col-md-3">
        <label for="recherche" id="label_rechercher_centrale">Centrale :</label>
        <select type="text" class="form-control" id="recherche_centrale"  placeholder="recherche centrale">
            <option value="0">TOUTES</option>
            @foreach ($centrales as $centrale)
                <option value="{{$centrale->id_centrale}}"> {{ $centrale->centrale_code }} -> {{ $centrale->centrale_nom }}</option>
            @endforeach

        </select>
    </div>
    <div class="col-md-3">
        <label for="recherche" id="label_rechercher_type_demande">Type de demande :</label>
        <select type="text" class="form-control" id="recherche_type_demande"  placeholder="recherche type demande">
            <option value="0">TOUTES</option>

            @foreach ($type_demande_actions as $type_demande_action)
                <option value="{{$type_demande_action->id_type_demande_action}}"> {{ $type_demande_action->type_demande_action_code }} -> {{ $type_demande_action->type_demande_action_libelle }}</option>
            @endforeach
        </select>
    </div>
    <div class="col-md-3">
        <label for="recherche" id="label_rechercher_message_demande">Type de message :</label>
        <select type="text" class="form-control" id="recherche_message_demande"  placeholder="recherche message demande">
            <option value="0">TOUS</option>

            @foreach ($message_demande_actions as $message_demande_action)
                <option value="{{$message_demande_action->id_message_demande_action}}"> {{ $message_demande_action->message_demande_action_code }} -> {{ $message_demande_action->message_demande_action_libelle }}</option>
            @endforeach



        </select>
    </div>

    <div class="col-md-2" style="text-align: right;padding-top: 2%;padding-right: 3%;">
        <button class="btn btn-success refrech" >Rafraichir</button>
    </div>
</div>

<div class="col-md-12 text-center">Nombre des demande d'action(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_demande_action">
        <thead style="background-color:#28a745; color:white">
            <tr>
                <th scope="col" class="text-center">CODE</th>
                <th scope="col" class="text-center ">CENTRALE</th>
                <th scope="col" class="text-center">SOCIETE</th>
                <th scope="col" class="text-center ">DIVISION</th>
                <th scope="col" class="text-center">DATE BL</th>
                <th scope="col" class="text-center ">DATE DEMANDE</th>
                <th scope="col" class="text-center">HEURE</th>
                <th scope="col" class="text-center ">DEMANDER PAR</th>
                <th scope="col" class="text-center ">TYPE DEMANDE</th>
                <th scope="col" class="text-center ">MESSAGE DEMANDE</th>
                <th scope="col" class="text-center">DEMANDE ACTION</th>
                <th scope="col" class="text-center ">APPROUVE</th>
                <th scope="col" class="text-center">DATE APPROUVE</th>
                <th scope="col" class="text-center">APPROUVE PAR</th>
                <th scope="col" class="text-center ">FAIT</th>
                <th scope="col" class="text-center">DATE FAIT</th>
                <th scope="col" class="text-center">FAIT PAR</th>
                <th scope="col" class="text-center">REMPLACEMENT</th>
            </tr>
        </thead>
        <tbody class="tbody_demande_action">
        </tbody>


    </table>
</div>

<script>
    $(function() { // Dom ready
        $('title').text("DEMANDE ACTION - SMART CENTRAL");

        var table = $('#table_demande_action').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,
        // fixedHeader: true,
        scrollCollapse: true,
        autoWidth: true,
        // paging: true,
        // serverSide: true,
        iDisplayLength: '50',
        dom: 'lBfrtip',
        buttons: [
            { "extend": 'excel', "text": 'Export excel', "className": 'btn_export_excel', title: 'Liste de(s) activité(s)',"attr": {"style" :"color: rgb(255, 255, 255); background-color: rgb(33, 136, 56);"}}
        ],



        'ajax': {
            'url': '{{url('demande_action/table')}}',
            'type': 'GET',
            'data': {
                        'date_debut': function() { return $("#date_debut").val() },
                        'date_fin': function() { return $("#date_fin").val() },
                        'recherche_centrale': function() { return $('#recherche_centrale').val()},
                        'recherche_type_demande': function() { return $('#recherche_type_demande').val()},
                        'recherche_message_demande': function() { return $('#recherche_message_demande').val()},
                        },


                'dataSrc': function (json) {

                    $('.badge').html(json.recordsTotal);

                    return json.data;
            },
        }, 



        columnDefs: [
            {
                "targets": 8,
                "data": function(json) {
                    var data_select = json[8];

                    var select = '<select class="type_demande_action_change form-control"> <option value="0">Aucun</option> ';
                    $.each(data_select, function(i, item) {
                        select += '<option value="' + item[0] + '" ';
                        if (item[0] == item[3]) { select += 'selected'; }
                        select += '>' + item[1] + ' -> ' + item[2] + '</option>';

                    });
                    select += '</select>';
                    return select;
                },
                "defaultContent": null
 


            },

            { "className": "text-center align-middle demande_action_approuve th_cursor_pointer", "targets": [11] },
            { "className": "text-center align-middle demande_action_traite th_cursor_pointer", "targets": [14] },
            { "className": "text-center align-middle", "targets": "_all" },

            { "width": "150px", "targets": [4] },
            { "width": "150px", "targets": [5] },
            { "width": "150px", "targets": [7] },
            { "width": "150px", "targets": [8] },
            { "width": "150px", "targets": [12] },
            { "width": "150px", "targets": [10] },
            
            ]
        });
        $(".refrech").click(function (e){
                e.preventDefault();
                table.ajax.reload(null, false);

        });

        $("#date_debut").change(function (e){
            e.preventDefault();
            $('.refrech').click()
        });
        $("#date_fin").change(function (e){
            e.preventDefault();
            $('.refrech').click()
        });
        $("#recherche_centrale").change(function (e){
            e.preventDefault();
            $('.refrech').click()
        });
        $("#recherche_type_demande").change(function (e){
            e.preventDefault();
            $('.refrech').click()
        });
        $("#recherche_message_demande").change(function (e){
            e.preventDefault();
            $('.refrech').click()
        });


    $('#table_demande_action tbody').on('click', '.demande_action_approuve', function(e) {
                e.preventDefault();


                var data = table.row($(this).parents('tr')).data();
                var id_demande_action = data['DT_RowId'];
                function reponse(donnees) {
                    if (donnees.success) {
                        $("#message").html(donnees.message);
                    $("#message").show(700);
                    setTimeout("$('.refrech').click()", 2000);
                    setTimeout("$( '#message' ).hide()", 2000);
                    setTimeout("$( '#message' ).empty()", 2000);
                    }
                    else{

                    $("#message_base_erreur").html(donnees.message);
                    $("#message_base_erreur").show(700);
                    setTimeout("$('.refrech').click()", 2000);
                    setTimeout("$( '#message_base_erreur' ).hide()", 2000);
                    setTimeout("$( '#message_base_erreur' ).empty()", 2000);
                }
                };

                


                $.get('{{url('demande_action')}}/'+id_demande_action+'/demande_action_approuve' ,reponse, 'json');
            });

    $('#table_demande_action tbody').on('click', '.demande_action_traite', function(e) {
                e.preventDefault();
                var data = table.row($(this).parents('tr')).data();
                var id_demande_action = data['DT_RowId'];

        function reponse(donnees) {

            if (donnees.success) {
                        $("#message").html(donnees.message);
                    $("#message").show(700);
                    setTimeout("$('.refrech').click()", 2000);
                    setTimeout("$( '#message' ).hide()", 2000);
                    setTimeout("$( '#message' ).empty()", 2000);
                    }
                    else{

                    $("#message_base_erreur").html(donnees.message);
                    $("#message_base_erreur").show(700);
                    setTimeout("$('.refrech').click()", 2000);
                    setTimeout("$( '#message_base_erreur' ).hide()", 2000);
                    setTimeout("$( '#message_base_erreur' ).empty()", 2000);
                }


        };
        $.get('{{url('demande_action')}}/'+id_demande_action+'/demande_action_traite' ,reponse, 'json');

        });

        $('#table_demande_action tbody').on('change', '.type_demande_action_change', function() {
        // e.preventDefault();
        var data = table.row($(this).parents('tr')).data();
        var id_demande_action = data['DT_RowId'];
        // console.log ($(this).val());
        function reponse(donnees) {


            $("#message").html(donnees.message);
            $("#message").show(700);
            setTimeout("$('.refrech').click()", 2000);
            setTimeout("$( '#message' ).hide()", 2000);
            setTimeout("$( '#message' ).empty()", 2000);



        };
        $.get('{{ url('demande_action') }}/' + data['DT_RowId'] + '/demande_action_type_change/' + $(this).val(), reponse, 'json');


    });
});
</script>


@endsection