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

@section('content')

    <div class="app-page-title">
        <div class="page-title-wrapper">
            <div class="page-title-heading">
                <div class="page-title-icon">
                    <i class="fa fa-calendar icon-gradient bg-arielle-smile"> </i>
                </div>
                <div>
                    Factures
                    <div class="page-title-subheading">
                        Liste des factures
                    </div>
                </div>
            </div>
        </div>
    </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_factures"
                               class="align-middle mb-0 table table-borderless table-striped table-hover datatable">

                            <thead>
                            <tr>
                                <th>Date du rapport</th>
                                <th>Rapport</th>
                                <th>Client</th>
                                <th>Lieu d'inspection</th>
                                <th>Montant</th>
                                <th>Facture</th>
                                <th>Date de la facture</th>
                            </tr>
                            </thead>
                            <tbody id="item">

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <style type="text/css">
        .dataTables_paginate {
            float: left;
            min-height: 50px;
            padding-top: 11px;
        }

        .paginate_button:hover {
            background: white;
            border: 1px solid #3f6ad8;
            color: #3f6ad8;
        }

        .paginate_button {
            margin: 15px;
            background: #3f6ad8;
            color: white;
            border-radius: 5px;
            padding: 5px 12px;
            border: 1px solid #3f6ad8;
        }

    </style>
    <script type="text/javascript"
            src="{{ asset('js/datatables.js') }}"></script>
    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function () {
            loader.show();
            axios.get('/api/factures/all', {
                headers: {
                    'Authorization': `Bearer ${token}`
                },
            }).then(response => {
                const data = response.data;

                data.forEach((item) => {
                    let string = '<td>' + item.date_rapport + '</td>' +
                        '<td>' + item.nom_rapport + '</td>' +
                        '<td>' + item.client_title + '</td>' +
                        '<td>' + item.proprietaire_name + ' <br/> ' + item.proprietaire_adresse + '<br>' + item.proprietaire_cp + ' ' + item.proprietaire_ville + '</td>' +
                        '<td>' + (item.montant_facture != null ? item.montant_facture : '') + '</td>' +
                        '<td>' + item.nom_facture + '</td>' +
                        '<td>' + (item.date_facture !== '1970-01-01' ? moment(item.date_facture).format('DD/MM/YYYY') : '<div class="btn btn-danger">Date de facture non renseignée</div>') + '</td>';
                    let child = document.createElement('tr');
                    child.innerHTML = string;
                    document.getElementById('item').appendChild(child);
                });

                loader.hide();

            }).then(function () {
                let table = $('#liste_factures').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",
                            "zeroRecords": "Aucun rapport à afficher",
                            "sEmptyTable": "Aucune donn&eacute;e disponible dans le tableau",
                            "oPaginate": {
                                "sFirst": "Premier",
                                "sPrevious": "Pr&eacute;c&eacute;dent",
                                "sNext": "Suivant",
                                "sLast": "Dernier"
                            }
                        },

                        "searching": true,
                        "ordering": true,
                        "sortable": true,
                        "pageLength": 25,
                        "bLengthChange": true, //thought this line could hide the LengthMenu
                        "bInfo": false,
                        "bFilter": false,
                        "order": [0, "desc"],
                        // "dom": '<"top"i>rt<"bottom"p><"clear">',
                        // dom: 'Bfrtip',

                        columnDefs: [
                            {targets: [0], visible: false},
                            {"orderData": [0], targets: [1]},
                        ],
                        "pagingType": "full_numbers",
                    }
                );
            });

        });
    </script>
@endsection