@extends('app-new')

@push('head-script')
    <link rel="stylesheet" type="text/css" href="/app-assets/css/components.css">
@endpush

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

@section('content')
    <section id="tdx-monthly-breakdown">
        {{-- Employee Header --}}
        @if($employee)
            <div class="row mb-2">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body py-1">
                            <h5 class="mb-0">{{ $employee->name }} - Monthly TDS for FY {{ $fy }}</h5>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Month-wise TDS Deduction</h4>
                    </div>
                    <div class="card-datatable">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Month</th>
                                    <th>Gross Salary</th>
                                    <th>TDS Amount</th>
                                    <th>Cumulative TDS</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>{{ $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>
                                @empty
                                    <tr>
                                        <td colspan="6" class="text-center py-2">No monthly breakdown available.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                            @if($monthlyTds->count() > 0)
                                <tfoot>
                                    <tr class="fw-bold" style="background-color: #f8f8f8;">
                                        <td colspan="3" class="text-end">Total TDS for Year:</td>
                                        <td>&#8377; {{ number_format($totalTds, 2) }}</td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                </tfoot>
                            @endif
                        </table>
                    </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