@extends('layouts.app',[
    'class' => '',
    'folderActive' => 'operations',
    'elementActive' => 'pending'
])


@section('head_supplement')
    <style>
        td:hover {
            background: beige;
        }

        .over_hidden {
            position: absolute;
            display: none;
            width: 100%;
            left: 0;
            background: white;
            border: 1px solid #ccc;
            padding: 2%;
            z-index: 222;
        }

        .show_hover:hover .over_hidden {
            display: none
        }

        td .col-md-12.col-xl-2 {
            /*    display: inline-block;
                flex: 0;
                 max-width: 30%;
                vertical-align: top;
                min-width: 30%;*/
        }

        td .widget-content {
            width: auto;
            margin: auto;
            padding: 0;

        }

        td .widget-content .widget-content-wrapper {
            display: inline-block;
            text-align: center;
        }

        td .widget-numbers {
            font-size: 19px !important;
        }

        td .widget-content-left {
            display: block;
            margin: auto;
        }

        td .widget-content .widget-content-left .widget-heading {
            opacity: .8;
            font-weight: bold;
            font-size: 10px;
        }

        td .widget-content .widget-content-right {
            margin: auto !important;
        }

        .table th, .table td {
            vertical-align: middle;
            text-align: center;
        }

        td .no-gutters {
            margin-right: 0px;
            margin-left: 0px;
            column-count: 2;
        }

        td {
            border-right: 2px solid #ccc;
            border-left: 2px solid #ccc;
            border-bottom: 2px solid #ccc;
        }
    </style>
@endsection

