@extends('layouts.app')
@section('page_title','Dashboard')
@section('content')
<div class="grid grid-cols-2 xl:grid-cols-6 gap-4">
@php($stats=[['Total Income',$s['income'],'#16a34a',$s['changes']['income']],['Total Expenses',$s['expense'],'#ef4444',$s['changes']['expense']],['Total Savings',$s['savings'],'#2563eb',$s['changes']['savings']],['Net Cash Flow',$s['net'],'#16a34a',$s['changes']['net']],['Savings Rate',$s['savingsRate'].'%','#f59e0b',$s['changes']['savingsRate']],['Budget Used',$budgetUsed.'%','#0f766e',$s['changes']['budget']]])
@foreach($stats as $i=>$k)<div class="fp-card p-4"><div class="flex items-start justify-between"><div><div class="text-[11px] fp-muted">{{$k[0]}}</div><div class="text-[20px] font-semibold mt-1 money">{{str_contains((string)$k[1],'%')?$k[1]:'৳ '.number_format((float)$k[1],0)}}</div><div class="mt-4 text-[11px] font-semibold" style="color:{{$k[2]}}">{{$k[3]>=0?'↑':'↓'}} {{abs($k[3])}}% <span class="fp-muted font-normal">vs Last Month</span></div></div><div class="stat-icon" style="background:{{$k[2]}}18;color:{{$k[2]}}">{{['♟','◉','●','↗','◷','▣'][$i]}}</div></div></div>@endforeach
</div>
<div class="grid xl:grid-cols-12 gap-4 mt-4">
<div class="fp-card p-4 xl:col-span-5">
    <div class="flex justify-between items-center">
        <div>
            <h2 class="font-semibold text-[13px]">
                Income vs Expenses
                <span class="fp-muted font-normal">({{$date->format('Y')}})</span>
            </h2>

            <div class="flex gap-4 text-[10px] mt-2 items-center">
                <label class="inline-flex items-center gap-1.5 cursor-pointer select-none">
                    <input
                        type="checkbox"
                        id="monthlyIncomeToggle"
                        checked
                        class="w-3 h-3 accent-emerald-500 cursor-pointer"
                    >
                    <i class="inline-block w-3 h-1 rounded bg-emerald-500"></i>
                    <span>Income</span>
                </label>

                <label class="inline-flex items-center gap-1.5 cursor-pointer select-none">
                    <input
                        type="checkbox"
                        id="monthlyExpenseToggle"
                        checked
                        class="w-3 h-3 accent-red-500 cursor-pointer"
                    >
                    <i class="inline-block w-3 h-1 rounded bg-red-500"></i>
                    <span>Expenses</span>
                </label>
            </div>
        </div>

        <span class="fp-soft px-2 py-1 rounded text-[10px]">This Year⌄</span>
    </div>

    <div class="h-[245px] mt-2">
        <canvas id="monthly"></canvas>
    </div>
</div>
<div class="fp-card p-4 xl:col-span-4"><div class="flex justify-between items-center"><h2 class="font-semibold text-[13px]">Budget vs Actual <span class="fp-muted font-normal">(This Month)</span></h2><a href="{{route('budgets.index')}}" class="text-[10px] text-violet-600">View Details</a></div><div class="overflow-x-auto mt-3"><table class="fp-table w-full"><thead><tr><th>Category</th><th>Budget</th><th>Actual</th><th>Progress</th></tr></thead><tbody>@forelse($budgetRows as $b)<tr><td>{{ $b->category?->name ?? 'Other' }}</td><td>৳ {{number_format($b->amount,0)}}</td><td>৳ {{number_format($b->actual,0)}}</td><td class="min-w-[85px]"><div class="text-[9px] mb-1">{{min(100,round($b->actual/$b->amount*100))}}%</div><div class="progress"><span style="width:{{min(100,$b->actual/$b->amount*100)}}%;background:{{$b->actual>$b->amount?'#ef4444':'#12b76a'}}"></span></div></td></tr>@empty<tr><td colspan="4" class="text-center fp-muted py-8">No budgets for this month.</td></tr>@endforelse</tbody></table></div></div>
<div class="fp-card p-4 xl:col-span-3"><div class="flex justify-between items-center"><h2 class="font-semibold text-[13px]">Accounts Overview</h2><a href="{{route('accounts.index')}}" class="text-[10px] text-violet-600">View All</a></div><div class="mt-3 space-y-1.5">@foreach($accounts->take(5) as $a)<div class="flex items-center justify-between p-2.5 rounded-lg bg-slate-50 dark:bg-slate-900"><span class="text-[11px]">{{$a->name}}</span><span class="text-[11px] font-semibold money">৳ {{number_format($a->current_balance,0)}}</span></div>@endforeach<div class="pt-3 flex justify-between font-bold text-[12px]"><span>Total Balance</span><span>৳ {{number_format($balance,0)}}</span></div></div></div>
</div>
<div class="grid xl:grid-cols-12 gap-4 mt-4">
@foreach([['Expense Breakdown','expense','expensesByCat','Total Expenses',$s['expense']],['Income Breakdown','income','incomeByCat','Total Income',$s['income']],['Savings Breakdown','savings','savingsByCat','Total Savings',$s['savings']]] as $chart)<div class="fp-card p-4 xl:col-span-3"><div class="flex justify-between"><h2 class="font-semibold text-[13px]">{{$chart[0]}}</h2><span class="fp-soft px-2 py-1 rounded text-[9px]">This Month⌄</span></div><div class="h-[150px] mt-2"><canvas id="{{$chart[1]}}"></canvas></div><div class="border-t dark:border-slate-700 mt-2 pt-2 flex justify-between text-[11px] font-semibold"><span>{{$chart[3]}}</span><span>৳ {{number_format($chart[4],0)}}</span></div></div>@endforeach

