@extends('layouts.finance.finance')

@section('content')
    <div x-data="{ tab: '{{ $activeTab }}' }" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">

        {{-- Page Header --}}
        <div class="flex justify-between items-center mb-8">
            <div>
                <h1 class="text-2xl font-semibold text-gray-800">Analytics & Reports</h1>
                <p class="text-sm text-gray-500 mt-1">Generate and export financial insights</p>
            </div>
            <!-- <div class="space-x-2">
                <button
                    class="bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 font-medium py-2 px-4 rounded shadow-sm text-sm inline-flex items-center transition-colors">
                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z">
                        </path>
                    </svg>
                    Export CSV
                </button>
                <button
                    class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded shadow text-sm transition-colors inline-flex items-center">
                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z">
                        </path>
                    </svg>
                    Print Report
                </button>
            </div> -->
        </div>

        {{-- Tabs Navigation --}}
        <div class="border-b border-gray-200 mb-6">
            <nav class="-mb-px flex space-x-8" aria-label="Tabs">
                <button @click="tab = 'financial'"
                    :class="tab === 'financial' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                    class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors">
                    Financial Statement
                </button>
                <button @click="tab = 'project'"
                    :class="tab === 'project' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                    class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors">
                    Project Profitability
                </button>
            </nav>
        </div>

        {{-- TAB 1: FINANCIAL REPORTS --}}
        <div x-show="tab === 'financial'" x-transition:enter="transition ease-out duration-300"
            x-transition:enter-start="opacity-0 translate-y-2" x-transition:enter-end="opacity-100 translate-y-0">

            <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
                <div class="bg-white rounded-lg shadow p-6 border-l-4 border-l-green-500">
                    <h3 class="text-xs font-medium text-gray-500 uppercase">YTD Revenue (Collected)</h3>
                    <p class="text-2xl font-bold text-gray-900 mt-2">
                        ₹{{ number_format($financialSummary['ytd_revenue'], 2) }}</p>
                </div>
                <div class="bg-white rounded-lg shadow p-6 border-l-4 border-l-red-500">
                    <h3 class="text-xs font-medium text-gray-500 uppercase">YTD Expenses (Paid)</h3>
                    <p class="text-2xl font-bold text-gray-900 mt-2">
                        ₹{{ number_format($financialSummary['ytd_expenses'], 2) }}</p>
                </div>
                <div
                    class="bg-white rounded-lg shadow p-6 border-l-4 {{ $financialSummary['net_cash_flow'] >= 0 ? 'border-l-blue-500' : 'border-l-amber-500' }}">
                    <h3 class="text-xs font-medium text-gray-500 uppercase">Net Cash Flow</h3>
                    <p
                        class="text-2xl font-bold {{ $financialSummary['net_cash_flow'] >= 0 ? 'text-blue-600' : 'text-amber-600' }} mt-2">
                        ₹{{ number_format($financialSummary['net_cash_flow'], 2) }}
                    </p>
                </div>
                <div class="bg-white rounded-lg shadow p-6 border-l-4 border-l-purple-500">
                    <h3 class="text-xs font-medium text-gray-500 uppercase">Cash Margin</h3>
                    <p class="text-2xl font-bold text-purple-600 mt-2">
                        {{ number_format($financialSummary['margin_percentage'], 1) }}%</p>
                </div>
            </div>

            <div class="bg-white rounded-lg shadow border border-gray-200 p-8">
                <h2 class="text-xl font-semibold text-center mb-6 border-b pb-4">Statement of Cash Flows
                    ({{ $currentYear }})</h2>

                <div class="max-w-3xl mx-auto">
                    <div class="flex justify-between py-3 border-b border-gray-100">
                        <span class="text-gray-600 font-medium">Cash Inflows (Client Payments)</span>
                        <span
                            class="font-bold text-green-600">₹{{ number_format($financialSummary['ytd_revenue'], 2) }}</span>
                    </div>
                    <div class="flex justify-between py-3 border-b border-gray-100">
                        <span class="text-gray-600 font-medium">Cash Outflows (Vendor Payments & Overhead)</span>
                        <span class="font-bold text-red-600">-
                            ₹{{ number_format($financialSummary['ytd_expenses'], 2) }}</span>
                    </div>
                    <div class="flex justify-between py-4 mt-4 bg-gray-50 px-4 rounded font-bold text-lg">
                        <span class="text-gray-900">Net Increase / (Decrease) in Cash</span>
                        <span class="{{ $financialSummary['net_cash_flow'] >= 0 ? 'text-blue-700' : 'text-amber-600' }}">
                            ₹{{ number_format($financialSummary['net_cash_flow'], 2) }}
                        </span>
                    </div>
                </div>
            </div>
        </div>

        {{-- TAB 2: PROJECT REPORTS --}}
        <div x-show="tab === 'project'" style="display: none;" x-transition:enter="transition ease-out duration-300"
            x-transition:enter-start="opacity-0 translate-y-2" x-transition:enter-end="opacity-100 translate-y-0">
            <div class="bg-white rounded-lg shadow border border-gray-200 overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                    <h2 class="text-lg font-semibold text-gray-800">Job Costing & Margin Analysis</h2>
                </div>
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Project / Client
                                </th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Estimated Budget
                                </th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Actual Cost
                                    (POs)</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Collected
                                    Revenue</th>
                                <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">Profit & Margin
                                </th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            @forelse($projectReports as $report)
                                <tr class="hover:bg-gray-50">
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                                        <div class="font-bold text-gray-900">{{ $report->title }}</div>
                                        <div class="text-xs text-gray-500">{{ $report->client }}</div>
                                        <span
                                            class="inline-flex mt-1 text-[10px] px-2 py-0.5 rounded-full bg-gray-100">{{ strtoupper($report->status) }}</span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
                                        ₹{{ number_format($report->budget, 2) }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600 font-medium">
                                        ₹{{ number_format($report->actual_spend, 2) }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600 font-medium">
                                        ₹{{ number_format($report->revenue, 2) }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-right">
                                        <div class="font-bold {{ $report->profit >= 0 ? 'text-blue-600' : 'text-amber-600' }}">
                                            ₹{{ number_format($report->profit, 2) }}
                                        </div>
                                        <div
                                            class="text-xs {{ $report->profit_margin >= 0 ? 'text-green-500' : 'text-red-500' }}">
                                            {{ number_format($report->profit_margin, 1) }}% Margin
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="px-6 py-8 text-center text-sm text-gray-500">No project data
                                        available for reports.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>
@endsection