@extends('layouts.app')
@section('content')
    @include('layouts.navbar')
    @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;
        }

        .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">


        <!-- END Hero -->
        <div class="table_fields">
            <div class="analyse mt-5">
                <div class="sales">
                    <h1>Total QR Scans</h1>
                    <h1>{{ $totalQrScanCount }}</h1>

                </div>
                <div class="sales">
                    <h1>Total QR project</h1>
                    <h1>{{ $totalQrProjectsCount }}</h1>

                </div>
                <div class="sales">
                    <h1>Total Mapped QR's</h1>
                    <h1>{{ $totalMappedQrCount }}</h1>

                </div>
            </div>
        </div>
        <br>
        <br>
        <div class="card-container">
            <div class="card">
                <div class="perform">
                    <h2>User Details</h2>
                    <!-- <a href="">View all</a> -->
                </div>
                <div class="perform">
                    <p>Name</p>
                    <p>{{ $user->name }}</p>
                </div>

                <hr>
                <div class="perform">
                    <p>Email Id</p>
                    <p>{{ $user->email }}</p>
                </div>
                <hr>


                <div class="perform">
                    <p>Account Created on</p>
                    <p>{{ $user->created_at }}</p>
                </div>
                <hr>


            </div>

            <div class="card">
                <div class="perform">
                    <h2>Scan Details</h2>
                    <!-- <a href="">View all</a> -->
                </div>
                <div class="perform">
                    <p>Latest Scan Time</p>
                    <p>{{ $lastScanTime }}</p>
                </div>
                <hr>

                <div class="perform">
                    <p>Total Functionlity Use</p>
                    <p>{{ $totalFunctionlityCount }}</p>
                </div>
                <hr>
            </div>

        </div>
        <br>


        <!-- end card-->
        <br>
        <div class="table_fields">
            <div class="card-container1">
                <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>

            <div class="row">
                <div class="col-sm-12">
                    <div class="table-responsive my-3">
                        {{ $dataTable->table() }}
                    </div>

                </div>
            </div>


        </div>
        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
            aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Unlink</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <form action="{{ route('unlink.qr.code') }}" method="POST">
                        @csrf

                        <div class="modal-body">
                            <input type="hidden" name="qr_code" id="qr_code">
                            <p>When a QR is unlinked from user the QR can be associated to a different user and will
                                disappear from here.</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-primary">Confirm</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </main>
@endsection

@section('script')
    {{ $dataTable->scripts() }}
    <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() {




            $(document).on('click', '.unlink-qr-btn', function() {
                var qrCode = $(this).data('id');
                // alert(qrCode);
                $('#qr_code').val(qrCode);
                $('#exampleModal').modal('show');
            });

            // Status toggle handler
            $('.status-toggle').change(function() {
                var customerId = $(this).data('id');
                var status = $(this).is(':checked') ? 1 : 0;

                $.ajax({
                    url: '{{ route('status.change') }}',
                    type: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        id: customerId,
                        type: 'customer_user',
                        status: status
                    },
                    success: function(response) {
                        if (response.data.status == 1) {
                            alert('Status Activated successfully!');
                        } else {
                            alert('Status Deactivated successfully!');
                        }
                    },
                    error: function(xhr, status, error) {
                        alert('An error occurred while updating the status.');
                    }
                });
            });

            // Delete button handler
            $('.delete-btn').click(function() {
                alert('text');
            });
        });
    </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