@extends('layouts.dashboard.layout')

@section('content')

<!-- Content Header (Page header) -->
<section class="content-header">
    @if(Session::has('flash_message_error'))
    <div class="alert alert-error alert-danger alert-block">
        <button type="button" class="close" data-dismiss="alert">×</button>
        <strong>{!! session('flash_message_error') !!}</strong>
    </div>
    @endif
    @if(Session::has('flash_message_success'))
    <div class="alert alert-success alert-block">
        <button type="button" class="close" data-dismiss="alert">×</button>
        <strong>{!! session('flash_message_success') !!}</strong>
    </div>
    @endif
</section>

<!-- Barchart Scripts -->
<script src="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-ui.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-exports.min.js"></script>
<link href="https://cdn.anychart.com/releases/v8/css/anychart-ui.min.css" type="text/css" rel="stylesheet">
<link href="https://cdn.anychart.com/releases/v8/fonts/css/anychart-font.min.css" type="text/css" rel="stylesheet">

<!-- Piechart Scripts -->
<script src="https://cdn.anychart.com/js/8.0.1/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/js/8.0.1/anychart-pie.min.js"></script>

<div class="container-fluid ">
    <div class="row">
        <div class="col-md-12">
            <!-- Content Header (Page header) -->
            <section class="content-header">
                <div class="container-fluid">
                    <div class="row mb-2">
                        <div class="col-sm-12">
                            <h2 class="text-white">Claim Report</h2>
                        </div>
                    </div>
                </div>
            </section>
            <div class="card">
                <!-- /.card-header -->
                <div class="card-body">

                    <div class="row">
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>From Date</label>
                                <input type="date" name="fromdate" id="fromdate" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>To Date</label>
                                <input type="date" name="todate" id="todate" class="form-control">
                            </div>
                        </div>

                        <div class="col-md-1 mt-3">
                            <button type="button" id="serachfilter" class="btn btn-primary mt-3">Search</button>
                        </div>
                        <div class="col-md-3 mt-3">
                            <a href="{{ route('reportclaim') }}" type="button" class="btn btn-success mt-3">Clear</a>
                        </div>
                    </div>

                    <br><br>

                    <div id="reportdata" style="display:none">
                        <div class="row">
                            <div class="col-lg-4 col-md-6 col-sm-6">
                                <div class="card mb-2">
                                    <div class="card-header p-3 pt-2">
                                        <div
                                            class="icon icon-lg icon-shape bg-gradient-dark shadow-dark shadow text-center border-radius-xl mt-n4 position-absolute">
                                            <i class="ni ni-building opacity-10"></i>
                                        </div>
                                        <div class="text-end pt-1">
                                            <p class="text-sm mb-0 text-capitalize">Total Items</p>
                                            <h4 class="mb-0" id="totolitems"> </h4>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-6 col-sm-6">
                                <div class="card mb-2">
                                    <div class="card-header p-3 pt-2">
                                        <div
                                            class="icon icon-lg icon-shape bg-gradient-dark shadow-dark shadow text-center border-radius-xl mt-n4 position-absolute">
                                            <i class="ni ni-map-big opacity-10"></i>
                                        </div>
                                        <div class="text-end pt-1">
                                            <p class="text-sm mb-0 text-capitalize">Total Claims</p>
                                            <h4 class="mb-0" id="totalclaims"> </h4>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-6 col-sm-6">
                                <div class="card mb-2">
                                    <div class="card-header p-3 pt-2">
                                        <div
                                            class="icon icon-lg icon-shape bg-gradient-dark shadow-dark shadow text-center border-radius-xl mt-n4 position-absolute">
                                            <i class="ni ni-bus-front-12 opacity-10"></i>
                                        </div>
                                        <div class="text-end pt-1">
                                            <p class="text-sm mb-0 text-capitalize">Claim Ratio</p>
                                            <h4 class="mb-0">
                                                <span id="moveratio"></span> : <span id="claimratio"></span>
                                                <small class="text-sm text-success">Move</small>
                                            </h4>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <br>

                        <table id="example" class="table table-striped text-center">
                            <thead>
                                <tr class="bg-dark text-light">
                                    <th>Damage Category</th>
                                    <th>Total Counts</th>
                                </tr>
                            </thead>
                            <tbody id="tablebody">

                            </tbody>
                        </table>

                        <!-- pie chart div -->
                        <div id="container" style="width:100%; height:400px">

                        </div>

                        <!-- bar chart div -->
                        <div id="container1" style="width:100%; height:400px">

                        </div>
                    </div>

                </div>
                <!-- /.card-body -->
            </div>
            <!-- /.card -->
        </div>
    </div>
</div>

<!-- Date Wise Filter Report -->
<script type="text/javascript">
var newPieChartData = [];
var newBarChartData = [];