@section('content')
    <div class="app-page-title">
        <div class="page-title-wrapper">
            <div class="page-title-heading">
                <div class="page-title-icon">
                    <i class="fas fa-clipboard-list icon-gradient bg-mean-fruit"></i>
                </div>
                <div>
                    Opérations
                    <div class="page-title-subheading">
                        Liste des opérations en attentes
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row mb-3">
        @if(Auth::user()->client_id == 0)
            <div class="mb-2 mb-sm-0 col-12 col-md-3">
                <label for="inspecteur_filter" class="mr-sm-2">Client</label>
                <select class="form-control select_filter select2" id="inspecteur_filter" data-column="4">
                    <option value="">Filtrer par client</option>
                    @foreach($clients as $client)
                        <option value="{{ $client->client_id }}">{{ $client->client_title }}</option>
                    @endforeach
                </select>
            </div>
            <div class="mb-2 mb-sm-0 col-12 col-md-3">
                <label for="exampleEmail22" class="mr-sm-2">Statut de l'opération</label>
                <select class="form-control select_filter select2" data-column="9">
                    <option value="">Filtrer par statut de l'opération</option>
                    <option value="1">Opération terminée</option>
                    <option value="0">Opération en cours</option>
                </select>
            </div>
            <div class="mb-2 mb-sm-0 col-12 col-md-3">
                <label for="exampleEmail22" class="mr-sm-2">Filtrer par nom d'opération</label>
                <input class="form-control input_filter " id="nom_filter" data-column="2" value="">
            </div>
        @endif
    </div>
    <div class="row">
        <div class="col-md-12 col-xl-12">
            <div class="col-md-12">
                <div class="main-card mb-3 card">
                    <div class="table-responsive">
                        <table id="liste_operations"
                               class="align-middle mb-0 table table-borderless table-striped table-hover ">
                            <thead>
                            <tr>
                                <th style="display:none">Date de création de l'opération</th>
                                <th>Date de création de l'opération</th>
                                <th>Nom de l'opération</th>
                                <th style="display:none">Client</th>
                                <th>Client</th>
                                <th style="display:none">Statut</th>
                                <th>Statut</th>
                            </tr>
                            </thead>
                            @foreach ($operations as $operation)
                                <tr>
                                    <td
                                        style="display:none">
                                        {{ strtotime(str_replace('/', '-', $operation['date_creation'])) }}
                                    </td>
                                    <td>
                                        {{ date("d/m/Y", strtotime($operation['date_creation'])) }}
                                    </td>
                                    <td>
                                        <a href="{{ route('operations.show', $operation->operation_id) }}">
                                            <strong>
                                                <span class="show_hover">

                        {{ $operation['operation_title'] }}
                    </div>
                    <td>
                        {{ strtoupper($operation['client_title']) }}
                    </td>
                    <td style="display:none">
                        {{ strtoupper($operation['client_id']) }}
                    </td>
                    <td style="display:none">
                        {{ $operation['statut_operation'] }}
                    </td>
                    <td>
                        <a href="/operations/fiche_operation/{{ $operation->operation_id }}">
                            <button class="btn btn-primary">
                                Opérations en attente de validation
                            </button>
                        </a>
                    </td>
                    @endforeach
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript"
            src="{{ asset('js/datatables.js') }}"></script>
    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function () {
            const table = $('#liste_operations').DataTable(
                {
                    "language":
                        {
                            "sProcessing": "Traitement en cours...",

                            "sSearch": "Rechercher&nbsp;:",

                            "sLengthMenu": "Afficher _MENU_ &eacute;l&eacute;ments",

                            "sInfo": "Affichage de l'&eacute;l&eacute;ment _START_ &agrave; _END_ sur _TOTAL_ &eacute;l&eacute;ments",

                            "sInfoEmpty": "Affichage de l'&eacute;l&eacute;ment 0 &agrave; 0 sur 0 &eacute;l&eacute;ment",

                            "sInfoFiltered": "(filtr&eacute; de _MAX_ &eacute;l&eacute;ments au total)",

                            "sInfoPostFix": "",

                            "sLoadingRecords": "Chargement en cours...",

                            "sZeroRecords": "Aucun &eacute;l&eacute;ment &agrave; afficher",

                            "sEmptyTable": "Aucune donn&eacute;e disponible dans le tableau",

                            "oPaginate":
                                {
                                    "sFirst": "Premier",

                                    "sPrevious": "Pr&eacute;c&eacute;dent",

                                    "sNext": "Suivant",

                                    "sLast": "Dernier"
                                },
                            "paginate": {
                                "previous": "<",
                                "text": "ooo",
                                "next": ">"
                            }
                        },

                    "searching": true,

                    "ordering": true,
                    "order": [[0, "desc"]],

                    "sortable": true,

                    "pageLength": 150,

                    "bLengthChange": false,

                    "bInfo": false,

                    "bFilter": false,

                    "dom": '<"top"i>rt<"bottom"p><"clear">',

                    "pagingType": "simple",

                    "initComplete": function (settings, json) {
                        $('#count').text(this.api().data().length);
                        // var info = table.page.info();

                        // if(info.pages==1 || info.pages==0) {$('.pagination').hide();}
                    },
                    drawCallback: function () {

                        $('.paginate_button.next', this.api().table().container())
                            .on('click', function () {
                                // var info = table.page.info();
                                // if(info.pages==1 || info.pages==0) {$('.pagination').hide();}


                            });
                        $('.paginate_button.previous', this.api().table().container())
                            .on('click', function () {
                                // var info = table.page.info();
                                // if(info.pages==1 || info.pages==0) {$('.pagination').hide();}


                            });

                    },


                }
            );

            new $.fn.dataTable.Buttons(table, {
                buttons: [
                    {
                        extend: 'copy',
                        text: '<i class="fa fa-files-o"></i> Copy',
                        titleAttr: 'Copy',
                        className: 'btn btn-default btn-sm',
                        exportOptions: {
                            columns: ':visible'
                        }
                    },
                    {
                        extend: 'csv',
                        text: '<i class="fa fa-files-o"></i> CSV',
                        titleAttr: 'CSV',
                        className: 'btn btn-default btn-sm',
                        exportOptions: {
                            columns: ':visible'
                        }
                    },
                    {
                        extend: 'excel',
                        text: '<i class="fa fa-files-o"></i> Excel',
                        titleAttr: 'Excel',
                        className: 'btn btn-default btn-sm',
                        exportOptions: {
                            columns: ':visible'
                        }
                    },
                    {
                        extend: 'pdf',
                        text: '<i class="fa fa-file-pdf-o"></i> PDF',
                        titleAttr: 'PDF',
                        className: 'btn btn-default btn-sm',
                        exportOptions: {
                            columns: ':visible'
                        }
                    },
                    {
                        extend: 'print',
                        text: '<i class="fa fa-print"></i> Print',
                        titleAttr: 'Print',
                        className: 'btn btn-default btn-sm',
                        exportOptions: {
                            columns: ':visible'
                        }
                    },
                ]
            });
            table.buttons().container().appendTo('.outside_buttons');

            $('.change_initial').on('click', function () {

                $(".change_initial").each(function () {
                    $(this).removeClass('active');
                });
                $(this).addClass('active');


                if ($(this).data("id") != '0') {
                    table.column(3).search($(this).data("id")).draw();
                } else {
                    table.column(3).search("1|2|3|4|5|6|7|8|9", true, false).draw()
                }
            });

            $('#cancel_filters').on('click', function () {

                $(".change_initial").each(function () {
                    $(this).removeClass('active');
                });
                table.columns().every(function () {
                    var data = this.search('').draw();
                    // ... do something with data(), or this.nodes(), etc
                });
                table.page.len($('#change_length').val()).draw();

            });

            $('#change_length').on('change', function () {
                table.page.len($('#change_length').val()).draw();

            });

            $('.select_filter').on('change', function () {

                table.column("" + $(this).data('column') + "").search("^" + $(this).val() + "$", true, false, true).draw();

            });

            $('.input_filter').on('keyup', function () {
                table.column("" + $(this).data('column') + "").search($(this).val()).draw();


            });

            $('.input_filter').on('blur', function () {
                table.column("" + $(this).data('column') + "").search($(this).val()).draw();


            });

            $('#get_client_status').blur();
        });
    </script>
@endsection