@extends('member-new')

@push('head-script')
    <style>
        .table > thead > tr > th { background-color: #f5f5f5; }
        .tds-summary-card {
            border-left: 4px solid #7367f0;
            transition: transform 0.2s;
        }
        .tds-summary-card:hover { transform: translateY(-2px); }
    </style>
@endpush

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">My TDS Deduction History - FY {{ $fy }}</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/member/{{ $alias }}/home">Home</a></li>
                    <li class="breadcrumb-item"><a href="/member/{{ $alias }}/tdx/dashboard">TDS</a></li>
                    <li class="breadcrumb-item active">Deductions</li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@section('content')
    <section id="employee-deductions">

        {{-- Summary Cards --}}
        @if($calculation)
        <div class="row mb-1">
            <div class="col-lg-3 col-md-6 col-sm-6 col-12">
                <div class="card tds-summary-card">
                    <div class="card-body p-1">
                        <h4 class="mb-0 text-primary">&#8377; {{ number_format($calculation->total_tax, 0) }}</h4>
                        <p class="text-muted mb-0">Total Tax Liability</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6 col-12">
                <div class="card tds-summary-card" style="border-left-color: #28c76f;">
                    <div class="card-body p-1">
                        <h4 class="mb-0 text-success">&#8377; {{ number_format($calculation->tax_already_deducted, 0) }}</h4>
                        <p class="text-muted mb-0">TDS Deducted Till Date</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6 col-12">
                <div class="card tds-summary-card" style="border-left-color: #ff9f43;">
                    <div class="card-body p-1">
                        <h4 class="mb-0 text-warning">&#8377; {{ number_format($calculation->remaining_tax, 0) }}</h4>
                        <p class="text-muted mb-0">Remaining Tax</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6 col-12">
                <div class="card tds-summary-card" style="border-left-color: #00cfe8;">
                    <div class="card-body p-1">
                        <h4 class="mb-0 text-info">&#8377; {{ number_format($calculation->monthly_tds, 0) }}</h4>
                        <p class="text-muted mb-0">Monthly TDS</p>
                    </div>
                </div>
            </div>
        </div>
        @endif

        {{-- Month-wise Breakdown --}}
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h4 class="card-title mb-0">Month-wise TDS Deduction</h4>
                        <a href="/member/{{ $alias }}/tdx/dashboard" class="btn btn-outline-secondary btn-sm">
                            <i class="fa fa-arrow-left"></i> Dashboard
                        </a>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Month</th>
                                        <th class="text-end">Gross Salary (&#8377;)</th>
                                        <th class="text-end">TDS Deducted (&#8377;)</th>
                                        <th class="text-end">Cumulative TDS (&#8377;)</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @php $totalTds = 0; @endphp
                                    @forelse($monthlyTds as $index => $monthly)
                                        @php $totalTds += $monthly->tds_amount; @endphp
                                        <tr>
                                            <td>{{ $index + 1 }}</td>
                                            <td><strong>{{ $monthly->month_name }} {{ $monthly->year }}</strong></td>
                                            <td class="text-end">{{ number_format($monthly->gross_salary, 0) }}</td>
                                            <td class="text-end">{{ number_format($monthly->tds_amount, 0) }}</td>
                                            <td class="text-end">{{ number_format($monthly->cumulative_tds, 0) }}</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>
                                    @empty
                                        <tr>
                                            <td colspan="6" class="text-center p-4">
                                                <i class="fa fa-calendar-o fa-2x text-muted"></i>
                                                <p class="mt-1">No TDS deductions recorded yet for FY {{ $fy }}.</p>
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                                @if($monthlyTds->count() > 0)
                                    <tfoot>
                                        <tr class="table-active">
                                            <td colspan="3" class="text-end"><strong>Total TDS Deducted:</strong></td>
                                            <td class="text-end"><strong>&#8377; {{ number_format($totalTds, 0) }}</strong></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                    </tfoot>
                                @endif
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Note --}}
        <div class="row">
            <div class="col-12">
                <div class="alert alert-info">
                    <div class="alert-body">
                        <i class="fa fa-info-circle"></i>
                        TDS is calculated based on your investment declaration. If you update your declaration, the monthly TDS will be recalculated for the remaining months.
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection