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

        @if ($roleName == 'Customer Super Admin')
            <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 ($customer->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('customer.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>
        @endif


        <!-- 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>User Details</h2>
                </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>
        </div>
        <br>



        <div class="card-container">

            <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 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 -->
        @if ($roleName == 'Customer Super Admin')
            <div class="table_fields">
                <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>


                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($customer->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>


                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif


        <!--  -->
    </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.');
                        }
                    });
                }
            });
        });
    </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