<!-- Mobile-only container for the requested card order. -->
<div id="fpMobileDashboardCards" class="fp-mobile-dashboard-cards"></div>

<div
    id="dashboardUpcomingReminders"
    class="fp-card p-4 xl:col-span-3 fp-mobile-dashboard-card"
>

    <div class="flex justify-between items-center">
        <h2 class="font-semibold text-[13px]">Upcoming Reminders</h2>

        <a href="{{ route('notifications.index') }}"
           class="text-[10px] text-violet-600">
            View All
        </a>
    </div>

    <div class="mt-2 space-y-1">

        {{-- Upcoming Loans --}}
        @foreach($upcomingLoans as $loan)
            <div class="flex justify-between items-center p-2 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-900">
                <div class="min-w-0">
                    <div class="text-[11px] font-medium truncate">
                        {{ $loan->contact?->name ?? 'Loan' }}
                    </div>
                    <div class="text-[9px] {{ strtolower($loan->type) === 'lent' ? 'text-green-500' : 'text-red-500' }} mt-1">
                        Loan —
                        {{ $loan->due_date->format('d M Y') }}
                        </div>
                </div>
                <div class="text-[11px] font-semibold whitespace-nowrap ml-2">
                    ৳ {{ number_format((float) $loan->outstanding, 0) }}
                </div>
            </div>
        @endforeach

        {{-- Upcoming Goals --}}
        @foreach($upcomingGoals as $goal)
            <div class="flex justify-between items-center p-2 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-900">
                <div class="min-w-0">
                    <div class="text-[11px] font-medium truncate">
                        {{ $goal->name }}
                    </div>
                    <div class="text-[9px] text-violet-500 mt-1">
                        Goal — {{ $goal->target_date->format('d M Y') }}
                    </div>
                </div>
                <div class="text-[11px] font-semibold whitespace-nowrap ml-2">
                    ৳ {{ number_format((float) $goal->target_amount, 0) }}
                </div>
            </div>
        @endforeach

        {{-- Upcoming Recurring Payments --}}
        @foreach($recurringReminders as $r)
            <div class="flex justify-between items-center p-2 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-900">
                <div class="min-w-0">
                    <div class="text-[11px] font-medium truncate">
                        {{ $r->description ?: ucfirst($r->type) }}
                    </div>
                    <div class="text-[9px] {{ $r->type === 'income' ? 'text-green-500' : ($r->type === 'expense' ? 'text-red-500' : 'fp-muted') }} mt-1">
                        {{ ucfirst($r->type) }}
                        —
                        {{ $r->next_run->format('d M Y') }}
                    </div>
                </div>
                <div class="text-[11px] font-semibold whitespace-nowrap ml-2">
                    ৳ {{ number_format((float) $r->amount, 0) }}
                </div>
            </div>
        @endforeach

        @if($upcomingLoans->isEmpty() && $upcomingGoals->isEmpty() && $recurringReminders->isEmpty())
            <div class="text-[10px] fp-muted py-8 text-center">
                No upcoming reminders.
            </div>
        @endif

    </div>

