@extends('layouts.embedded')
@section('title', $viewData["title"])
@section('subtitle', $viewData["subtitle"])
@section('content')
<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    @if($errors->any())
    <ul class="alert alert-danger list-unstyled">
        @foreach($errors->all() as $error)
        <li>- {{ $error }}</li>
        @endforeach
    </ul>
    @endif
    <form method="POST" action="" id="form_update" data-attr="">
        @csrf
        <div class="modal-dialog modal-xs">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">ADD COMMENTS</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col">
                            <div class="input-group mb-3">
                                <label class="input-group-text">COMMENT</label>
                                <select class="form-select form-control" aria-label="reason_input" id="reason_input"
                                    name="reason_input">
                                    <option value="">please choose a comment</option>
                                    @foreach ($viewData["all_reasons"] as $reason)
                                    <option value="{{ $reason->reason  }}">{{ $reason->reason  }}
                                    </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="input-group mb-3">
                            <label class="input-group-text">VALID UNTIL</label>
                            <input name="valid_until_date_input" id="valid_until_date_input" value="" type="text"
                                class="form-control">
                        </div>
                    </div>
                </div>
                <div style="text-align: center" id="message"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">CLOSE</button>
                    <button type="submit" disabled class="btn btn-primary" id="button_save_modal"
                        data-attr="{{ route('anomalies.update_ano_reasons_modal') }}">SAVE CHANGES</button>
                    <button type="submit" class="btn btn-danger" id="button_reset_modal"
                        data-attr="{{ route('anomalies.reset_ano_reasons_modal') }}">DELETE SELECTION</button>
                </div>
            </div>
        </div>
    </form>
</div>