$('#serachfilter').on('click', function() {
    var fromdate = $('#fromdate').val();
    var todate = $('#todate').val();
    console.log(fromdate);
    console.log(todate);

    $.ajax({
        type: "GET",
        url: "/admin/report-claim1/" + fromdate + "/" + todate,
        // data: {FromDate: encodeURIComponent(fromdate) , ToDate: encodeURIComponent(todate)},
        dataType: "json",

        success: function(response) {
            console.log(response);

            $('#totolitems').text(response.totitems);
            $('#totalclaims').text(response.totclaims);
            // $('#moveratio').text(response.totmoves);
            $('#moveratio').text(1);
            $('#claimratio').text(response.totclaims);

            $("#tablebody").html("")
            for (let i = 0; i < response["catArray"].length; i++) {
                const element = response["catArray"][i];

                var row = `<tr> <td> ${element.name} </td> <td> ${element.counts} </td> </tr>`
                $("#tablebody").append(row)

                // Pie Chart Graph s
                const obj = {
                    x: element.name,
                    value: element.counts
                }
                newPieChartData.push(obj);
                // Pie Chart Graph e

                // Bar Chart Graph s
                const obj1 = [
                    element.name,
                    element.counts
                ]
                newBarChartData.push(obj1);
                // Bar Chart Graph e

            }

            // Pie Chart Graph s
            var chart = anychart.pie();
            chart.data(newPieChartData);
            chart.sort("desc");

            chart.legend().position("right");
            chart.legend().itemsLayout("vertical");

            // display the chart in the container
            chart.container('container');
            chart.draw();
            // Pie Chart Graph e

            // Bar Chart Graph s
            var chart = anychart.bar();
            chart.animation(true);
            chart.padding([10, 40, 5, 20]);

            var series = chart.bar(newBarChartData);

            // set tooltip settings
            series
                .tooltip()
                .position('right')
                .anchor('left-center')
                .offsetX(5)
                .offsetY(0)
                .titleFormat('{%X}')
                .format('${%Value}');

            chart.yAxis().labels().format('{%Value}{groupsSeparator: }');
            chart.xAxis().title('Categories by My Move Day');
            chart.yAxis().title('Categories Counts');
            chart.interactivity().hoverMode('by-x');
            chart.tooltip().positionMode('point');
            chart.yScale().minimum(0);

            chart.container('container1');
            chart.draw();
            // Bar Chart Graph e

            $('#reportdata').show();

        }
    });
})
</script>

<script type="text/javascript">
$(document).ready(function() {
    $('#example').dataTable({
        pageLength: 25,
    });
});
</script>


<!-- Pie Chart - Static Data -->
<script>
// anychart.onDocumentReady(function() {

//     var data = [{
//             x: "Broken Furniture",
//             value: 2
//         },
//         {
//             x: "BWalls/Doors",
//             value: 1
//         },
//         {
//             x: "Dented Appliances",
//             value: 1
//         },
//         {
//             x: "Floors",
//             value: 1
//         },
//         {
//             x: "TVs",
//             value: 0
//         },
//         {
//             x: "Missing Items",
//             value: 1
//         },
//         {
//             x: "Furniture Legs",
//             value: 1
//         },
//         {
//             x: "Glass",
//             value: 1
//         },
//         {
//             x: "Packing Issue",
//             value: 3
//         },
//         {
//             x: "Truck",
//             value: 1
//         },
//         {
//             x: "Hardware",
//             value: 1
//         },
//         {
//             x: "Scratched Furniture",
//             value: 4
//         },
//         {
//             x: "Un/Hookup Issue",
//             value: 0
//         },
//         {
//             x: "Misc/Other",
//             value: 0
//         },
//         {
//             x: "High Price Single",
//             value: 0
//         },
//         {
//             x: "Mattress",
//             value: 1
//         }
//     ];

//     var chart = anychart.pie();

// set the chart title
// chart.title("Population by Race for the United States: 2010 Census");

//     chart.data(data);

//     chart.sort("desc");

//     chart.legend().position("right");

//     chart.legend().itemsLayout("vertical");

//     chart.container('container');
//     chart.draw();

// });
</script>


<!-- Bar Chart Static Data -->
<script>
// anychart.onDocumentReady(function() {
//     // create bar chart
//     var chart = anychart.bar();

//     chart.animation(true);

//     chart.padding([10, 40, 5, 20]);

// chart.title('Top 10 Cosmetic Products by Revenue');

//     var series = chart.bar([
//         ['Broken Furniture', '2'],
//         ['Walls/Doors', '1'],
//         ['Dented Appliances', '1'],
//         ['Floors', '1'],
//         ['TVs', '0'],
//         ['Missing Items', '1'],
//         ['Furniture Legs', '1'],
//         ['Glass', '1'],
//         ['Packing Issue', '3'],
//         ['Truck', '1'],
//         ['Hardware', '1'],
//         ['Scratched Furniture', '4'],
//         ['Un/Hookup Issue', '0'],
//         ['Misc/Other', '0'],
//         ['High Price Single', '0'],
//         ['Mattress', '1'],
//     ]);

//     // set tooltip settings
//     series
//         .tooltip()
//         .position('right')
//         .anchor('left-center')
//         .offsetX(5)
//         .offsetY(0)
//         .titleFormat('{%X}')
//         .format('${%Value}');

//     // set yAxis labels formatter
//     chart.yAxis().labels().format('{%Value}{groupsSeparator: }');

//     // set titles for axises
//     chart.xAxis().title('Categories by My Move Day');
//     chart.yAxis().title('Categories Counts');
//     chart.interactivity().hoverMode('by-x');
//     chart.tooltip().positionMode('point');
//     // set scale minimum
//     chart.yScale().minimum(0);

//     // set container id for the chart
//     chart.container('container1');
//     // initiate chart drawing
//     chart.draw();
// });
</script>

@endsection