@extends('app-new')

@push('head-script')
    <link rel="stylesheet" type="text/css" href="/app-assets/css/components.css">
    <style>
        .regime-compare-card { border: 2px solid #ebe9f1; border-radius: 8px; padding: 1.5rem; }
        .regime-compare-card.recommended { border-color: #28c76f; background-color: #f0fff4; }
        .compare-row { display: flex; justify-content: space-between; padding: 0.4rem 0; border-bottom: 1px solid #f0f0f0; }
        .compare-row:last-child { border-bottom: none; }
        .compare-label { color: #6e6b7b; }
        .compare-value { font-weight: 600; }
        .regime-badge { font-size: 0.75rem; padding: 0.25rem 0.75rem; border-radius: 20px; }
    </style>
@endpush

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">Regime Comparison</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/{{ $alias }}/home">Home</a></li>
                    <li class="breadcrumb-item"><a href="/{{ $alias }}/tdx/dashboard">TDS</a></li>
                    <li class="breadcrumb-item"><a href="/{{ $alias }}/tdx/calculations">Calculations</a></li>
                    <li class="breadcrumb-item active">Compare Regimes</li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@section('content')
    <section id="tdx-regime-compare">
        {{-- Employee Info --}}
        <div class="row mb-2">
            <div class="col-12">
                <div class="card">
                    <div class="card-body py-1">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h5 class="mb-0">{{ $profile->employee->name ?? 'Employee' }}</h5>
                                <small class="text-muted">FY {{ $profile->financialYear->label ?? '-' }} | Gross Income: &#8377; {{ number_format($profile->annual_ctc + $profile->other_income, 0) }}</small>
                            </div>
                            <div>
                                <span class="badge bg-{{ $comparison['recommended'] === 'old' ? 'primary' : 'success' }} fs-6">
                                    Recommended: {{ ucfirst($comparison['recommended']) }} Regime
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        @php
            $old = $comparison['old'];
            $new = $comparison['new'];
        @endphp

        {{-- Side by Side Comparison --}}
        <div class="row">
            {{-- Old Regime --}}
            <div class="col-md-6 col-12">
                <div class="card regime-compare-card {{ $comparison['recommended'] === 'old' ? 'recommended' : '' }}">
                    <div class="d-flex justify-content-between align-items-center mb-1">
                        <h4 class="mb-0">Old Regime</h4>
                        @if($comparison['recommended'] === 'old')
                            <span class="badge bg-success regime-badge">Recommended</span>
                        @endif
                    </div>
                    <hr>

                    <h6 class="text-primary">Income</h6>
                    <div class="compare-row">
                        <span class="compare-label">Gross Income</span>
                        <span class="compare-value">&#8377; {{ number_format($old->gross_income, 0) }}</span>
                    </div>

                    <h6 class="text-primary mt-1">Deductions</h6>
                    <div class="compare-row">
                        <span class="compare-label">Standard Deduction</span>
                        <span class="compare-value">&#8377; {{ number_format($old->standard_deduction, 0) }}</span>
                    </div>
                    <div class="compare-row">
                        <span class="compare-label">HRA Exemption</span>
                        <span class="compare-value">&#8377; {{ number_format($old->hra_exemption, 0) }}</span>
                    </div>
                    <div class="compare-row">
                        <span class="compare-label">Section 80C</span>
                        <span class="compare-value">&#8377; {{ number_format($old->section_80c, 0) }}</span>
                    </div>
                    <div class="compare-row">
                        <span class="compare-label">Section 80D</span>
                        <span class="compare-value">&#8377; {{ number_format($old->section_80d, 0) }}</span>
                    </div>
                    <div class="compare-row">
                        <span class="compare-label">Other Deductions</span>
                        <span class="compare-value">&#8377; {{ number_format($old->section_80g + $old->other_deductions, 0) }}</span>
                    </div>
                    <div class="compare-row fw-bold">
                        <span class="compare-label">Total Deductions</span>
                        <span class="compare-value text-success">&#8377; {{ number_format($old->total_deductions, 0) }}</span>
                    </div>

                    <h6 class="text-primary mt-1">Tax</h6>
                    <div class="compare-row">
                        <span class="compare-label">Taxable Income</span>
                        <span class="compare-value">&#8377; {{ number_format($old->taxable_income, 0) }}</span>
                    </div>
                    <div class="compare-row">
                        <span class="compare-label">Tax Amount</span>
                        <span class="compare-value">&#8377; {{ number_format($old->tax_amount, 0) }}</span>
                    </div>
                    <div class="compare-row">
                        <span class="compare-label">Education Cess</span>
                        <span class="compare-value">&#8377; {{ number_format($old->education_cess, 0) }}</span>
                    </div>

                    <div class="mt-1 p-1 rounded" style="background-color: {{ $comparison['recommended'] === 'old' ? '#d4edda' : '#f8f8f8' }}">
                        <div class="d-flex justify-content-between align-items-center">
                            <span class="fw-bold fs-5">Total Tax</span>
                            <span class="fw-bold fs-4 text-{{ $comparison['recommended'] === 'old' ? 'success' : 'danger' }}">
                                &#8377; {{ number_format($old->total_tax, 0) }}
                            </span>
                        </div>
                        <div class="d-flex justify-content-between mt-50">
                            <span class="text-muted">Monthly TDS</span>
                            <span class="fw-bold">&#8377; {{ number_format($old->monthly_tds, 0) }}</span>
                        </div>
                    </div>
                </div>
            </div>

            {{-- New Regime --}}
            <div class="col-md-6 col-12">
                <div class="card regime-compare-card {{ $comparison['recommended'] === 'new' ? 'recommended' : '' }}">
                    <div class="d-flex justify-content-between align-items-center mb-1">
                        <h4 class="mb-0">New Regime</h4>
                        @if($comparison['recommended'] === 'new')
                            <span class="badge bg-success regime-badge">Recommended</span>
                        @endif
                    </div>
                    <hr>

                    <h6 class="text-primary">Income</h6>
                    <div class="compare-row">
                        <span class="compare-label">Gross Income</span>
                        <span class="compare-value">&#8377; {{ number_format($new->gross_income, 0) }}</span>
                    </div>

                    <h6 class="text-primary mt-1">Deductions</h6>
                    <div class="compare-row">
                        <span class="compare-label">Standard Deduction</span>
                        <span class="compare-value">&#8377; {{ number_format($new->standard_deduction, 0) }}</span>
                    </div>
                    <div class="compare-row text-muted">
                        <span class="compare-label"><s>HRA Exemption</s></span>
                        <span class="compare-value">N/A</span>
                    </div>
                    <div class="compare-row text-muted">
                        <span class="compare-label"><s>Section 80C</s></span>
                        <span class="compare-value">N/A</span>
                    </div>
                    <div class="compare-row text-muted">
                        <span class="compare-label"><s>Section 80D</s></span>
                        <span class="compare-value">N/A</span>
                    </div>
                    <div class="compare-row text-muted">
                        <span class="compare-label"><s>Other Deductions</s></span>
                        <span class="compare-value">N/A</span>
                    </div>
                    <div class="compare-row fw-bold">
                        <span class="compare-label">Total Deductions</span>
                        <span class="compare-value text-success">&#8377; {{ number_format($new->total_deductions, 0) }}</span>
                    </div>

                    <h6 class="text-primary mt-1">Tax</h6>
                    <div class="compare-row">
                        <span class="compare-label">Taxable Income</span>
                        <span class="compare-value">&#8377; {{ number_format($new->taxable_income, 0) }}</span>
                    </div>
                    <div class="compare-row">
                        <span class="compare-label">Tax Amount</span>
                        <span class="compare-value">&#8377; {{ number_format($new->tax_amount, 0) }}</span>
                    </div>
                    <div class="compare-row">
                        <span class="compare-label">Education Cess</span>
                        <span class="compare-value">&#8377; {{ number_format($new->education_cess, 0) }}</span>
                    </div>

                    <div class="mt-1 p-1 rounded" style="background-color: {{ $comparison['recommended'] === 'new' ? '#d4edda' : '#f8f8f8' }}">
                        <div class="d-flex justify-content-between align-items-center">
                            <span class="fw-bold fs-5">Total Tax</span>
                            <span class="fw-bold fs-4 text-{{ $comparison['recommended'] === 'new' ? 'success' : 'danger' }}">
                                &#8377; {{ number_format($new->total_tax, 0) }}
                            </span>
                        </div>
                        <div class="d-flex justify-content-between mt-50">
                            <span class="text-muted">Monthly TDS</span>
                            <span class="fw-bold">&#8377; {{ number_format($new->monthly_tds, 0) }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Savings Summary --}}
        @php
            $savings = abs($old->total_tax - $new->total_tax);
        @endphp
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body text-center py-2">
                        <h4>
                            By choosing <strong class="text-success">{{ ucfirst($comparison['recommended']) }} Regime</strong>,
                            the employee saves
                            <strong class="text-success">&#8377; {{ number_format($savings, 0) }}</strong> in taxes.
                        </h4>
                    </div>
                </div>
            </div>
        </div>

        {{-- Back --}}
        <div class="row">
            <div class="col-12">
                <a href="/{{ $alias }}/tdx/calculations" class="btn btn-outline-secondary">
                    <i data-feather="arrow-left"></i> Back to Calculations
                </a>
            </div>
        </div>
    </section>
@endsection

@push('footer-script')
    <script>
        $(document).ready(function () {
            if (feather) feather.replace();
        });
    </script>
@endpush