@extends('admin.layouts.masterlayout')

@section('title', 'Dashboard')

@section('head_title', 'Dashboard')

@section('content')
    <div class="dashboard-body-content ">

        {{-- BOXES --}}
        <div class="dashboard-users-flex mb-4">
            <div class="dashboard-flex-content">
                <h2>Total Customers</h2>
                <div class="dashboard-flex-body">
                    <p>{{ $data['customer_user_count'] }}</p>
                    <div class="dashboard-image">
                        <img src="{{ asset('assets/img/dashboard/total-user.png') }}" alt="">
                    </div>
                </div>
            </div>
            <div class="dashboard-flex-content artist-content">
                <h2>Total Artists</h2>
                <div class="dashboard-flex-body">
                    <p>{{ $data['artist_user_count'] }}</p>
                    <div class="dashboard-image">
                        <img src="{{ asset('assets/img/dashboard/artist.png') }}" alt="">
                    </div>
                </div>
            </div>
            <div class="dashboard-flex-content subscriptions-content">
                <h2>Total Shop Users</h2>
                <div class="dashboard-flex-body">
                    <p>{{ $data['shop_user_count'] }}</p>
                    <div class="dashboard-image">
                        <img src="{{ asset('assets/img/dashboard/total-user.png') }}" alt="">
                    </div>
                </div>
            </div>
            <div class="dashboard-flex-content booking-content">
                <h2>Total Bookings</h2>
                <div class="dashboard-flex-body">
                    <p>{{ $data['bookings_count'] }}</p>
                    <div class="dashboard-image">
                        <img src="{{ asset('assets/img/dashboard/bookings-image.png') }}" alt="">
                    </div>
                </div>
            </div>
            <div class="dashboard-flex-content revenue-content">
                <h2>Total Revenue</h2>
                <div class="dashboard-flex-body">
                    <p>{{ $dkk_symbol }}{{ $data['admin_revenue'] }}</p>
                    <div class="dashboard-image">
                        <img src="{{ asset('assets/img/dashboard/revenue-img.png') }}" alt="">
                    </div>
                </div>
            </div>
            {{-- <div class="dashboard-flex-content subscriptions-content">
            <h2>Active Subscriptions</h2>
            <div class="dashboard-flex-body">
                <p>100</p>
                <div class="dashboard-image">
                    <img src="{{ asset('assets/img/dashboard/subscriptions-img.png') }}" alt="">
                </div>
            </div>
        </div> --}}
        </div>

        {{-- CHART & LATEST USER LIST --}}
        <div class="row mb-4">
            {{-- Revenue Chart --}}
            <div class="col-lg-5 mb-4 mb-lg-0">
                <div class="revenue-chart-content">
                    <div class="revenue-chart-title revenue-chart-title-label position-relative">
                        <h2>Revenue Chart</h2>
                        <div>
                            <select class="form-control form-select" id="revenueFilter">
                                <option value="this_week" selected>This week</option>
                                <option value="prev_week">Prev week</option>
                                <option value="this_month">This month</option>
                                <option value="prev_month">Prev month</option>
                            </select>
                        </div>
                    </div>
                    <div class="revenue-card-body">
                        <canvas id="revenueChart"></canvas>
                    </div>
                </div>
            </div>

            {{-- Latest 5 User Based On Filters By Getting AJAX Call --}}
            <div class="col-lg-7">
                <div class="revenue-chart-content position-relative">
                    <div class="revenue-chart-title revenue-chart-title-corner position-relative">
                        <h2>Latest Users</h2>
                        <div class="d-flex gap-2 align-items-center">
                            <label for="Filter" class="mb-0">Filter</label>
                            <select class="form-control form-select" id="user_filter">
                                <option value="1">Shop</option>
                                <option value="2">Artist</option>
                                <option value="3">Customers</option>
                            </select>
                        </div>
                    </div>
                    <div class="revenue-card-body p-0">
                        <div class="revunue-table position-relative">
                            <div class="table-responsive">
                                <table class="table border-0" id="latestUsersTable">
                                    <thead>
                                        <tr>
                                            <th>Name</th>
                                            <th>Email</th>
                                            <th>Registration Source</th>
                                            <th>Status</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {{-- Data will be injected here via AJAX --}}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Pending Approvals For Shop --}}
        <div class="approval-flex">
            <h2>Pending Approvals</h2>
        </div>
        <div class="ct-dashboard-table-container">
            <div class="card p-2">
                <div class="table-responsive">
                    <table class="table mb-0" id="unverified_table">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Shop Name</th>
                                <th>Email</th>
                                <th>Owner Name</th>
                                <th>City</th>
                                <th>Requested Date</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>
@endsection

