@extends('layouts.app')
@section('title', 'GSTR-3B')
@section('page-title', 'GSTR-3B — Monthly Summary Return')

@section('content')
<div class="space-y-5">

    {{-- Period selector --}}
    <form method="GET" class="flex items-center gap-3">
        <label class="form-label mb-0 text-sm">Period:</label>
        <input type="month" name="period" value="{{ $period }}"
               class="form-input border border-gray-300 rounded-lg px-3 py-2 text-sm w-40">
        <button type="submit" class="btn-primary px-4 py-2">Load</button>
        <a href="?period={{ $period }}&format=pdf" class="btn-secondary px-4 py-2">
            <svg class="w-4 h-4" 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"/></svg>
            Download PDF
        </a>
    </form>

    {{-- 3.1 Outward Supplies --}}
    <div class="card">
        <h3 class="text-base font-semibold text-gray-900 mb-1">3.1 — Details of Outward Supplies and Inward Supplies liable to Reverse Charge</h3>
        <p class="text-xs text-gray-400 mb-4">Period: {{ \Carbon\Carbon::parse($period . '-01')->format('F Y') }}</p>

        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="table-th">Nature</th>
                        <th class="table-th text-right">Taxable Value (₹)</th>
                        <th class="table-th text-right">CGST (₹)</th>
                        <th class="table-th text-right">SGST (₹)</th>
                        <th class="table-th text-right">IGST (₹)</th>
                        <th class="table-th text-right">CESS (₹)</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    <tr class="hover:bg-gray-50">
                        <td class="table-td font-medium">Outward taxable supplies (other than zero rated, nil & exempted)</td>
                        <td class="table-td text-right font-medium">{{ number_format($data['outward_taxable'], 2) }}</td>
                        <td class="table-td text-right">{{ number_format($data['outward_cgst'], 2) }}</td>
                        <td class="table-td text-right">{{ number_format($data['outward_sgst'], 2) }}</td>
                        <td class="table-td text-right">{{ number_format($data['outward_igst'], 2) }}</td>
                        <td class="table-td text-right">{{ number_format($data['outward_cess'], 2) }}</td>
                    </tr>
                    <tr class="bg-gray-50 font-semibold">
                        <td class="table-td">Total Output Tax</td>
                        <td class="table-td text-right">{{ number_format($data['outward_taxable'], 2) }}</td>
                        <td class="table-td text-right">{{ number_format($data['outward_cgst'], 2) }}</td>
                        <td class="table-td text-right">{{ number_format($data['outward_sgst'], 2) }}</td>
                        <td class="table-td text-right">{{ number_format($data['outward_igst'], 2) }}</td>
                        <td class="table-td text-right">{{ number_format($data['outward_cess'], 2) }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    {{-- 4. Input Tax Credit --}}
    <div class="card">
        <h3 class="text-base font-semibold text-gray-900 mb-4">4 — Eligible Input Tax Credit (ITC)</h3>
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="table-th">Details</th>
                        <th class="table-th text-right">CGST (₹)</th>
                        <th class="table-th text-right">SGST (₹)</th>
                        <th class="table-th text-right">IGST (₹)</th>
                        <th class="table-th text-right">Total (₹)</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    <tr>
                        <td class="table-td font-medium">ITC Available — All other ITC (B)</td>
                        <td class="table-td text-right text-green-700">{{ number_format($data['itc_cgst'], 2) }}</td>
                        <td class="table-td text-right text-green-700">{{ number_format($data['itc_sgst'], 2) }}</td>
                        <td class="table-td text-right text-green-700">{{ number_format($data['itc_igst'], 2) }}</td>
                        <td class="table-td text-right font-semibold text-green-700">{{ number_format($data['itc_total'], 2) }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    {{-- Net Tax Payable --}}
    <div class="card">
        <h3 class="text-base font-semibold text-gray-900 mb-4">5.1 — Payment of Tax</h3>
        <div class="grid grid-cols-1 sm:grid-cols-4 gap-4">
            @php
                $netCgst = max(0, $data['outward_cgst'] - $data['itc_cgst']);
                $netSgst = max(0, $data['outward_sgst'] - $data['itc_sgst']);
                $netIgst = max(0, $data['outward_igst'] - $data['itc_igst']);
            @endphp
            <div class="p-4 rounded-xl bg-gray-50 text-center">
                <p class="text-sm text-gray-500">CGST Payable</p>
                <p class="text-xl font-bold text-gray-900 mt-1">₹{{ number_format($netCgst, 2) }}</p>
            </div>
            <div class="p-4 rounded-xl bg-gray-50 text-center">
                <p class="text-sm text-gray-500">SGST Payable</p>
                <p class="text-xl font-bold text-gray-900 mt-1">₹{{ number_format($netSgst, 2) }}</p>
            </div>
            <div class="p-4 rounded-xl bg-gray-50 text-center">
                <p class="text-sm text-gray-500">IGST Payable</p>
                <p class="text-xl font-bold text-gray-900 mt-1">₹{{ number_format($netIgst, 2) }}</p>
            </div>
            <div class="p-4 rounded-xl bg-orange-50 text-center border border-orange-200">
                <p class="text-sm text-orange-600 font-medium">Total Net Payable</p>
                <p class="text-2xl font-bold text-orange-700 mt-1">₹{{ number_format($data['net_tax_payable'], 2) }}</p>
                <p class="text-xs text-orange-500 mt-1">to be deposited in GST portal</p>
            </div>
        </div>
    </div>

    <div class="text-xs text-gray-400 bg-blue-50 p-3 rounded-lg">
        💡 This is an auto-computed summary based on your invoices and purchases. Please verify before filing on the GST portal. This system <strong>does not file</strong> returns directly.
    </div>

</div>
@endsection