@extends('layouts.app')


@section('third_party_stylesheets')
    <!-- DataTables -->
    <link rel="stylesheet" href="{{asset('admin_lte')}}/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet"
          href="{{asset('admin_lte')}}/plugins/datatables-responsive/css/responsive.bootstrap4.min.css">
    <link rel="stylesheet" href="{{asset('admin_lte')}}/plugins/datatables-buttons/css/buttons.bootstrap4.min.css">


@endsection

@section('content')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>Details</h1>
                </div>

            </div>
        </div>
    </section>

    <section class="content-header">
        <div class="container-fluid">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">EOI Backlog</h3>
                </div>
                <div class="card-body">
                    <table id="example1" class="table table-bordered table-striped">
                        <thead>
                        <tr>
                            <th>Visa Type</th>
                            <th>Anzsco Code</th>
                            <th>Occupation</th>
                            <th>EOI Status</th>
                            <th>Count EOIs</th>
                            <th>Nominated State</th>
                        </tr>
                        </thead>
                        <tbody>

                        @foreach($eoiBacklogdata as $item)
                            <tr>
                                <td>{{$item['visa_type']}}</td>
                                <td>{{$item['anzsco_code']}}</td>
                                <td>{{$item['occupation']}}</td>
                                <td>{{$item['eoi_status']}}</td>
                                <td>{{$item['nominated_state']}}</td>
                                <td>{{$item['count_eois']}}</td>
                            </tr>

                        @endforeach
                        </tbody>

                    </table>

                </div>
            </div>
        </div>
    </section>




@endsection

@section('third_party_scripts')
    <!-- jQuery -->
    <!-- Bootstrap 4 -->
    {{--    <script src="{{asset('admin_lte')}}/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>--}}
    <script src="{{asset('admin_lte')}}/plugins/jquery/jquery.min.js"></script>

    <!-- DataTables  & Plugins -->
    <script src="{{asset('admin_lte')}}/plugins/datatables/jquery.dataTables.min.js" defer></script>
    <script src="{{asset('admin_lte')}}/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js" defer></script>
    <script src="{{asset('admin_lte')}}/plugins/datatables-responsive/js/dataTables.responsive.min.js" defer></script>
    <script src="{{asset('admin_lte')}}/plugins/datatables-responsive/js/responsive.bootstrap4.min.js" defer></script>
    <script src="{{asset('admin_lte')}}/plugins/datatables-buttons/js/dataTables.buttons.min.js" defer></script>
    <script src="{{asset('admin_lte')}}/plugins/datatables-buttons/js/buttons.bootstrap4.min.js" defer></script>
    <script src="{{asset('admin_lte')}}/plugins/jszip/jszip.min.js" defer></script>
    <script src="{{asset('admin_lte')}}/plugins/pdfmake/pdfmake.min.js" defer></script>
    <script src="{{asset('admin_lte')}}/plugins/pdfmake/vfs_fonts.js" defer></script>
    <script src="{{asset('admin_lte')}}/plugins/datatables-buttons/js/buttons.html5.min.js" defer></script>
    <script src="{{asset('admin_lte')}}/plugins/datatables-buttons/js/buttons.print.min.js" defer></script>
    <script src="{{asset('admin_lte')}}/plugins/datatables-buttons/js/buttons.colVis.min.js" defer></script>
    <!-- AdminLTE App -->
    <script src="{{asset('admin_lte')}}/dist/js/adminlte.min.js"></script>
    <!-- AdminLTE for demo purposes -->
    <script src="{{asset('admin_lte')}}/dist/js/demo.js"></script>
    <script>
        $(function () {
            $("#example1").DataTable({
                "responsive": true, "lengthChange": true, "autoWidth": false, "paging": true,

            }).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(0)');
            // $('#example2').DataTable({
            //     "paging": true,
            //     "lengthChange": false,
            //     "searching": false,
            //     "ordering": true,
            //     "info": true,
            //     "autoWidth": false,
            //     "responsive": true,
            // });
        });
    </script>
@endsection