<?php $__env->startSection('title','Dashboard | '); ?>
<?php $__env->startSection('content'); ?>
<!-- Content Header (Page header) -->
<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0">Dashboard</h1>
            </div><!-- /.col -->
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="#">Home</a></li>
                    <li class="breadcrumb-item active">Dashboard</li>
                </ol>
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div><!-- /.container-fluid -->
</div>
<!-- /.content-header -->

<!-- Main content -->
<section class="content">
    <div class="container-fluid">
        <!-- Info boxes -->
        <div class="row">
            <div class="col-12 col-sm-6 col-md-3">
                <div class="info-box">
                    <span class="info-box-icon bg-info elevation-1"><i class="fas fa-clipboard"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text font-weight-bolder">Total Claims</span>
                        <span class="info-box-number"><?php echo e($total_claims); ?></span>
                    </div>
                    <!-- /.info-box-content -->
                </div>
                <!-- /.info-box -->
            </div>
            <!-- /.col -->
            <div class="col-12 col-sm-6 col-md-3">
                <div class="info-box mb-3">
                    <span class="info-box-icon bg-warning elevation-1"><i class="fas fa-book-medical text-white"></i>
                    </span>
                    <div class="info-box-content">
                        <span class="info-box-text font-weight-bolder">Total Accident Claims</span>
                        <span class="info-box-number"><?php echo e($total_accident_claims); ?></span>
                    </div>
                    <!-- /.info-box-content -->
                </div>
                <!-- /.info-box -->
            </div>
            <!-- /.col -->
            <div class="col-12 col-sm-6 col-md-3">
                <div class="info-box mb-3">
                    <span class="info-box-icon bg-danger elevation-1"><i class="fas fa-book-dead"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text font-weight-bolder">Total Death Claims</span>
                        <span class="info-box-number"><?php echo e($total_death_claims); ?></span>
                    </div>
                    <!-- /.info-box-content -->
                </div>
                <!-- /.info-box -->
            </div>
            <!-- /.col -->
            <!-- fix for small devices only -->
            <div class="clearfix hidden-md-up"></div>
            <div class="col-12 col-sm-6 col-md-3">
                <div class="info-box mb-3">
                    <span class="info-box-icon bg-info elevation-1"><i class="fab fa-resolving"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text font-weight-bolder">Total Cases</span>
                        <span class="info-box-number"><?php echo e($total_cases); ?></span>
                    </div>
                    <!-- /.info-box-content -->
                </div>
                <!-- /.info-box -->
            </div>
            <!-- /.col -->
            <!-- <div class="col-12 col-sm-6 col-md-3">
                <div class="info-box mb-3">
                    <span class="info-box-icon bg-warning elevation-1"><i
                            class="fas fa-file-medical text-white"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text font-weight-bolder">Total Accident Cases</span>
                        <span class="info-box-number"><?php echo e($total_accident_cases); ?></span>
                    </div> -->
                    <!-- /.info-box-content -->
                <!-- </div> -->
                <!-- /.info-box -->
            <!-- </div> -->
            <!-- /.col -->
            <!-- <div class="col-12 col-sm-6 col-md-3">
                <div class="info-box mb-3">
                    <span class="info-box-icon bg-danger elevation-1"><i class="fas fa-archive"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text font-weight-bolder">Total Death Cases</span>
                        <span class="info-box-number"><?php echo e($total_death_cases); ?></span>
                    </div> -->
                    <!-- /.info-box-content -->
                <!-- </div> -->
                <!-- /.info-box -->
            <!-- </div> -->
            <!-- /.col -->
        </div>
     
        <!-- TABLE: Upcoming Cases Date -->
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header border-transparent">
                        <h3 class="card-title"><strong>Upcoming Cases</strong></h3>
                        <div class="card-tools">
                            <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                <i class="fas fa-minus"></i>
                            </button>
                        </div>
                    </div>
                    <!-- /.card-header -->
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table m-0">
                                <thead>
                                    <tr>
                                        <th class="w-25">Employee/Case</th>
                                        <th>Case Number</th>
                                        <th>Hearing Date</th>
                                        <th>Court</th>                                        
                                        <th>Address</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <?php if(!empty($upcoming_cases)): ?>
                                    <?php $__currentLoopData = $upcoming_cases; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $cases): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <tr>
                                        <td>
                                        <?php if($cases->case_register_for == 1): ?>
                                        <a href="<?php echo e(route('view.claim.details',$cases->claim_id)); ?>"><?php echo e($cases->emp_name); ?>(<?php echo e($cases->emp_id); ?>)[<?php echo e($cases->claim_category); ?>]</a>
                                        <?php endif; ?>
                                          <?php if($cases->case_register_for == 2): ?>
                                            <?php echo e($cases->plaintiff); ?>

                                        <?php endif; ?>
                                        </td>
                                        <td><?php echo e($cases->case_number); ?></td>
                                        <td><?php echo e(formatDate($cases->hearing)); ?></td>
                                        <td><?php echo e($cases->court_name); ?></td>
                                        <td><?php echo e($cases->court_address); ?></td>
                                    </tr>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                    <?php else: ?>
                                    <tr>
                                        <td colspan="4">No Record Found</td>
                                    </tr>
                                    <?php endif; ?>
                                </tbody>
                            </table>
                        </div>
                        <!-- /.table-responsive -->
                    </div>
                    <!-- /.card-body -->
                    <!-- <div class="card-footer clearfix">
                        <a href="javascript:void(0)" class="btn btn-sm btn-info float-left">Place New Order</a>
                        <a href="javascript:void(0)" class="btn btn-sm btn-secondary float-right">View All Orders</a>
                    </div> -->
                    <!-- /.card-footer -->
                </div>
                <!-- /.card -->
            </div>
        </div>
        <!-- /.row -->

    </div>
