@extends('layouts.color_admin.default')
@section('title', 'Period')
@push('css')
<link href="/admin_asset/css/select2.min.css" rel="stylesheet" />
@endpush
@section('content')
<div class="a-page-content">
    <div class="breadcomb-area">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="breadcomb-list">
                        <form method="post" action="{{ route('admin.period.sendPeriod') }}">
                            @csrf
                            <div class="row">
                                <div class="col-12" style="padding-left: 30px">
                                    <!--h3>
                                            Verstuur e-mail voor deze periode (
                                            {{ !empty($period->date_start) ? $period->date_start->format('d-m-Y') : "" }}
                                            {{ " tot " }}
                                            {{ !empty($period->date_end) ? $period->date_end->format('d-m-Y') : "" }})
                                        </h3-->
                                    <h3>
                                        Verstuur e-mail voor deze periode
                                    </h3>
                                </div>
                            </div>
                            @if(Session::has('b_a_message'))
                            <div class="row mt-3 mb-4">
                                <div class="col-12">
                                    <div class="alert alert-success">
                                        {{ Session::pull('b_a_message')}}
                                    </div>
                                </div>
                            </div>
                            @endif
                            @if ($errors->any())
                            <div class="row mt-3 mb-3">
                                <div class="col-12">
                                    <div class="alert alert-danger">
                                        <ul style="margin-bottom: 0">
                                            @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                            @endforeach
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            @endif

                            <input type="hidden" name="id" value="{{ $period->id }}">
                            <div class="row">
                                <div class="col-md-2 col-12 text-center a-mt-15">
                                    <span class="a-title-adjust">Gebruikers</span>
                                </div>
                                <div class="col-12 col-md-6 has-error a-mt-15">
                                    <select id="input-select2" multiple name="email[]" style="width: 100%"></select>
                                </div>
                            </div>
                            <div class="row a-mt-45">
                                <div class="col-md-10 col-md-offset-2 col-12">
                                    <button type="button" data-toggle="modal" data-target="#modalAssignUser" class="btn btn-primary btn-sm">HERINNERINGSMAIL</button>
                                    {{-- <button value="5" name="mode" class="btn btn-primary btn-sm">HERINNERINGSMAIL</button> --}}
                                    {{-- <button value="1" name="mode" class="btn btn-primary btn-sm">Verzenden Naar</button>
                                        <button value="3" name="mode" class="btn btn-danger btn-sm">Niet Verzenden Naar</button>
                                        <button value="2" name="mode" class="btn btn-success btn-sm">Naar Iedereen Verzenden</button> --}}
                                </div>
                            </div>
                        </form>

                        <div class="row">
                            <div class="col-12">
                                <div class="basic-tb-hd a-header-content" style="padding-left: 30px; margin-top: 40px">
                                    <h2>Openstaande aangiften</h2>
                                    <p>Totaal: {{ count($list) }}</p>
                                </div>

                                <div class="bsc-tbl bbb">
                                    <table class="table-users-of-period table table-sc-ex">
                                        <thead>
                                            <tr>
                                                <th>#</th>
                                                <th>Gebruikersnaam</th>
                                                <th>OAV Number</th>
                                                <th>Bedrijfsnaam</th>
                                                <th>E-mail</th>
                                                <th>Adres</th>
                                                {{-- <th>Toestand</th> --}}
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @forelse($list as $key => $item)
                                            {{-- @php
                                                if($item->status == 0){
                                                    $item->status = "Not Declaration Yet";
                                                }else{
                                                    $item->status = "Maked Declaration";
                                                }
                                            @endphp --}}
                                            <tr>
                                                <td>{{ $key + 1 }}</td>
                                                <td>{{ $item->user_name }}</td>
                                                <td>{{ $item->oav_number }}</td>
                                                <td>{{ $item->company_name }}</td>
                                                <td>{{ $item->email }}</td>
                                                <td>{{ $item->address }}</td>
                                                {{-- <td>{{ $item->status }}</td> --}}
                                            </tr>
                                            @empty
                                            <tr>
                                                <td colspan="6" class="text-center">Geen data.</td>
                                            </tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal users not declaration-->
