@extends('Admin.layout')
@section('content')
<style>
    :root {
        --primary: #5a57ff;
        --secondary: #d1b9ff;
        --success: #28c76f;
        --warning: #ff9f43;
        --danger: #ea5455;
    }
    .card {
        border: 2px solid #b0caf3a8 !important;
        border-radius: 15px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    }
    .filter-btn-group {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 4px;
    }
    .filter-btn {
        border: none;
        background: transparent;
        color: #6e6b7b;
        padding: 5px 15px;
        border-radius: 6px;
        transition: 0.3s;
    }
    .filter-btn.active {
        background: #1b1b38;
        color: white;
    }
    .legend-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        display: inline-block;
        margin-left: 5px;
    }
    .chart-container {
        height: 300px;
        position: relative;
    }
    .pie-chart-container {
        height: 220px;
        position: relative;
    }
    #pieTotal {
        font-size: 24px;
        color: #1b1b38;
    }
    .card {
        border: none;
        border-radius: 12px;
        box-shadow: 0 4px 24px 0 rgba(34, 41, 47, 0.1);
        margin-bottom: 1.5rem;
    }
    /* Icon Styling */
    .card-icon-wrapper {
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
    }
    h6.text-muted.mb-0.small {
        font-family: Inter;
        font-weight: 700;
        font-style: Bold;
        font-size: 18px;
        leading-trim: NONE;
        line-height: 28px;
        letter-spacing: 0px;
        text-align: center;
        color: #1E1B39;
    }
    h3#pieTotal {
        font-family: Inter;
        font-weight: 700;
        font-style: Bold;
        font-size: 18px;
        leading-trim: NONE;
        line-height: 28px;
        letter-spacing: 0px;
        text-align: center;
        color: #1E1B39;
    }
    /* Chart Containers */
    .chart-container {
        position: relative;
        height: 300px;
        width: 100%;
    }
    .pie-chart-container {
        position: relative;
        height: 220px;
        margin: 0 auto;
    }
    /* Filter Buttons */
    .filter-btn-group .btn {
        border: none;
        background: #f8f9fa;
        color: #6c757d;
        padding: 6px 12px;
        border-radius: 8px;
        font-size: 0.8rem;
        transition: all 0.2s;
    }
    .filter-btn-group .btn.active {
        background: #1e1e2d;
        color: #fff;
    }

    /* Responsive Adjustments */
    @media (max-width: 576px) {
        .card-header {
            flex-direction: column;
            align-items: flex-start !important;
            gap: 15px;
        }
        .filter-btn-group {
            width: 100%;
            justify-content: space-between;
        }
        .filter-btn-group .btn {
            flex: 1;
            padding: 5px 2px;
        }
    }
