@include('layouts/header')
<div class="content px-3">
    <div class="container">
        <div class="card px-3">
            <div class="row">
                <div class="filter-form">
                    <form method="get">
                        <div class="row mb-3">
                            <div class="col-md-8 mt-3">
                                <div class="form-group">
                                    <input type="text" class="form-control" placeholder="Search Your Product Name" name="product_name" id="" value="">
                                </div>
                            </div>
                            <div class="col-md-2 mt-3">
                                <button type="submit" class="btn btn-primary" id="btnsearch" name="submit" width="80px">Search</button>
                            </div>
                            <div class="col-md-2 mt-3">
                                <a href="{{('dashboard')}}" class="btn btn-secondary btn-block">Reset</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!-- <div class="card"> -->
        <div class="row">
            <div class="col-md-3 mt-3">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex justify-content-center">
                            <img src="images/delivery-box_2982808.png" alt="" width="60" height="60">
                        </div>
                    </div>
                    <div class="text-center">
                        <h4><strong class="card-title text-primary mb-0" style="color: #005c83 !important;">Project</strong></h4>
                        <h3 class="text-dark counter d-inline-block">20</h3>
                    </div>
                </div>
            </div>
            <div class="col-md-3 mt-3">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex justify-content-center">
                            <img src="images/take-away_651086.png" alt="" width="60" height="60">
                        </div>
                    </div>
                    <div class="text-center">
                        <h4><strong class="card-title text-primary mb-0"  style="color: #005c83 !important;">Project</strong></h4>
                        <h3 class="text-dark counter d-inline-block">20</h3>
                    </div>
                </div>
            </div>
            <div class="col-md-3 mt-3">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex justify-content-center">
                            <img src="images/product-design_2272696.png" alt="" width="60" height="60">
                        </div>
                    </div>
                    <div class="text-center">
                        <h4><strong class="card-title text-primary mb-0"  style="color: #005c83 !important;">Project</strong></h4>
                        <h3 class="text-dark counter d-inline-block">20</h3>
                    </div>
                </div>
            </div>
            <div class="col-md-3 mt-3">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex justify-content-center">
                            <img src="images/offer_10112651.png" alt="" width="60" height="60">
                        </div>
                    </div>
                    <div class="text-center">   
                        <h4><strong class="card-title text-primary mb-0"  style="color: #005c83 !important;">Project</strong></h4>
                        <h3 class="text-dark counter d-inline-block">20</h3>
                    </div>
                </div>
            </div>
            <div class="col-md-6 mt-3">
                <div class="card">
                    <div class="card-header bg-primary text-left p-2" style="background-color: #005c83 !important;">
                        <h6 class="text-white">Product Count Bar</h6>
                    </div>
                    <div class="card-body">
                        <figure class="highcharts-figure">
                            <div id="container"></div>
                        </figure>
                    </div>
                </div>
            </div>
            <div class="col-md-6 mt-3">
                <div class="card">
                    <div class="card-header bg-primary text-left p-2" style="background-color: #005c83 !important;">
                        <h6 class="text-white">Product Count Bar</h6>
                    </div>
                    <div class="card-body">
                        <figure class="highcharts-figure">
                            <div id="product"></div>
                        </figure>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script>
    Highcharts.chart('container', {
        chart: {
            type: 'pie',
            options3d: {
                enabled: true,
                alpha: 45
            },
            events: {
                load: function() {
                    this.container.onkeydown = function(e) {
                        e.preventDefault();
                    };
                }
            }
        },
        title: {
            text: '',
            align: 'center'
        },
        colors: ["#005c83", "#dbf5ff", "#F1FADA"],
        credits: {
            enabled: false
        },
        plotOptions: {
            pie: {
                innerSize: 180,
                depth: 50,
                dataLabels: {
                    enabled: true
                }
            },
            series: {
                dataLabels: {
                    enabled: true
                },
                tooltip: {
                    pointFormat: ''
                }
            },
            legend: {
                enabled: true
            }
        },
        series: [{
            name: 'Medals',
            data: [
                ['Sales Product', 16],
                ['Brand development', 12],
                ['Marketing', 8],
                ['Legal', 20],
                ['Boosts product appeal', 8],
                ['Other products', 6],

            ]
        }]
    });
</script>
<script>
    Highcharts.chart('product', {
        chart: {
            type: 'pie',
            options3d: {
                enabled: true,
                alpha: 45
            },
            events: {
                load: function() {
                    this.container.onkeydown = function(e) {
                        e.preventDefault();
                    };
                }
            }
        },
        title: {
            text: '',
            align: 'center'
        },
        colors: ["#F1FADA", "#dbf5ff", "#005c83"],
        credits: {
            enabled: false
        },
        plotOptions: {
            pie: {
                innerSize: 180,
                depth: 50,
                dataLabels: {
                    enabled: true
                }
            },
            series: {
                dataLabels: {
                    enabled: true
                },
                tooltip: {
                    pointFormat: ''
                }
            },
            legend: {
                enabled: true
            }
        },
        series: [{
            name: 'Medals',
            data: [
                ['A Product', 6],
                ['B Product', 12],
                ['C Product', 8],
                ['D Product', 10],
                ['E Product', 15],
                ['Other products', 6],

            ]
        }]
    });
</script>
@include('layouts/footer')