@extends('layouts.app')

@section('css')
<!-- Responsive and DataTables -->
<link href="{{ asset('tema/plugins/datatables/dataTables.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('tema/plugins/datatables/buttons.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('tema/plugins/datatables/responsive.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />

<link href="https://cdn.datatables.net/buttons/2.2.2/css/buttons.dataTables.min.css" rel="stylesheet" type="text/css" />
@stop

@section('content')
<div class="page-head">
    <h4 class="mt-2 mb-2">Laporan Pendaftaran Pengumuman</h4>
</div>
<div class="row">
    <div class="col-lg-12 col-sm-12">
        <div class="card m-b-30">
            <div class="card-body">
                <input type="date" name="date1" id="date1" value="{{ date('Y-m-01') }}" class="form-control">
                <input type="date" name="date2" id="date2" value="{{ date('Y-m-t') }}" class="form-control">
                <table class="table table-hover" id="tabel">
                    <thead>
                        <th>No</th>
                        <th>Tanggal</th>
                        <th>Nama</th>
                        <th>No HP</th>
                        <th>Alamat</th>
                        <th>Paket</th>
                        
                    </thead>
                    <tbody>
                     @if($post_reg->count() > 0)
                        @foreach($post_reg as $pr)
                            @if($pr->patient['nm_patient'])
                            <tr>
                                <td>{{ $loop->iteration }}</td>
                                <td>{{ date('Y-m-d', strtotime($pr->created_at)) }}</td>
                                <td>{{ $pr->patient['nm_patient'] }}</td>
                                <td>{{ $pr->patient['no_telp'] }}</td>
                                <td>{{ $pr->patient['address'] }}</td>
                                <td>{{ $pr->post['title'] }}</td>
                                
                            </tr>
                            @endif
                        @endforeach
                     @else
                        <tr>
                            <th colspan='2' class='text-center'>Tidak Ada Data</th>
                        </tr>
                     @endif

                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@stop

@section('js')
<!-- Responsive and datatable js -->
<script src="{{ asset('tema/plugins/datatables/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('tema/plugins/datatables/dataTables.bootstrap4.min.js') }}"></script>
<script src="{{ asset('tema/plugins/datatables/dataTables.responsive.min.js') }}"></script>
<script src="{{ asset('tema/plugins/datatables/responsive.bootstrap4.min.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

<script src="https://cdn.datatables.net/buttons/2.2.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.print.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        var table = $('#tabel').DataTable({
            "order": [[ 1, "desc" ]],
            "ordering": true,
            "dom": 'Bfrtip',
        "buttons": [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ]
        });

        $.fn.dataTable.ext.search.push(
            function(settings, data, dataIndex) {
              var min = $('#date1').val();
              var max = $('#date2').val();
              
              var createdAt = data[1];  // -> rubah angka 4 sesuai posisi tanggal pada tabelmu, dimulai dari angka 0
              console.log(min+' '+max)
              if (
                (min == "" || max == "") ||
                (moment(createdAt).isSameOrAfter(min) && moment(createdAt).isSameOrBefore(max))
              ) {
                return true;
              }
              return false;
            }
        );

        table.draw();

        $('#date1, #date2').change(function() {
            table.draw();
        }); 

    });
</script>
@stop