</div>
</div>
<div class="grid xl:grid-cols-12 gap-4 mt-4">
<div id="dashboardRecentTransactions" class="fp-card p-4 xl:col-span-7 fp-mobile-dashboard-card"><div class="flex justify-between mb-2"><h2 class="font-semibold text-[13px]">Recent Transactions</h2><a class="text-[10px] text-violet-600" href="{{route('transactions.index')}}">View All</a></div><div class="overflow-x-auto"><table class="fp-table w-full"><thead><tr><th>Date</th><th>Type</th><th>Category</th><th>Description</th><th>Account</th><th class="text-right">Amount</th></tr></thead><tbody>@forelse($recent as $t)<tr>
    
    <td class="whitespace-nowrap min-w-[90px]">
    {{$t->transaction_date->format('d M Y')}}
    </td>
    
    <td><span class="px-2 py-1 rounded text-[9px] {{ $t->type==='income'?'bg-emerald-50 text-emerald-600':($t->type==='expense'?'bg-red-50 text-red-600':'bg-blue-50 text-blue-600')}}">{{ucfirst($t->type)}}</span></td><td>{{$t->category?->name??'—'}}</td><td>{{$t->description??'—'}}</td><td>{{$t->account?->name}}</td><td class="rt-amount text-right font-semibold money whitespace-nowrap">{{$t->type==='income'?'+':'-'}} ৳ {{number_format(abs($t->amount),0)}}</td></tr>@empty<tr><td colspan="6" class="text-center fp-muted py-10">No transactions yet.</td></tr>@endforelse</tbody></table></div></div>
<div id="dashboardLoanSummary" class="fp-card p-4 xl:col-span-3 fp-mobile-dashboard-card"><div class="flex justify-between"><h2 class="font-semibold text-[13px]">Loan Summary</h2><a href="{{route('loans.index')}}" class="text-[10px] text-violet-600">View All</a></div>@foreach([['Money I Owe (Borrowed)','borrowed','red'],['Money Owed to Me (Lent)','lent','green']] as $type)<div class="border rounded-xl dark:border-slate-700 p-3 mt-3"><div class="text-[10px] font-semibold {{$type[2]==='red'?'text-violet-600':'text-emerald-600'}}">{{$type[0]}}</div>@php($ls=$loans->where('type',$type[1]))<div class="grid grid-cols-3 gap-2 mt-2 text-[9px]"><div><div class="fp-muted">Total</div><b>৳ {{number_format($ls->sum('principal'),0)}}</b></div><div><div class="fp-muted">Repaid</div><b>৳ {{number_format($ls->sum('paid_amount'),0)}}</b></div><div><div class="fp-muted">Outstanding</div><b>৳ {{number_format($ls->sum(fn($x)=>$x->outstanding),0)}}</b></div></div></div>@endforeach</div>
<div id="dashboardBudgetAlerts" class="fp-card p-4 xl:col-span-2 fp-mobile-dashboard-card"><div class="flex justify-between"><h2 class="font-semibold text-[13px]">Budget Alerts</h2><a href="{{route('budgets.index')}}" class="text-[10px] text-violet-600">View All</a></div><div class="mt-3 space-y-3">@forelse($budgetAlerts as $b)<div><div class="flex justify-between text-[10px]"><span>{{$b->category?->name??'Other'}}</span><span>{{round($b->actual/$b->amount*100)}}%</span></div><div class="progress mt-1"><span style="width:{{min(100,$b->actual/$b->amount*100)}}%;background:{{$b->actual>$b->amount?'#ef4444':'#f59e0b'}}"></span></div></div>@empty<div class="text-[10px] fp-muted text-center py-8">Everything is on track.</div>@endforelse</div></div>
</div>
@endsection
@push('scripts')
<script>
const months=@json($monthly->values());

const monthlyChart = new Chart(document.getElementById('monthly'),{
    type:'bar',
    data:{
        labels:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
        datasets:[
            {
                label:'Income',
                data:months.map(x=>x.income),
                backgroundColor:'#22c55e',
                borderRadius:4,
                barPercentage:.55
            },
            {
                label:'Expenses',
                data:months.map(x=>x.expense),
                backgroundColor:'#ef4444',
                borderRadius:4,
                barPercentage:.55
            }
        ]
    },
    options:{
        plugins:{
            legend:{display:false}
        },
        responsive:true,
        maintainAspectRatio:false,
        scales:{
            x:{
                grid:{display:false},
                ticks:{
                    font:{size:9},
                    color:'#94a3b8'
                }
            },
            y:{
                grid:{
                    color:'rgba(148,163,184,0.12)'
                },
                ticks:{
                    font:{size:9},
                    color:'#94a3b8'
                }
            }
        }
    }
});

const monthlyIncomeToggle = document.getElementById('monthlyIncomeToggle');
const monthlyExpenseToggle = document.getElementById('monthlyExpenseToggle');

monthlyIncomeToggle?.addEventListener('change', function(){
    monthlyChart.setDatasetVisibility(0, this.checked);
    monthlyChart.update();
});

