@extends('layouts.app')
@section('content')
    @include('layouts.sidebar')

    <style>
        .form-outline input::placeholder {
            font-size: 0.7em;
            /* Adjust the font size as needed */
        }

        .valuesty {
            font-size: 15px;
        }

        .card-container {
            display: flex;
            justify-content: space-between;
            gap: 20px;
        }

        .card {
            background-color: rgb(250, 255, 254);
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            padding: 20px;
            width: 500px;
            box-sizing: border-box;
        }

        .perform {
            display: flex;
            justify-content: space-between;
        }

        .perform h2 {
            font-size: 18px;
        }

        .chartspace {
            display: flex;
            gap: 2rem;
            padding-right: 100px !important;
        }

        .barchart {
            width: 100%;
            margin: 15px auto;
            background-color: rgb(250, 255, 254);
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            padding: 20px;
            box-sizing: border-box;
        }

        .barchart1 {
            /* width: 50%; */
            background-color: rgb(250, 255, 254);
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            padding: 20px;
            box-sizing: border-box;
        }

        .chart-container {
            display: flex;
        }

        .y-axis {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            text-align: right;
            margin-right: 10px;
        }

        .y-axis div {
            height: 27px;
            /* Adjust height based on the chart height divided by number of intervals */
        }

        .chart {
            display: flex;
            align-items: flex-end;
            height: 300px;
            width: 400px;
            border-left: 2px solid #333;
            border-bottom: 2px solid #333;
            padding-left: 10px;
            position: relative;
        }

        .bar {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            margin: 0 5px;
            position: relative;
        }

        .label {
            text-align: center;
            margin-top: 5px;
        }

        .value {
            width: 100%;
        }

        .chart-container {
            display: flex;
            position: relative;
        }

        .y-axis1 {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            text-align: right;
            margin-right: 10px;
        }

        .y-axis1 div {
            height: 60px;
            /* Adjust height based on the chart height divided by number of intervals */
        }

        .chart {
            display: flex;
            align-items: flex-end;
            height: 300px;
            border-left: 2px solid #333;
            border-bottom: 2px solid #333;
            padding-left: 10px;
            position: relative;
        }

        .bar {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            margin: 0 5px;
            position: relative;
        }

        .label1 {
            display: none;
        }

        .value1 {
            width: 50%;
        }

        .x-axis {
            display: flex;
            margin-top: 10px;
            padding-left: 38px;
            /* Adjust to align with the chart */
        }

        .x-axis div {
            text-align: center;
            width: 80px;
            /* Adjust width to align with bars and spacing */
        }

        .pie-chart {
            background: radial-gradient(circle closest-side, white 0, white 40%, transparent 40%, transparent 100%, white 0), conic-gradient(#4e79a7 0, #4e79a7 62.3%, #f28e2c 0, #f28e2c 100%);
            position: relative;
            width: 450px;
            min-height: 300px;
            margin: 0;
            outline: 1px solid #ccc;
        }

        .pie-chart:hover {
            border: 2px solid red;
        }

        .pie-chart h2 {
            position: absolute;
            margin: 1rem;
        }

        .pie-chart figcaption {
            position: absolute;
            bottom: 1em;
            right: 1em;
            font-size: smaller;
            text-align: right;
        }

        .pie-chart span:after {
            display: inline-block;
            content: "";
            width: 0.8em;
            height: 0.8em;
            margin-left: 0.4em;
            height: 0.8em;
            border-radius: 0.2em;
            background: currentColor;
        }

        .pie-chart1 {
            background: radial-gradient(circle closest-side, #fff 0, #fff 43.68%, transparent 43.68%, transparent 84%, #fff 0), conic-gradient(from 42deg, #4e79a7 0, #4e79a7 49.4%, #f28e2c 0, #f28e2c 79.3%, #e15759 0, #e15759 100%);
            position: relative;
            width: 450px;
            min-height: 300px;
            margin: 0;
            outline: 1px solid #ccc
        }

        .pie-chart1 h2 {
            position: absolute;
            margin: 1rem
        }

        .pie-chart1 cite {
            position: absolute;
            bottom: 0;
            font-size: 80%;
            padding: 1rem;
            color: gray
        }

        .pie-chart1 figcaption {
            position: absolute;
            bottom: 1em;
            right: 1em;
            font-size: smaller;
            text-align: right
        }

        .pie-chart1 span:after {
            display: inline-block;
            content: "";
            width: .8em;
            height: .8em;
            margin-left: .4em;
            height: .8em;
            border-radius: .2em;
            background: currentColor
        }

        .card-container1 {
            display: flex;
            justify-content: space-between;
        }

        .carded {
            background-color: rgb(250, 255, 254);
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            padding: 20px;
            width: 500px;
            box-sizing: border-box;
        }

        .browser {
            font-size: 11px;
        }

        .Countries {
            display: flex;
            justify-content: space-between;
        }

        .progress-container {
            width: 100%;
            background-color: #f0f0f0;
            border-radius: 5px;
            overflow: hidden;
        }

        .progress-bar {
            width: 100%;
            height: 15px;
            background-color: #4caf50;
            border-radius: 5px;
            transition: width 0.5s ease-in-out;
        }
    </style>

    <main id="" class="side_user mt-5">
        {{-- <h1>Analytics</h1>

        <div class="form-group mb-4 col-2">
            <select name="" class="form-control" required="required" id="">
                <option value="">Select a filter</option>

                <option value="1">Date</option>

                <option value="2">partner</option>

                <option value="3">Customer</option>

                <option value="4">Project</option>
            </select>
        </div> --}}

        <!-- Analyses -->

        <form id="filter-form">
            <div class="row w-100">
                <div class="col-md-3">
                    <label for="from_date">From Date</label>
                    <input type="date" class="form-control" name="from_date" id="from_date" value="{{ $fromDate }}"
                        required>
                </div>
                <div class="col-md-3">
                    <label for="to_date">To Date</label>
                    <input type="date" class="form-control" name="to_date" id="to_date" value="{{ $toDate }}"
                        required>
                </div>
                <div class="col-md-3">
                    <label for="select_type">Type</label>
                    <select name="select_type" id="select_type" required class="form-control">
                        <option value="">Choose Type</option>
                        <option value="1" {{ $selectType == '1' ? 'selected' : '' }}>Customer</option>
                        <option value="2" {{ $selectType == '2' ? 'selected' : '' }}>Partner</option>
                        <option value="3" {{ $selectType == '3' ? 'selected' : '' }}>Customer User</option>
                        <option value="4" {{ $selectType == '4' ? 'selected' : '' }}>All</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label for="select_value">Select value</label>
                    <select name="select_value" id="select_value" required class="form-control">
                        <option value="">Choose Value</option>
                        <!-- Dynamic options will be appended here via JavaScript -->
                    </select>
                </div>
            </div>
            <div class="row mt-3">
                <div class="col-md-12">
                    <button type="submit" id="filter-button" class="btn btn-primary">Filter</button>
                    <a href="{{ route('admin.dashboard') }}"><button type="button" id="reset-button"
                            class="btn btn-secondary">Reset</button></a>
                </div>
            </div>
            <div class="row mt-3">
                <div class="col-md-12">
                    <div id="record-count" class="mt-2"></div>
                </div>
            </div>
        </form>


        <div class="progress_bar px-2">
            <div class="d-flex-jb-ac">
                <div class="col-md-4 col-sm-6">
                    <div class="pro_one">
                        <div class="info">
                            <h3>Total QR'S Created</h3>
                            <h1>{{ $totalQrs }}</h1>
                        </div>
                    </div>
                </div>

                <div class="col-md-4 col-sm-6">
                    <div class="pro_one">
                        <div class="info">
                            <h3>Total Projects Created</h3>
                            <h1>{{ $totalProjects }}</h1>
                        </div>
                    </div>
                </div>

                <div class="col-md-4 col-sm-6">
                    <div class="pro_one">
                        <div class="info">
                            <h3>Total Active Customers</h3>
                            <h1>{{ $totalActiveCustomers }}</h1>
                        </div>
                    </div>
                </div>


            </div>
        </div>

        <div class="progress_bar px-2 mt-3">
            <div class="d-flex-jc-ac">
                {{-- <div class="col-md-4 col-sm-6">
                    <div class="pro_one">
                        <div class="info">
                            <h3>Total Brand Impressions</h3>

                            <h1>1,039</h1>
                        </div>
                    </div>
                </div> --}}

                <div class="col-md-4 col-sm-6">
                    <div class="pro_one">
                        <div class="info">
                            <h3>New Customers Onboarded</h3>

                            <h1>{{ $newCustomers }}</h1>
                        </div>
                    </div>
                </div>

                <div class="col-md-4 col-sm-6">
                    <div class="pro_one">
                        <div class="info">
                            <h3>New Partners Onboarded</h3>
                            <h1>{{ $newPartners }}</h1>
                        </div>
                    </div>
                </div>

                <div class="col-md-4 col-sm-6">
                    <div class="pro_one">
                        <div class="info">
                            <h3>Total Impression Count</h3>
                            <h1>{{ $totalImpressionCount }}</h1>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <!-- card -->
        <br>
        <br>

        <div class="card-container">
            <div class="card">
                <div class="perform info">
                    <h2>Top Customer By projects</h2>

                    <a href="{{ route('customers.index') }}">View all</a>
                </div>

                <div class="perform">
                    <p>Name</p>

                    <p>Projects</p>
                </div>

                @foreach ($topCustomersByProjects as $key => $topCustomersByProject)
                    <div class="perform">
                        <p>
                            {{ $topCustomersByProject->name }}
                        </p>

                        <p>{{ count($topCustomersByProject->projects) }}</p>
                    </div>

                    <hr>
                @endforeach



            </div>

            <div class="card">
                <div class="perform">
                    <h2>Top Customer By QR Created</h2>

                    <a href="{{ route('customers.index') }}">View all</a>
                </div>

                <div class="perform">
                    <p>Name</p>

                    <p>Qrs</p>
                </div>

                @foreach ($topCustomersByQrs as $key => $topCustomersByQr)
                    <div class="perform">
                        <p>
                            {{ $topCustomersByQr->name }}
                        </p>

                        <p>{{ count($topCustomersByQr->qrs) }}</p>
                    </div>

                    <hr>
                @endforeach
            </div>

            <div class="card">
                <div class="perform">
                    <h2>Top Customer By Impression</h2>

                    <a href="{{ route('customers.index') }}">View all</a>
                </div>

                <div class="perform">
                    <p>Name</p>

                    <p>Scan</p>
                </div>

                @foreach ($topCustomersByImpression as $key => $customerImpression)
                    <div class="perform">
                        <p>
                            {{ $customerImpression->name }}
                        </p>

                        <p>{{ count($customerImpression->scannedQrs) }}</p>
                    </div>

                    <hr>
                @endforeach
            </div>


        </div>

        <br>

        <div class="card-container">


            <div class="card">
                <div class="perform">
                    <h2>Top Projects</h2>

                    <a href="{{ route('projects.index') }}">View all</a>
                </div>

                <div class="perform">
                    <p>Name</p>

                    <p">Qrs</p">
                </div>

                @foreach ($topProjects as $key => $topProject)
                    <div class="perform">
                        <p>
                            {{ $topProject->name }}
                        </p>

                        <p>{{ count($topProject->qrs) }}</p>
                    </div>
                    <hr>
                @endforeach
            </div>

            <div class="card">
                <div class="perform">
                    <h2>Top Project By Impression</h2>

                    <a href="{{ route('projects.index') }}">View all</a>
                </div>

                <div class="perform">
                    <p>Name</p>

                    <p>Scan</p>
                </div>

                @foreach ($topProjectsByImpression as $key => $projectImpression)
                    <div class="perform">
                        <p>
                            {{ $projectImpression->name }}
                        </p>

                        <p>{{ count($projectImpression->scannedQrs) }}</p>
                    </div>

                    <hr>
                @endforeach
            </div>

            <div class="card">
                <div class="perform">
                    <h2>Top Map Function By Qrs</h2>

                    {{-- <a href="">View all</a> --}}
                </div>

                <div class="perform">
                    <p>Name</p>

                    <p>Count</p>
                </div>

                @foreach ($topMapFunction as $key => $function)
                    @php
                        if ($function['type'] == 1) {
                            $name = 'Scan to call';
                        } elseif ($function['type'] == 2) {
                            $name = 'SMS';
                        } elseif ($function['type'] == 3) {
                            $name = 'Mail';
                        } elseif ($function['type'] == 4) {
                            $name = 'URL';
                        } elseif ($function['type'] == 5) {
                            $name = 'Text';
                        } elseif ($function['type'] == 6) {
                            $name = 'Whatsapp';
                        } elseif ($function['type'] == 7) {
                            $name = 'Connect to WiFi';
                        } elseif ($function['type'] == 8) {
                            $name = 'Emergency Contact';
                        } elseif ($function['type'] == 9) {
                            $name = ' Lost and Found';
                        } elseif ($function['type'] == 10) {
                            $name = ' Contact Information';
                        } else {
                            $name = null;
                        }
                    @endphp
                    <div class="perform">
                        <p>
                            {{ $name }}
                        </p>

                        <p>{{ $function['count'] }}</p>
                    </div>

                    <hr>
                @endforeach
            </div>
        </div>

        <!-- end card -->
        <br>
        <!-- bar chart -->


        <br>
        <!-- pie chart -->

        <div class="card-container1 w-100">
            <div class="carded">
                <canvas id="deviceAnalysisChart"></canvas>
            </div>

            <div class="carded">
                <canvas id="browserAnalysisChart"></canvas>
            </div>
        </div>

        <!-- end pie chart -->
        <br>
        <br>
        <!-- map chart -->

        <div class="analyse mb-3">
            <div class="sales">
                <h6>Countries - Top 10</h6>
                @php
                    $total = array_sum(array_column($countries, 'count'));
                @endphp
                @foreach ($countries as $country)
                    @php
                        $percentage = ($country['count'] / $total) * 100;
                    @endphp

                    <div class="Countries">
                        <p>{{ $country['country'] }}</p>
                        <p>({{ round($percentage, 2) }}%)</p>
                    </div>

                    <div class="progress-container">
                        <div class="progress-bar" style="width: {{ $percentage }}%;"></div>
                    </div>
                @endforeach
            </div>

            <div class="sales">
                <h6>States - Top 10</h6>
                @php
                    $total = array_sum(array_column($states, 'count'));
                @endphp
                @foreach ($states as $state)
                    @php
                        $percentage = ($state['count'] / $total) * 100;
                    @endphp

                    <div class="Countries">
                        <p>{{ $state['state'] }}</p>
                        <p>({{ round($percentage, 2) }}%)</p>
                    </div>

                    <div class="progress-container">
                        <div class="progress-bar" style="width: {{ $percentage }}%;"></div>
                    </div>
                @endforeach
            </div>

            <div class="sales">
                <h6>Cities - Top 10</h6>
                @php
                    $total = array_sum(array_column($cities, 'count'));
                @endphp
                @foreach ($cities as $city)
                    @php
                        $percentage = ($city['count'] / $total) * 100;
                    @endphp

                    <div class="Countries">
                        <p>{{ $city['city'] }}</p>
                        <p>({{ round($percentage, 2) }}%)</p>
                    </div>

                    <div class="progress-container">
                        <div class="progress-bar" style="width: {{ $percentage }}%;"></div>
                    </div>
                @endforeach
            </div>
        </div>


    </main>

@section('script')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    {{-- <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script> --}}

    <script>
        $(document).ready(function() {
            var selectType = "{{ $selectType }}";
            var selectValue = "{{ $selectValue }}";

            if (selectType) {
                loadSelectValues(selectType, selectValue);
            }

            $('#select_type').change(function() {
                selectType = $(this).val();
                loadSelectValues(selectType, null);
            });

            $('#reset-button').click(function() {
                $('#filter-form')[0].reset();
                $('#select_value').empty();
                $('#select_value').append('<option value="">Choose Value</option>');
            });

            function loadSelectValues(selectType, selectedValue) {
                if (selectType) {
                    $.ajax({
                        url: '/get-select-type-data/' + selectType,
                        type: 'GET',
                        dataType: 'json',
                        success: function(data) {
                            $('#select_value').empty();
                            $('#select_value').append('<option value="">Select a Value</option>');
                            $.each(data, function(key, value) {
                                var isSelected = value.id == selectedValue ? 'selected' : '';
                                $('#select_value').append('<option value="' + value.id + '" ' +
                                    isSelected + '>' + value.name + '</option>');
                            });
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            // Handle errors
                        }
                    });
                } else {
                    $('#select_value').empty();
                    $('#select_value').append('<option value="">Select a Value</option>');
                }
            }
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const deviceAnalysis = @json($deviceAnalysis);

            const labels = deviceAnalysis.map(item => item.device);
            const counts = deviceAnalysis.map(item => item.count);

            const ctx = document.getElementById('deviceAnalysisChart').getContext('2d');
            new Chart(ctx, {
                type: 'pie',
                data: {
                    labels: labels,
                    datasets: [{
                        data: counts,
                        backgroundColor: ['#4e79a7', '#f28e2c', '#e15759'],
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            position: 'top',
                        },
                        title: {
                            display: true,
                            text: 'Device Analysis'
                        }
                    }
                }
            });
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const deviceAnalysis = @json($browserAnalysis);

            const labels = deviceAnalysis.map(item => item.browser);
            const counts = deviceAnalysis.map(item => item.count);

            const ctx = document.getElementById('browserAnalysisChart').getContext('2d');
            new Chart(ctx, {
                type: 'pie',
                data: {
                    labels: labels,
                    datasets: [{
                        data: counts,
                        backgroundColor: ['#4e79a7', '#f28e2c', '#e15759'],

                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            position: 'top',
                        },
                        title: {
                            display: true,
                            text: 'Browser Analysis'
                        }
                    }
                }
            });
        });
    </script>
@endsection