@extends('app-new')

@push('head-script')
<link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/forms/select/select2.min.css">
<style>
    /* Header spans full width (base layout caps it at col-md-9) so actions reach the top-right */
    .content-header .content-header-left { flex: 0 0 100%; max-width: 100%; width: 100%; }
    #tdsReport { font-size: 0.85rem; margin-bottom: 0; }
    #tdsReport thead th {
        font-weight: 600; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em;
        color: #82868b; background: transparent; border: 0; border-bottom: 1.5px solid #ebe9f1;
        padding: 0.6rem 0.75rem; white-space: nowrap;
    }
    #tdsReport tbody td { border: 0; border-bottom: 1px solid #f4f3f8; padding: 0.6rem 0.75rem; vertical-align: middle; color: #5e5873; white-space: nowrap; }
    #tdsReport tbody tr:hover { background: #fafafe; }
    #tdsReport .amt { font-variant-numeric: tabular-nums; text-align: right; }
    #tdsReport tfoot td { border: 0; border-top: 1.5px solid #ebe9f1; padding: 0.6rem 0.75rem; font-weight: 600; color: #4b465c; }
    .oc-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: #b9b9c3; font-weight: 600; margin-bottom: 0.35rem; }
    .filter-chip { font-size: 0.72rem; }
</style>
@endpush

@push('content-header')
<div class="row breadcrumbs-top">
    <div class="col-12 d-flex align-items-center gap-2">
        <h2 class="content-header-title mb-0 text-nowrap">Monthly TDS Report</h2>
        <div class="breadcrumb-wrapper flex-grow-1">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a href="{{ url('') }}/{{ $alias }}/home">Home</a></li>
                <li class="breadcrumb-item"><a href="{{ url('') }}/{{ $alias }}/tdx/dashboard">TDS</a></li>
                <li class="breadcrumb-item active">Monthly TDS</li>
            </ol>
        </div>
        <div class="d-flex flex-row-reverse gap-1 ms-auto text-nowrap">
            <a href="{{ url('') }}/{{ $alias }}/tdx/reports/monthly-tds/export?{{ http_build_query(array_merge(request()->except(['page']), ['fy_id' => $fy->id ?? null])) }}"
               class="btn btn-success btn-sm">
                <i data-feather="download" class="me-25" style="width:14px;height:14px;"></i> Excel
            </a>
            <button class="btn btn-outline-primary btn-sm" type="button" data-bs-toggle="offcanvas" data-bs-target="#tdsFilterCanvas">
                <i data-feather="sliders" class="me-25" style="width:14px;height:14px;"></i> Filters
            </button>
        </div>
    </div>
</div>
@endpush

@section('content')
@php
    $offset = ($data->currentPage() - 1) * $data->perPage();
    $activeFilters = collect([
        request('employee_id'), request('department_id'), request('designation_id'),
        request('category_id'), request('grade_id'),
    ])->filter(fn($v) => !empty($v))->count();
    $pendingOnPage = collect($data->items())->where('is_pending', true)->count();
@endphp

