@extends('layouts.app')
@section('title', 'Dashboard')
@section('content')
<div class="row justify-content-center" style="margin-right:-20px;">
    <div class="row">
        <div class="col-sm-12">
            <div class="card" style="border:none;box-shadow: 10px 0px 20px rgb(31 30 47 / 5%);border-radius:15px;">
                <div class="card-body p-1 m-1">
                    <div class="row">
                        <table id="agency_dh_county_details" class="table table-striped table-bordered nowrap table-striped mb-0" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                            <thead class="thead-light">
                                <tr>
                                    <th> SI.No. </th>
                                    <th> State Code </th>
                                    <th> County </th>
                                    <th> Total Counties data updated </th>
                                    <th> Partial Update </th>
                                    <th> Yet to Update </th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('page_css')
<!-- Custom In Page CSS -->
@endsection

@section('page_script')
<!-- Custom In Page Javascript -->
<script>
    var agencydhTbl = '';
    $(document).ready( function () {
        function agencydh_data() {
            if ($.fn.dataTable.isDataTable('#agency_dh_county_details') && agencydhTbl != '') {
                agencydhTbl.draw(false)
            } else {
                load_agencydh_data();
            }
        }

        function load_agencydh_data() {
            agencydhTbl = $('#agency_dh_county_details').DataTable({
                scrollX: true,
                "order": [],
                "processing": true,
                "serverSide": true,
                "ajax": {
                    url: "{{ url('/fetch-agencydashboard') }}",
                    method: "POST",
                    data: {
                        _token: '{!! csrf_token() !!}',
                    },
                },
                columns: [{
                        data: 'id',
                        render: function (data, type, row, meta) {
                            return meta.row + meta.settings._iDisplayStart + 1;
                        }
                    },
                    {
                        data : function ( row, type, val, meta ) {
                            return "<a href='/state_agency_details/"+row['state_data']['id']+"' style='text-decoration:underline;color:#0A58CA;'><span style='cursor:pointer;color:#0A58CA;font-weight:bold;'>"+row['state_shortcode']+"</span></a>"
                        },
                        name: 'state_shortcode',
                    },
                    {
                        data: 'county_data',
                        name: 'county_data',
                        defaultContent: "--"
                    },
                    {
                        data: 'counties_updated',
                        name: 'counties_updated',
                        defaultContent: "--"
                    },
                    {
                        data: 'counties_partial',
                        name: 'counties_partial',
                        defaultContent: "--"
                    },
                    {
                        data: 'counties_red',
                        name: 'counties_red',
                        defaultContent: "--"
                    },
                ],
            });
        }

        //Load Data
        load_agencydh_data(); 
    });
</script>
@endsection