</section>
<?php $__env->stopSection(); ?>
<?php $__env->startPush('js'); ?>
<script>
//-----------------------
// - Cases CHART -
//-----------------------

// auto call case chart data api
$('#case_chart_box #case_bar_chart_form').ready(function() {
    callCaseChartAjax();
});

// call case chart api when year is change
$('#case_chart_box #chart_year').change(function() {
    callCaseChartAjax();
});

// call api to get case chart data
function callCaseChartAjax() {
    // let url = "";
    let url = "<?php echo e(route('case.chart.data')); ?>";
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': '<?php echo e(csrf_token()); ?>'
        }
    });
    $.ajax({
        url: url,
        type: 'POST',
        data: $('#case_bar_chart_form').serialize(),
        dataType: 'JSON',
        success: function(response) {
            CasebarChart(response);
        }
    });
}

// get Case Bar chart data
function CasebarChart(response) {
    let chart_box = $('#case_bar-chart'); //get box id to append case chart
    // <canvas id="complaintsChart" height="180" style="height: 180px;"></canvas> 
    // create canvas element
    let canvas = $('<canvas/>', {
        'id': 'caseChart',
        'style': 'height: 180px;'
    }).prop({
        height: 180
    });
    chart_box.html(canvas);

    $('#case_chart_box .current_year').text(response.current_year); // display current selected year

    $('#case_chart_box #current_year_total_cases').text(response.current_year_total_cases);
    $('#case_chart_box #current_year_pending_cases').text(response.current_year_pending_cases);
    $('#case_chart_box #current_year_processing_cases').text(response.current_year_processing_cases);
    $('#case_chart_box #current_year_close_cases').text(response.current_year_close_cases);

    var months_labels = response.month_labels;
    var pending_data_set = response.pending_data_set;
    var processing_data_set = response.processing_data_set;
    var closed_data_set = response.closed_data_set;

    var ticksStyle = {
        fontColor: '#495057',
        fontStyle: 'bold'
    };
    var mode = 'index';
    var intersect = true;
    var $caseChart = $('#caseChart');
    // eslint-disable-next-line no-unused-vars
    var caseChart = new Chart($caseChart, {
        type: 'bar',
        data: {
            labels: months_labels,
            datasets: [{
                    backgroundColor: '#dc3545',
                    borderColor: '#000',
                    data: pending_data_set,
                    label: 'Pending'
                },
                {
                    backgroundColor: '#28a745',
                    borderColor: '#28aeee',
                    data: processing_data_set,
                    label: 'Processing'
                },
                {
                    backgroundColor: '#28e74a',
                    borderColor: '#28aeee',
                    data: closed_data_set,
                    label: 'Closed'
                }
            ]
        },
        options: {
            maintainAspectRatio: false,
            tooltips: {
                mode: mode,
                intersect: intersect
            },
            hover: {
                mode: mode,
                intersect: intersect
            },
            legend: {
                display: true,
            },
            scales: {
                yAxes: [{
                    // display: false,
                    gridLines: {
                        display: true,
                        lineWidth: '3px',
                        color: 'rgba(0, 0, 0, .2)',
                        zeroLineColor: 'rgba(0, 0, 0, .2)'
                    },
                    ticks: $.extend({
                        beginAtZero: true,
                        callback: function(value) {
                            // if (value%2 != 0) {
                            //   value = '';
                            // }
                            return value
                        },
                        stepSize: 5
                    }, ticksStyle)
                }],
                xAxes: [{
                    display: true,
                    gridLines: {
                        display: true,
                        zeroLineColor: 'rgba(0, 0, 0, .2)'
                    },
                    ticks: ticksStyle
                }]
            }
        }
    });
}



