@extends('layouts.finance.finance')

@section('title', 'Finance Dashboard')

@section('content')

            {{-- Header & Actions --}}
            <div class="flex justify-between items-center mb-4 px-4">
                <h2 class="flex items-center gap-2 text-black text-xl font-semibold py-2.5">
                    Finance Dashboard
                </h2>

                {{-- Generate PDF Button --}}
                    <button onclick="downloadPDF()"
                        class="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition shadow-sm border-0 cursor-pointer">
                        <i data-lucide="download" class="w-4 h-4"></i>
                        Generate Report
                    </button>
                </div>

                @php
    $renderTrend = function ($trend) {
        $color = $trend['color'] ?? ($trend['direction'] === 'up' ? 'emerald' : 'red');
        $icon = $trend['direction'] === 'up' ? 'arrow-up' : 'arrow-down';
        return "<p class=\"text-xs text-{$color}-500 font-medium mt-1 flex items-center gap-1\">"
            . "<i data-lucide=\"{$icon}\" class=\"w-3 h-3\"></i> {$trend['value']} vs last month</p>";
    };
                @endphp

                {{-- DASHBOARD UI (Visible on screen) --}}
                <div id="dashboard-ui">
                    {{-- KPI Cards --}}
                    <div class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-6 gap-4 mb-4">
                        <div class="bg-white rounded-xl shadow-card p-4">
                            <div class="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center mb-3">
                                <i data-lucide="folder" class="w-5 h-5 text-blue-500"></i>
                            </div>
                            <p class="text-xs text-slate-400 mb-1">Total Project Value</p>
                            <p class="text-xl font-bold text-slate-800">{{ $kpis['project_value']['formatted'] }}</p>
                            <p class="text-xs text-slate-400 mt-1">{{ $kpis['project_value']['active_count'] }} Active Projects</p>
                        </div>

                        <div class="bg-white rounded-xl shadow-card p-4">
                            <div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center mb-3">
                                <i data-lucide="wallet" class="w-5 h-5 text-emerald-500"></i>
                            </div>
                            <p class="text-xs text-slate-400 mb-1 flex items-center gap-1">Amount Received</p>
                            <p class="text-xl font-bold text-slate-800">{{ $kpis['received']['formatted'] }}</p>
                            {!! $renderTrend($kpis['received']['trend']) !!}
                        </div>

                        <div class="bg-white rounded-xl shadow-card p-4">
                            <div class="w-10 h-10 rounded-lg bg-amber-50 flex items-center justify-center mb-3">
                                <i data-lucide="search-check" class="w-5 h-5 text-amber-500"></i>
                            </div>
                            <p class="text-xs text-slate-400 mb-1">Outstanding Receivables</p>
                            <p class="text-xl font-bold text-slate-800">{{ $kpis['outstanding']['formatted'] }}</p>
                            {!! $renderTrend($kpis['outstanding']['trend']) !!}
                        </div>

                        <div class="bg-white rounded-xl shadow-card p-4">
                            <div class="w-10 h-10 rounded-lg bg-violet-50 flex items-center justify-center mb-3">
                                <i data-lucide="banknote" class="w-5 h-5 text-violet-500"></i>
                            </div>
                            <p class="text-xs text-slate-400 mb-1">Total Expenses</p>
                            <p class="text-xl font-bold text-slate-800">{{ $kpis['expenses']['formatted'] }}</p>
                            {!! $renderTrend($kpis['expenses']['trend']) !!}
                        </div>

                        <div class="bg-white rounded-xl shadow-card p-4">
                            <div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center mb-3">
                                <i data-lucide="coins" class="w-5 h-5 text-emerald-500"></i>
                            </div>
                            <p class="text-xs text-slate-400 mb-1 flex items-center gap-1">Net Profit</p>
                            <p class="text-xl font-bold text-slate-800">{{ $kpis['net_profit']['formatted'] }}</p>
                            {!! $renderTrend($kpis['net_profit']['trend']) !!}
                        </div>

                        <div class="bg-white rounded-xl shadow-card p-4">
                            <div class="w-10 h-10 rounded-lg bg-teal-50 flex items-center justify-center mb-3">
                                <i data-lucide="pie-chart" class="w-5 h-5 text-teal-500"></i>
                            </div>
                            <p class="text-xs text-slate-400 mb-1">Profit Margin</p>
                            <p class="text-xl font-bold text-slate-800">{{ $kpis['margin']['formatted'] }}</p>
                            {!! $renderTrend($kpis['margin']['trend']) !!}
                        </div>
                    </div>

                    {{-- Quick stat strip --}}
                    <div class="bg-white rounded-xl shadow-card px-6 py-4 mb-4 grid grid-cols-2 md:grid-cols-3 xl:grid-cols-5 gap-6">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center shrink-0">
                                <i data-lucide="activity" class="w-5 h-5 text-blue-500"></i>
                            </div>
                            <div>
                                <p class="text-xs text-slate-400">Active Projects</p>
                                <p class="text-lg font-bold text-slate-800 leading-tight">{{ $quickStats['active_projects'] }}</p>
                                <a href="{{ route('finance.activeProjects') }}" class="text-xs text-blue-500 font-medium hover:underline">View all projects</a>
                            </div>
                        </div>

                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 rounded-lg bg-amber-50 flex items-center justify-center shrink-0">
                                <i data-lucide="file-clock" class="w-5 h-5 text-amber-500"></i>
                            </div>
                            <div>
                                <p class="text-xs text-slate-400">Pending PO Approval</p>
                                <p class="text-lg font-bold text-slate-800 leading-tight">{{ $quickStats['pending_po'] }}</p>
                                <a href="{{ route('finance.purchasesDetails') }}" class="text-xs text-blue-500 font-medium hover:underline">View approvals</a>
                            </div>
                        </div>

                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 rounded-lg bg-violet-50 flex items-center justify-center shrink-0">
                                <i data-lucide="user-round" class="w-5 h-5 text-violet-500"></i>
                            </div>
                            <div>
                                <p class="text-xs text-slate-400">Vendor Outstanding</p>
                                <p class="text-lg font-bold text-slate-800 leading-tight">{{ $quickStats['vendor_outstanding'] }}</p>
                                <a href="{{ route('finance.salesPurchase') }}" class="text-xs text-blue-500 font-medium hover:underline">View payables</a>
                            </div>
                        </div>

                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 rounded-lg bg-red-50 flex items-center justify-center shrink-0">
                                <i data-lucide="file-warning" class="w-5 h-5 text-red-500"></i>
                            </div>
                            <div>
                                <p class="text-xs text-slate-400">Client Overdue</p>
                                <p class="text-lg font-bold text-slate-800 leading-tight">{{ $quickStats['client_overdue'] }}</p>
                                <a href="{{ route('finance.salesPurchase') }}" class="text-xs text-blue-500 font-medium hover:underline">View receivables</a>
                            </div>
                        </div>

                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center shrink-0">
                                <i data-lucide="repeat" class="w-5 h-5 text-emerald-500"></i>
                            </div>
                            <div>
                                <p class="text-xs text-slate-400">Today's Payments</p>
                                <p class="text-lg font-bold text-slate-800 leading-tight">{{ $quickStats['todays_payments'] }}</p>
                                <a href="#" class="text-xs text-blue-500 font-medium hover:underline">View all payments</a>
                            </div>
                        </div>
                    </div>
                </div>


            {{-- HIDDEN REPORT TEMPLATE (Only used for PDF generation) --}}
            <div style="position: absolute; left: -9999px; top: -9999px;">
                <!-- Changed width from 800px to 700px, reduced padding, added box-sizing -->
                <div id="pdf-report-layout"
                    style="width: 700px; padding: 20px; box-sizing: border-box; background: white; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #1e293b;">

                    {{-- Report Header --}}
                    <div style="border-bottom: 2px solid #e2e8f0; padding-bottom: 20px; margin-bottom: 30px;">
                        <h1 style="font-size: 28px; font-weight: 700; margin: 0 0 8px 0; color: #0f172a;">Finance Status Report</h1>
                        <p style="margin: 0 0 4px 0; font-size: 14px; color: #64748b;">Organization: <strong
                                style="color: #334155;">Meking Buildtec</strong></p>
                        <p style="margin: 0; font-size: 14px; color: #64748b;">Generated Date: <strong
                                style="color: #334155;">{{ now()->format('d M Y, h:i A') }}</strong></p>
                    </div>

                    {{-- Financial Overview Table --}}
                    <h3
                        style="font-size: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 15px; color: #334155;">
                        1. Financial Overview</h3>
                    <table style="width: 100%; table-layout: fixed; border-collapse: collapse; margin-bottom: 40px;">
                        <thead>
                            <tr style="background-color: #f8fafc;">
                                <th
                                    style="width: 60%; padding: 12px; border: 1px solid #e2e8f0; text-align: left; font-size: 13px; font-weight: 600; color: #64748b;">
                                    Metric</th>
                                <th
                                    style="width: 40%; padding: 12px; border: 1px solid #e2e8f0; text-align: right; font-size: 13px; font-weight: 600; color: #64748b;">
                                    Current Value</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td style="padding: 12px; border: 1px solid #e2e8f0; font-size: 14px;">Total Project Value</td>
                                <td
                                    style="padding: 12px; border: 1px solid #e2e8f0; font-size: 14px; text-align: right; font-weight: 600;">
                                    {{ $kpis['project_value']['formatted'] }}</td>
                            </tr>
                            <tr>
                                <td style="padding: 12px; border: 1px solid #e2e8f0; font-size: 14px;">Amount Received</td>
                                <td
                                    style="padding: 12px; border: 1px solid #e2e8f0; font-size: 14px; text-align: right; font-weight: 600; color: #059669;">
                                    {{ $kpis['received']['formatted'] }}</td>
                            </tr>
                            <tr>
                                <td style="padding: 12px; border: 1px solid #e2e8f0; font-size: 14px;">Outstanding Receivables</td>
                                <td
                                    style="padding: 12px; border: 1px solid #e2e8f0; font-size: 14px; text-align: right; font-weight: 600; color: #d97706;">
                                    {{ $kpis['outstanding']['formatted'] }}</td>
                            </tr>
                            <tr>
                                <td style="padding: 12px; border: 1px solid #e2e8f0; font-size: 14px;">Total Expenses</td>
                                <td
                                    style="padding: 12px; border: 1px solid #e2e8f0; font-size: 14px; text-align: right; font-weight: 600;">
                                    {{ $kpis['expenses']['formatted'] }}</td>
                            </tr>
                            <tr>
                                <td style="padding: 12px; border: 1px solid #e2e8f0; font-size: 14px;">Net Profit</td>
                                <td
                                    style="padding: 12px; border: 1px solid #e2e8f0; font-size: 14px; text-align: right; font-weight: 600; color: #059669;">
                                    {{ $kpis['net_profit']['formatted'] }}</td>
                            </tr>
                            <tr>
                                <td style="padding: 12px; border: 1px solid #e2e8f0; font-size: 14px;">Profit Margin</td>
                                <td
                                    style="padding: 12px; border: 1px solid #e2e8f0; font-size: 14px; text-align: right; font-weight: 600;">
                                    {{ $kpis['margin']['formatted'] }}</td>
                            </tr>
                        </tbody>
                    </table>

                    {{-- Operational Statistics Table --}}
                    <h3
                        style="font-size: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 15px; color: #334155;">
                        2. Operational Tracking</h3>
                    <table style="width: 100%; table-layout: fixed; border-collapse: collapse;">
                        <thead>
                            <tr style="background-color: #f8fafc;">
                                <th
                                    style="width: 60%; padding: 12px; border: 1px solid #e2e8f0; text-align: left; font-size: 13px; font-weight: 600; color: #64748b;">
                                    Tracking Metric</th>
                                <th
                                    style="width: 40%; padding: 12px; border: 1px solid #e2e8f0; text-align: right; font-size: 13px; font-weight: 600; color: #64748b;">
                                    Status / Amount</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td style="padding: 12px; border: 1px solid #e2e8f0; font-size: 14px;">Active Projects</td>
                                <td
                                    style="padding: 12px; border: 1px solid #e2e8f0; font-size: 14px; text-align: right; font-weight: 600;">
                                    {{ $quickStats['active_projects'] }}</td>
                            </tr>
                            <tr>
                                <td style="padding: 12px; border: 1px solid #e2e8f0; font-size: 14px;">Pending PO Approvals</td>
                                <td
                                    style="padding: 12px; border: 1px solid #e2e8f0; font-size: 14px; text-align: right; font-weight: 600; color: #ea580c;">
                                    {{ $quickStats['pending_po'] }}</td>
                            </tr>
                            <tr>
                                <td style="padding: 12px; border: 1px solid #e2e8f0; font-size: 14px;">Vendor Outstanding</td>
                                <td
                                    style="padding: 12px; border: 1px solid #e2e8f0; font-size: 14px; text-align: right; font-weight: 600;">
                                    {{ $quickStats['vendor_outstanding'] }}</td>
                            </tr>
                            <tr>
                                <td style="padding: 12px; border: 1px solid #e2e8f0; font-size: 14px;">Client Overdue</td>
                                <td
                                    style="padding: 12px; border: 1px solid #e2e8f0; font-size: 14px; text-align: right; font-weight: 600; color: #dc2626;">
                                    {{ $quickStats['client_overdue'] }}</td>
                            </tr>
                            <tr>
                                <td style="padding: 12px; border: 1px solid #e2e8f0; font-size: 14px;">Today's Payments Processed
                                </td>
                                <td
                                    style="padding: 12px; border: 1px solid #e2e8f0; font-size: 14px; text-align: right; font-weight: 600;">
                                    {{ $quickStats['todays_payments'] }}</td>
                            </tr>
                        </tbody>
                    </table>

                </div>
            </div>
            {{-- END HIDDEN REPORT --}}

@endsection

@push('scripts')
    {{-- html2pdf CDN --}}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>

    <script>
        function downloadPDF() {
            // Target the hidden formal report layout instead of the dashboard UI
            const element = document.getElementById('pdf-report-layout');

            const opt = {
                margin:       0.5, // Half inch margin all around
                filename:     'Meking_Finance_Report_{{ now()->format('Y_m_d') }}.pdf',
                image:        { type: 'jpeg', quality: 0.98 },
                html2canvas:  { scale: 2, useCORS: true }, 
                // Using Portrait mode because lists/tables look much better this way
                jsPDF:        { unit: 'in', format: 'a4', orientation: 'portrait' } 
            };

            // Generate the PDF
            html2pdf().set(opt).from(element).save();
        }
    </script>
@endpush