@extends('layouts.app')
@section('content')
    @include('layouts.navbar')
    @php
        use App\Helpers\RouteHelper;
    @endphp

    @include(RouteHelper::getSidebarView())
    <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">


        {{-- <form id="filter-form">
            <div class="row">
                <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_user">Users</label>
                    <select name="select_user" id="select_user" required class="form-control">
                        <option value="">Choose Type</option>
                        @foreach ($customerUsers as $key => $user)
                            <option value="{{ $user->id }}" {{ $selectUser == $user->id ? 'selected' : '' }}>
                                {{ $user->name }}</option>
                        @endforeach
                    </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('customers.show',$customer->id) }}"><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> --}}

        <!-- END Hero -->
        <div class="table_fields">
            <div class="analyse mt-5">
                <div class="sales">
                    <h1>Total QR Scans</h1>
                    <h1>{{ $totalQrScans }}</h1>
                </div>
                <div class="sales">
                    <h1>Total QR project</h1>
                    <h1>{{ $totalQrProjects }}</h1>
                </div>
                <div class="sales">
                    <h1>Total Registered QR's</h1>
                    <h1>{{ $totalRegisterQrs }}</h1>
                </div>
            </div>
        </div>
        <br>
        <br>
        <div class="card-container">
            <div class="card">
                <div class="perform">
                    <h2>Customer Details</h2>
                    <!-- <a href="">View all</a> -->
                </div>
                <div class="perform">
                    <p>Name</p>
                    <p>{{ $customer->name }}</p>
                </div>
                {{-- <div class="perform">
                    <p>Rogger Business Card - Tap to share</p>
                    <!-- <p>92</p> -->
                </div> --}}
                <hr>
                <div class="perform">
                    <p>Email Id</p>
                    <p>{{ $customer->primaryCustomerUser->email ?? '' }}</p>
                </div>
                <hr>


            </div>
        </div>
        <br>
        <!--pie chart -->
        <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['name'] }}</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['name'] }}</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['name'] }}</p>
                            <p>({{ round($percentage, 2) }}%)</p>
                        </div>

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

            </div>
        </div>
        <!-- map chart end -->
        <!--  -->
        <div class="table_fields">
            <div class="tab mt-4">
                <div class="d-flex align-items-sm-center">


                </div>
            </div>
            <br>
            <table class="table js-dataTable-full dataTable no-footer px-4" id="DataTables_Table_0" role="grid"
                aria-describedby="DataTables_Table_0_info">
                <thead>
                    <tr role="row">
                        <th class="sorting" style="text-align: center;" tabindex="0" aria-controls="DataTables_Table_0"
                            rowspan="1" colspan="1" aria-label="Name: activate to sort column ascending">S.No</th>

                        <th class="text-center sorting_asc" style="text-align: center; width: 30%" tabindex="0"
                            aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-sort="ascending"
                            aria-label="ID: activate to sort column descending"> Project Id</th>

                        <th class="sorting" style="text-align: center; width:15%" tabindex="0"
                            aria-controls="DataTables_Table_0" rowspan="1" colspan="1"
                            aria-label="Name: activate to sort column ascending">Name of Project</th>

                        <th class="d-none d-sm-table-cell sorting" style="text-align: center; width: 30%;" tabindex="0"
                            aria-controls="DataTables_Table_0" rowspan="1" colspan="1"
                            aria-label="Email: activate to sort column ascending">Total Qr</th>
                        <th class="d-none d-sm-table-cell sorting" style="text-align: center; width: 30%;" tabindex="0"
                            aria-controls="DataTables_Table_0" rowspan="1" colspan="1"
                            aria-label="Email: activate to sort column ascending">Total Function Use</th>
                        <th class="d-none d-sm-table-cell sorting" style="text-align: center; width: 30%;" tabindex="0"
                            aria-controls="DataTables_Table_0" rowspan="1" colspan="1"
                            aria-label="Email: activate to sort column ascending">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($customerUserProjects as $key => $project)
                        <tr>
                            <td class="text-center font-size-sm sorting_1" style="width: 5%;">{{ $key + 1 }}</td>

                            <td class="font-w600 font-size-sm" style="width: 15%;">{{ $project->project_code }}</td>

                            <td class="font-w600 font-size-sm" style="width: 15%;">{{ $project->name }}</td>

                            <td class="d-none d-sm-table-cell font-size-sm" style="width: 15%;">
                                {{ $project->total_qr_count }}</td>
                            <td class="d-none d-sm-table-cell font-size-sm" style="width: 15%;">
                                {{ $project->qrs->whereNotNull('type')->pluck('type')->unique()->count() }}</td>


                            <td>
                                <div class="btn-group">
                                    <a class="btn btn-sm edit-btn" data-id="{{ $project->id }}">
                                        <i class="fa fa-fw fa-pencil"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </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">Edit Project Default URL</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <form id="projectForm" method="POST">
                        @csrf
                        @method('PUT')
                        <div class="modal-body">
                            <input type="hidden" name="project_id" id="project_id">
                            <div class="mb-2 mt-2 px-3">
                                <label for="name">Default Url</label>
                                <input type="text" class="form-control" id="default_url" maxlength="255" required
                                    placeholder="Enter Default Url" name="default_url" />
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </main>
@endsection

@section('script')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        $(document).ready(function() {
            // 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.');
                    }
                });
            });

            // Edit project handler
            $('.edit-btn').click(function() {
                var projectId = $(this).data('id');

                $.ajax({
                    url: '{{ route('get.project', '') }}/' + projectId,
                    type: 'GET',
                    success: function(response) {
                        $('#project_id').val(response.project.id);
                        $('#default_url').val(response.project
                            .default_url
                        ); // Assuming default_url is the field in your project model

                        // Set the form action dynamically
                        var formAction = '{{ route('update.project', '') }}/' + response
                            .project.id;
                        $('#projectForm').attr('action', formAction);
                        $('#exampleModal').modal('show');
                    },
                    error: function(xhr, status, error) {
                        alert('An error occurred while fetching the project details.');
                    }
                });
            });
        });
    </script>

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

            const labels = deviceAnalysis.map(item => item.name);
            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.name);
            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