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

@section('head_supplement')

    <link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/bootstrap/main.css" rel="stylesheet">
    <style>
        .custom-control {
            padding-left: 2.5rem;
        }

    </style>
@endsection

@section('content')
    <div class="row">
        <div class="col-md-12 col-xl-12">
            <a class="btn btn-primary facture_rapport" data-id=" ">Associer une
                facture</a>
            <a class="btn btn-warning copy_infos" data-id="">Copier les informations de
                la sélection</a>
            <div class="row">
                <div class="mb-2 mb-sm-0 col-12 col-md-3">
                    <label for="exampleEmail22" class="mr-sm-2">Rechercher</label>
                    <input type="text" class="form-control input_filter_all update_session" id="search_facture"
                        value="{{ session()->get('search_facture') }} ">
                </div>

                <div class="mt-5 form-group">
                    <input type="checkbox" id="select_all" value="">
                    <label for="select_all"> Tout cocher</label>
                </div>

            </div>

            <textarea id="to_copy" style="display:none"></textarea>
            <div class="col-md-12">

                <div class="main-card mb-3 card">

                    <div id="outside_buttons"></div>

                    <span>Surface totale à facturer : <span id="surface_totale">0</span>m²</span>


                    <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>Rapport id</th>
                                    <th>Client</th>
                                    <th>Lieu d'inspection</th>
                                    <th>Zone</th>
                                    <th>Type d'inspection</th>
                                    <th>Surface inspectée</th>
                                    <th>Statut</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="{{ asset('js/datatables.js') }}"></script>
    <script type="text/javascript" defer>
        document.addEventListener('DOMContentLoaded', function() {
            loader.show();

            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"
                    }
                },

                ajax: {
                    beforeSend: function(xhr) {
                        xhr.setRequestHeader('Authorization', `Bearer ${token}`);
                    },
                    "url": "/api/factures/rapports",

                    "dataSrc": function(json) {

                        loader.hide();
                        return json.data;
                    }
                },

                "searching": true,
                "ordering": true,
                "sortable": true,
                "pageLength": 25,
                "bLengthChange": true, //thought this line could hide the LengthMenu
                "lengthMenu": [
                    [10, 25, 50, -1],
                    [10, 25, 50, "Tous"]
                ],

                "bInfo": true,
                "bFilter": false,
                "order": [0, "desc"],
                // "dom": '<"top"i><"bottom"p><"clear">',

                "initComplete": function(settings, json) {
                    $('.show_invoice').click(function() {
                        var id = $(this).attr('data-id');
                        var name = $(this).attr('data-name');

                        $('#modal-doc form').hide();
                        $('#modal-doc p').css("min-width", "100%");
                        $('#modal-doc p').css("max-width", "100%");
                        $('#modal-doc p').css("width", "100%");

                        $('#body_mail').html('Madame, Monsieur,' + "\n" +
                            'Veuillez trouver en pièce jointe le rapport d\'inspection N° ' +
                            $('#nom_rapport').val() + "\n" + "\n" + 'Cordialement.');
                        $('#doc_mail').val('/storage/rapports/rapport_' + id + '/' + name +
                            '.pdf');
                        $('#type_doc').val('Rapport');
                        $('#modal-doc').modal();
                        $('#modal-doc iframe').attr('src', '/storage/rapports/rapport_' + id +
                            '/' + name + '.pdf');

                    });

                },

                drawCallback: function() {

                    $('.to_facture').on('change', function() {
                        let value = $(this).data('surfacem2');

                        if ($(this).is(':checked')) {
                            $('#surface_totale').html(parseFloat($('#surface_totale').html()) +
                                parseFloat(value));
                        } else {
                            $('#surface_totale').html(parseFloat($('#surface_totale').html()) -
                                parseFloat(value));
                        }
                    });

                    $('.show_invoice').click(function() {
                        var id = $(this).attr('data-id');
                        var name = $(this).attr('data-name');

                        $('#modal-doc form').hide();
                        $('#modal-doc p').css("min-width", "100%");
                        $('#modal-doc p').css("max-width", "100%");
                        $('#modal-doc p').css("width", "100%");

                        $('#body_mail').html('Madame, Monsieur,' + "\n" +
                            'Veuillez trouver en pièce jointe le rapport d\'inspection N° ' +
                            $('#nom_rapport').val() + "\n" + "\n" + 'Cordialement.');
                        $('#doc_mail').val('storage/rapports/rapport_' + id + '/' + name +
                            '.pdf');
                        $('#type_doc').val('Rapport');
                        $('#modal-doc').modal();
                        $('#modal-doc iframe').attr('src', '/storage/rapports/rapport_' + id +
                            '/' + name + '.pdf');

                    });

                    
                },

                columns: [{
                        "data": "date_rapport",
                        visible: true,
                    },
                    {
                        "data": "file_exist",
                        visible: true,
                        "title": "Date rapport",
                        "render": function(data, type, row, meta) {
                            return a = '<a class="show_invoice" data-id="' + row.rapport_id +
                                '" data-name="' + row.nom_rapport + '">' + row.nom_rapport + '</a>'
                        }
                    },
                    {
                        "data": "rapport_id",
                        visible: true,
                    },
                    {
                        "data": "client_title",
                        visible: true,
                    },
                    {
                        "data": "adresse",
                        visible: true,
                    },
                    {
                        "data": "idf",
                        visible: true,
                    },
                    {
                        "data": "nature",
                        visible: true,
                    },
                    {
                        "data": "surface",
                        visible: true,
                    },
                    {
                        "data": "statut",
                        visible: true,
                    },
                    {
                        "data": "checkbox",
                        visible: true,
                    },
                ]
            });


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

            table.buttons().container().appendTo('#outside_buttons');

            $('.input_filter_all').on('keyup', function() {
                var val = $(this).val();
                table.search(val).draw();
                $(this).addClass('active');
            });

            $('.input_filter_all').on('blur', function() {
                var val = $(this).val();
                table.search(val).draw();
                $(this).addClass('active');
            });







            $('.edit_invoice').click(function(event) {
                let id = $(this).attr('data-id');
                event.preventDefault();
                loader.show();

                $(this).addClass('isDisabled');

                axios.get('/rapports/pdf/' + id, {
                    params: {
                        _token: CSRF_TOKEN,
                    }
                }).then((response) => {
                    loader.hide();
                    let link = response.data;

                    if ($('#statut_rdv').val() != 4) {
                        $('#modal-doc p').css("width", "70%");

                    }
                    $('#body_mail').html('Madame, Monsieur,' + "\n" +
                        'Veuillez trouver en pièce jointe le rapport d\'inspection N° ' + $(
                            this).attr('data-name') + "\n" + "\n" + 'Cordialement.');
                    $('#doc_mail').val(link);
                    $('#type_doc').val('Rapport');
                    $('#modal-doc').modal();
                    $('#modal-doc iframe').attr('src', link);
                    $(this).removeClass('isDisabled');
                }).catch(error => {
                    loader.hide();
                    $(this).removeClass('isDisabled');
                    toastr.error('Une erreur est survenue');
                });
            });

            $('.show_invoice').click(function() {
                var id = $(this).attr('data-id');
                var name = $(this).attr('data-name');

                $('#modal-doc form').hide();
                $('#modal-doc p').css("min-width", "100%");
                $('#modal-doc p').css("max-width", "100%");
                $('#modal-doc p').css("width", "100%");

                $('#body_mail').html('Madame, Monsieur,' + "\n" +
                    'Veuillez trouver en pièce jointe le rapport d\'inspection N° ' + $('#nom_rapport')
                    .val() + "\n" + "\n" + 'Cordialement.');
                $('#doc_mail').val('/storage/rapports/rapport_' + id + '/' + name + '.pdf');
                $('#type_doc').val('Rapport');
                $('#modal-doc').modal();
                $('#modal-doc iframe').attr('src', '/storage/rapports/rapport_' + id + '/' + name + '.pdf');

            });

            $('.facture_rapport').click(function() {
                var id = '';
                var infos = '';
                var count = 0;
                $(".to_facture").each(function(index) {
                    if ($(this).is(':checked')) {
                        count = parseInt(count) + 1;
                    }
                });

                if (count == 0) {
                    alert('Selectionnez au moins un rapport');
                } else {
                    $(".to_facture").each(function(index) {

                        if ($(this).is(':checked')) {
                            id += $(this).val() + ';';

                            infos += 'Rapport n° ' + $(this).data('nom_rapport') + '<br/>';
                            infos += $(this).data('lieu') + '<br/>';
                            infos += '' + $(this).data('type') + '<br/><br/>';

                        }
                        var regex = /<br\s*[\/]?>/gi;

                        $('#to_copy').val(infos.replace(regex, "\n"));
                    });

                    $('#facture_rapport_id').val(id);
                    $('#facture_rapport').modal();
                    var regex = /<br\s*[\/]?>/gi;
                    infos = infos.replace(regex, "\n");
                    copyToClipboard(infos.replace(regex, "\n"));
                }
            });

            $('.copy_infos').click(function() {
                var infos = '';


                $(".to_facture").each(function(index) {

                    if ($(this).is(':checked')) {
                        infos += 'Rapport n° ' + $(this).data('nom_rapport') + '<br/>';

                        infos += $(this).data('lieu') + '<br/>';
                        infos += '' + $(this).data('type') + '<br/>';
                        infos += '' + $(this).data('surface') + '<br/><br/>';


                    }

                    var regex = /<br\s*[\/]?>/gi;

                    $('#to_copy').val(infos.replace(regex, "\n"));

                });

                var regex = /<br\s*[\/]?>/gi;
                infos = infos.replace(regex, "\n");
                copyToClipboard(infos.replace(regex, "\n"));


            });
            $('#search_facture').focus();
            $('#search_facture').blur();

            document.getElementById('select_all').addEventListener('change', check_all);

            function copyToClipboard(text) {
                var $temp = $("<textarea>");
                var regex = /<br\s*[\/]?>/gi;

                $("body").append($temp);
                $temp.val(text).select();
                document.execCommand("copy");
                $temp.remove();
            }

            function isHidden(el) {
                const style = window.getComputedStyle(el);
                return ((style.display === 'none') || (style.visibility === 'hidden'))
            }

            function check_all() {
                const checkbox = document.querySelectorAll('.to_facture');
                checkbox.forEach((item) => {
                    if (document.getElementById('select_all').checked === true) {
                        if (!isHidden(item)) {
                            item.checked = true;
                        }
                    } else {
                        item.checked = false;
                    }
                })
            }
        });
    </script>
@endsection

@section('modal')
    @include('modals.doc')
    @include('modals.factures.rapports')
@endsection