</style>
<h4 class="mb-4 fw-bold">Dashboards</h4>
<div class="row">
    <div class="col-xl-3 col-md-6 col-12 mb-2">
        <a href="javascript:void(0)">
            <div class="card">
                <div class="card-body d-flex justify-content-between align-items-center">
                    <div><p class="mb-1 text-muted">Total Order</p><h3 class="mb-0 fw-bold" id="totalorders">0</h3></div>
                    <div class="card-icon-wrapper bg-label-danger">
                       <i class="icon-base ti tabler-shopping-cart"></i>
                    </div>
                </div>
            </div>
        </a>
    </div>
    <div class="col-xl-3 col-md-6 col-12 mb-2">
        <a href="{{route('new_orders')}}">
            <div class="card">
                <div class="card-body d-flex justify-content-between align-items-center">
                    <div><p class="mb-1 text-muted">New Orders</p><h3 class="mb-0 fw-bold" id="newOrders">0</h3></div>
                    <div class="card-icon-wrapper bg-label-primary">
                        <i class="icon-base ti tabler-shopping-cart-heart"></i>
                    </div>
                </div>
            </div>
        </a>
    </div>
    <div class="col-xl-3 col-md-6 col-12 mb-2">
        <a href="{{route('packing_orders')}}">
            <div class="card">
                <div class="card-body d-flex justify-content-between align-items-center">
                    <div><p class="mb-1 text-muted">Packed Orders</p><h3 class="mb-0 fw-bold" id="packedOrders">0</h3></div>
                    <div class="card-icon-wrapper bg-label-info">
                        <i class="icon-base ti tabler-package"></i>
                    </div>
                </div>
            </div>
        </a>
    </div>
    <div class="col-xl-3 col-md-6 col-12 mb-2">
        <a href="{{route('completed_orders')}}">
            <div class="card">
                <div class="card-body d-flex justify-content-between align-items-center">
                    <div><p class="mb-1 text-muted">Completed Orders</p><h3 class="mb-0 fw-bold" id="completedOrders">0</h3></div>
                    <div class="card-icon-wrapper bg-label-success">
                        <i class="icon-base ti tabler-circle-dashed-check"></i>
                    </div>
                </div>
            </div>
        </a>
    </div>
    <div class="col-xl-3 col-md-6 col-12 mb-2">
        <a href="{{route('products')}}">
            <div class="card">
                <div class="card-body d-flex justify-content-between align-items-center">
                    <div><p class="mb-1 text-muted">Total Products</p><h3 class="mb-0 fw-bold" id="totalproducts">0</h3></div>
                    <div class="card-icon-wrapper bg-label-success">
                      <i class="icon-base ti tabler-building-store"></i>
                </div>
                </div>
            </div>
        </a>
    </div>
    <div class="col-xl-3 col-md-6 col-12 mb-2">
        <a href="{{route('transaction')}}">
            <div class="card">
                <div class="card-body d-flex justify-content-between align-items-center">
                    <div><p class="mb-1 text-muted">Total Revenue</p><h3 class="mb-0 fw-bold" id="totalrevenue">0</h3></div>
                    <div class="card-icon-wrapper bg-label-success">
                       <i class="icon-base ti tabler-tax"></i>
                </div>
                </div>
            </div>
        </a>
    </div>
    <div class="col-xl-3 col-md-6 col-12 mb-2">
        <a href="{{route('transaction')}}">
            <div class="card">
                <div class="card-body d-flex justify-content-between align-items-center">
                    <div><p class="mb-1 text-muted">Total Transactions</p><h3 class="mb-0 fw-bold" id="totaltransactions">0</h3></div>
                    <div class="card-icon-wrapper bg-label-success">
                       <i class="icon-base ti tabler-cash"></i>
                </div>
                </div>
            </div>
        </a>
    </div>
    <div class="col-xl-3 col-md-6 col-12 mb-2">
        <a href="{{route('customers')}}">
            <div class="card">
                <div class="card-body d-flex justify-content-between align-items-center">
                    <div><p class="mb-1 text-muted">Total Customers</p><h3 class="mb-0 fw-bold" id="totalusers">0</h3></div>
                    <div class="card-icon-wrapper bg-label-success">
                        <i class="icon-base ti tabler-users"></i>
                    </div>
                </div>
            </div>
        </a>
    </div>
</div>
<div class="row mt-3">
    <div class="col-12 col-xl-8 mb-4">
        <div class="card h-100">
            <div class="card-header d-flex justify-content-between align-items-center bg-transparent border-0 py-3">
                <div>
                    <h5 class="mb-0 fw-bold">Statistics</h5>
                    <small class="text-muted">User Registrations & Transactions</small>
                </div>
                <div class="filter-btn-group d-flex gap-1">
                    <button class="btn btn-sm filter-btn" onclick="fetchFilteredData('day', this)">Day</button>
                    <button class="btn btn-sm filter-btn" onclick="fetchFilteredData('week', this)">Week</button>
                    <button class="btn btn-sm filter-btn active" onclick="fetchFilteredData('month', this)">Month</button>
                    <button class="btn btn-sm filter-btn" onclick="fetchFilteredData('year', this)">Year</button>
                </div>
            </div>
            <div class="card-body">
                <div class="d-flex flex-wrap mb-4">
                    {{-- <div class="me-4"><span class="legend-dot" style="background: var(--primary);"></span><small class="fw-semibold text-muted">Total Customers</small></div>
                    <div><span class="legend-dot" style="background: var(--secondary);"></span><small class="fw-semibold text-muted">Total Transactions</small></div> --}}
             <div onclick="showGraph('customers')" style="cursor:pointer">
<span class="legend-dot" style="background:#5a57ff"></span> Total Customers
</div>

<div onclick="showGraph('transactions')" style="cursor:pointer">
<span class="legend-dot" style="background:#d1b9ff"></span> Total Transactions
</div>

              
                </div>
                <div class="chart-container">
                    <canvas id="lineChart"></canvas>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12 col-xl-4 mb-4">
        <div class="card h-100">
            <div class="card-body">
                <h5 class="mb-4 text-start fw-bold">Orders Piechart</h5>
                <div class="pie-chart-container">
                    <canvas id="pieChart"></canvas>
                    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -30%); text-align: center;">
                        <h6 class="text-muted mb-1 fw-bold">Total Orders</h6>
                        <h3 id="pieTotal" class="fw-bold mb-0">0</h3>
                    </div>
                </div>
                <div class="mt-4 text-start w-100 px-md-3">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <span><span class="legend-dot" style="background: var(--success);"></span> Completed</span>
                        <span id="labelCompleted" class="text-muted">: 0</span>
                    </div>
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <span><span class="legend-dot" style="background: var(--primary);"></span> New Orders</span>
                        <span id="labelNew" class="text-muted">: 0</span>
                    </div>
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <span><span class="legend-dot" style="background: var(--warning);"></span> Packed Orders</span>
                        <span id="labelPacked" class="text-muted">: 0</span>
                    </div>
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <span><span class="legend-dot" style="background: var(--danger);"></span> Cancelled</span>
                        <span id="labelCancelled" class="text-muted">: 0</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>

