@extends('layouts.finance.finance')

@section('content')
    {{-- Main Wrapper: Expanded with an Alpine state manager --}}
        <div x-data="{ 
                    tab: new URLSearchParams(window.location.search).get('tab') || '{{ $activeTab }}', 
                    activeInvoice: null,
                    paymentModal: null,
                    triggerPrint(invoiceId) {
                        this.activeInvoice = invoiceId;
                        this.$nextTick(() => {
                            window.print();
                        });
                    },
                    submitPayment(event) {
                        const form = event.target;
                        const data = new FormData(form);

                        fetch(form.action, {
                            method: 'POST',
                            headers: { 
                                'X-Requested-With': 'XMLHttpRequest',
                                'Accept': 'application/json'
                            },
                            body: data
                        })
                        .then(res => {
                            if (!res.ok) throw new Error('Network response failed');
                            // Force reload directly back to the accounts receivable tab
                            window.location.href = '{{ url()->current() }}?tab=ar';
                        })
                        .catch(err => {
                            console.error(err);
                            alert('Something went wrong while recording the payment. Please try again.');
                        });
                    }
                }" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 print:p-0 print:max-w-full">

            {{-- ======================================================== --}}
            {{-- DASHBOARD ADMINISTRATIVE INTERFACE ELEMENTS (HIDDEN ON PRINT) --}}
            {{-- ======================================================== --}}
            <div class="print:hidden">
                {{-- Header --}}
                <div class="flex justify-between items-center mb-6">
                    <h1 class="text-2xl font-semibold text-gray-800">Sales & Billing Dashboard</h1>
                    <p class="text-sm text-gray-500">Invoice Management</p>
                </div>

                {{-- Tabs Navigation --}}
                <div class="border-b border-gray-200 mb-8">
                    <nav class="-mb-px flex space-x-8">
                        <button @click="tab = 'overview'"
                            :class="tab === 'overview' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700'"
                            class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors">Overview</button>
                        <button @click="tab = 'ar'"
                            :class="tab === 'ar' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700'"
                            class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors">Accounts Receivable</button>
                        <button @click="tab = 'ap'"
                            :class="tab === 'ap' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700'"
                            class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors">Accounts Payable</button>
                        <button @click="tab = 'pnl'"
                            :class="tab === 'pnl' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700'"
                            class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors">Project P&L</button>
                    </nav>
                </div>

                {{-- TAB 1: OVERVIEW --}}
                <div x-show="tab === 'overview'" x-transition>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
                        {{-- Net Cash --}}
                        <div class="bg-white rounded-lg shadow p-6 border-l-4 {{ $stats['net_cash'] >= 0 ? 'border-l-green-500' : 'border-l-red-500' }}">
                            <h3 class="text-sm font-medium text-gray-500 uppercase">Net Cash Position</h3>
                            <p class="text-3xl font-bold {{ $stats['net_cash'] >= 0 ? 'text-green-600' : 'text-red-600' }} mt-2">
                                ₹{{ number_format($stats['net_cash'], 2) }}
                            </p>
                        </div>
                        {{-- AR --}}
                        <div class="bg-white rounded-lg shadow p-6 border-l-4 border-l-blue-500">
                            <h3 class="text-sm font-medium text-gray-500 uppercase">Total Outstanding (AR)</h3>
                            <p class="text-3xl font-bold text-gray-900 mt-2">
                                ₹{{ number_format($stats['total_outstanding_ar'], 2) }}
                            </p>
                        </div>
                        {{-- AP --}}
                        <div class="bg-white rounded-lg shadow p-6 border-l-4 border-l-amber-500">
                            <h3 class="text-sm font-medium text-gray-500 uppercase">Pending Payables (AP)</h3>
                            <p class="text-3xl font-bold text-gray-900 mt-2">
                                ₹{{ number_format($stats['total_pending_ap'], 2) }}
                            </p>
                        </div>
                    </div>
                </div>

                {{-- TAB 2: ACCOUNTS RECEIVABLE --}}
                <div x-show="tab === 'ar'" style="display: none;">
                    <h2 class="text-lg font-semibold text-red-600 mb-4 flex items-center">
                        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                        Overdue Client Payments (Requires Action)
                    </h2>
                    <div class="bg-white rounded-lg shadow border border-gray-200 overflow-hidden">
                        <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 / Stage</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Due Date</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Amount Due</th>
                                    <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">Action</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                @forelse($overdueReceivables as $ar)
                                    <tr class="hover:bg-red-50">
                                        <td class="px-6 py-4 whitespace-nowrap text-sm">
                                            <div class="font-medium text-gray-900">{{ $ar->project->title ?? 'Unknown Project' }}</div>
                                            <div class="text-xs text-gray-500">{{ $ar->stage_name }} - {{ $ar->category_name }}</div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-red-600">
                                            {{ \Carbon\Carbon::parse($ar->due_date)->format('d M, Y') }}
                                            <span class="text-xs text-gray-400 ml-1">({{ \Carbon\Carbon::parse($ar->due_date)->diffForHumans() }})</span>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-gray-900">
                                            ₹{{ number_format($ar->amount - $ar->received_amount, 2) }}
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-right">
                                            <button type="button" @click="paymentModal = {{ $ar->id }}" class="text-blue-600 hover:text-blue-900 font-medium">
                                                Record Payment
                                            </button>
                                        </td>
                                    </tr>

                                    {{-- Record Payment Modal --}}
                                    <tr>
                                        <td colspan="4" class="p-0 border-none">
                                            <div x-show="paymentModal === {{ $ar->id }}" x-cloak class="fixed inset-0 z-50 flex items-center justify-center px-4" style="display: none;">
                                                {{-- Backdrop --}}
                                                <div class="fixed inset-0 bg-black/40" @click="paymentModal = null"></div>

                                                {{-- Modal Card --}}
                                                <div class="relative bg-white rounded-lg shadow-xl w-full max-w-md" @click.outside="paymentModal = null">
                                                    <form method="POST" action="{{ route('markPaid') }}" @submit.prevent="submitPayment($event)">
                                                        @csrf
                                                        <input type="hidden" name="id" value="{{ $ar->id }}">

                                                        <div class="flex items-center justify-between px-6 py-4 border-b border-gray-200">
                                                            <h3 class="text-lg font-semibold text-gray-900">Receive Payment</h3>
                                                            <button type="button" @click="paymentModal = null" class="text-gray-400 hover:text-gray-600">
                                                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                                                                </svg>
                                                            </button>
                                                        </div>

                                                        <div class="px-6 py-4 space-y-3">
                                                            <p class="text-sm text-gray-600">
                                                                <span class="font-medium text-gray-900">{{ $ar->project->title ?? 'Unknown Project' }}</span> — {{ $ar->stage_name }} ({{ $ar->category_name }})
                                                            </p>
                                                            <p class="text-sm text-gray-500">
                                                                Amount Due: <span class="font-bold text-gray-900">₹{{ number_format($ar->amount - $ar->received_amount, 2) }}</span>
                                                            </p>

                                                            <div>
                                                                <label class="block text-sm font-medium text-gray-700 mb-1">Received Amount</label>
                                                                <input type="number" step="0.01" name="received_amount" max="{{ $ar->amount - $ar->received_amount }}" class="w-full rounded border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm" required>
                                                            </div>
                                                        </div>

                                                        <div class="flex justify-end gap-2 px-6 py-4 border-t border-gray-200 bg-gray-50 rounded-b-lg">
                                                            <button type="button" @click="paymentModal = null" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded hover:bg-gray-50">
                                                                Cancel
                                                            </button>
                                                            <button type="submit" class="px-4 py-2 text-sm font-medium text-white bg-green-600 rounded hover:bg-green-700 shadow">
                                                                Save
                                                            </button>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="4" class="px-6 py-6 text-center text-gray-500">No overdue receivables! Great job collecting.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            {{-- TAB 3: ACCOUNTS PAYABLE --}}
            <div x-show="tab === 'ap'" style="display: none;">
                <h2 class="text-lg font-semibold text-amber-600 mb-4 print:hidden">Pending Vendor Payments</h2>

                {{-- Main Interactive Table Window --}}
                <div class="bg-white rounded-lg shadow border border-gray-200 overflow-hidden print:hidden">
                    <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">PO Ref / Vendor</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Total Invoice</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Pending Amount</th>
                                <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">Action</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            @forelse($pendingPayables as $ap)
                                <tr class="hover:bg-amber-50">
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                                        <div class="font-medium text-blue-600">{{ $ap->order->po_number ?? 'N/A' }}</div>
                                        <div class="text-xs text-gray-500">{{ $ap->vendor->company_name ?? 'N/A' }}</div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">
                                        ₹{{ number_format($ap->total_amount, 2) }}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-amber-600">
                                        {{ $ap->pending_amount <= 0 ? '₹0.00' : '₹' . number_format($ap->pending_amount, 2) }}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-right">
                                        @if($ap->pending_amount > 0)
                                            <button class="bg-blue-600 hover:bg-blue-700 text-white text-xs py-1.5 px-3 rounded shadow transition">Pay Now</button>
                                        @else
                                            <button type="button" @click="triggerPrint({{ $ap->id }})" class="inline-flex items-center bg-green-600 hover:bg-green-700 text-white text-xs font-semibold py-1.5 px-3 rounded shadow transition">
                                                Print Invoice
                                            </button>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4" class="px-6 py-6 text-center text-gray-500">All vendor accounts are settled up.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                {{-- ======================================================== --}}
                {{-- ISOLATED PRINT SELECTION INTERFACE LAYER --}}
                {{-- ======================================================== --}}
                @foreach($pendingPayables as $ap)
                    @if($ap->pending_amount <= 0)
                        <div x-show="activeInvoice === {{ $ap->id }}" class="hidden print:block bg-white text-left text-black p-4 min-h-screen w-full geo-print-view">
                            {{-- Company Document Header --}}
                            <div class="text-center mb-6 relative">
                                <h1 class="text-xl font-bold uppercase tracking-wide text-gray-900">MEKING STEEL PVT LTD</h1>
                                <p class="text-xs font-semibold text-gray-500 mt-0.5">Purchase Order</p>
                                <span class="absolute top-0 right-0 border border-amber-400 bg-amber-50 text-amber-700 px-2 py-0.5 rounded text-[10px] font-bold uppercase">Pending</span>
                            </div>

                            <div class="mb-4">
                                <span class="font-bold text-blue-600 text-sm tracking-wide">PO: {{ $ap->order->po_number ?? 'N/A' }}</span>
                            </div>

                            {{-- Order Details --}}
                            <div class="border border-gray-300 rounded mb-4 text-[11px]">
                                <div class="bg-gray-50 px-3 py-1 font-semibold border-b border-gray-300 text-gray-700">Order Details</div>
                                <div class="grid grid-cols-3 gap-y-3 gap-x-4 p-3">
                                    <div>
                                        <p class="text-gray-400 font-medium">Vendor</p>
                                        <p class="font-semibold text-gray-900 mt-0.5">{{ $ap->vendor->company_name ?? 'N/A' }}</p>
                                    </div>
                                    <div>
                                        <p class="text-gray-400 font-medium">Company</p>
                                        <p class="font-semibold text-gray-900 mt-0.5">Meking Steel Pvt Ltd</p>
                                    </div>
                                    <div>
                                        <p class="text-gray-400 font-medium">Project</p>
                                        <p class="font-semibold text-gray-900 mt-0.5">{{ $ap->project->title ?? $ap->project_name ?? 'N/A' }}</p>
                                    </div>
                                </div>
                            </div>

                            {{-- Dynamic Table Elements --}}
                            <div class="border border-gray-300 rounded mb-4 text-[11px]">
                                <div class="bg-gray-50 px-3 py-1 font-semibold border-b border-gray-300 text-gray-700">Items</div>
                                <table class="w-full text-left">
                                    <thead>
                                        <tr class="border-b border-gray-300 text-gray-500 font-semibold text-[10px] uppercase">
                                            <th class="p-2.5 w-12 text-center border-r border-gray-200">ID</th>
                                            <th class="p-2.5 border-r border-gray-200 text-center">Material</th>
                                            <th class="p-2.5 border-r border-gray-200 text-center">Unit</th>
                                            <th class="p-2.5 border-r border-gray-200 text-center">Qty</th>
                                            <th class="p-2.5 border-r border-gray-200 text-center">Rate</th>
                                            <th class="p-2.5 text-center">Total</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @if(isset($ap->order->items) && count($ap->order->items) > 0)
                                            @foreach($ap->order->items as $index => $item)
                                                @php
                                                    $itemTotal = $item->total_amount ?? 0;
                                                    $itemSubtotal = $itemTotal / 1.18;
                                                    $itemQty = $item->qty ?? 1;
                                                    $itemRate = $itemQty > 0 ? ($itemSubtotal / $itemQty) : 0;
                                                @endphp
                                                <tr class="text-gray-900 border-b border-gray-200 last:border-none">
                                                    <td class="p-2.5 text-center border-r border-gray-200">{{ $index + 1 }}</td>
                                                    <td class="p-2.5 border-r border-gray-200">{{ $item->material_name ?? $item->title ?? 'Unknown Material' }}</td>
                                                    <td class="p-2.5 text-center border-r border-gray-200">{{ $item->unit ?? 'MT' }}</td>
                                                    <td class="p-2.5 text-center border-r border-gray-200">{{ number_format($itemQty, 2) }}</td>
                                                    <td class="p-2.5 text-center border-r border-gray-200">₹{{ number_format($itemRate, 2) }}</td>
                                                    <td class="p-2.5 text-right font-medium">₹{{ number_format($itemSubtotal, 2) }}</td>
                                                </tr>
                                            @endforeach
                                        @else
                                            @php
                                                $computedSubtotal = $ap->total_amount / 1.18;
                                                $fallbackQty = $ap->qty ?? 12.00;
                                                $fallbackRate = $fallbackQty > 0 ? ($computedSubtotal / $fallbackQty) : 0;
                                            @endphp
                                            <tr class="text-gray-900">
                                                <td class="p-2.5 text-center border-r border-gray-200">1</td>
                                                <td class="p-2.5 border-r border-gray-200">{{ $ap->stage_name ?? 'Material Item' }}</td>
                                                <td class="p-2.5 text-center border-r border-gray-200">{{ $ap->unit ?? 'MT' }}</td>
                                                <td class="p-2.5 text-center border-r border-gray-200">{{ number_format($fallbackQty, 2) }}</td>
                                                <td class="p-2.5 text-center border-r border-gray-200">₹{{ number_format($fallbackRate, 2) }}</td>
                                                <td class="p-2.5 text-right font-medium">₹{{ number_format($computedSubtotal, 2) }}</td>
                                            </tr>
                                        @endif
                                    </tbody>
                                </table>
                            </div>

                            {{-- Summary Calculations --}}
                            @php
                                $computedSubtotal = $ap->total_amount / 1.18;
                                $computedTaxAmount = $ap->total_amount - $computedSubtotal;
                            @endphp
                            <div class="border border-gray-300 rounded mb-4 text-[11px]">
                                <div class="bg-gray-50 px-3 py-1 font-semibold border-b border-gray-300 text-gray-700">Summary</div>
                                <div class="divide-y divide-gray-200">
                                    <div class="flex justify-between p-2.5">
                                        <span class="text-gray-600">Subtotal</span>
                                        <span class="font-medium text-gray-900">₹{{ number_format($computedSubtotal, 2) }}</span>
                                    </div>
                                    <div class="flex justify-between p-2.5">
                                        <span class="text-gray-600">GST (18.00%)</span>
                                        <span class="font-medium text-gray-900">₹{{ number_format($computedTaxAmount, 2) }}</span>
                                    </div>
                                    <div class="flex justify-between p-2.5 bg-gray-50 font-bold text-gray-900">
                                        <span>Total</span>
                                        <span>₹{{ number_format($ap->total_amount, 2) }}</span>
                                    </div>
                                </div>
                            </div>

                            {{-- Signatures Box --}}
                            <div class="grid grid-cols-3 border border-gray-300 rounded text-center text-[10px] uppercase font-bold mt-10 h-16 divide-x divide-gray-300">
                                <div class="flex items-end justify-center pb-2 text-gray-500">Prepared By</div>
                                <div class="flex items-end justify-center pb-2 text-gray-500">Authorized Signatory</div>
                                <div class="flex items-end justify-center pb-2 text-gray-500">Vendor Signature</div>
                            </div>
                        </div>
                    @endif
                @endforeach
            </div>

            {{-- TAB 4: PROJECT P&L (HIDDEN ON PRINT) --}}
            <div class="print:hidden">
                <div x-show="tab === 'pnl'" style="display: none;">
                    <h2 class="text-lg font-semibold text-gray-800 mb-4">Active Projects: Budget vs Actuals</h2>
                    <div class="bg-white rounded-lg shadow border border-gray-200 overflow-hidden">
                        <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 Name</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Est. Budget (Cost Stages)</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Actual Spend (POs)</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Variance (Profit Margin)</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                @forelse($activeProjects as $project)
                                    <tr class="hover:bg-gray-50">
                                        <td class="px-6 py-4 whitespace-nowrap text-sm">
                                            <div class="font-medium text-gray-900">{{ $project->title }}</div>
                                            <div class="text-xs text-gray-500">{{ $project->client_name }}</div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">
                                            ₹{{ number_format($project->budget, 2) }}
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">
                                            ₹{{ number_format($project->actual_spend, 2) }}
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-bold">
                                            @if($project->profit_margin < 0)
                                                <span class="text-red-600 bg-red-100 px-2 py-1 rounded">
                                                    ₹{{ number_format($project->profit_margin, 2) }} (Over Budget)
                                                </span>
                                            @else
                                                <span class="text-green-600">₹{{ number_format($project->profit_margin, 2) }}</span>
                                            @endif
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="4" class="px-6 py-6 text-center text-gray-500">No active projects found.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

        </div>
@endsection