@extends('layouts.app')

@section('content')
    <div class="my-4 page-header-breadcrumb d-flex align-items-center justify-content-between flex-wrap gap-2">
        <div>
            <h1 class="page-title fw-medium fs-18 mb-2">Meta Dashboard</h1>
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item">
                    <a href="javascript:void(0);">Meta</a>
                </li>
                <li class="breadcrumb-item active" aria-current="page">Meta Dashboard</li>
            </ol>
        </div>
        <div class="d-flex align-items-center gap-3">
            <div class="input-group">
                <input type="text" id="daterangeFilter" class="form-control" placeholder="Select date range">
                <span class="input-group-text">
                    <i class="ri-calendar-2-line"></i>
                </span>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-xxl-3 col-xl-3 col-lg-6 col-md-6 col-sm-6 col-12">
            <div class="card custom-card">
                <div class="card-body p-4">
                    <div class="d-flex align-items-start justify-content-between">
                        <div id="card_spending">
                            <div>
                                <span class="d-block mb-2">Spending</span>
                                <h5 class="mb-4 fs-4" id="todaySpending">0</h5>
                            </div>
                            <span id="spendingPercentageContainer" class="text-success me-2 fw-medium d-inline-block">
                                <i id="spendingIcon"
                                    class="ti ti-trending-up fs-5 align-middle me-1 d-inline-block"></i><span
                                    id="percentageChangeSpending">0%</span>
                            </span>
                            <span class="text-muted" id="lastMonthLabel">Since yesterday</span>
                        </div>

                        <div>
                            <div class="main-card-icon primary">
                                <div
                                    class="avatar avatar-lg bg-primary-transparent border border-primary border-opacity-10">
                                    <i class="ri-wallet-3-line"
                                        style="
                                        font-size: 22.5px; 
                                        background: linear-gradient(90deg, #FF4E50 0%, #F9D423 100%);
                                        -webkit-background-clip: text;
                                        -webkit-text-fill-color: transparent;
                                        display: inline-block;">
                                    </i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xxl-3 col-xl-3 col-lg-6 col-md-6 col-sm-6 col-12">
            <div class="card custom-card main-card">
                <div class="card-body p-4">
                    <div class="d-flex align-items-start justify-content-between">
                        <div id="card_cpr">
                            <div>
                                <span class="d-block mb-2">Cost Per Result</span>
                                <div style="display: flex; align-items: center;">
                                    <h5 class="mb-4 fs-4" id="todayCpr" style="margin-left: 10px;">0</h5>
                                    <span style="font-size: 12px; margin-left: 10px;" id="todayTotalResult">(0)</span>
                                </div>
                            </div>

                            <span id="cprPercentageContainer" class="text-success me-2 fw-medium d-inline-block">
                                <i id="cprIcon" class="ti ti-trending-up fs-5 align-middle me-1 d-inline-block"></i><span
                                    id="percentageChangeCpr">0%</span>
                            </span>
                            <span class="text-muted" id="lastMonthLabel">Since yesterday</span>
                        </div>

                        <div>
                            <div class="main-card-icon secondary">
                                <div
                                    class="avatar avatar-lg bg-secondary-transparent border border-secondary border-opacity-10">
                                    <i class="ri-links-line"
                                        style="
                                            font-size: 22.5px;
                                            background: linear-gradient(90deg, #D5006D 0%, #FF4081 100%);
                                            -webkit-background-clip: text;
                                            -webkit-text-fill-color: transparent;
                                            display: inline-block;
                                        "></i>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Impression Card -->
        <div class="col-xxl-3 col-xl-3 col-lg-6 col-md-6 col-sm-6 col-12">
            <div class="card custom-card main-card">
                <div class="card-body p-4">
                    <div class="d-flex align-items-start justify-content-between">
                        <div id="card_impression">
                            <div>
                                <span class="d-block mb-2">Impression</span>
                                <h5 class="mb-4 fs-4" id="todayImpression">0</h5>
                            </div>
                            <span id="impressionPercentageContainer" class="text-success me-2 fw-medium d-inline-block">
                                <i id="impressionIcon"
                                    class="ti ti-trending-up fs-5 align-middle me-1 d-inline-block"></i><span
                                    id="percentageChangeImpression">0%</span>
                            </span>
                            <span class="text-muted" id="lastMonthLabel">Since yesterday</span>
                        </div>
                        <div>
                            <div class="main-card-icon success">
                                <div
                                    class="avatar avatar-lg bg-success-transparent border border-success border-opacity-10">
                                    <i class="ri-group-3-line"
                                        style="
                                            font-size: 22.5px;
                                            background: linear-gradient(90deg, #00E676 0%, #69F0AE 100%);
                                            -webkit-background-clip: text;
                                            -webkit-text-fill-color: transparent;
                                            display: inline-block;">
                                    </i>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Bounce Rate Card -->
        <div class="col-xxl-3 col-xl-3 col-lg-6 col-md-6 col-sm-6 col-12">
            <div class="card custom-card main-card">
                <div class="card-body p-4">
                    <div class="d-flex align-items-start justify-content-between">
                        <div id="card_bounce_rate">
                            <div>
                                <span class="d-block mb-2">Bounce Rate</span>
                                <h5 class="mb-4 fs-4" id="todayBounceRate">0</h5>
                            </div>
                            <span id="bounceRatePercentageContainer" class="text-success me-2 fw-medium d-inline-block">
                                <i id="bounceRateIcon"
                                    class="ti ti-trending-up fs-5 align-middle me-1 d-inline-block"></i><span
                                    id="percentageChangeBounceRate">0%</span>
                            </span>
                            <span class="text-muted" id="lastMonthLabel">Since yesterday</span>
                        </div>
                        <div>
                            <div class="main-card-icon orange">
                                <div class="avatar avatar-lg bg-orange-transparent border border-orange border-opacity-10">
                                    <i class="ri-pulse-line"
                                        style="
                                        font-size: 22.5px;
                                        background: linear-gradient(90deg, #FF5722 0%, #FF9800 100%);
                                        -webkit-background-clip: text;
                                        -webkit-text-fill-color: transparent;
                                        display: inline-block;
                                    ">
                                    </i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h5 class="card-title">Meta Insight Chart</h5>
        </div>
        <div class="card-body">
            <div id="chart"></div>
        </div>
    </div>
    


    @push('scripts')
        <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>


        <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.7.8/axios.min.js"
            integrity="sha512-v8+bPcpk4Sj7CKB11+gK/FnsbgQ15jTwZamnBf/xDmiQDcgOIYufBo6Acu1y30vrk8gg5su4x0CG3zfPaq5Fcg=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <script>
            const apiUrl = '/meta/dashboard/get-card-insight';

            const updatePercentageDisplay = (elementId, iconId, percentage, isPositive) => {
                const roundedPercentage = Math.abs(Math.round(percentage));
                const element = document.getElementById(elementId);
                const icon = document.getElementById(iconId);

                element.textContent = `${roundedPercentage}%`;

                if (isPositive) {
                    element.parentElement.classList.remove('text-danger');
                    element.parentElement.classList.add('text-success');
                    icon.classList.remove('ti-trending-down');
                    icon.classList.add('ti-trending-up');
                } else {
                    element.parentElement.classList.remove('text-success');
                    element.parentElement.classList.add('text-danger');
                    icon.classList.remove('ti-trending-up');
                    icon.classList.add('ti-trending-down');
                }
            };

            const fetchData = async (startDate, endDate) => {
                try {
                    const response = await axios.get(`${apiUrl}?start_date=${startDate}&end_date=${endDate}`);
                    const data = response.data;

                    // Update the dashboard elements with fetched data
                    document.getElementById('todaySpending').textContent = data.insights.total_spend || '0';
                    updatePercentageDisplay(
                        'percentageChangeSpending',
                        'spendingIcon',
                        data.comparison.spend || 0,
                        data.comparison.spend >= 0
                    );

                    document.getElementById('todayCpr').textContent = data.insights.total_cpc || '0';
                    document.getElementById('todayTotalResult').textContent = `( ${data.insights.total_spend || '0'} )`;
                    updatePercentageDisplay(
                        'percentageChangeCpr',
                        'cprIcon',
                        data.comparison.cpc || 0,
                        data.comparison.cpc >= 0
                    );

                    document.getElementById('todayImpression').textContent = data.insights.total_impressions || '0';
                    updatePercentageDisplay(
                        'percentageChangeImpression',
                        'impressionIcon',
                        data.comparison.impressions || 0,
                        data.comparison.impressions >= 0
                    );

                    document.getElementById('todayBounceRate').textContent = data.insights.total_ctr || '0';
                    updatePercentageDisplay(
                        'percentageChangeBounceRate',
                        'bounceRateIcon',
                        data.comparison.ctr || 0,
                        data.comparison.ctr >= 0
                    );

                } catch (error) {
                    console.error('Error fetching data:', error);
                }
            };
            $.ajax({
                url: '{{ route('meta_dashboard.getChartData') }}', // URL API
                method: 'GET',
                success: function(response) {
                    // Ambil data dan proses
                    const dates = response.map(item => item.date);
                    const totalImpressions = response.map(item => item.total_impressions || 0);
                    const totalSpending = response.map(item => item.total_spend);
                    const totalCostPerResult = response.map(item => item.total_cpc * 1.5); // CPC * 1.5

                    // Format angka ke rb, jt, m, t
                    function formatNumber(value) {
                        if (value >= 1e12) {
                            return (value / 1e12).toFixed(2) + 'T'; // Triliun
                        } else if (value >= 1e9) {
                            return (value / 1e9).toFixed(2) + 'M'; // Miliar
                        } else if (value >= 1e6) {
                            return (value / 1e6).toFixed(2) + 'Jt'; // Juta
                        } else if (value >= 1e3) {
                            return (value / 1e3).toFixed(2) + 'Rb'; // Ribu
                        } else {
                            return value.toString(); // Di bawah 1000
                        }
                    }

                    // Format ulang angka untuk spending dan impressions
                    const formattedTotalSpending = totalSpending.map(value => formatNumber(value));
                    const formattedTotalImpressions = totalImpressions.map(value => formatNumber(value));

                    // Nilai min dan max untuk skala y-axis
                    const minTotalImpressions = Math.min(...totalImpressions);
                    const maxTotalImpressions = Math.max(...totalImpressions);
                    const minTotalSpending = Math.min(...totalSpending);
                    const maxTotalSpending = Math.max(...totalSpending);
                    const minCostPerResult = Math.min(...totalCostPerResult);
                    const maxCostPerResult = Math.max(...totalCostPerResult);

                    // Konfigurasi chart ApexCharts
                    var options = {
                        series: [{
                            name: 'Total Impressions',
                            data: totalImpressions
                        }, {
                            name: 'Total Spending',
                            data: totalSpending
                        }, {
                            name: 'Cost per Result',
                            data: totalCostPerResult
                        }],
                        chart: {
                            type: 'line',
                            height: 350,
                            toolbar: {
                                show: false
                            },
                            zoom: {
                                enabled: false
                            },
                            background: 'transparent',
                            animations: {
                                enabled: false
                            }
                        },
                        stroke: {
                            curve: 'smooth',
                            width: 3,
                            dashArray: 0
                        },
                        markers: {
                            size: 5,
                            hover: {
                                sizeOffset: 4 // Pembesaran saat hover
                            }
                        },
                        xaxis: {
                            categories: dates,
                            labels: {
                                show: true,
                                rotate: -45, // Rotasi agar tidak menumpuk
                                rotateAlways: true,
                            },
                            axisBorder: {
                                show: false
                            },
                            axisTicks: {
                                show: false
                            }
                        },
                        yaxis: [{
                            seriesName: 'Total Impressions',
                            title: {
                                text: 'Impressions'
                            },
                            min: minTotalImpressions * 0.9,
                            max: maxTotalImpressions * 1.1,
                            tickAmount: 5,
                            labels: {
                                formatter: formatNumber, // Format label
                            }
                        }, {
                            seriesName: 'Total Spending',
                            opposite: true,
                            title: {
                                text: 'Spending'
                            },
                            min: minTotalSpending * 0.9,
                            max: maxTotalSpending * 1.1,
                            tickAmount: 5,
                            labels: {
                                formatter: formatNumber, // Format label
                            }
                        }, {
                            seriesName: 'Cost per Result',
                            opposite: true,
                            title: {
                                text: 'Cost per Result'
                            },
                            min: minCostPerResult * 0.9,
                            max: maxCostPerResult * 1.1,
                            tickAmount: 5
                        }],
                        grid: {
                            show: true,
                            borderColor: '#f1f1f1'
                        },
                        tooltip: {
                            enabled: true,
                            y: {
                                formatter: function(value) {
                                    return formatNumber(value); // Tooltip format
                                }
                            }
                        },
                        colors: ['#546E7A', '#26A69A', '#FF5722'],
                        legend: {
                            show: true,
                            position: 'top', // Letak legenda di atas
                            horizontalAlign: 'center'
                        }
                    };

                    // Render chart
                    var chart = new ApexCharts(document.querySelector("#chart"), options);
                    chart.render();
                },
                error: function(error) {
                    console.error("Error fetching data from API:", error);
                }
            });



            $(document).ready(function() {
                $('#daterangeFilter').daterangepicker({
                    locale: {
                        format: 'MM/DD/YYYY'
                    },
                    startDate: moment().startOf('month'),
                    endDate: moment(),
                    opens: 'left'
                }, function(start, end) {
                    const startDate = start.format('YYYY-MM-DD');
                    const endDate = end.format('YYYY-MM-DD');
                    fetchData(startDate, endDate);
                });
                const initialStartDate = moment().startOf('month').format('YYYY-MM-DD');
                const initialEndDate = moment().format('YYYY-MM-DD');
                fetchData(initialStartDate, initialEndDate);
            });
        </script>
    @endpush
@endsection