<section id="tdx-monthly-report" class="mb-3 pb-2">

    @foreach(['status' => 'success', 'error' => 'danger'] as $key => $variant)
        @if(session($key))
            <div class="alert alert-{{ $variant }} alert-dismissible fade show" role="alert">
                <div class="alert-body">{{ session($key) }}</div>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif
    @endforeach

    <div class="card">
        <div class="card-body">

            <div class="tds-toolbar d-flex align-items-center justify-content-between flex-wrap gap-1 mb-1">
                <div class="d-flex align-items-center gap-1">
                    <span class="text-muted small">FY {{ $fy->label ?? 'N/A' }}</span>
                    @if($activeFilters > 0)
                        <a href="?fy_id={{ $fy->id ?? '' }}" class="badge badge-light-danger border-0 text-decoration-none filter-chip">
                            {{ $activeFilters }} filter{{ $activeFilters > 1 ? 's' : '' }} active &times;
                        </a>
                    @endif
                </div>

                <div class="d-flex align-items-center flex-wrap gap-1">
                    @if(($missingCount ?? 0) > 0)
                        <form method="POST" action="{{ url('') }}/{{ $alias }}/tdx/calculations/auto-create-defaults"
                              onsubmit="return confirm('Generate a New-Regime declaration for {{ $missingCount }} employee(s) without one for FY {{ $fy->label ?? '' }}? Only employees with an active CTC will be processed.');">
                            @csrf
                            <button type="submit" class="btn btn-primary btn-sm">
                                <i data-feather="zap" class="me-25" style="width:14px;height:14px;"></i>
                                Generate New-Regime ({{ $missingCount }})
                            </button>
                        </form>
                    @endif
                    @if($data->total() > 0)
                        <span class="text-muted small">As of</span>
                        <select id="recalcAsOfMonth" class="form-select form-select-sm" style="width:auto" title="Month to treat as 'current' when recalculating">
                            @foreach(['January','February','March','April','May','June','July','August','September','October','November','December'] as $i => $name)
                                <option value="{{ $i + 1 }}" @selected(($i + 1) == now()->month)>{{ $name }}</option>
                            @endforeach
                        </select>
                        <input type="number" id="recalcAsOfYear" class="form-control form-control-sm" style="width:80px" value="{{ now()->year }}">
                        <a href="#" id="btnRecalculateAll"
                           data-base-url="{{ url('') }}/{{ $alias }}/tdx/calculations/calculate-all?fy_id={{ $fy->id ?? '' }}"
                           data-fy-label="{{ $fy->label ?? '' }}"
                           class="btn btn-outline-warning btn-sm">
                            <i data-feather="refresh-cw" class="me-25" style="width:14px;height:14px;"></i>
                            Recalculate All
                        </a>
                        <span class="vr mx-25"></span>
                        <button type="button" class="btn btn-outline-success btn-sm" id="btnApprove" disabled>
                            <i data-feather="check-circle" class="me-25" style="width:14px;height:14px;"></i>
                            <span id="btnApproveLabel">Approve Selected (0)</span>
                        </button>
                    @endif
                </div>
            </div>

            {{-- Gmail-style: when the whole page is selected, offer to extend to all pending matching the filters --}}
            <div id="selectAllBanner" class="alert alert-light-primary border-0 text-center py-50 px-1 mb-1 d-none small" role="alert">
                <span id="selectAllBannerText"></span>
                <a href="#" id="selectAllToggle" class="fw-bold text-primary text-decoration-none ms-1"></a>
            </div>

            {{-- Approve-all (filtered) — submitted by the merged button when no rows are selected --}}
            <form method="POST" id="approveAllForm" class="d-none"
                  action="{{ url('') }}/{{ $alias }}/tdx/reports/monthly-tds/approve-all?{{ http_build_query(array_merge(request()->except(['page']), ['fy_id' => $fy->id ?? null])) }}">
                @csrf
            </form>

            <form method="POST" id="approveForm"
                  action="{{ url('') }}/{{ $alias }}/tdx/reports/monthly-tds/approve?{{ http_build_query(request()->except(['page', 'declaration_id'])) }}">
                @csrf
            <div class="table-responsive">
                <table class="table" id="tdsReport">
                    <thead>
                        <tr>
                            <th><input type="checkbox" id="checkAll" title="Select all pending on this page"></th>
                            <th>#</th>
                            <th>Employee</th>
                            <th class="text-center">Status</th>
                            <th class="text-center">Regime</th>
                            <th class="text-end">Projected Salary</th>
                            <th class="text-end">Total Tax</th>
                            @foreach($monthCols as $c)
                                <th class="text-end">{{ $c['label'] }}</th>
                            @endforeach
                            <th class="text-end">Total TDS</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($data as $row)
                        <tr>
                            <td>
                                @if($row['is_pending'])
                                    <input type="checkbox" class="rowCheck" name="declaration_id[]" value="{{ $row['declaration_id'] }}">
                                @endif
                            </td>
                            <td class="text-muted">{{ $offset + $loop->iteration }}</td>
                            <td class="fw-semibold">
                                {{ $row['emp_name'] }}
                                @if($row['employee_code'])<small class="text-muted d-block">{{ $row['employee_code'] }}</small>@endif
                            </td>
                            <td class="text-center">
                                @if($row['is_pending'])
                                    <span class="badge badge-light-warning">Pending</span>
                                @else
                                    <span class="badge badge-light-success">Approved</span>
                                @endif
                            </td>
                            <td class="text-center">
                                <span class="badge badge-light-{{ $row['regime'] === 'OLD' ? 'primary' : 'success' }}">{{ $row['regime'] }}</span>
                            </td>
                            <td class="amt">{{ number_format($row['projected_salary'], 0) }}</td>
                            <td class="amt">{{ number_format($row['total_tax'], 0) }}</td>
                            @foreach($monthCols as $c)
                                <td class="amt">{{ ($row['months'][$c['key']] ?? 0) > 0 ? number_format($row['months'][$c['key']], 0) : '—' }}</td>
                            @endforeach
                            @php $overDeducted = $row['total_tds'] > $row['total_tax']; @endphp
                            <td class="amt fw-semibold {{ $overDeducted ? 'text-danger' : 'text-success' }}" @if($overDeducted) title="TDS deducted exceeds total tax due" @endif>
                                {{ number_format($row['total_tds'], 0) }}
                                @if($overDeducted)<i data-feather="alert-triangle" class="ms-25" style="width:12px;height:12px;"></i>@endif
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="{{ 8 + count($monthCols) }}" class="text-center text-muted py-3">
                                No TDS calculations found for FY {{ $fy->label ?? 'N/A' }}.
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            </form>

            @if($data->total() > 0)
            <div class="d-flex justify-content-end mt-1">
                {{ $data->links('pagination::bootstrap-5') }}
            </div>
            @endif

        </div>
    </div>