//-----------------------
// - Claim CHART -
//-----------------------

// auto call claim chart data api
$('#claim_chart_box #case_bar_chart_form').ready(function() {
    callClaimChartAjax();
});

// call claim chart api when year is change
$('#claim_chart_box #chart_year').change(function() {
  callClaimChartAjax();
});

// call api to get claim chart data
function callClaimChartAjax() {
    // let url = "";
    let url = "<?php echo e(route('claim.chart.data')); ?>";
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': '<?php echo e(csrf_token()); ?>'
        }
    });
    $.ajax({
        url: url,
        type: 'POST',
        data: $('#claim_bar_chart_form').serialize(),
        dataType: 'JSON',
        success: function(response) {
            ClaimbarChart(response);
        }
    });
}

// get Case Bar chart data
function ClaimbarChart(response) {
    let chart_box = $('#claim_bar-chart'); //get box id to append case chart
    // <canvas id="complaintsChart" height="180" style="height: 180px;"></canvas> 
    // create canvas element
    let canvas = $('<canvas/>', {
        'id': 'claimChart',
        'style': 'height: 180px;'
    }).prop({
        height: 180
    });
    chart_box.html(canvas);

    $('#claim_chart_box .current_year').text(response.current_year); // display current selected year

    $('#claim_chart_box #current_year_total_claims').text(response.current_year_total_claims);
    $('#claim_chart_box #current_year_pending_claims').text(response.current_year_pending_claims);
    $('#claim_chart_box #current_year_processing_claims').text(response.current_year_processing_claims);
    $('#claim_chart_box #current_year_close_claims').text(response.current_year_close_claims);

    var months_labels = response.month_labels;
    var pending_data_set = response.pending_data_set;
    var processing_data_set = response.processing_data_set;
    var closed_data_set = response.closed_data_set;

    var ticksStyle = {
        fontColor: '#495057',
        fontStyle: 'bold'
    };
    var mode = 'index';
    var intersect = true;
    var $claimChart = $('#claimChart');
    // eslint-disable-next-line no-unused-vars
    var claimChart = new Chart($claimChart, {
        type: 'bar',
        data: {
            labels: months_labels,
            datasets: [{
                    backgroundColor: '#dc3545',
                    borderColor: '#000',
                    data: pending_data_set,
                    label: 'Pending'
                },
                {
                    backgroundColor: '#28a745',
                    borderColor: '#28aeee',
                    data: processing_data_set,
                    label: 'Processing'
                },
                {
                    backgroundColor: '#28e74a',
                    borderColor: '#28aeee',
                    data: closed_data_set,
                    label: 'Closed'
                }
            ]
        },
        options: {
            maintainAspectRatio: false,
            tooltips: {
                mode: mode,
                intersect: intersect
            },
            hover: {
                mode: mode,
                intersect: intersect
            },
            legend: {
                display: true,
            },
            scales: {
                yAxes: [{
                    // display: false,
                    gridLines: {
                        display: true,
                        lineWidth: '3px',
                        color: 'rgba(0, 0, 0, .2)',
                        zeroLineColor: 'rgba(0, 0, 0, .2)'
                    },
                    ticks: $.extend({
                        beginAtZero: true,
                        callback: function(value) {
                            // if (value%2 != 0) {
                            //   value = '';
                            // }
                            return value
                        },
                        stepSize: 5
                    }, ticksStyle)
                }],
                xAxes: [{
                    display: true,
                    gridLines: {
                        display: true,
                        zeroLineColor: 'rgba(0, 0, 0, .2)'
                    },
                    ticks: ticksStyle
                }]
            }
        }
    });
}
</script>
<?php $__env->stopPush(); ?>

<?php echo $__env->make('layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/legalclaim231/public_html/resources/views/pages/dashboard.blade.php ENDPATH**/ ?>