monthlyExpenseToggle?.addEventListener('change', function(){
    monthlyChart.setDatasetVisibility(1, this.checked);
    monthlyChart.update();
});


/*
|--------------------------------------------------------------------------
| Dark-theme donut charts
|--------------------------------------------------------------------------
| Expense = Red
| Income  = Green
| Savings = Blue
|
| Multiple categories use different shades of the same family.
|--------------------------------------------------------------------------
*/

const expenseColors = [
    '#9E0505',
    '#CB0606',
    '#EB0707',
    '#F93434',
    '#FA6161',
    '#FB8D8D',
    '#FDBABA',
    '#FEE6E6'
];

const incomeColors = [
    '#047225',
    '#059E33',
    '#06CB41',
    '#07EB4B',
    '#34F96F',
    '#61FA8F',
    '#8DFBAE',
    '#BAFDCE'
];

const savingsColors = [
    '#05479E',
    '#065BCB',
    '#076AEB',
    '#3489F9',
    '#61A3FA',
    '#8DBDFB',
    '#BAD7FD',
    '#E6F1FE'
];


function donut(id,items,colors){

    new Chart(document.getElementById(id),{
        type:'doughnut',

        data:{
            labels:items.map(x=>x.name),

            datasets:[{
                data:items.map(x=>x.total),

                backgroundColor:colors.slice(0,items.length),

                borderWidth:2,

                /* dark background around each section */
                borderColor:'#111a2b',

                hoverBorderColor:'#ffffff',

                hoverOffset:5
            }]
        },

        options:{
            cutout:'67%',

            responsive:true,

            maintainAspectRatio:false,

            animation:{
                duration:500
            },

            plugins:{
                legend:{
                    position:'right',

                    labels:{
                        boxWidth:9,
                        boxHeight:9,
                        padding:8,

                        color:'#cbd5e1',

                        font:{
                            size:9
                        }
                    }
                },

                tooltip:{
                    backgroundColor:'#0b1220',
                    titleColor:'#ffffff',
                    bodyColor:'#cbd5e1',
                    borderColor:'#334155',
                    borderWidth:1,

                    callbacks:{
                        label:function(context){

                            let value=context.raw || 0;

                            return '  ' + context.label + ': ৳ ' +
                                Number(value).toLocaleString();
                        }
                    }
                }
            }
        }
    });
}


donut(
    'expense',

    @json(
        $expensesByCat->map(fn($x)=>[
            'name'=>$x->category?->name??'Other',
            'total'=>(float)$x->total
        ])->values()
    ),

    expenseColors
);


donut(
    'income',

    @json(
        $incomeByCat->map(fn($x)=>[
            'name'=>$x->category?->name??'Other',
            'total'=>(float)$x->total
        ])->values()
    ),

    incomeColors
);


donut(
    'savings',

    @json(
        $savingsByCat->map(fn($x)=>[
            'name'=>$x->category?->name??'Other',
            'total'=>(float)$x->total
        ])->values()
    ),

    savingsColors
);

</script>
<script>
(function(){
    const mobileContainer=document.getElementById('fpMobileDashboardCards');

    if(!mobileContainer){
        return;
    }

    const order=[
        'dashboardUpcomingReminders',
        'dashboardBudgetAlerts',
        'dashboardLoanSummary',
        'dashboardRecentTransactions'
    ];

    const cards=order
        .map(id=>document.getElementById(id))
        .filter(Boolean);

    const placeholders=new Map();
    let mobileMode=false;

    function enableMobileOrder(){
        if(mobileMode){
            return;
        }

        mobileMode=true;

        cards.forEach(card=>{
            const placeholder=document.createComment('FinancePro dashboard card position');

            card.parentNode.insertBefore(placeholder,card);
            placeholders.set(card.id,placeholder);
        });

        cards.forEach(card=>mobileContainer.appendChild(card));
    }

    function disableMobileOrder(){
        if(!mobileMode){
            return;
        }

        mobileMode=false;

        cards.forEach(card=>{
            const placeholder=placeholders.get(card.id);

            if(placeholder && placeholder.parentNode){
                placeholder.parentNode.insertBefore(card,placeholder.nextSibling);
                placeholder.remove();
            }
        });

        placeholders.clear();
    }

    function updateMobileOrder(){
        if(window.innerWidth<=767){
            enableMobileOrder();
        }else{
            disableMobileOrder();
        }
    }

    updateMobileOrder();

    let resizeTimer;

    window.addEventListener('resize',function(){
        window.clearTimeout(resizeTimer);
        resizeTimer=window.setTimeout(updateMobileOrder,150);
    });
})();
</script>

@endpush