</section>

{{-- ===================== Filter offcanvas ===================== --}}
<div class="offcanvas offcanvas-end" tabindex="-1" id="tdsFilterCanvas" style="width:340px">
    <div class="offcanvas-header border-bottom py-1">
        <h5 class="offcanvas-title mb-0">Filters</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
    </div>

    <form method="get" action="" class="d-flex flex-column flex-grow-1" style="min-height:0">
    <div class="offcanvas-body px-2 py-2 flex-grow-1" style="overflow-y:auto;min-height:0">

        <div class="mb-1">
            <div class="oc-label">Financial Year</div>
            <select class="select2-oc form-select form-select-sm" name="fy_id">
                @foreach($financialYears as $year)
                    <option value="{{ $year->id }}" @selected(($fy->id ?? null) == $year->id)>{{ $year->label }}</option>
                @endforeach
            </select>
        </div>

        <div class="mb-1">
            <div class="oc-label">Employee (name / code)</div>
            <select id="oc-employee-select" name="employee_id[]" class="form-select form-select-sm" multiple style="width:100%">
                @foreach($selectedEmployees as $emp)
                    <option value="{{ $emp->id }}" selected>{{ $emp->name }}{{ $emp->employee_code ? ' ('.$emp->employee_code.')' : '' }}</option>
                @endforeach
            </select>
        </div>

        <div class="mb-1">
            <div class="oc-label">Department</div>
            <select class="select2-oc-multi form-select form-select-sm" name="department_id[]" multiple>
                @foreach($departments as $d)
                    <option value="{{ $d->id }}" @selected(in_array($d->id, (array) request('department_id')))>{{ $d->name }}</option>
                @endforeach
            </select>
        </div>

        <div class="mb-1">
            <div class="oc-label">Designation</div>
            <select class="select2-oc-multi form-select form-select-sm" name="designation_id[]" multiple>
                @foreach($designations as $dg)
                    <option value="{{ $dg->id }}" @selected(in_array($dg->id, (array) request('designation_id')))>{{ $dg->name }}</option>
                @endforeach
            </select>
        </div>

        <div class="mb-1">
            <div class="oc-label">Category</div>
            <select class="select2-oc-multi form-select form-select-sm" name="category_id[]" multiple>
                @foreach($categories as $cat)
                    <option value="{{ $cat->id }}" @selected(in_array($cat->id, (array) request('category_id')))>{{ $cat->name }}</option>
                @endforeach
            </select>
        </div>

        <div class="mb-1">
            <div class="oc-label">Grade</div>
            <select class="select2-oc-multi form-select form-select-sm" name="grade_id[]" multiple>
                @foreach($grades as $g)
                    <option value="{{ $g->id }}" @selected(in_array($g->id, (array) request('grade_id')))>{{ $g->name }}</option>
                @endforeach
            </select>
        </div>

    </div>

    <div class="offcanvas-footer border-top d-flex gap-1 p-1">
        <button type="submit" class="btn btn-primary btn-sm flex-fill">Apply</button>
        <a href="?fy_id={{ $fy->id ?? '' }}" class="btn btn-outline-secondary btn-sm flex-fill">Reset</a>
    </div>
    </form>
</div>

@endsection

