@extends('Admin.layouts.master')
@section('title', 'General Dashboard')
@section('style')
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css">
    <style>
        .dataTables_filter {
            display: none;
        }

        .dt-buttons {
            display: none;
        }
    </style>
@endsection
@section('content')
    <div class="app-main flex-column flex-row-fluid" id="kt_app_main">
        <div class="d-flex flex-column flex-column-fluid">
            <div id="kt_app_content_container" class="app-container container-xxl">
                <div class="row max-w-100 mt-10">
                    <div class="col-md-3 index-box">
                        <a href="{{ route('manage-user-product') }}">
                            <div class="card card-flush mb-5 mb-xl-10 mb-3">
                                <div class="card-header p-2 ">
                                    <div class="card-title d-flex justify-content-between w-100">
                                        <div>
                                            <span
                                                class="fs-2x fw-bold text-white me-2 lh-1 ls-n2">{{ $investingUserCount }}</span>
                                        </div>
                                        <div class="title_icon_area">
                                            <span class="svg-icon svg-icon-1">
                                                <svg width="24" height="24" viewBox="0 0 24 24" fill="#fff"
                                                    xmlns="http://www.w3.org/2000/svg">
                                                    <path
                                                        d="M6.28548 15.0861C7.34369 13.1814 9.35142 12 11.5304 12H12.4696C14.6486 12 16.6563 13.1814 17.7145 15.0861L19.3493 18.0287C20.0899 19.3618 19.1259 21 17.601 21H6.39903C4.87406 21 3.91012 19.3618 4.65071 18.0287L6.28548 15.0861Z"
                                                        fill="#fff" />
                                                    <rect opacity="0.4" x="8" y="3" width="8" height="8"
                                                        rx="4" fill="#fff" />
                                                </svg>
                                            </span>
                                        </div>
                                    </div>
                                    <div>
                                        <span class="text-white opacity-75 pt-1 fw-semibold fs-7">Total Investors <br>
                                            &nbsp;</span>
                                    </div>
                                </div>
                                <div class="card-body d-flex align-items-center p-2">
                                    <div class="d-flex align-items-center flex-column mt-0 w-100">
                                        <div class="h-8px mx-3 w-100 bg-white rounded bg-opacity-50">
                                            <div class="bg-white rounded h-8px" role="progressbar" style="width: 72%;"
                                                aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="col-md-3 index-box">
                        <a href="{{ route('manage_investors') }}">
                            <div class="card card-flush mb-5 mb-xl-10">
                                <div class="card-header  p-2">
                                    <div class="card-title d-flex justify-content-between w-100">
                                        <div>
                                            <span
                                                class="fs-2x fw-bold text-white me-2 lh-1 ls-n2">{{ $userCount }}</span>
                                        </div>
                                        <div class="title_icon_area">
                                            <span class="svg-icon svg-icon-1">
                                                <svg width="24" height="24" viewBox="0 0 24 24" fill="#fff"
                                                    xmlns="http://www.w3.org/2000/svg">
                                                    <path
                                                        d="M6.28548 15.0861C7.34369 13.1814 9.35142 12 11.5304 12H12.4696C14.6486 12 16.6563 13.1814 17.7145 15.0861L19.3493 18.0287C20.0899 19.3618 19.1259 21 17.601 21H6.39903C4.87406 21 3.91012 19.3618 4.65071 18.0287L6.28548 15.0861Z"
                                                        fill="#fff" />
                                                    <rect opacity="0.4" x="8" y="3" width="8" height="8"
                                                        rx="4" fill="#fff" />
                                                </svg>
                                            </span>
                                        </div>
                                    </div>
                                    <div>
                                        <span class="text-white opacity-75 pt-1 fw-semibold fs-7">Total Registered Users
                                            <br> &nbsp;</span>
                                    </div>
                                </div>
                                <div class="card-body d-flex align-items-center p-2">
                                    <div class="d-flex align-items-center flex-column mt-0 w-100">
                                        <div class="h-8px mx-3 w-100 bg-white bg-opacity-50 rounded">
                                            <div class="bg-white rounded h-8px" role="progressbar" style="width: 72%;"
                                                aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="col-md-3 index-box">
                        <a href="{{ route('manage.companies') }}">
                            <div class="card card-flush mb-5 mb-xl-10">
                                <div class="card-header  p-2">
                                    <div class="card-title d-flex justify-content-between w-100">
                                        <div>
                                            <span
                                                class="fs-2x fw-bold text-white me-2 lh-1 ls-n2">{{ $companyCount }}</span>
                                        </div>
                                        <div class="title_icon_area">
                                            <span class="svg-icon svg-icon-1">
                                                <svg width="24" height="24" viewBox="0 0 24 24" fill="#fff"
                                                    xmlns="http://www.w3.org/2000/svg">
                                                    <path
                                                        d="M6.28548 15.0861C7.34369 13.1814 9.35142 12 11.5304 12H12.4696C14.6486 12 16.6563 13.1814 17.7145 15.0861L19.3493 18.0287C20.0899 19.3618 19.1259 21 17.601 21H6.39903C4.87406 21 3.91012 19.3618 4.65071 18.0287L6.28548 15.0861Z"
                                                        fill="#fff" />
                                                    <rect opacity="0.4" x="8" y="3" width="8" height="8"
                                                        rx="4" fill="#fff" />
                                                </svg>
                                            </span>
                                        </div>
                                    </div>
                                    <div>
                                        <span class="text-white opacity-75 pt-1 fw-semibold fs-7">Total Manufactures
                                            (Investment Companies)</span>
                                    </div>
                                </div>
                                <div class="card-body d-flex align-items-center p-2">
                                    <div class="d-flex align-items-center flex-column mt-0 w-100">
                                        <div class="h-8px mx-3 w-100 bg-white bg-opacity-50 rounded">
                                            <div class="bg-white rounded h-8px" role="progressbar" style="width: 72%;"
                                                aria-valuenow="69" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="col-md-3 index-box">
                        <a href="{{ route('manage.products') }}">
                            <div class="card card-flush mb-5 mb-xl-10">
                                <div class="card-header  p-2">
                                    <div class="card-title d-flex justify-content-between w-100">
                                        <div>
                                            <span
                                                class="fs-2x fw-bold text-white me-2 lh-1 ls-n2">{{ $totalProductCount }}</span>
                                        </div>
                                        <div class="title_icon_area">
                                            <span class="svg-icon svg-icon-1">
                                                <svg width="24" height="24" viewBox="0 0 24 24" fill="#fff"
                                                    xmlns="http://www.w3.org/2000/svg">
                                                    <path
                                                        d="M6.28548 15.0861C7.34369 13.1814 9.35142 12 11.5304 12H12.4696C14.6486 12 16.6563 13.1814 17.7145 15.0861L19.3493 18.0287C20.0899 19.3618 19.1259 21 17.601 21H6.39903C4.87406 21 3.91012 19.3618 4.65071 18.0287L6.28548 15.0861Z"
                                                        fill="#fff" />
                                                    <rect opacity="0.4" x="8" y="3" width="8" height="8"
                                                        rx="4" fill="#fff" />
                                                </svg>
                                            </span>
                                        </div>
                                    </div>
                                    <div>
                                        <span class="text-white opacity-75 pt-1 fw-semibold fs-7">Total Investments
                                            (Investment Products)</span>
                                    </div>
                                </div>
                                <div class="card-body d-flex align-items-center p-2">
                                    <div class="d-flex align-items-center flex-column mt-0 w-100">
                                        <div class="h-8px mx-3 w-100 bg-white bg-opacity-50 rounded">
                                            <div class="bg-white rounded h-8px" role="progressbar" style="width: 72%;"
                                                aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="row max-w-100 mt-10">
                    <div class="col-md-8">
                        <div class="card card-flush h-xl-100">
                            <p class="fs-3 text-gray me-2 lh-1 p-9 pb-0">Commission earned</p>
                            <div class="card-header py-7 pt-0">
                                <div class="m-0">
                                    <div class="d-flex flex-column mb-2">
                                        <span class="fs-2 fw-bold text-gray-800 me-2 lh-1 ls-n2"
                                            id="total-gross-commission-sum"> ₹ 0.0</span>
                                        <span class="fs-7 text-black-400">Gross Earn</span>
                                    </div>
                                </div>
                                <div class="m-0">
                                    <div class="d-flex flex-column mb-2">
                                        <span class="fs-2 fw-bold text-gray-800 me-2 lh-1 ls-n2"
                                            id="total-net-commission-sum"> ₹ 0.0</span>
                                        <span class="fs-7 text-black-400">Net Received</span>
                                    </div>
                                </div>
                                <div class="chart d-flex">
                                    <div class="m-0">
                                        <div class="d-flex flex-column mb-2">
                                            <span class="fs-7 text-black-400">From</span>
                                            <span class=""><input type="date" name="from"
                                                    id="from-date"></span>
                                        </div>
                                    </div>
                                    <div class="m-0">
                                        <div class="d-flex flex-column mb-2">
                                            <span class="fs-7 text-black-400">To</span>
                                            <span class=""><input type="date" name="to"
                                                    id="to-date"></span>
                                        </div>
                                    </div>
                                    <div class="d-flex flex-column">
                                        <button class="btn btn-primary" style="padding:6px;margin:12px"
                                            onclick="getData()">Filter</button>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body d-flex align-items-end ps-4 pe-0 pb-4">
                                <div>
                                    <canvas id="myChart" width="600" height="300"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div
                            class="right_side_chart d-flex align-items-center justify-content-center card card-flush h-xl-100">
                            <div class="top_circle_area">
                                <p class='fs-1 mb-0' id="total-investment-sum">₹ 0.0</p>
                            </div>
                            <p class='fs-5 fw-bold text-center'>Total Investment</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.min.js"
        integrity="sha512-L0Shl7nXXzIlBSUUPpxrokqq4ojqgZFQczTYlGjzONGTDAcLremjwaWv5A+EDLnxhQzY5xUZPWLOLqYRkY0Cbw=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js">
    </script>
    <script>
        getData();

        const ctx = document.getElementById('myChart');
        let data = {
            datasets: [{
                label: 'Net Recieved',
                data: [65, 59, 80, 81, 56, 140],
                fill: false,
                borderColor: 'rgb(75, 192, 192)',
                tension: 0.1
            }, {
                label: 'Gross Received',
                data: [50, 59, 10, 90, 56, 55],
                fill: false,
                borderColor: 'rgb(0, 255, 0)',
                tension: 0.1
            }],
        };
        var chart = new Chart(ctx, {
            type: 'line',
            data: data,
        });

        function addData(chart, label, netRecievedData, grossRecievedData) {
            chart.data.labels = [...label];
            //Net Recieved
            chart.data.datasets[0].data = [...netRecievedData];
            //Gross Recieved
            chart.data.datasets[1].data = [...grossRecievedData];
            chart.update();
        }

        function removeData(chart) {
            chart.data.labels = [];
            chart.data.datasets.forEach((dataset) => {
                dataset.data.pop();
            });
            chart.update();
        }

        function getData() {
            $.ajax({
                url: "{{ route('get-commission-data') }}",
                type: "post",
                dataType: "json",
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                },
                data: {
                    from: $('#from-date').val(),
                    to: $('#to-date').val()
                },
                success: function(result) {
                    $('#total-investment-sum').html(result.total_investment);
                    $('#total-gross-commission-sum').html(result.gross_commission);
                    $('#total-net-commission-sum').html(result.net_commission);
                    removeData(chart);
                    addData(chart, result.days, result.intervalNet, result.intervalGross);
                },
            });
        }
    </script>
    <script>
        // Get today's date
        var today = new Date();
        var dd = String(today.getDate()).padStart(2, '0');
        var mm = String(today.getMonth() + 1).padStart(2, '0'); // January is 0!
        var yyyy = today.getFullYear();

        today = yyyy + '-' + mm + '-' + dd;

        // Set max attribute for both inputs to prevent selecting future dates
        document.getElementById("from-date").setAttribute("max", today);
        document.getElementById("to-date").setAttribute("max", today);
    </script>

@endsection