<div class="card">
    <div class="card-body" id="data_filter">
        <form method="POST" action="" id="form_filter" data-attr="{{ route('anomalies.update_display_anomalies') }}">
            @csrf
            <div class="row">
                <div class="col">
                    <div class="input-group mb-3">

                        <label class="input-group-text">USER</label>
                        <input class="form-control" list="datalistOptions" id="user_email_filter"
                            name="user_email_filter" placeholder="TYPE TO SEARCH...">
                        <datalist id="datalistOptions">
                            @foreach ($viewData["user_email"] as $user_email)
                            <option value="{{ $user_email->user_email  }}">
                                @endforeach
                        </datalist>
                        <span role='button' class="input-group-text">

                            <i class="bi-search"></i>
                        </span>

                    </div>
                </div>
                <div class="col">
                    <div class="input-group mb-3">
                        <label class="input-group-text">COUNTRY</label>
                        <select class="form-select form-control" aria-label="country_reference_filter"
                            name="country_reference_filter" id="country_reference_filter">
                            <option value="--ALL--">--ALL--</option>
                            @foreach ($viewData["country_reference"] as $country_reference)
                            <option value="{{ $country_reference->country_reference  }}">
                                {{ $country_reference->country_reference }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col">
                    <div class="input-group mb-3">
                        <label class="input-group-text">COMPANY</label>
                        <select class="form-select form-control" aria-label="company_filter" name="company_filter"
                            id="company_filter">
                            <option value="--ALL--">--ALL--</option>
                            @foreach ($viewData["company"] as $company)
                            <option value="{{ $company->company  }}">{{ $company->company }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col">
                    <div class="input-group mb-3">
                        <label class="input-group-text">ANOMALY</label>
                        <select class="form-select form-control" aria-label="action_filter" name="action_filter"
                            id="action_filter">
                            <option value="--ALL--">--ALL--</option>
                            @foreach ($viewData["action"] as $action)
                            <option value="{{ $action->action  }}">{{ $action->action }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div class="input-group mb-3">
                        <label class="input-group-text">COMMENT</label>
                        <select class="form-select form-control" aria-label="reason_filter" name="reason_filter"
                            id="reason_filter">
                            <option value="--ALL--">--ALL--</option>
                            @foreach ($viewData["reason"] as $reason)
                            <option value="{{ $reason->reason  }}">
                                {{ $reason->reason }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col">
                    <div class="input-group mb-3">
                        <label class="input-group-text">VALID UNTIL</label>
                        <select class="form-select form-control" aria-label="valid_until_date_filter"
                            name="valid_until_date_filter" id="valid_until_date_filter">
                            <option value="--ALL--">--ALL--</option>
                            @foreach ($viewData["valid_until_date"] as $valid_until_date)
                            <option value="{{ $valid_until_date->valid_until_date  }}">
                                {{ $valid_until_date->valid_until_date }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col">
                <button type="button" class="btn btn-outline-primary" id="button_reset_filters">CLEAR ALL</button>
                </div>
                @if ($viewData["pagination"] == 1)
                    <input type="hidden" id="page_requested" name="page_requested" value="{{ $viewData['current_page'] }}">
                @endif
                <input type="hidden" id="keep_pagination" name="keep_pagination" value="">
            </div>
        </form>
    </div>
</div>
<BR>
<div class="card" id="data_body">
    <div class="card-header">
        {{ strtoupper($viewData["nb_anomalies"]) }} ANOMALIES SELECTED
        @if ($viewData["pagination"] == 1)
             (1000 PER PAGE)
        @endif 
    </div>
    <div class="card-body">
        @if ($viewData["pagination"] == 1)
        <nav aria-label="Page navigation">
            <ul class="pagination justify-content-center pagination-sm">
                @if ($viewData["previous_links"]['active'] == 1)    
                     <li class="page-item"><a class="page-link" href="" onclick="page_link_send({{ $viewData['previous_links']['link'] }})">PREVIOUS</a></li>
                @else
                    <li class="page-item disabled"><a class="page-link">PREVIOUS</a></li>
                @endif
                @foreach ($viewData["pagination_links"] as $page_link)
                    @if ($page_link['active'] == 1)
                       <li class="page-item active"><a class="page-link" href="" onclick="page_link_send({{ $page_link['link'] }})">{{ $page_link['text'] }}</a></li>
                    @else    
                        @if ($page_link['link'] == "")
                            <li class="page-item disabled"><a class="page-link" href="">{{ $page_link['text'] }}</a></li>                        
                        @else
                            <li class="page-item"><a class="page-link" href="" onclick="page_link_send({{ $page_link['link'] }})">{{ $page_link['text'] }}</a></li>                        
                        @endif
                    @endif
                @endforeach
                @if ($viewData["next_links"]['active'] == 1)    
                     <li class="page-item"><a class="page-link" href="" onclick="page_link_send({{ $viewData['next_links']['link'] }})">NEXT</a></li>
                @else
                    <li class="page-item disabled"><a class="page-link">NEXT</a></li>
                @endif
            </ul>
        </nav>
        @endif
        <div class="text-center" id="loader" style="display:none">
            <div class="spinner-border" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
        </div>
        <table class="table table-hover">
            <thead>
                <tr>
                    <th scope="col">
                        <i id="bouton_selectall" class="btn btn-outline-primary btn-sm bi-x-square"
                            title="select all"></i>
                        <i id="open_link" class="btn btn-outline-primary btn-sm bi-pencil" title="edit"></i>
                    </th>
                    <th scope="col">USER</th>
                    <th scope="col">COMPANY</th>
                    <th scope="col">ANOMALY</th>
                    <th scope="col">COMMENT</th>
                    <th scope="col">VALID UNTIL</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($viewData["list_anomalies"] as $anomaly)
                <tr>
                    <td>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="1"
                                id="check*{{ $anomaly->user_action }}" name="check*{{ $anomaly->user_action }}">

                        </div>
                    </td>
                    <td title="{{ $anomaly->user_email }}">
                        @if (strlen($anomaly->user_email) > 30)
                        {{ substr($anomaly->user_email,0,30)  }}...
                        @else
                        {{ $anomaly->user_email }}
                        @endif
                    </td>
                    <td title="{{ $anomaly->company }}">
                        @if (strlen($anomaly->company) > 20)
                        {{ substr($anomaly->company,0,20)  }}...
                        @else
                        {{ $anomaly->company }}
                        @endif
                    </td>
                    <td>{{ $anomaly->action }}</td>
                    <td>{{ $anomaly->reason }}</td>
                    <td>{{ $anomaly->valid_until_date }}</td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
<script>
//gestion de la pagination
function page_link_send(link)
{
//$(document).on('change', '#form_filter', function(event) {
    event.preventDefault();
    //preparation des données du formulaire
    //change the hidden field before sending data
    //on veut garder la pagination sur la page active
    $('#page_requested').val(link);
    $('#keep_pagination').val("1");
    let href = $('#form_filter').attr('data-attr');
    let donnee_form = $('#form_filter').serialize();
    //donnee_form = donnee_form + "&page_requested=" + link;

//alert(link);
    //envoi d'une requetes ajax
    $.ajax({
        type: "POST",
        url: href,
        data: donnee_form,
        beforeSend: function() {
            // $('#loader').show();
        },
        success: function(result) {
            //$('#myModal').modal("show");
            //mise à jour du div data_body
            $('#data_body').html(result).show();
        },
        complete: function() {
            // $('#loader').hide();
        },
        error: function(jqXHR, testStatus, error) {
            // console.log(error);
            // alert("Page " + href + " cannot open. Error:" + error);
            // $('#loader').hide();
        },
        timeout: 8000
    })
}
//reset des formulaires     
$(document).on('click', '#button_reset_filters', function(event) {
    event.preventDefault();
    $('#user_email_filter').val("");
    $('#country_reference_filter').val("--ALL--");
    $('#company_filter').val("--ALL--");
    $('#action_filter').val("--ALL--");
    $('#reason_filter').val("--ALL--");
    $('#valid_until_date_filter').val("--ALL--");
    $("#form_filter").trigger("change");
});

//blocage / déblocage du bouton d'envoi du formulaire si les champs sont vides ou non     
$(document).on('change', '#form_update', function(event) {
    event.preventDefault();

    var lag_reason = $("#reason_input").val();
    var valid_until_date = $("#valid_until_date_input").val();

    if ((lag_reason == "") || (valid_until_date == "")) {
        $("#button_save_modal").prop("disabled", true);
    }
    if ((lag_reason != "") && (valid_until_date != "")) {
        $("#button_save_modal").prop("disabled", false);
    }
});

//Mise à jour des données losque l'on modifie un filtres    
$(document).on('change', '#form_filter', function(event) {
    event.preventDefault();
    //preparation des données du formulaire
    //change the hidden field before sending data
    //on ne veut pas garder la pagination sur la page active
    //$('#page_requested').val("");
    $('#keep_pagination').val("0");    
    let href = $(this).attr('data-attr');
    let donnee_form = $(this).serialize();

    //envoi d'une requetes ajax
    $.ajax({
        type: "POST",
        url: href,
        data: donnee_form,
        beforeSend: function() {
            // $('#loader').show();
        },
        success: function(result) {
            //$('#myModal').modal("show");
            //mise à jour du div data_body
            $('#data_body').html(result).show();
        },
        complete: function() {
            // $('#loader').hide();
        },
        error: function(jqXHR, testStatus, error) {
            // console.log(error);
            // alert("Page " + href + " cannot open. Error:" + error);
            // $('#loader').hide();
        },
        timeout: 8000
    })

    //envoi d'une deuxieme requete pour mettre à jour les filtres (avec les éléments saisis)
    href = "{{ route('anomalies.update_filters') }}";
    donnee_form = $("#form_filter").serialize(); //utile pour le champ CSRF
    $.ajax({
        type: "POST",
        url: href,
        data: donnee_form,
        beforeSend: function() {
            // $('#loader').show();
        },
        success: function(result) {

            $('#data_filter').html(result).show();
        },
        complete: function() {
            // $('#loader').hide();
        },
        error: function(jqXHR, testStatus, error) {
            // console.log(error);
            // alert("Page " + href + " cannot open. Error:" + error);
            // $('#loader').hide();
        },
        timeout: 8000
    })
});

//supprime l'effet de la touche enter ou return au niveau des filtres(bug)
$("#form_filter").keypress(function() {
    if (event.which == 13) {
        event.preventDefault();
    }
    //console.log(event.which);
});

//changement du curseur sur les boutons permettant de changer les checkbox et d'ouvrir le formulaire de saisie
$(document).on('mouseover', '#bouton_selectall', function(event) {
    event.preventDefault();
    $(this).css('cursor', 'pointer');
});

$(document).on('mouseover', '#open_link', function(event) {
    event.preventDefault();
    $(this).css('cursor', 'pointer');
});


//select all or unselect all checkboxes
var selected_chechbox = false;
var compteur = 0;
var test;
$(document).on('click', '#bouton_selectall', function(event) {
    event.preventDefault();

    if (selected_chechbox == false) {
        $("input[type=checkbox]").each(function() {
            if ($(this).prop('name').substring(0, 6) == "check*") {
                $(this).prop('checked', true);
            }
            $('#bouton_selectall').prop('class', "btn btn-outline-primary btn-sm bi-square");
            $('#bouton_selectall').prop('title', "unselect all");
        });
        selected_chechbox = true;
    } else {
        $("input[type=checkbox]").each(function() {
            if ($(this).prop('name').substring(0, 6) == "check*") {
                $(this).prop('checked', false);
            }
            $('#bouton_selectall').prop('class', "btn btn-outline-primary btn-sm bi-x-square");
            $('#bouton_selectall').prop('title', "select all");
        });
        selected_chechbox = false;
    }
});

//Display modal form
$(document).on('click', '#open_link', function(event) {
    //$('#loader').show();
    event.preventDefault();
    var compteur = 0;
    //compte le nb de checkbox cochées
    $("input[type=checkbox]").each(function() {
        if (($(this).prop('name').substring(0, 6) == "check*") && ($(this).is(":checked"))) {
            compteur = compteur + 1;
        }
    });
    if (compteur > 0) {
        //au moins un plan d'action doit être sélectionné
        $('#message').html(compteur + " anomalies will be updated").show();
        $('#myModal').modal("show");
    } else {
        alert("Please select one anomaly at least")
    }
});

//Sélection d'une date
$(function() {
    $("#valid_until_date_input").datepicker({
        dateFormat: 'dd-mm-yy'
    });
});

//send modal form - save data
$(document).on('click', '#button_save_modal', function(event) {
    event.preventDefault();
    var href = $('#button_save_modal').attr('data-attr');
    var donnee_form = $(form_update).serialize();

    $("input[type=checkbox]").each(function() {
        if (($(this).prop('name').substring(0, 6) == "check*") && ($(this).is(":checked"))) {
            donnee_form = donnee_form + "&" + $(this).prop('name') + "=1";
        }
    });

    //Envoi des éléments du formulaire de saisie pour qu'ils soient enregistrés
    $.ajax({
        type: "POST",
        url: href,
        data: donnee_form,
        beforeSend: function() {
            // $('#loader').show();
        },
        success: function(result) {
            //$('#myModal').modal("show");

            //envoi d'une seconde requete pour mettre à jour les données (avec les éléments saisis)
            //change the hidden field before sending data
            //on veut garder la pagination sur la page active
            //$('#page_requested').val(link);
            $('#keep_pagination').val("1");            
            var href = $("#form_filter").attr('data-attr');
            var donnee_form = $("#form_filter").serialize();
            $.ajax({
                type: "POST",
                url: href,
                data: donnee_form,
                beforeSend: function() {
                    // $('#loader').show();
                },
                success: function(result) {

                    $('#data_body').html(result).show();
                },
                complete: function() {
                    // $('#loader').hide();
                },
                error: function(jqXHR, testStatus, error) {
                    // console.log(error);
                    // alert("Page " + href + " cannot open. Error:" + error);
                    // $('#loader').hide();
                },
                timeout: 8000
            })

            //envoi d'une troisieme requete pour mettre à jour les filtres (avec les éléments saisis)
            var href = "{{ route('anomalies.update_filters') }}";
            var donnee_form = $("#form_filter").serialize(); //utile pour le champ CSRF
            $.ajax({
                type: "POST",
                url: href,
                data: donnee_form,
                beforeSend: function() {
                    // $('#loader').show();
                },
                success: function(result) {

                    $('#data_filter').html(result).show();
                },
                complete: function() {
                    // $('#loader').hide();
                },
                error: function(jqXHR, testStatus, error) {
                    // console.log(error);
                    // alert("Page " + href + " cannot open. Error:" + error);
                    // $('#loader').hide();
                },
                timeout: 8000
            })

        },
        complete: function() {
            // $('#loader').hide();
            $('#myModal').modal("hide");
        },
        error: function(jqXHR, testStatus, error) {
            // console.log(error);
            // alert("Page " + href + " cannot open. Error:" + error);
            // $('#loader').hide();
        },
        timeout: 8000
    })
});

//send modal form - reset data
$(document).on('click', '#button_reset_modal', function(event) {

    event.preventDefault();
    var href = $('#button_reset_modal').attr('data-attr');
    var donnee_form = $(form_update).serialize(); //utile pour le champ CSRF
    var compteur = 0;

    $("input[type=checkbox]").each(function() {
        if (($(this).prop('name').substring(0, 6) == "check*") && ($(this).is(":checked"))) {
            donnee_form = donnee_form + "&" + $(this).prop('name') + "=1";
            compteur = compteur + 1;
        }
    });

    if (window.confirm("Are you sure you want to reset the " + compteur + " actions selected ?")) {
        //Envoi des éléments du formaulaire de saisie pour qu'ils soient supprimés
        $.ajax({
            type: "POST",
            url: href,
            data: donnee_form,
            beforeSend: function() {
                // $('#loader').show();
            },
            success: function(result) {
                //$('#myModal').modal("show");

                //envoi d'une seconde requete pour mettre à jour les données (avec les éléments saisis)
                //change the hidden field before sending data
                //on veut garder la pagination sur la page active
                //$('#page_requested').val(link);
                $('#keep_pagination').val("1");                
                var href = $("#form_filter").attr('data-attr');
                var donnee_form = $("#form_filter").serialize();
                $.ajax({
                    type: "POST",
                    url: href,
                    data: donnee_form,
                    beforeSend: function() {
                        // $('#loader').show();
                    },
                    success: function(result) {

                        $('#data_body').html(result).show();
                    },
                    complete: function() {
                        // $('#loader').hide();
                    },
                    error: function(jqXHR, testStatus, error) {
                        // console.log(error);
                        // alert("Page " + href + " cannot open. Error:" + error);
                        // $('#loader').hide();
                    },
                    timeout: 8000
                })
                //envoi d'une troisieme requete pour mettre à jour les filtres (avec les éléments saisis)
                var href = "{{ route('anomalies.update_filters') }}";
                var donnee_form = $("#form_filter").serialize(); //utile pour le champ CSRF
                $.ajax({
                    type: "POST",
                    url: href,
                    data: donnee_form,
                    beforeSend: function() {
                        // $('#loader').show();
                    },
                    success: function(result) {

                        $('#data_filter').html(result).show();
                    },
                    complete: function() {
                        // $('#loader').hide();
                    },
                    error: function(jqXHR, testStatus, error) {
                        // console.log(error);
                        // alert("Page " + href + " cannot open. Error:" + error);
                        // $('#loader').hide();
                    },
                    timeout: 8000
                })

            },
            complete: function() {
                // $('#loader').hide();
                $('#myModal').modal("hide");
            },
            error: function(jqXHR, testStatus, error) {
                // console.log(error);
                // alert("Page " + href + " cannot open. Error:" + error);
                // $('#loader').hide();
            },
            timeout: 8000
        })
    }
});
</script>
@endsection