@push('footer-script')
<script src="/app-assets/vendors/js/forms/select/select2.full.min.js"></script>
<script>
$(document).ready(function () {
    if (typeof feather !== 'undefined') feather.replace();

    $('#btnRecalculateAll').on('click', function (e) {
        e.preventDefault();
        const month = $('#recalcAsOfMonth').val();
        const year = $('#recalcAsOfYear').val();
        const monthLabel = $('#recalcAsOfMonth option:selected').text();
        const baseUrl = $(this).data('base-url');
        const fyLabel = $(this).data('fy-label');

        if (confirm(`Recalculate tax for all draft & provisional declarations in FY ${fyLabel}, as of ${monthLabel} ${year}? Final (locked) declarations are skipped.`)) {
            window.location.href = `${baseUrl}&month=${month}&year=${year}`;
        }
    });

    function initOcSelects() {
        $('.select2-oc').each(function () {
            $(this).select2({ dropdownParent: $('#tdsFilterCanvas'), minimumResultsForSearch: Infinity });
        });
        $('.select2-oc-multi').each(function () {
            $(this).select2({ dropdownParent: $('#tdsFilterCanvas'), placeholder: '— All —', allowClear: true });
        });
    }
    function initEmployeeSelect2() {
        $('#oc-employee-select').select2({
            dropdownParent: $('#tdsFilterCanvas'),
            placeholder: 'Search by name or code…',
            minimumInputLength: 1,
            allowClear: true,
            ajax: {
                url: '/ajax/hod-list', dataType: 'json', delay: 250,
                data: function (params) { return { alias: '{{ $alias }}', search: params.term, only_current_organization: true }; },
                processResults: function (data) {
                    return { results: $.map(data.data, function (item) {
                        return { id: item.id, text: item.name + (item.employee_code ? ' (' + item.employee_code + ')' : '') };
                    }) };
                },
                cache: true
            }
        });
    }

    document.getElementById('tdsFilterCanvas').addEventListener('shown.bs.offcanvas', function () {
        $('.select2-oc, .select2-oc-multi').each(function () { if ($(this).data('select2')) $(this).select2('destroy'); });
        initOcSelects();
        if (!$('#oc-employee-select').data('select2')) initEmployeeSelect2();
        if (typeof feather !== 'undefined') feather.replace();
    });

    initOcSelects();
    initEmployeeSelect2();

    // --- Gmail-style approval selection ---
    // Header checkbox selects the page; when the whole page is selected a banner
    // offers to extend the selection to ALL pending matching the filters. One
    // merged button approves whichever scope is active.
    var filteredMode = false;
    var pendingTotal = {{ (int) ($pendingTotal ?? 0) }};

    function pageState() {
        var total   = $('.rowCheck').length;
        var checked = $('.rowCheck:checked').length;
        return { total: total, checked: checked, allPage: total > 0 && checked === total };
    }

    function refreshApprove() {
        var s = pageState();

        // Cross-page banner
        if (s.allPage) {
            if (filteredMode) {
                $('#selectAllBannerText').text('All ' + pendingTotal + ' pending declaration(s) matching the current filters are selected.');
                $('#selectAllToggle').text('Clear selection');
            } else {
                $('#selectAllBannerText').text('All ' + s.checked + ' pending on this page are selected.');
                $('#selectAllToggle').text('Select all ' + pendingTotal + ' pending matching the filters');
            }
            $('#selectAllBanner').removeClass('d-none');
        } else {
            filteredMode = false;
            $('#selectAllBanner').addClass('d-none');
        }

        // Merged button: disabled until something is selected; shows the count to approve.
        if (filteredMode) {
            $('#btnApproveLabel').text('Approve All (' + pendingTotal + ')');
        } else if (s.checked > 0) {
            $('#btnApproveLabel').text('Approve Selected (' + s.checked + ')');
        } else {
            $('#btnApproveLabel').text('Approve Selected (0)');
        }

        var active = filteredMode || s.checked > 0;
        $('#btnApprove')
            .prop('disabled', !active)
            .toggleClass('btn-success', active)
            .toggleClass('btn-outline-success', !active);
    }

    $('#checkAll').on('change', function () {
        $('.rowCheck').prop('checked', this.checked);
        filteredMode = false;
        refreshApprove();
    });
    $(document).on('change', '.rowCheck', function () {
        var s = pageState();
        $('#checkAll').prop('checked', s.allPage);
        filteredMode = false;
        refreshApprove();
    });
    $('#selectAllToggle').on('click', function (e) {
        e.preventDefault();
        if (filteredMode) {
            filteredMode = false;
            $('.rowCheck, #checkAll').prop('checked', false);
        } else {
            filteredMode = true;
        }
        refreshApprove();
    });
    $('#btnApprove').on('click', function () {
        var s = pageState();
        if (filteredMode || s.checked === 0) {
            if (confirm('Approve ALL pending declarations matching the current filters?')) {
                $('#approveAllForm').trigger('submit');
            }
        } else {
            if (confirm('Approve the ' + s.checked + ' selected declaration(s)?')) {
                $('#approveForm').trigger('submit');
            }
        }
    });
    refreshApprove();
});
</script>
@endpush