@extends('app-new')

@push('head-script')
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/tables/datatable/dataTables.bootstrap5.min.css">
    <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">Tax Calculations</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 active">Calculations</li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@section('content')
    <section id="tdx-calculations">
        {{-- Flash Messages --}}
        <div class="row">
            <div class="col-12">
                @if(session('status'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        <div class="alert-body">{{ session('status') }}</div>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif
            </div>
        </div>

        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header border-bottom p-1">
                        <div class="head-label">
                            <h6 class="mb-0">Tax Calculations - FY {{ $fy }}</h6>
                        </div>
                        <div class="dt-action-buttons text-end">
                            <div class="dt-buttons d-inline-flex">
                                <div class="form-label-group me-2">
                                    <form>
                                        <input type="text" name="search" placeholder="Search" id="search"
                                            class="form-control" value="{{ request('search') }}">
                                    </form>
                                </div>
                                <button class="dt-button btn btn-primary btn-sm me-2" type="button"
                                    data-bs-toggle="offcanvas" data-bs-target="#offcanvasEnd" aria-controls="offcanvasEnd">
                                    <i data-feather='filter'></i>
                                </button>
                                <button type="button" class="btn btn-outline-primary btn-sm" id="btnRecalculateAll">
                                    <i data-feather="refresh-cw"></i> Recalculate All
                                </button>
                                <button type="button" class="btn btn-outline-success btn-sm ms-50" id="btnAutoCreateDefaults">
                                    <i data-feather="user-plus"></i> Auto-Create Missing
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="card-datatable">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Employee</th>
                                    <th>Regime</th>
                                    <th>Gross Income</th>
                                    <th>Total Deductions</th>
                                    <th>Taxable Income</th>
                                    <th>Total Tax</th>
                                    <th>Monthly TDS</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($calculations as $index => $calc)
                                    <tr>
                                        <td>{{ $calculations->firstItem() + $index }}</td>
                                        <td>{{ $calc->employee->name ?? 'N/A' }}</td>
                                        <td>
                                            <span class="badge badge-light-{{ $calc->regime === 'old' ? 'primary' : 'success' }}">
                                                {{ ucfirst($calc->regime) }}
                                            </span>
                                        </td>
                                        <td>&#8377; {{ number_format($calc->gross_income, 0) }}</td>
                                        <td>&#8377; {{ number_format($calc->total_deductions, 0) }}</td>
                                        <td>&#8377; {{ number_format($calc->taxable_income, 0) }}</td>
                                        <td>
                                            <strong class="{{ $calc->total_tax > 0 ? 'text-danger' : 'text-success' }}">
                                                &#8377; {{ number_format($calc->total_tax, 0) }}
                                            </strong>
                                        </td>
                                        <td>&#8377; {{ number_format($calc->monthly_tds, 0) }}</td>
                                        <td>
                                            <div class="d-flex">
                                                <a href="/{{ $alias }}/tdx/calculations/{{ $calc->id }}/show"
                                                   class="btn btn-sm btn-outline-primary me-50" title="View Details">
                                                    <i data-feather="eye" class="font-small-4"></i>
                                                </a>
                                                <a href="/{{ $alias }}/tdx/calculations/compare/{{ $calc->employee_id }}"
                                                   class="btn btn-sm btn-outline-info me-50" title="Compare Regimes">
                                                    <i data-feather="bar-chart-2" class="font-small-4"></i>
                                                </a>
                                                <a href="/{{ $alias }}/tdx/calculations/monthly/{{ $calc->employee_id }}"
                                                   class="btn btn-sm btn-outline-warning" title="Monthly Breakdown">
                                                    <i data-feather="calendar" class="font-small-4"></i>
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="9" class="text-center py-2">No calculations found. Create declarations first, then calculate tax.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                    @if($calculations->hasPages())
                        <div class="card-footer">
                            <div class="d-flex justify-content-center">
                                {{ $calculations->links() }}
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </section>

    {{-- Offcanvas Filter --}}
    <form method="get" id="filter-form">
        <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasEnd" aria-labelledby="offcanvasEndLabel">
            <div class="offcanvas-header">
                <h5 id="offcanvasEndLabel" class="offcanvas-title">Filter</h5>
                <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
            </div>
            <div class="offcanvas-body">
                <div class="row">
                    <div class="col-md-12">
                        <label class="form-label">Employee</label>
                        <select name="employee_id" class="form-control mb-2">
                            <option value="">All</option>
                            @foreach($employees as $employee)
                                <option value="{{ $employee->id }}" @if(request('employee_id')==$employee->id) selected @endif>{{ $employee->name }} ({{ $employee->employee_code }})</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-12">
                        <label class="form-label">Employee Type</label>
                        <select name="employee_type" class="form-control mb-2">
                            <option value="">All</option>
                            <option value="employee" @if(request('employee_type')=='employee') selected @endif>Employee</option>
                            <option value="workman" @if(request('employee_type')=='workman') selected @endif>Workman</option>
                        </select>
                    </div>
                    <div class="col-md-12">
                        <label class="form-label">Department</label>
                        <select name="department_id" class="form-control mb-2">
                            <option value="">All</option>
                            @foreach($departments as $department)
                                <option value="{{ $department->id }}" @if(request('department_id')==$department->id) selected @endif>{{ $department->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-12">
                        <label class="form-label">Designation</label>
                        <select name="designation_id" class="form-control mb-2">
                            <option value="">All</option>
                            @foreach($designations as $designation)
                                <option value="{{ $designation->id }}" @if(request('designation_id')==$designation->id) selected @endif>{{ $designation->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-12">
                        <label class="form-label">Regime</label>
                        <select name="regime" class="form-control mb-2">
                            <option value="">All</option>
                            <option value="old" @if(request('regime')=='old') selected @endif>Old</option>
                            <option value="new" @if(request('regime')=='new') selected @endif>New</option>
                        </select>
                    </div>
                </div>
                <button type="submit" class="btn btn-primary mt-2 mb-1 d-grid w-100 d-flex justify-content-center"
                    data-bs-dismiss="offcanvas" aria-label="Close">
                    <i data-feather='search' class="me-2"></i>Apply
                </button>
            </div>
        </div>
    </form>
@endsection

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

            $('#btnRecalculateAll').on('click', function () {
                const btn = $(this);
                btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-50"></span> Loading...');

                $.get('/{{ $alias }}/tdx/calculations/declaration-counts')
                    .done(function (data) {
                        btn.prop('disabled', false).html('<i data-feather="refresh-cw"></i> Recalculate All');
                        if (feather) feather.replace();

                        if (data.eligible === 0) {
                            let msg = 'No eligible declarations found to recalculate.';
                            if (data.final_active > 0) {
                                msg = `All ${data.final_active} declaration(s) are final & approved. No recalculation needed.`;
                            }
                            Swal.fire('No Recalculation Needed', msg, 'info');
                            return;
                        }

                        let details = '';
                        if (data.draft > 0) details += `<p class="mb-50"><span class="badge badge-light-warning me-50">${data.draft}</span> Draft declaration(s)</p>`;
                        if (data.provisional_active > 0) details += `<p class="mb-50"><span class="badge badge-light-primary me-50">${data.provisional_active}</span> Provisional (approved) declaration(s)</p>`;
                        if (data.final_active > 0) details += `<p class="mb-50 text-muted"><span class="badge badge-light-secondary me-50">${data.final_active}</span> Final (approved) — <em>will be skipped</em></p>`;

                        const monthNames = ['January', 'February', 'March', 'April', 'May', 'June',
                            'July', 'August', 'September', 'October', 'November', 'December'];
                        const now = new Date();
                        const currentMonth = now.getMonth() + 1;
                        const currentYear = now.getFullYear();
                        let monthOptions = '';
                        monthNames.forEach((name, idx) => {
                            const m = idx + 1;
                            monthOptions += `<option value="${m}" ${m === currentMonth ? 'selected' : ''}>${name}</option>`;
                        });

                        Swal.fire({
                            title: 'Recalculate Tax',
                            html: `
                                <div class="text-start">
                                    ${details}
                                    <hr>
                                    <p><strong>${data.eligible}</strong> declaration(s) will be recalculated.</p>
                                    <small class="text-muted">Final approved declarations are locked and will not be affected.</small>
                                    <hr>
                                    <label class="form-label mb-50" for="recalcAsOfMonth">Calculate "as of" month</label>
                                    <small class="text-muted d-block mb-50">E.g. pick July if today is 1 Aug and July's payslips aren't finalized yet.</small>
                                    <div class="d-flex gap-1">
                                        <select id="recalcAsOfMonth" class="form-select form-select-sm">${monthOptions}</select>
                                        <input type="number" id="recalcAsOfYear" class="form-control form-control-sm" value="${currentYear}" style="max-width: 100px;">
                                    </div>
                                </div>
                            `,
                            icon: 'question',
                            showCancelButton: true,
                            confirmButtonText: 'Recalculate',
                            confirmButtonColor: '#7367f0',
                            cancelButtonText: 'Cancel',
                        }).then((result) => {
                            if (result.isConfirmed) {
                                const month = $('#recalcAsOfMonth').val();
                                const year = $('#recalcAsOfYear').val();
                                window.location.href = `/{{ $alias }}/tdx/calculations/calculate-all?month=${month}&year=${year}`;
                            }
                        });
                    })
                    .fail(function () {
                        btn.prop('disabled', false).html('<i data-feather="refresh-cw"></i> Recalculate All');
                        if (feather) feather.replace();
                        Swal.fire('Error', 'Failed to fetch declaration counts.', 'error');
                    });
            });

            // ========== AUTO-CREATE MISSING DECLARATIONS ==========
            $('#btnAutoCreateDefaults').on('click', function () {
                const btn = $(this);
                btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-50"></span> Checking...');

                $.get('/{{ $alias }}/tdx/calculations/missing-count')
                    .done(function (data) {
                        btn.prop('disabled', false).html('<i data-feather="user-plus"></i> Auto-Create Missing');
                        if (feather) feather.replace();

                        if (data.missing === 0) {
                            Swal.fire('All Set!', `All ${data.total_active} active employee(s) already have declarations.`, 'success');
                            return;
                        }

                        Swal.fire({
                            title: 'Auto-Create Default Declarations',
                            html: `
                                <div class="text-start">
                                    <p class="mb-50"><span class="badge badge-light-primary me-50">${data.total_active}</span> Total active employees</p>
                                    <p class="mb-50"><span class="badge badge-light-success me-50">${data.with_declaration}</span> Already have declarations</p>
                                    <p class="mb-50"><span class="badge badge-light-danger me-50">${data.missing}</span> Missing declarations</p>
                                    <hr>
                                    <p><strong>${data.missing}</strong> employee(s) will get a default declaration:</p>
                                    <ul class="text-muted" style="font-size: 0.9rem;">
                                        <li>New Regime (no deductions)</li>
                                        <li>CTC auto-fetched from payroll</li>
                                        <li>Provisional type</li>
                                        <li>Tax auto-calculated</li>
                                    </ul>
                                    <small class="text-muted">Employees can later edit their declarations to change regime or add investments.</small>
                                </div>
                            `,
                            icon: 'question',
                            showCancelButton: true,
                            confirmButtonText: 'Create & Calculate',
                            confirmButtonColor: '#28c76f',
                            cancelButtonText: 'Cancel',
                        }).then((result) => {
                            if (result.isConfirmed) {
                                btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-50"></span> Creating...');
                                // POST form submit
                                var form = $('<form>', { method: 'POST', action: '/{{ $alias }}/tdx/calculations/auto-create-defaults' });
                                form.append($('<input>', { type: 'hidden', name: '_token', value: '{{ csrf_token() }}' }));
                                $('body').append(form);
                                form.submit();
                            }
                        });
                    })
                    .fail(function () {
                        btn.prop('disabled', false).html('<i data-feather="user-plus"></i> Auto-Create Missing');
                        if (feather) feather.replace();
                        Swal.fire('Error', 'Failed to fetch missing count.', 'error');
                    });
            });
        });
    </script>
@endpush