let lineChart, pieChart;

function initCharts() {

    const ctxLine = document.getElementById('lineChart').getContext('2d');
    const ctxPie = document.getElementById('pieChart').getContext('2d');

    lineChart = new Chart(ctxLine, {
        type: 'line',
        data: {
            labels: [],
            datasets: [
                {
                    label: 'Customers',
                    data: [],
                    borderColor: '#5a57ff',
                    pointBackgroundColor: '#fff',
                    pointBorderColor: '#5a57ff',
                    pointBorderWidth: 2,
                    pointRadius: 6,
                    tension: 0.2,
                    fill: false
                },
                {
                    label: 'Transactions',
                    data: [],
                    borderColor: '#d1b9ff',
                    pointBackgroundColor: '#fff',
                    pointBorderColor: '#d1b9ff',
                    pointBorderWidth: 2,
                    pointRadius: 6,
                    tension: 0.2,
                    fill: false
                }
            ]
        },

        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: { legend: { display: false } },

            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        precision: 0,
                        stepSize: 1
                    },
                    grid: {
                        drawBorder: false,
                        color: '#f0f0f0'
                    }
                },
                x: {
                    grid: { display: false }
                }
            }
        }
    });


    pieChart = new Chart(ctxPie, {
        type: 'doughnut',
        data: {
            labels: ['Completed', 'New', 'Packed', 'Cancelled'],
            datasets: [{
                data: [0,0,0,0],
                backgroundColor: ['#28c76f','#5a57ff','#ff9f43','#ea5455'],
                borderWidth: 0,
                borderRadius: 10,
                spacing: 10
            }]
        },

        options: {
            cutout: '85%',
            responsive: true,
            maintainAspectRatio: false,
            plugins: { legend: { display:false } }
        }
    });

    fetchFilteredData('month', document.querySelector('.filter-btn.active'));
}


function fetchFilteredData(filter, btn)
{

    document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');

    fetch(`{{ route('dashboard_data') }}?filter=${filter}`)
    .then(response => response.json())
    .then(res => {

        if(res.status)
        {
            const d = res.data;

            document.getElementById('totalorders').innerText = d.total_orders;
            document.getElementById('newOrders').innerText = d.new_orders;
            document.getElementById('packedOrders').innerText = d.pending_orders;
            document.getElementById('completedOrders').innerText = d.completed_orders;
            document.getElementById('totalproducts').innerText = d.total_products;
            document.getElementById('totalrevenue').innerText = d.total_revenue;
            document.getElementById('totaltransactions').innerText = d.total_transactions;
            document.getElementById('totalusers').innerText = d.total_users;

            lineChart.data.labels = d.lineData.labels;
            lineChart.data.datasets[0].data = d.lineData.users;
            lineChart.data.datasets[1].data = d.lineData.transactions;

            lineChart.update();

            pieChart.data.datasets[0].data = [
                d.pieData.completed,
                d.pieData.new,
                d.pieData.packed,
                d.pieData.cancelled
            ];

            pieChart.update();

            document.getElementById('pieTotal').innerText = d.pieData.total;
            document.getElementById('labelCompleted').innerText = `: ${d.pieData.completed}`;
            document.getElementById('labelNew').innerText = `: ${d.pieData.new}`;
            document.getElementById('labelPacked').innerText = `: ${d.pieData.packed}`;
            document.getElementById('labelCancelled').innerText = `: ${d.pieData.cancelled}`;
        }

    })
    .catch(error => console.log(error));

}


function showGraph(type)
{

    if(type === 'customers')
    {
        lineChart.data.datasets[0].hidden = false;
        lineChart.data.datasets[1].hidden = true;
    }

    if(type === 'transactions')
    {
        lineChart.data.datasets[0].hidden = true;
        lineChart.data.datasets[1].hidden = false;
    }

    lineChart.update();
}


document.addEventListener("DOMContentLoaded", initCharts);

</script>
@endsection