@section('script')
    <script src="{{ asset('assets/js/chart.js') }}"></script>
    <script src="{{ asset('assets/js/dataTables.js') }}"></script>
    <script>
        const ctx = document.getElementById('revenueChart').getContext('2d');

        // gradient
        const gradient = ctx.createLinearGradient(0, 0, 0, 400);
        gradient.addColorStop(1, '#46896F');
        gradient.addColorStop(0, '#94C7B3');

        let revenueChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: [],
                datasets: [{
                    label: 'Revenue',
                    data: [],
                    backgroundColor: gradient,
                    borderRadius: 5,
                    hoverBackgroundColor: '#46896F',
                    borderSkipped: false
                }]
            },
            options: {
                responsive: true,
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            color: "#454748",
                            callback: function(value) {
                                return `DKK ${value}`;
                            }
                        },
                        grid: {
                            drawBorder: true,
                            borderDash: [4, 4],
                            color: "#D4D4D4"
                        }
                    },
                    x: {
                        ticks: {
                            color: "#454748"
                        },
                        grid: {
                            display: false,
                            drawBorder: true
                        }
                    }
                },
                plugins: {
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return `DKK ${context.parsed.y}`;
                            }
                        }
                    },
                    legend: { display: false }
                }
            }
        });

        // Function to fetch and update chart
        function fetchRevenueData(filter = 'this_week') {
            $.ajax({
                url: '{{ route('admin.revenue.data') }}',
                type: 'GET',
                data: { filter: filter },
                success: function (data) {
                    const labels = data.map(item => item.date);
                    const revenues = data.map(item => item.revenue);

                    revenueChart.data.labels = labels;
                    revenueChart.data.datasets[0].data = revenues;
                    revenueChart.update();
                },
                error: function (xhr, status, error) {
                    console.error("Error fetching data:", error);
                }
            });
        }

        // Initial load
        fetchRevenueData('this_week');

        // On filter change
        $('#revenueFilter').on('change', function () {
            fetchRevenueData($(this).val());
        });

        function fetchLatestUsers(type) {
            $.ajax({
                url: '{{ route('admin.get-latest-users') }}',
                type: 'GET',
                data: {
                    type: type
                },
                success: function(response) {
                    if (response.status && response.data.length > 0) {
                        let html = '';
                        response.data.forEach(user => {
                            html += `
                                <tr>
                                    <td>
                                        <div class="d-flex gap-3 align-items-center table-profile">
                                            <img src="${user.profile ?? '{{ asset('assets/img/default.png') }}'}" alt="" class="image-preview user-profile-img">
                                            <p class="ellipsis-text">${user.name ?? '-'}</p>
                                        </div>
                                    </td>
                                    <td>${user.email ?? '-'}</td>
                                    <td>${user.registration_source ?? '-'}</td>
                                    <td>${user.status ?? '-'}</td>
                                </tr>
                            `;
                        });
                        $('#latestUsersTable tbody').html(html);
                    } else {
                        $('#latestUsersTable tbody').html('<tr><td colspan="4" class="text-center">No users found.</td></tr>');
                    }
                },
                error: function() {
                    $('#latestUsersTable tbody').html('<tr><td colspan="4" class="text-center text-danger">Error loading users.</td></tr>');
                }
            });
        }

        $(document).ready(function() {

            var shopTBL = $('#unverified_table').DataTable({
                dom: '<<"table-responsive"t><"pagination-container"<i><p>>>',
                processing: true,
                serverSide: true,
                ajax: "{{ route('admin.getUnVerifiedShopList') }}",
                order: [],
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'shop_name',
                        name: 'shop_name'
                    },
                    {
                        data: 'shop_email',
                        name: 'shop_email'
                    },
                    {
                        data: 'owner_name',
                        name: 'owner_name'
                    },
                    {
                        data: 'city',
                        name: 'city'
                    },
                    {
                        data: 'requested_date',
                        name: 'requested_date'
                    },
                    {
                        data: 'status',
                        name: 'status'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    }
                ]
            });

            // Initial load
            fetchLatestUsers(1); // Default Shop Users

            $(document).on('click', '.approved-shop', function() {
                var record_id = $(this).attr("data-id");
                $(".tattoo-delete-btn").attr('data-deleted-id', record_id);
                $('.delete-message').html("Are you sure you want to approve this shop?");
                $('.tattoo-delete-btn').html("<span>Approve</span>");
                $('.tattoo-delete-modal').modal('show');
            });

            $(document).on('click', '.tattoo-delete-btn', function() {
                var shopID = $(this).attr("data-deleted-id");
                var url = "{{ route('admin.approve-shop') }}";
                if (shopID != "" || shopID != 0) {
                    $('.tattoo-delete-btn').attr('disabled');
                    $('.tattoo-delete-btn').addClass('loader-active');
                    $.ajax({
                        url: url,
                        method: 'POST',
                        data: {
                            id: shopID,
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(response) {
                            $('.tattoo-delete-modal').modal('hide');
                            $('.tattoo-delete-btn').removeAttr('disabled');
                            $('.tattoo-delete-btn').removeClass('loader-active');
                            shopTBL.ajax.reload();
                            if (response.status == true) {
                                custom_message('success', response.message);
                            } else {
                                custom_message('error', response.message);
                            }
                        }
                    });
                } else {
                    custom_message('error', "Shop not found");
                }
            });

            $('#user_filter').on('change', function() {
                const userType = $(this).val();
                fetchLatestUsers(userType);
            });
        });
    </script>
@endsection