@extends('backend.layouts.app')
@section('content')
    <div class="aiz-main-content aiz-titlebar ">
        <div class="row mb-3">
            <div class="col-12">
                <h1 class="h3">Keywords <span>(Keyword name)</span> - Overview</h1>
            </div>
            <div class="col-12 mt-4">
                <div class="Keyword-Outer-div">
                    <div class="Keyword-Heading">
                        Search Volume
                    </div>
                    <div class="Keyword-Graph-BG">
                        <div class="Keyword-Filter-div">
                            <div class="Keyword-Select-Filter">
                                <div>
                                    <i class="icons icon-location1 locationIcon"></i>
                                </div>
                                <div class="Keyword-Select-div">
                                    <div class="form-group m-0">
                                        <select class="form-control Keyword-select-style" id="exampleFormControlSelect1">
                                            <option>India</option>
                                            <option>USA</option>
                                            <option>Afganistan</option>
                                            <option>United Kingdom</option>
                                            <option>United Arab Emirates</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="Keyword-Select-Filter">
                                <div class="Keyword-Select-div">
                                    <div class="form-group m-0">
                                        <select class="form-control Keyword-select-style" id="exampleFormControlSelect1">
                                            <option>This year</option>
                                            <option>2024</option>
                                            <option>2023</option>
                                            <option>2022</option>
                                            <option>2021</option>
                                        </select>
                                    </div>
                                </div>
                                <div>
                                    <button class="download-graph-data btn">
                                        Save Report
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="mt-4">
                            <div id="chart"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 mt-4">
                <div class="Keyword-Outer-div">
                    <div class="Keyword-Filter-div">
                        <div class="Keyword-Heading">
                            Categories
                        </div>
                        <div>
                            <div class="Keyword-Select-div">
                                <div class="form-group m-0">
                                    <select class="form-control Keyword-select-style" id="exampleFormControlSelect1">
                                        <option>This year</option>
                                        <option>2024</option>
                                        <option>2023</option>
                                        <option>2022</option>
                                        <option>2021</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12 col-md-4 col-lg-4">
                            <div class="Keyword-Graph-BG">
                                <div class="Keyword-Filter-div">
                                    <div class="Keyword-Select-Filter">
                                        <p class="Keyword-category-label">Power Generation </p>
                                        <p class="Keyword-category-Name">10,500</p>
                                    </div>
                                    <div class="Keyword-Increase">
                                        <img src="{{ url('public/assets/img/incrase-keyword.svg') }}" alt="">
                                        <span>11.2%</span>
                                    </div>
                                </div>
                                <div class="mt-4">
                                    <div id="Piechart"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-4 col-lg-4">
                            <div class="Keyword-Graph-BG">
                                <div class="Keyword-Filter-div">
                                    <div class="Keyword-Select-Filter">
                                        <p class="Keyword-category-label">Oil & Gas </p>
                                        <p class="Keyword-category-Name">15,500</p>
                                    </div>
                                    <div class="Keyword-Increase">
                                        <img src="{{ url('public/assets/img/incrase-keyword.svg') }}" alt="">
                                        <span>5.2%</span>
                                    </div>
                                </div>
                                <div class="mt-4">
                                    <div id="Piechart2"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-4 col-lg-4">
                            <div class="Keyword-Graph-BG">
                                <div class="Keyword-Filter-div">
                                    <div class="Keyword-Select-Filter">
                                        <p class="Keyword-category-label">Water Management</p>
                                        <p class="Keyword-category-Name">11,900</p>
                                    </div>
                                    <div class="Keyword-Increase">
                                        <img src="{{ url('public/assets/img/incrase-keyword.svg') }}" alt="">
                                        <span>19.2%</span>
                                    </div>
                                </div>
                                <div class="mt-4">
                                    <div id="Piechart3"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 mt-4">
                <div class="Keyword-Outer-div">
                    <div class="row">
                        <div class="col-sm-12 col-md-3 col-lg-3">
                            <div class="Keyword-Graph-BG keyword-cards m-0">
                                <div class="Keyword-Img-div">
                                    <img src="{{ url('public/assets/img/rating.svg') }}" alt="">
                                </div>
                                <p class="Keyword-Img-heading">Rating</p>
                                <div>
                                    <i class="icons icon-star"><span class="path1"></span><span class="path2"></span></i>
                                    <i class="icons icon-star"><span class="path1"></span><span class="path2"></span></i>
                                    <i class="icons icon-star"><span class="path1"></span><span class="path2"></span></i>
                                    <i class="icons icon-star"><span class="path1"></span><span class="path2"></span></i>
                                    <i class="icons icon-star"><span class="path1"></span><span class="path2"></span></i>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-3 col-lg-3">
                            <div class="Keyword-Graph-BG keyword-cards m-0">
                                <div class="Keyword-Img-div">
                                    <img src="{{ url('public/assets/img/prod-icon.svg') }}" alt="">
                                </div>
                                <p class="Keyword-Img-heading">Product</p>
                                <div>
                                    <p class="Keyword-data">201,000</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-3 col-lg-3">
                            <div class="Keyword-Graph-BG keyword-cards m-0">
                                <div class="Keyword-Img-div">
                                    <img src="{{ url('public/assets/img/seller-icon.svg') }}" alt="">
                                </div>
                                <p class="Keyword-Img-heading">Seller Adoption Rate</p>
                                <div>
                                    <p class="Keyword-data">10%</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-3 col-lg-3">
                            <div class="Keyword-Graph-BG keyword-cards m-0">
                                <div class="Keyword-Img-div">
                                    <img src="{{ url('public/assets/img/search-icon.svg') }}" alt="">
                                </div>
                                <p class="Keyword-Img-heading">
                                    Search To Click Rate (CTR)
                                </p>
                                <div>
                                    <p class="Keyword-data">30%</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <script>
        // area chart
        var options = {
            series: [{
                name: 'series1',
                data: [3100, 40000, 28000, 51000, 42000, 10009, 55000]
            }, ],
            chart: {
                height: 350,
                type: 'area'
            },
            dataLabels: {
                enabled: true
            },
            stroke: {
                curve: 'smooth'
            },
            xaxis: {
                categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov",
                    "Dec"
                ],
                labels: {
                    rotate: -45
                }
            },
            yaxis: {
                min: 0,
                max: 55000,
                tickAmount: 11,
                labels: {
                    formatter: function(value) {
                        return value.toLocaleString();
                    }
                }
            },
            grid: {
                show: false,
                xaxis: {
                    lines: {
                        show: false
                    }
                },
                yaxis: {
                    lines: {
                        show: false
                    }
                }
            },
            tooltip: {
                x: {
                    formatter: function(value, timestamp) {
                        return value;
                    }
                }
            }
        };
        var chart = new ApexCharts(document.querySelector("#chart"), options);
        chart.render();
        // Pie chart
        var options = {
            series: [44, 55, 13, 43, 22],
            chart: {
                width: 380,
                type: 'pie',
            },
            labels: ['Thermal power Plant', 'Nuclear power Plant', 'Hydropower Plant', 'Biomass power Plant',
                'Solar power Plant'
            ],
            legend: {
                position: 'bottom'
            },
            responsive: [{
                breakpoint: 480,
                options: {
                    chart: {
                        width: 200
                    },
                }
            }]
        };
        var chart = new ApexCharts(document.querySelector("#Piechart"), options);
        chart.render();

        var options = {
            series: [44, 55, 13, 43, 22],
            chart: {
                width: 380,
                type: 'pie',
            },
            labels: ['Upstream', 'Midstream', 'Downstream', 'Conventional motor oil',
                'Synthetic blend oils'
            ],
            legend: {
                position: 'bottom'
            },
            responsive: [{
                breakpoint: 480,
                options: {
                    chart: {
                        width: 200
                    },
                }
            }]
        };
        var chart = new ApexCharts(document.querySelector("#Piechart2"), options);
        chart.render();

        var options = {
            series: [44, 55, 13, 43, 22],
            chart: {
                width: 380,
                type: 'pie',
            },
            labels: ['Agriculture ', 'Inudstrial Water system', 'Domestic water ', 'Floood Management',
                'Rainwater Management'
            ],
            legend: {
                position: 'bottom'
            },
            responsive: [{
                breakpoint: 480,
                options: {
                    chart: {
                        width: 200
                    },
                }
            }]
        };
        var chart = new ApexCharts(document.querySelector("#Piechart3"), options);
        chart.render();
    </script>
@endsection