<div class="modal fade" id="modalAssignUser" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-xdev modal-dialog-centered" role="document">
        <div class="modal-content xdev-table">
            <form id="formResendEmail" action="{{ route('admin.period.sendRemindPeriod') }}" method="post">
                @csrf
                <input type="hidden" id="id" name="id" value="{{ $period->id }}">
                <input type="hidden" id="email" name="email" value="">
                <div class="modal-header">
                    <h5 class="modal-title text-uppercase" id="exampleModalLongTitle">HERINNERING STUREN</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <table id="data-table-users" class="table table-sc-ex">
                        <thead>
                            <tr>
                                <th class="hidden"></th>
                                <th>#</th>
                                <th>Gebruikersnaam</th>
                                <th>OAV nummer</th>
                                <th>Bedrijfsnaam</th>
                                <th>E-mail</th>
                                <th>Adres</th>
                                <th>
                                    <label class="checkbox-inline">
                                        <input class="check-all" type="checkbox" value="">
                                    </label>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Annuleren</button>
                    <button type="submit" value="4" name="mode" class="btn btn-primary">Verzend e-mail</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<!-- DataTables Buttons CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.dataTables.min.css">

<!-- DataTables Buttons JS -->
<script src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.print.min.js"></script>

<!-- JSZip and pdfMake for Excel/PDF export -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
<script src="/admin_asset/plugins/datatables/js/select/dataTables.select.js"></script>
<script src=" /admin_asset/js/select2.min.js"></script>
<script>
    $(function() {
        var pathname = window.location.pathname;
        var menuItem = $('a[href="/admin/periodList"]').closest('li');
        menuItem.addClass('active');
        menuItem.closest('li.has-sub').addClass('active');

        let _page = $('.a-page-content');

        $('#input-select2').select2({
            ajax: {
                url: "{{ route('admin.home.ajaxGetUser') }}",
                dataType: 'json',
                delay: 350,
                data: function(params) {
                    return {
                        q: params.term,
                        page: params.page
                    };
                },
                processResults: function(data, params) {
                    params.page = params.page || 1;

                    return {
                        results: data.data,
                        pagination: {
                            more: (params.page * 20) < data.total
                        }
                    };
                }
            },
            placeholder: 'Bedrijfsnaam',
            minimumInputLength: 1
        });

        $(".table-users-of-period").DataTable({
            dom: 'Bfrtip',
            "lengthMenu": [
                [10, 25, 50, 500, -1],
                [10, 25, 50, 500, "All"]
            ],
            'paging': true,
            "pagingType": "simple_numbers",
            'lengthChange': true,
            'searching': true,
            'info': true,
            'autoWidth': false,
            'stateSave': true,
            "language": {
                "decimal": "",
                "emptyTable": "Geen data beschikbaar in de tabel",
                "info": "Tonen _START_ van _END_ van _TOTAL_ items",
                "infoEmpty": "Tonen 0 van  0 van 0 items",
                "infoFiltered": "(gefilterd uit _MAX_ totaal inzendingen)",
                "infoPostFix": "",
                "thousands": ",",
                "lengthMenu": "Toon _MENU_ ingangen",
                "loadingRecords": "Bezig met laden...",
                "processing": "Verwerken...",
                "search": "Zoeken:",
                "zeroRecords": "Geen overeenkomende records gevonden",
                "paginate": {
                    "first": "Eerste",
                    "last": "Laatste",
                    "next": "Volgende",
                    "previous": "Vorige"
                },
                "aria": {
                    "sortAscending": ": activeren om kolom oplopend te sorteren",
                    "sortDescending": ": activeren om kolom aflopend te sorteren"
                },
            },
            buttons: [
                /* { extend: 'colvis', className: 'btn-sm btn-primary'}, */
                {
                    extend: 'copy',
                    className: 'btn-sm',
                    exportOptions: {
                        columns: [0, 1, 2, 3, 4, 5]
                    }
                },
                {
                    extend: 'csv',
                    className: 'btn-sm',
                    exportOptions: {
                        columns: [0, 1, 2, 3, 4, 5]
                    }
                },
                {
                    extend: 'excel',
                    className: 'btn-sm',
                    exportOptions: {
                        columns: [0, 1, 2, 3, 4, 5]
                    }
                },
                {
                    extend: 'pdf',
                    className: 'btn-sm',
                    exportOptions: {
                        columns: [0, 1, 2, 3, 4, 5]
                    }
                },
                {
                    extend: 'print',
                    className: 'btn-sm',
                    exportOptions: {
                        columns: [0, 1, 2, 3, 4, 5]
                    }
                }
            ],
        });

        var modalAssignUser = $("#modalAssignUser");

        var dataTableUser = $("#data-table-users").DataTable({
            'paging': true,
            "pagingType": "simple_numbers",
            'lengthChange': true,
            'searching': true,
            'info': true,
            'autoWidth': false,
            'stateSave': true,
            'columnDefs': [{
                orderable: false,
                className: 'select-checkbox',
                targets: 7
            }],
            'select': {
                style: 'multi',
                selector: 'td:last-child'
            },
            "language": {
                "decimal": "",
                "emptyTable": "Geen data beschikbaar in de tabel",
                "info": "Tonen _START_ van _END_ van _TOTAL_ items",
                "infoEmpty": "Tonen 0 van  0 van 0 items",
                "infoFiltered": "(gefilterd uit _MAX_ totaal inzendingen)",
                "infoPostFix": "",
                "thousands": ",",
                "lengthMenu": "Toon _MENU_ ingangen",
                "loadingRecords": "Bezig met laden...",
                "processing": "Verwerken...",
                "search": "Zoeken:",
                "zeroRecords": "Geen overeenkomende records gevonden",
                "paginate": {
                    "first": "Eerste",
                    "last": "Laatste",
                    "next": "Volgende",
                    "previous": "Vorige"
                },
                "aria": {
                    "sortAscending": ": activeren om kolom oplopend te sorteren",
                    "sortDescending": ": activeren om kolom aflopend te sorteren"
                },
                buttons: [
                    /* { extend: 'colvis', className: 'btn-sm btn-primary'}, */
                    {
                        extend: 'copy',
                        className: 'btn-sm',
                        exportOptions: {
                            columns: [0, 1, 2, 3, 4, 5]
                        }
                    },
                    {
                        extend: 'csv',
                        className: 'btn-sm',
                        exportOptions: {
                            columns: [0, 1, 2, 3, 4, 5]
                        }
                    },
                    {
                        extend: 'excel',
                        className: 'btn-sm',
                        exportOptions: {
                            columns: [0, 1, 2, 3, 4, 5]
                        }
                    },
                    {
                        extend: 'pdf',
                        className: 'btn-sm',
                        exportOptions: {
                            columns: [0, 1, 2, 3, 4, 5]
                        }
                    },
                    {
                        extend: 'print',
                        className: 'btn-sm',
                        exportOptions: {
                            columns: [0, 1, 2, 3, 4, 5]
                        }
                    }
                ],
            },
        });

        $.ajax({
            type: "GET",
            dataType: "json",
            url: '{{route("admin.home.ajaxGetUserNotDeclatationOfPeriod")}}',
            data: {
                'period_id': '{{ $period->id }}'
            },
            success: function(data) {
                if (data) {
                    var tbody = $("#data-table-users").find('tbody');
                    var rowItem = '';
                    $.each(data, function(i, item) {
                        rowItem += '<tr>';
                        rowItem += '<td class="hidden">' + item.user_id + '</td>';
                        rowItem += '<td>' + i + 1 + '</td>';
                        rowItem += '<td>' + item.user_name + '</td>';
                        rowItem += '<td>' + item.oav_number + '</td>';
                        rowItem += '<td>' + item.company_name + '</td>';
                        rowItem += '<td>' + item.email + '</td>';
                        rowItem += '<td>' + item.address + '</td>';
                        rowItem += '<td class="check"></td>';
                        rowItem += '</tr>';
                    });
                    dataTableUser.destroy();
                    tbody.html(rowItem);
                    dataTableUser = $("#data-table-users").DataTable({
                        'paging': true,
                        "pagingType": "simple_numbers",
                        'lengthChange': true,
                        'searching': true,
                        'info': true,
                        'autoWidth': false,
                        'stateSave': true,
                        /* 'select': true, */
                        'columnDefs': [{
                            orderable: false,
                            className: 'select-checkbox',
                            targets: 7
                        }],
                        'select': {
                            style: 'multi',
                            selector: 'td:last-child'
                        },
                        "language": {
                            "decimal": "",
                            "emptyTable": "Geen data beschikbaar in de tabel",
                            "info": "Toon _START_ tot _END_ van _TOTAL_ items",
                            "infoEmpty": "Toon 0 van 0 van 0 items",
                            "infoFiltered": "(gefilterd uit _MAX_ totaal inzendingen)",
                            "infoPostFix": "",
                            "thousands": ",",
                            "lengthMenu": "Toon _MENU_ items",
                            "loadingRecords": "Bezig met laden...",
                            "processing": "Verwerken...",
                            "search": "Zoeken:",
                            "zeroRecords": "Geen overeenkomende records gevonden",
                            "paginate": {
                                "first": "Eerste",
                                "last": "Laatste",
                                "next": "Volgende",
                                "previous": "Vorige"
                            },
                            "aria": {
                                "sortAscending": ": activeren om kolom oplopend te sorteren",
                                "sortDescending": ": activeren om kolom aflopend te sorteren"
                            },
                            buttons: {
                                colvis: 'Kolomzichtbaarheid'
                            }
                        },
                        dom: 'Bfrtip',
                        buttons: [
                            /* { extend: 'colvis', className: 'btn-sm btn-primary'}, */
                            {
                                extend: 'copy',
                                className: 'btn-sm',
                                exportOptions: {
                                    columns: [0, 1, 2, 3, 4, 5]
                                }
                            },
                            {
                                extend: 'csv',
                                className: 'btn-sm',
                                exportOptions: {
                                    columns: [0, 1, 2, 3, 4, 5]
                                }
                            },
                            {
                                extend: 'excel',
                                className: 'btn-sm',
                                exportOptions: {
                                    columns: [0, 1, 2, 3, 4, 5]
                                }
                            },
                            {
                                extend: 'pdf',
                                className: 'btn-sm',
                                exportOptions: {
                                    columns: [0, 1, 2, 3, 4, 5]
                                }
                            },
                            {
                                extend: 'print',
                                className: 'btn-sm',
                                exportOptions: {
                                    columns: [0, 1, 2, 3, 4, 5]
                                }
                            }
                        ],
                    });
                }
            }
        });

        dataTableUser.on('select', function(e, dt, type, indexes) {
            if (type === 'row') {
                getDataRows();
            }
        });
        dataTableUser.on('deselect', function(e, dt, type, indexes) {
            if (type === 'row') {
                getDataRows();
            }
        });

        $(".check-all").on("click", function(e) {
            if ($(this).is(":checked")) {
                dataTableUser.rows().select();
            } else {
                dataTableUser.rows().deselect();
            }
            getDataRows();
        });

        var getDataRows = function() {
            var data = dataTableUser.rows({
                selected: true
            }).data();
            if (data.length == 0) {
                modalAssignUser.find("#email").val('');
            }
            var emailArray = [];
            for (var i = 0; i < data.length; i++) {
                emailArray.push(data[i][5]);
            }
            var sData = emailArray.join();
            modalAssignUser.find("#email").val(sData);
        };
    })
</script>
@endpush