@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>No of 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>

                </div>
                <div class="perform">
                    <p>Name</p>
                    <p>{{ $customer->name }}</p>
                </div>

                <hr>
                <div class="perform">
                    <p>Country Origin</p>
                    <p>{{ $customer->country_origin ?? '' }}</p>
                </div>
                <hr>

                <div class="perform">
                    <p>Industry</p>
                    <p>{{ $customer->industry ?? '' }}</p>
                </div>
                <hr>

                <div class="perform">
                    <p>Description</p>
                    <p>{{ $customer->pdescription ?? '' }}</p>
                </div>
                <hr>


            </div>

            <div class="card">
                <div class="perform">
                    <h2>Top Project by QR</h2>
                    <!-- <a href="">View all</a> -->
                </div>
                <div class="perform">
                    <p>Name</p>
                    <p>Qr</p>
                </div>
                <hr>
                @foreach ($topProjectsByQr as $key => $topProject)
                    <div class="perform">
                        <p>{{ $topProject->name }}</p>
                        <p>{{ $topProject->total_qr_count ?? '' }}</p>
                    </div>
                    <hr>
                @endforeach
            </div>
        </div>
        <br>

        <div class="card-container">
            <div class="card">
                <div class="perform">
                    <h2>Top Project by Impression</h2>
                    <!-- <a href="">View all</a> -->
                </div>
                <div class="perform">
                    <p>Name</p>
                    <p>Scan</p>
                </div>
                <hr>
                @foreach ($topProjectsByImpression as $key => $topProjectImpression)
                    <div class="perform">
                        <p>{{ $topProjectImpression->name }}</p>
                        <p>{{ $topProject->scannedQrs->count() }}</p>
                    </div>
                    <hr>
                @endforeach
            </div>
            <div class="card">
                <div class="perform">
                    <h2>Top Map Function by Qr</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>
        <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 class="tab2">
                        <button type="button" data-toggle="modal" data-target="#exampleModal">
                            Add
                        </button>
                        <a href="{{ route('show.customer.projects', $customer->id) }}">
                            Show Projects
                        </a>
                    </div>
                </div>
            </div>
            <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"> Name</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">Email</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">Role</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 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 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">Latest Scan Time</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">Send Mail</th>
                        <th style="text-align: center; width: 15%;" class="sorting" tabindex="0"
                            aria-controls="DataTables_Table_0" rowspan="1" colspan="1"
                            aria-label="Registered: activate to sort column ascending">Status</th>
                        <th style="text-align: center; width: 15%;" class="sorting" tabindex="0"
                            aria-controls="DataTables_Table_0" rowspan="1" colspan="1"
                            aria-label="Registered: activate to sort column ascending">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($customerUsers as $key => $customerUser)
                        <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%;">{{ $customerUser->name }}</td>

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

                            <td class="d-none d-sm-table-cell font-size-sm" style="width: 15%;">
                                {{ $customerUser->role->name }}</td>

                            <td class="d-none d-sm-table-cell font-size-sm" style="width: 20%;">
                                {{ count($customerUser->projects) }}
                            </td>
                            <td class="d-none d-sm-table-cell font-size-sm" style="width: 20%;">
                                {{ $customerUser->qrs->whereNotNull('type')->pluck('type')->unique()->count() }}
                            </td>
                            <td class="d-none d-sm-table-cell font-size-sm" style="width: 20%;">
                                @php
                                    $latestQr = $customerUser
                                        ->qrs()
                                        ->whereNotNull('type')
                                        ->orderBy('updated_at', 'desc')
                                        ->first();
                                @endphp
                                {{ $latestQr ? $latestQr->updated_at : '-' }}
                            </td>

                            <td>
                                <div class="btn-group">
                                    <a href="{{ route('mail.send.customer', $customerUser->id) }}">
                                        <i class="fa fa-fw fa-envelope"></i>
                                        @php
                                            if (isset($customerUser) && !empty($customerUser->email)) {
                                                $email = DB::table('password_resets')
                                                    ->where('email', $customerUser->email)
                                                    ->where('type', 3)
                                                    ->first();
                                            } else {
                                                $email = null;
                                            }
                                        @endphp
                                        @if (!empty($email))
                                            <span class="badge badge-pill badge-success">Send</span>
                                        @endif
                                    </a>
                                </div>
                            </td>

                            <td class="d-none d-sm-table-cell" style="width: 15%;">
                                <label class="switch">
                                    <input type="checkbox" class="status-toggle" data-id="{{ $customerUser->id }}"
                                        @if ($customerUser->status == 1) checked @endif>
                                    <span class="slider round"></span>
                                </label>
                            </td>
                            <td>
                                <div class="btn-group">
                                    <a class="btn btn-sm delete-btn" data-id="{{ $customerUser->id }}">
                                        <i class="fa fa-fw fa-trash"></i>
                                    </a>
                                </div>

                                <div class="btn-group">
                                    <a class="btn btn-sm edit-customer-role" data-id="{{ $customerUser->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">Add Customer User</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <form id="customerUserForm" action="{{ route('create.customer.user') }}" method="POST">
                        @csrf
                        <div class="modal-body">
                            <input type="hidden" name="customer_id" value="{{ $customer->id }}">
                            <div class="mb-2 mt-2 px-3">
                                <label for="name">Customer Name</label>
                                <input type="text" class="form-control" id="name1" maxlength="255" required
                                    placeholder="Enter Customer Name" name="name" />
                            </div>

                            <div class="mb-2 mt-3 px-3">
                                <label for="email">Email</label>
                                <input type="email" class="form-control" id="email" maxlength="255" required
                                    placeholder="Enter Email" name="email" />
                            </div>

                            <div class="mb-2 mt-3 px-3">
                                <label for="role_id">Role</label>
                                <select name="role_id" class="form-control" required id="select-type">
                                    <option value="">Select a Role</option>
                                    @foreach ($customerRoles as $key => $customerRole)
                                        <option value="{{ $customerRole->id }}">{{ $customerRole->name }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="mb-2 mt-3 px-3">
                                <h6> Description</h6>
                                <textarea name="description" id="" class="form-control"></textarea>
                            </div>
                            @error('description')
                                <span class="text text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Back</button>
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>


        <div class="modal fade" id="customerRoleModal" tabindex="-1" role="dialog"
            aria-labelledby="customerRoleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="customerRoleModalLabel">Edit Customer User Role</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <form id="customerUserRoleForm" method="POST">
                        @csrf
                        @method('PUT')
                        <div class="modal-body">
                            <input type="hidden" name="customer_user_id" id="customer_user_id">
                            <div class="mb-2 mt-2 px-3">
                                <label for="role_id">Role</label>
                                <select name="role_id" class="form-control" required id="select-customer-role">
                                    <option value="">Select a Role</option>
                                    @foreach ($customerRoles as $key => $customerRole)
                                        <option value="{{ $customerRole->id }}">{{ $customerRole->name }}</option>
                                    @endforeach
                                </select>
                            </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;
                console.log("Customer ID: " + customerId);
                console.log("Status: " + status);

                $.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() {
                var customerId = $(this).data('id');
                if (confirm('Are you sure you want to delete this record?')) {
                    $.ajax({
                        url: '{{ route('customer.user.delete') }}', // Change this to your delete route
                        type: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                            id: customerId
                        },
                        success: function(response) {
                            alert('Record deleted successfully!');
                            location.reload(); // Refresh the page to see the changes
                        },
                        error: function(xhr, status, error) {
                            alert('An error occurred while deleting the record.');
                        }
                    });
                }
            });

            // Edit customer role handler
            $('.edit-customer-role').click(function() {
                var customerUserId = $(this).data('id');

                $.ajax({
                    url: '{{ route('get.customer.user', '') }}/' + customerUserId,
                    type: 'GET',
                    success: function(response) {
                        $('#customer_user_id').val(response.customer_user.id);
                        // Set the current role as selected
                        var currentRoleId = response.customer_user.role_id;
                        $('#select-customer-role').val(currentRoleId);

                        // Set the form action dynamically
                        var formAction = '{{ route('update.customer.user.role', '') }}/' +
                            response
                            .customer_user.id;
                        $('#customerUserRoleForm').attr('action', formAction);
                        $('#customerRoleModal').modal('show');
                    },
                    error: function(xhr, status, error) {
                        alert('An error occurred while fetching the customer user 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