@extends('layouts.mobile_master')

@section('content')
<div class="content-container">
<div class="dashboard-header">
    <div class="header-top">
        <div class="date-display" id="current-date">Monday, Jan 1</div>
        <div>
           <a href="{{ route('logout') }}" class="btn btn-sm btn-outline-danger">
        <i class="fas fa-sign-out-alt"></i> Logout
    </a>
        </div>
    </div>
    <div class="welcome-text">
        <h1>Hello, {{auth()->user()->name}}!</h1>
        <p>Here's your practice overview today</p>
    </div>
         
</div>

<div class="section-title">
    <i class="fas fa-chart-pie"></i> Financial Overview
</div>

<div class="stats-grid">
    <div class="stat-card">
        <div class="stat-content">
            <div class="stat-icon">
                <i class="fas fa-dollar-sign"></i>
            </div>
            <div class="stat-info">
                <h3>{{ $today_income }}</h3>
                <p>Income (Today)</p>
            </div>
        </div>
    </div>
    
    <div class="stat-card danger">
        <div class="stat-content">
            <div class="stat-icon">
                <i class="fas fa-credit-card"></i>
            </div>
            <div class="stat-info">
                <h3>{{ $today_expenses }}</h3>
                <p>Expenses (Today)</p>
            </div>
        </div>
    </div>
    
    <div class="stat-card success">
        <div class="stat-content">
            <div class="stat-icon">
                <i class="fas fa-chart-line"></i>
            </div>
            <div class="stat-info">
                <h3>{{ number_format($today_income - $today_expenses, 2) }}</h3>
                <p>Revenue</p>
            </div>
        </div>
    </div>
    
    <div class="stat-card warning">
        <div class="stat-content">
            <div class="stat-icon">
                <i class="fas fa-calendar-check"></i>
            </div>
            <div class="stat-info">
                <h3>{{ $today_appointments }}</h3>
                <p>Appointments</p>
            </div>
        </div>
    </div>
</div>

<div class="section-title">
    <i class="fas fa-heartbeat"></i> Practice Metrics
</div>

<div class="stats-grid">
    <div class="stat-card">
        <div class="stat-content">
            <div class="stat-icon">
                <i class="fas fa-user-injured"></i>
            </div>
            <div class="stat-info">
                <h3>{{ $total_patients }}</h3>
                <p>Patients</p>
            </div>
        </div>
    </div>
    
    <div class="stat-card success">
        <div class="stat-content">
            <div class="stat-icon">
                <i class="fas fa-boxes"></i>
            </div>
            <div class="stat-info">
                <h3>{{ $total_products }}</h3>
                <p>Products</p>
            </div>
        </div>
    </div>
    
    <div class="stat-card">
        <div class="stat-content">
            <div class="stat-icon">
                <i class="fas fa-truck"></i>
            </div>
            <div class="stat-info">
                <h3>{{ $total_suppliers }}</h3>
                <p>Suppliers</p>
            </div>
        </div>
    </div>
    
    <div class="stat-card warning">
        <div class="stat-content">
            <div class="stat-icon">
                <i class="fas fa-warehouse"></i>
            </div>
            <div class="stat-info">
                <h3>{{ number_format($inventory_value, 2) }}</h3>
                <p>Inventory Value</p>
            </div>
        </div>
    </div>
</div>

<div class="chart-container">
    <div class="chart-title">
        Income vs Expense (This Month) <span>View Report <i class="fas fa-chevron-right" style="font-size: 0.7rem;"></i></span>
    </div>
    <div id="pieChart" style="width: 100%; height: 250px;"></div>
    <div id="lineChart" style="width: 100%; height: 250px; margin-top: 20px;"></div>
</div>


</div>
@endsection

 @section('page_js')
<!-- JS -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Set current date
    const now = new Date();
    const options = { weekday: 'long', month: 'short', day: 'numeric' };
    document.getElementById('current-date').textContent = now.toLocaleDateString('en-US', options);
    
    // Load chart data
    async function loadCharts() {
        try {
            const res = await axios.get("{{ route('revchart') }}");

            if (res && res.data.status === 200) {
                const labels = res.data.data.labels;
                const revenues = res.data.data.revenues;
                const expenses = res.data.data.expenses;

                const pieChart = echarts.init(document.getElementById('pieChart'));
                const lineChart = echarts.init(document.getElementById('lineChart'));

                // Pie Chart
                const totalRevenue = revenues.reduce((a, b) => a + b, 0);
                const totalExpense = expenses.reduce((a, b) => a + b, 0);

                pieChart.setOption({
                    tooltip: { 
                        trigger: 'item', 
                        formatter: '{b}: <b>${c}</b> ({d}%)' 
                    },
                    color: ['#4361ee', '#e63946'],
                    series: [{
                        name: 'Finance',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: true,
                            formatter: '{d}%'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '14',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: true
                        },
                        data: [
                            { value: totalRevenue, name: 'Income' },
                            { value: totalExpense, name: 'Expense' }
                        ]
                    }]
                });

                // Line Chart
                lineChart.setOption({
                    tooltip: { 
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    color: ['#4361ee', '#e63946'],
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '10%',
                        containLabel: true
                    },
                    legend: { 
                        data: ['Income', 'Expense'], 
                        bottom: 0 
                    },
                    xAxis: { 
                        type: 'category', 
                        data: labels,
                        axisLine: {
                            lineStyle: {
                                color: '#ccc'
                            }
                        }
                    },
                    yAxis: { 
                        type: 'value',
                        axisLine: {
                            show: false
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#f0f0f0'
                            }
                        }
                    },
                    series: [
                        { 
                            name: 'Income', 
                            type: 'bar', 
                            data: revenues,
                            itemStyle: {
                                borderRadius: [5, 5, 0, 0]
                            }
                        },
                        { 
                            name: 'Expense', 
                            type: 'bar', 
                            data: expenses,
                            itemStyle: {
                                borderRadius: [5, 5, 0, 0]
                            }
                        }
                    ]
                });
                
                // Make charts responsive
                window.addEventListener('resize', function() {
                    pieChart.resize();
                    lineChart.resize();
                });
            }
        } catch (err) {
            console.error("Error loading chart data:", err);
        }
    }
    
    loadCharts();
});
</script>

@endsection