@extends('app-new')

@push('head-script')
    <link rel="stylesheet" type="text/css" href="/app-assets/css/components.css">
    <style>
        .tax-detail-row { border-bottom: 1px solid #ebe9f1; padding: 0.5rem 0; }
        .tax-detail-row:last-child { border-bottom: none; }
        .tax-label { font-weight: 500; color: #5e5873; }
        .tax-value { font-weight: 600; text-align: right; }
        .tax-total-row { background-color: #f8f8f8; border-radius: 4px; padding: 0.75rem; margin-top: 0.5rem; }
    </style>
@endpush

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">Tax Calculation Detail</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">Detail</li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@section('content')
    <section id="tdx-calculation-detail">
        <div class="row">
            {{-- Employee Info --}}
            <div class="col-md-4 col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Employee Info</h4>
                    </div>
                    <div class="card-body">
                        <div class="mb-1">
                            <small class="text-muted">Name</small>
                            <p class="fw-bold mb-0">{{ $calculation->employee->name ?? 'N/A' }}</p>
                        </div>
                        <div class="mb-1">
                            <small class="text-muted">Employee Code</small>
                            <p class="fw-bold mb-0">{{ $calculation->employee->employee_code ?? '-' }}</p>
                        </div>
                        <div class="mb-1">
                            <small class="text-muted">Financial Year</small>
                            <p class="fw-bold mb-0">{{ $calculation->financialYear->label ?? '-' }}</p>
                        </div>
                        <div class="mb-1">
                            <small class="text-muted">Regime</small>
                            <p class="mb-0">
                                <span class="badge badge-light-{{ $calculation->regime === 'old' ? 'primary' : 'success' }}">
                                    {{ ucfirst($calculation->regime) }} Regime
                                </span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Tax Breakdown --}}
            <div class="col-md-8 col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Tax Computation - {{ ucfirst($calculation->regime) }} Regime</h4>
                    </div>
                    <div class="card-body">
                        {{-- Income --}}
                        <h6 class="text-primary mb-1">Income</h6>
                        <div class="tax-detail-row d-flex justify-content-between">
                            <span class="tax-label">Gross Income (CTC + Other Income)</span>
                            <span class="tax-value">&#8377; {{ number_format($calculation->gross_income, 2) }}</span>
                        </div>

                        <hr>

                        {{-- Deductions --}}
                        <h6 class="text-primary mb-1">Deductions</h6>
                        <div class="tax-detail-row d-flex justify-content-between">
                            <span class="tax-label">Standard Deduction</span>
                            <span class="tax-value">&#8377; {{ number_format($calculation->standard_deduction, 2) }}</span>
                        </div>
                        @if($calculation->regime === 'old')
                            <div class="tax-detail-row d-flex justify-content-between">
                                <span class="tax-label">HRA Exemption</span>
                                <span class="tax-value">&#8377; {{ number_format($calculation->hra_exemption, 2) }}</span>
                            </div>
                            <div class="tax-detail-row d-flex justify-content-between">
                                <span class="tax-label">Section 80C (PF, LIC, PPF, etc.)</span>
                                <span class="tax-value">&#8377; {{ number_format($calculation->section_80c, 2) }}</span>
                            </div>
                            <div class="tax-detail-row d-flex justify-content-between">
                                <span class="tax-label">Section 80D (Medical Insurance)</span>
                                <span class="tax-value">&#8377; {{ number_format($calculation->section_80d, 2) }}</span>
                            </div>
                            <div class="tax-detail-row d-flex justify-content-between">
                                <span class="tax-label">Section 80G (Donations)</span>
                                <span class="tax-value">&#8377; {{ number_format($calculation->section_80g, 2) }}</span>
                            </div>
                            <div class="tax-detail-row d-flex justify-content-between">
                                <span class="tax-label">Other Deductions</span>
                                <span class="tax-value">&#8377; {{ number_format($calculation->other_deductions, 2) }}</span>
                            </div>
                        @endif

                        <div class="tax-total-row d-flex justify-content-between">
                            <span class="tax-label fw-bold">Total Deductions</span>
                            <span class="tax-value text-success fw-bold">&#8377; {{ number_format($calculation->total_deductions, 2) }}</span>
                        </div>

                        <hr>

                        {{-- Taxable Income & Tax --}}
                        <h6 class="text-primary mb-1">Tax Computation</h6>
                        <div class="tax-detail-row d-flex justify-content-between">
                            <span class="tax-label">Taxable Income</span>
                            <span class="tax-value">&#8377; {{ number_format($calculation->taxable_income, 2) }}</span>
                        </div>
                        <div class="tax-detail-row d-flex justify-content-between">
                            <span class="tax-label">Tax on Income</span>
                            <span class="tax-value">&#8377; {{ number_format($calculation->tax_amount, 2) }}</span>
                        </div>
                        <div class="tax-detail-row d-flex justify-content-between">
                            <span class="tax-label">Education Cess (4%)</span>
                            <span class="tax-value">&#8377; {{ number_format($calculation->education_cess, 2) }}</span>
                        </div>

                        <div class="tax-total-row d-flex justify-content-between">
                            <span class="tax-label fw-bold">Total Tax Payable</span>
                            <span class="tax-value text-danger fw-bold">&#8377; {{ number_format($calculation->total_tax, 2) }}</span>
                        </div>

                        <hr>

                        {{-- TDS Summary --}}
                        <h6 class="text-primary mb-1">TDS Summary</h6>
                        <div class="tax-detail-row d-flex justify-content-between">
                            <span class="tax-label">Tax Already Deducted</span>
                            <span class="tax-value text-success">&#8377; {{ number_format($calculation->tax_already_deducted, 2) }}</span>
                        </div>
                        <div class="tax-detail-row d-flex justify-content-between">
                            <span class="tax-label">Remaining Tax</span>
                            <span class="tax-value">&#8377; {{ number_format($calculation->remaining_tax, 2) }}</span>
                        </div>
                        <div class="tax-detail-row d-flex justify-content-between">
                            <span class="tax-label">Remaining Months</span>
                            <span class="tax-value">{{ $calculation->remaining_months }}</span>
                        </div>

                        <div class="tax-total-row d-flex justify-content-between bg-light-primary">
                            <span class="tax-label fw-bold">Monthly TDS</span>
                            <span class="tax-value text-primary fw-bold fs-4">&#8377; {{ number_format($calculation->monthly_tds, 2) }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Monthly Breakdown --}}
        @if($calculation->monthlyBreakdowns && $calculation->monthlyBreakdowns->count() > 0)
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">Monthly TDS Breakdown</h4>
                        </div>
                        <div class="card-datatable">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>Month</th>
                                        <th>Gross Salary</th>
                                        <th>TDS Amount</th>
                                        <th>Cumulative TDS</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($calculation->monthlyBreakdowns as $monthly)
                                        <tr>
                                            <td>{{ $monthly->month_name }} {{ $monthly->year }}</td>
                                            <td>&#8377; {{ number_format($monthly->gross_salary, 2) }}</td>
                                            <td>&#8377; {{ number_format($monthly->tds_amount, 2) }}</td>
                                            <td>&#8377; {{ number_format($monthly->cumulative_tds, 2) }}</td>
                                            <td>
                                                @php
                                                    $mColors = ['pending' => 'warning', 'deducted' => 'success', 'adjusted' => 'info'];
                                                @endphp
                                                <span class="badge badge-light-{{ $mColors[$monthly->status] ?? 'secondary' }}">
                                                    {{ ucfirst($monthly->status) }}
                                                </span>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        {{-- Back Button --}}
        <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