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

@section('head_supplement')

    <link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/bootstrap/main.css" rel="stylesheet">

    <style type="text/css">
        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;
        }
    </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="fa fa-calendar icon-gradient bg-arielle-smile"> </i>

                </div>

                <div>

                    Factures

                    <div class="page-title-subheading">

                        Liste des operations à facturer

                    </div>

                </div>

            </div>

        </div>

    </div>

    <div class="row">
        <div class="col-md-12 col-xl-12">
            <a class="btn btn-primary facture_operation" data-id="">Associer une
                facture</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>

            <label for="to_copy"></label><textarea id="to_copy" style="display:none"></textarea>
            <div class="col-md-12">
                <div class="main-card mb-3 card">
                    <div class="table-responsive">
                        <div id="outside_buttons"></div>
                        <table id="liste_factures"
                               class="align-middle mb-0 table table-borderless table-striped table-hover datatable">
                            <thead>
                            <tr>
                                <th>Date full</th>
                                <th>Date du operation</th>
                                <th>operation</th>
                                <th style="display:none">operation id</th>
                                <th>operation id</th>
                                <th>Client</th>
                                <th style="display:none">Client ID</th>

                                <th>Action</th>
                                <th>Action</th>

                            </tr>
                            </thead>

                            @foreach($listings as $key => $listing)
                                {{--                                @dd($listing)--}}
                                <tr>
                                    <td>{{ strtotime(str_replace('/', '-', $listing['date_creation'])) }}</td>
                                    <td>{{ date("d/m/Y", strtotime(str_replace('/', '-', $listing['date_creation']))) }}</td>

                                    <td>
                                        @if (isset($listing['operation_title']) && file_exists("storage/operations/operation_" . $listing['operation_id'] . "/" . $listing['operation_title'] . ".pdf"))
                                            <a class="show_invoice" data-id="{{ $listing['operation_id'] }}"
                                               data-name="{{ $listing['operation_title'] ?? '' }}">{{ $listing['operation_title'] ?? '' }}</a>
                                        @else

                                            <a class="" target="_blank"
                                               href="/operations/fiche_operation/{{ $listing['operation_id'] }}"
                                               data-id="{{ $listing['operation_id'] }}">{{ $listing['operation_title'] }}</a>
                                        @endif
                                    </td>
                                    <td style="display:none">
                                        {{ strtoupper($listing['operation_id']) }}
                                    </td>
                                    <td>
                                        {{ strtoupper($listing['client_title']) }}
                                    </td>
                                    <td style="display:none">
                                        {{ strtoupper($listing['client_id']) }}
                                    </td>
                                    <td style="    border-right: 2px solid #ccc;border-left:2px solid #ccc;border-bottom: 2px solid #ccc;    background: #dde9f3;">

                                        <div class="no-gutters">

                                            <div class="col-md-12 col-xl-2">

                                                <div class="widget-content">

                                                    <div class="widget-content-wrapper">

                                                        <div class="widget-content-right ml-0 mr-3">

                                                            <div
                                                                class="widget-numbers text-primary">{{ $operations[$listing['operation_id']]['total'] }}</div>

                                                        </div>

                                                        <div class="widget-content-left">

                                                            <div class="widget-heading">Total lignes</div>

                                                        </div>

                                                    </div>

                                                </div>

                                            </div>

                                            <div class="col-md-12 col-xl-2">

                                                <div class="widget-content">

                                                    <div class="widget-content-wrapper">

                                                        <div class="widget-content-right ml-0 mr-3">

                                                            <div class="widget-numbers text-danger">
                                                                <a style=" color: inherit!important;"
                                                                   href="{{ $listing['operation_id'] }}"
                                                                   target="_blank">
                                                                    @php error_reporting(0) @endphp
                                                                    {{ $operations[$listing['operation_id']]['count_rdv'] . '/' . ceil((($operations[$listing['operation_id']]['target_objectif_classique'] * ($operations[$listing['operation_id']]['BAR-EN-101'][0]['total'] + $operations[$listing['operation_id']]['BAR-EN-101'][1]['total'] + $operations[$listing['operation_id']]['BAR-EN-101'][2]['total']) / 100)) + (($operations[$listing['operation_id']]['BAR-EN-101'][3]['total']) * $operations[$listing['operation_id']]['target_objectif_precaire'] / 100) + (($operations[$listing['operation_id']]['target_objectif_classique'] * ($operations[$listing['operation_id']]['BAR-EN-103'][0]['total'] + $operations[$listing['operation_id']]['BAR-EN-103'][1]['total'] + $operations[$listing['operation_id']]['BAR-EN-103'][2]['total']) / 100)) + (($operations[$listing['operation_id']]['BAR-EN-103'][3]['total']) * $operations[$listing['operation_id']]['target_objectif_precaire'] / 100)) }}
                                                                    @php error_reporting(E_ALL) @endphp
                                                                </a>
                                                            </div>

                                                        </div>

                                                        <div class="widget-content-left">

                                                            <div class="widget-heading">RDV pris</div>

                                                        </div>

                                                    </div>

                                                </div>

                                            </div>

                                            <div class="col-md-12 col-xl-2">

                                                <div class="widget-content">

                                                    <div class="widget-content-wrapper">

                                                        <div class="widget-content-right ml-0 mr-3">

                                                            <div class="widget-numbers text-primary">
                                                                {{ $operations[$listing['operation_id']]['count_rapports'] }}
                                                            </div>

                                                        </div>

                                                        <div class="widget-content-left">

                                                            <div class="widget-heading">Rapports</div>

                                                        </div>

                                                    </div>

                                                </div>

                                            </div>

                                            <div class="col-md-12 col-xl-2">

                                                <div class="widget-content">

                                                    <div class="widget-content-wrapper">

                                                        <div class="widget-content-right ml-0 mr-3">

                                                            <div class="widget-numbers text-warning">
                                                                {{ $operations[$listing['operation_id']]['count_rapports_non_verifiables'] }}
                                                            </div>

                                                        </div>

                                                        <div class="widget-content-left">

                                                            <div class="widget-heading">Non vérifiables</div>

                                                        </div>

                                                    </div>

                                                </div>

                                            </div>

                                        </div>
                                    </td>
                                    <td>

                                    </td>
                                    <td>
                                        <div class="custom-control custom-checkbox">
                                            <input type="checkbox" class="custom-control-input to_facture"
                                                   id="check_{{ $key }}"
                                                   data-operation_id="{{ $listing['operation_id'] }}"
                                                   value="{{ $listing['operation_id'] }}" name="to_facture">
                                            <label class="custom-control-label"
                                                   for="check_{{ $key }}"></label>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </table>

                    </div>

                </div>

            </div>

        </div>

    </div>

    <script type="text/javascript"
            src="{{ asset('js/datatables.js') }}"></script>
    <script type="text/javascript">

        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 operation à 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
                "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "Tous"]],

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

                "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 operation d\'inspection N° ' + $('#nom_operation').val() + "\n" + "\n" + 'Cordialement.');
                        $('#doc_mail').val('uploads/operations/operation_' + id + '/' + name + '.pdf');
                        $('#type_doc').val('operation');
                        $('#modal-doc').modal();
                        $('#modal-doc iframe').attr('src', 'uploads/operations/operation_' + id + '/' + name + '.pdf');

                    });

                },

                drawCallback: function () {
                    $('.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 operation d\'inspection N° ' + $('#nom_operation').val() + "\n" + "\n" + 'Cordialement.');
                        $('#doc_mail').val('uploads/operations/operation_' + id + '/' + name + '.pdf');
                        $('#type_doc').val('operation');
                        $('#modal-doc').modal();
                        $('#modal-doc iframe').attr('src', 'uploads/operations/operation_' + id + '/' + name + '.pdf');

                    });

                },

                columnDefs: [
                    {targets: [0], visible: false},
                    {"orderData": [0], targets: [1]},
                ],

                "pagingType": "full_numbers",
                "dom": 'Bfrtip',

                "pageLength": 25,
                "bLengthChange": true, //thought this line could hide the LengthMenu
                "pagingType": "full_numbers",
                "language": {
                    // "paginate": {
                    //     "previous": "<",
                    //     "text":"ooo",
                    //     "next": ">"
                    // }
                },

            }
        );
        $('.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');

        });

        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');

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

            $.ajax({
                url: 'genere/genere_operation_isolation.php',
                data: {operation_id: id},
                type: 'get',
                success: function (output) {
                    console.log(output);
                    $('#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 operation d\'inspection N° ' + $('#nom_operation').val() + "\n" + "\n" + 'Cordialement.');
                    $('#doc_mail').val(output);
                    $('#type_doc').val('operation');
                    $('#modal-doc').modal();
                    $('#modal-doc iframe').attr('src', output);
                }
            });
        });

        $('.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 operation d\'inspection N° ' + $('#nom_operation').val() + "\n" + "\n" + 'Cordialement.');
            $('#doc_mail').val('uploads/operations/operation_' + id + '/' + name + '.pdf');
            $('#type_doc').val('operation');
            $('#modal-doc').modal();
            $('#modal-doc iframe').attr('src', 'uploads/operations/operation_' + id + '/' + name + '.pdf');

        });

        $('.facture_operation').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 operation');
            } else {
                $(".to_facture").each(function (index) {

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

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

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

                $('#facture_operation_id').val(id);
                $('#facture_operation').modal();

            }

            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;
                    }
                })
            }
        });

        $(document).ready(function () {
            $('#search_facture').focus();
            $('#search_facture').blur();
        });

    </script>
@endsection

@section('modal')
    @include('modals.factures.operations')
@endsection