@extends('admin.layouts.app')
@section('title', get_setting('site_name').' | Advance Salary')
@section('content')
    <style>
        .as-wrap .card { border-radius: 14px; border: 1px solid #edf0f6; box-shadow: 0 0.125rem 0.5rem rgba(15, 23, 42, 0.04); }
        .as-wrap .card-header { background: #fff; border-bottom: 1px solid #edf0f6; font-weight: 700; }
        .as-filters { background: #f8fafc; border-bottom: 1px solid #edf0f6; padding: 14px 16px; }
        .as-filters label { font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: rgba(15,23,42,.55); margin-bottom: 6px; }
        .as-filters .form-group { margin-bottom: 10px; }
        @media (min-width: 992px) { .as-filters .form-group { margin-bottom: 0; } }
        .as-filters .select2-container { width: 100% !important; }
        .as-filters .select2-selection__rendered { line-height: 31px !important; }
        .as-filters .select2-container .select2-selection--single { height: 38px !important; }
        .as-filters .select2-selection__arrow { height: 36px !important; }
        .as-stat { background: #fff; border: 1px solid #edf0f6; border-radius: 10px; padding: 10px 14px; text-align: center; height: 100%; }
        .as-stat .num { font-size: 1.25rem; font-weight: 800; line-height: 1.2; }
        .as-stat .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #64748b; }
        .as-table thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: rgba(15,23,42,.65); border-top: 0; white-space: nowrap; }
        .as-table tbody td { vertical-align: middle; }
        .as-staff-cell { font-weight: 600; max-width: 260px; }
        .as-action-btns { display: inline-flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
        .as-badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; }
        .as-badge.approved { background: rgba(34,197,94,.12); color: #166534; }
        .as-badge.pending { background: rgba(245,158,11,.12); color: #b45309; }
        .as-badge.rejected { background: rgba(239,68,68,.12); color: #991b1b; }
        .as-money { font-variant-numeric: tabular-nums; white-space: nowrap; }
        .as-modal .modal-content { border: none; border-radius: 12px; box-shadow: 0 0.5rem 2rem rgba(15, 23, 42, 0.15); }
        .as-modal .modal-header, .as-modal .modal-footer { border-color: #edf0f6; }
        .as-modal-label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: rgba(15,23,42,.55); margin-bottom: 6px; }
        .as-modal-section { background: #f8fafc; border: 1px solid #edf0f6; border-radius: 10px; padding: 14px; margin-bottom: 14px; }
        .as-modal-section-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: rgba(15,23,42,.55); margin-bottom: 10px; }
        .loading-overlay { display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); z-index: 9999; }
        .loading-overlay .spinner { border: 4px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; width: 50px; height: 50px; animation: as-spin 1s linear infinite; position: absolute; top: 50%; left: 50%; margin: -25px 0 0 -25px; }
        @keyframes as-spin { to { transform: rotate(360deg); } }
    </style>

    <div class="container-fluid as-wrap">
        <div class="row mt-3">
            <div class="col-12 d-flex flex-wrap justify-content-between align-items-center mb-3">
                <div>
                    <h4 class="page-title mb-0">Advance Salary</h4>
                    <p class="text-muted mb-0">Manage advance salary applications, approvals, and payment schedules.</p>
                </div>
                <div class="d-flex flex-wrap gap-2">
                    <button type="button" class="btn btn-primary" onclick="advance_salary()">
                        <i class="fas fa-plus"></i> Add New
                    </button>
                    <a href="{{ route('employee.advance.salary.export') }}" class="btn btn-outline-primary">
                        <i class="fas fa-file-export"></i> Export
                    </a>
                </div>
            </div>

            @if (session()->has('message'))
                <div class="col-12"><div class="alert alert-success">{{ session('message') }}</div></div>
            @endif
            @if (session()->has('error'))
                <div class="col-12"><div class="alert alert-danger">{{ session('error') }}</div></div>
            @endif

            <div class="col-12 mb-3">
                <div class="form-row">
                    <div class="col-6 col-md-3 mb-2">
                        <div class="as-stat"><div class="num text-primary">{{ (int) ($advanceStats->total ?? 0) }}</div><div class="lbl">Total</div></div>
                    </div>
                    <div class="col-6 col-md-3 mb-2">
                        <div class="as-stat"><div class="num text-warning">{{ (int) ($advanceStats->pending ?? 0) }}</div><div class="lbl">Pending</div></div>
                    </div>
                    <div class="col-6 col-md-3 mb-2">
                        <div class="as-stat"><div class="num text-success">{{ (int) ($advanceStats->approved ?? 0) }}</div><div class="lbl">Approved</div></div>
                    </div>
                    <div class="col-6 col-md-3 mb-2">
                        <div class="as-stat"><div class="num text-danger">{{ (int) ($advanceStats->rejected ?? 0) }}</div><div class="lbl">Rejected</div></div>
                    </div>
                </div>
            </div>

            <div class="col-12">
                <div class="card">
                    <div class="card-header d-flex flex-wrap align-items-center justify-content-between">
                        <span>Filters</span>
                        <a href="{{ route('advance.salary') }}" class="btn btn-sm btn-outline-secondary">Clear Filters</a>
                    </div>
                    <form action="" method="get">
                        <div class="as-filters">
                            <div class="form-row align-items-end">
                                <div class="form-group col-md-6 col-lg-3">
                                    <label>Staff</label>
                                    <select name="staff_id" class="form-control select2">
                                        <option value="">All Employees</option>
                                        @foreach($staffList as $staff)
                                            <option value="{{ $staff->id }}" @selected((string) request('staff_id') === (string) $staff->id)>
                                                {{ $staff->user?->name ?? 'Staff #'.$staff->id }}({{ $staff->user_id }})-{{ $staff->designation?->name ?? 'No Designation' }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group col-6 col-md-3 col-lg-2">
                                    <label>Year</label>
                                    <select name="year" class="form-control select2">
                                        <option value="">All</option>
                                        @for($i = 2020; $i <= date('Y'); $i++)
                                            <option value="{{ $i }}" @selected((string) request('year') === (string) $i)>{{ $i }}</option>
                                        @endfor
                                    </select>
                                </div>
                                <div class="form-group col-6 col-md-3 col-lg-2">
                                    <label>Month</label>
                                    <select name="month" class="form-control select2">
                                        <option value="">All</option>
                                        @for($i = 1; $i <= 12; $i++)
                                            <option value="{{ $i }}" @selected((string) request('month') === (string) $i)>{{ date('F', mktime(0, 0, 0, $i, 1)) }}</option>
                                        @endfor
                                    </select>
                                </div>
                                <div class="form-group col-6 col-md-3 col-lg-2">
                                    <label>Status</label>
                                    <select name="approval" class="form-control select2">
                                        <option value="">All</option>
                                        <option value="{{ \App\Models\advance_salary::STATUS_PENDING }}" @selected((string) request('approval') === (string) \App\Models\advance_salary::STATUS_PENDING)>{{ __('Pending') }}</option>
                                        <option value="{{ \App\Models\advance_salary::STATUS_APPROVED }}" @selected((string) request('approval') === (string) \App\Models\advance_salary::STATUS_APPROVED)>{{ __('Approved') }}</option>
                                        <option value="{{ \App\Models\advance_salary::STATUS_REJECTED }}" @selected((string) request('approval') === (string) \App\Models\advance_salary::STATUS_REJECTED)>{{ __('Rejected') }}</option>
                                    </select>
                                </div>
                                <div class="form-group col-md-6 col-lg-2">
                                    <button type="submit" class="btn btn-primary btn-block"><i class="fas fa-filter"></i> Filter</button>
                                </div>
                            </div>
                        </div>
                    </form>

                    <div class="card-body table-responsive p-0">
                        <table class="table table-hover as-table mb-0">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Employee</th>
                                    <th>Apply Date</th>
                                    <th>Payment Starts</th>
                                    <th>Duration</th>
                                    <th>Advance</th>
                                    <th>Due</th>
                                    <th>Method</th>
                                    <th class="text-center">Status</th>
                                    <th class="text-center">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($advance_salary as $key => $salary)
                                    @php
                                        $paidAmount = (float) ($salary->paid_amount ?? 0);
                                        $dueAmount = (int) $salary->status === \App\Models\advance_salary::STATUS_APPROVED
                                            ? max(0, (float) $salary->amount - $paidAmount)
                                            : 0;
                                        $methodLabel = match ($salary->payment_method) {
                                            'salary_deduction' => __('Salary Deduction'),
                                            'cash' => __('By Cash'),
                                            default => $salary->payment_method,
                                        };
                                    @endphp
                                    <tr>
                                        <td>{{ $advance_salary->firstItem() + $key }}</td>
                                        <td class="as-staff-cell">
                                            {{ $salary->staff?->user?->name ?? '—' }}
                                            <br><small class="text-muted">ID: {{ $salary->staff?->user_id ?? '—' }} · {{ $salary->staff?->designation?->name ?? 'No Designation' }}</small>
                                        </td>
                                        <td>{{ $salary->apply_date }}</td>
                                        <td>{{ date('F', mktime(0, 0, 0, (int) $salary->month, 1)) }}-{{ $salary->year }}</td>
                                        <td>{{ $salary->duration }} {{ __('Month') }}</td>
                                        <td class="as-money">{{ number_format((float) $salary->amount, 2) }}</td>
                                        <td class="as-money">{{ number_format($dueAmount, 2) }}</td>
                                        <td>{{ $methodLabel }}</td>
                                        <td class="text-center">
                                            @if((int) $salary->status === \App\Models\advance_salary::STATUS_APPROVED)
                                                <span class="as-badge approved" title="Approved by {{ $salary->approvedBy?->name ?? '—' }}">Approved</span>
                                            @elseif((int) $salary->status === \App\Models\advance_salary::STATUS_REJECTED)
                                                <span class="as-badge rejected">Rejected</span>
                                            @else
                                                <span class="as-badge pending" title="{{ $approvalWorkflowOn ? __('Pending Approval Center') : __('Pending') }}">Pending</span>
                                            @endif
                                        </td>
                                        <td>
                                            <div class="as-action-btns">
                                                @if((int) $salary->status === \App\Models\advance_salary::STATUS_APPROVED)
                                                    <a href="{{ route('advance.salary.view', $salary->id) }}" target="_blank" class="btn btn-sm btn-light" title="PDF"><i class="fas fa-file-pdf"></i></a>
                                                    @if($dueAmount > 0)
                                                        <button type="button" class="btn btn-sm btn-info"
                                                                onclick="advance_salary_Payment_Schedules_modal({{ $salary->id }}, {{ (float) $salary->amount }}, {{ $paidAmount }}, {{ $dueAmount }})"
                                                                title="Schedule"><i class="fas fa-calendar-alt"></i></button>
                                                    @endif
                                                @elseif((int) $salary->status === \App\Models\advance_salary::STATUS_PENDING)
                                                    @can('Salary-edit')
                                                        <button type="button" class="btn btn-sm btn-primary js-edit-advance"
                                                                data-id="{{ $salary->id }}"
                                                                data-staff-id="{{ $salary->staff_id }}"
                                                                data-amount="{{ $salary->amount }}"
                                                                data-payment="{{ $salary->payment_method }}"
                                                                data-duration="{{ $salary->duration }}"
                                                                data-month="{{ $salary->month }}"
                                                                data-year="{{ $salary->year }}"
                                                                data-reason="{{ $salary->reason }}"
                                                                data-apply-date="{{ $salary->apply_date }}"
                                                                title="Edit"><i class="fas fa-edit"></i></button>
                                                    @endcan
                                                    @can('Salary-delete')
                                                        <a class="btn btn-sm btn-danger delete_modal" href="javascript:void(0)"
                                                           data-href="{{ route('advance.salary.application.destroy', $salary->id) }}" title="Delete"><i class="fas fa-trash"></i></a>
                                                    @endcan
                                                    @if(! $approvalWorkflowOn)
                                                        @can('Salary-Approve')
                                                            <button type="button" class="btn btn-sm btn-success" title="Approve"
                                                                    onclick="advance_salary_approval({{ $salary->id }})"><i class="fas fa-check"></i></button>
                                                        @endcan
                                                    @endif
                                                @endif
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="10" class="text-center text-muted py-4">No advance salary applications found.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    @if($advance_salary->hasPages())
                        <div class="card-footer">{{ $advance_salary->links() }}</div>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection

@section('modal')
    @include('modals.delete_modal')

    <div class="modal fade as-modal" id="advance_salary_modal">
        <form action="{{ route('admin.advance.salary') }}" method="POST">
            @csrf
            <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
                <div class="modal-content">
                    <div class="modal-header">
                        <div>
                            <h5 class="modal-title">{{ __('Advance Salary Application') }}</h5>
                            <p class="text-muted small mb-0">{{ __('Apply date') }}: {{ date('d M Y') }}</p>
                        </div>
                        <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                    </div>
                    <div class="modal-body">
                        <div class="as-modal-section">
                            <div class="as-modal-section-title">{{ __('Employee & amount') }}</div>
                            <div class="form-row">
                                <div class="form-group col-md-4">
                                    <label class="as-modal-label">{{ __('Staff') }}</label>
                                    <select class="form-control select2" name="staff_id" required>
                                        <option value="">Select staff</option>
                                        @foreach($staffList as $staff)
                                            <option value="{{ $staff->id }}">{{ $staff->user?->name ?? 'Staff #'.$staff->id }}({{ $staff->user_id }})</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group col-md-4">
                                    <label class="as-modal-label">{{ __('Amount') }}</label>
                                    <input class="form-control" type="number" step="0.01" min="0" name="amount" placeholder="Advance amount" required>
                                </div>
                                <div class="form-group col-md-4">
                                    <label class="as-modal-label">{{ __('Payment method') }}</label>
                                    <select name="payment_method" class="form-control" required>
                                        <option value="">Select method</option>
                                        <option value="salary_deduction">{{ __('Salary Deduction') }}</option>
                                        <option value="cash">{{ __('By Cash') }}</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="as-modal-section">
                            <div class="as-modal-section-title">{{ __('Schedule') }}</div>
                            <div class="form-row">
                                <div class="form-group col-md-4">
                                    <label class="as-modal-label">{{ __('Duration (months)') }}</label>
                                    <input class="form-control" type="number" min="1" max="12" name="duration" required>
                                </div>
                                <div class="form-group col-md-4">
                                    <label class="as-modal-label">{{ __('Start month') }}</label>
                                    <select name="month" class="form-control" required>
                                        <option value="">Select month</option>
                                        @for($i = 1; $i <= 12; $i++)
                                            <option value="{{ $i }}">{{ date('F', mktime(0, 0, 0, $i, 1)) }}</option>
                                        @endfor
                                    </select>
                                </div>
                                <div class="form-group col-md-4">
                                    <label class="as-modal-label">{{ __('Start year') }}</label>
                                    <select name="year" class="form-control" required>
                                        <option value="">Select year</option>
                                        @for($i = 2023; $i <= date('Y') + 5; $i++)
                                            <option value="{{ $i }}">{{ $i }}</option>
                                        @endfor
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="form-group mb-0">
                            <label class="as-modal-label">{{ __('Reason') }}</label>
                            <textarea name="reason" rows="3" class="form-control" placeholder="{{ __('Reason for advance') }}" required></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-dismiss="modal">{{ __('Cancel') }}</button>
                        <button type="submit" class="btn btn-primary">{{ __('Save') }}</button>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <div class="modal fade as-modal" id="advance_salary_modal_update">
        <form action="{{ route('admin.advance.salary.update') }}" method="POST">
            @csrf
            <input type="hidden" name="id" id="id">
            <input type="hidden" name="apply_date" id="apply_dates">
            <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
                <div class="modal-content">
                    <div class="modal-header">
                        <div>
                            <h5 class="modal-title">{{ __('Update Advance Salary') }}</h5>
                            <p class="text-muted small mb-0">{{ __('Apply date') }}: <span id="apply_date"></span></p>
                        </div>
                        <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                    </div>
                    <div class="modal-body">
                        <div class="as-modal-section">
                            <div class="form-row">
                                <div class="form-group col-md-4">
                                    <label class="as-modal-label">{{ __('Staff') }}</label>
                                    <select class="form-control" name="staff_id" id="staff_id" required>
                                        @foreach($staffList as $staff)
                                            <option value="{{ $staff->id }}">{{ $staff->user?->name ?? 'Staff #'.$staff->id }}({{ $staff->user_id }})</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group col-md-4">
                                    <label class="as-modal-label">{{ __('Amount') }}</label>
                                    <input class="form-control" type="number" step="0.01" name="amount" id="amount" required>
                                </div>
                                <div class="form-group col-md-4">
                                    <label class="as-modal-label">{{ __('Payment method') }}</label>
                                    <select name="payment_method" id="payment_method" class="form-control" required>
                                        <option value="salary_deduction">{{ __('Salary Deduction') }}</option>
                                        <option value="cash">{{ __('By Cash') }}</option>
                                    </select>
                                </div>
                                <div class="form-group col-md-4">
                                    <label class="as-modal-label">{{ __('Duration (months)') }}</label>
                                    <input class="form-control" type="number" min="1" max="12" name="duration" id="duration" required>
                                </div>
                                <div class="form-group col-md-4">
                                    <label class="as-modal-label">{{ __('Start month') }}</label>
                                    <select name="month" id="month" class="form-control" required>
                                        @for($i = 1; $i <= 12; $i++)
                                            <option value="{{ $i }}">{{ date('F', mktime(0, 0, 0, $i, 1)) }}</option>
                                        @endfor
                                    </select>
                                </div>
                                <div class="form-group col-md-4">
                                    <label class="as-modal-label">{{ __('Start year') }}</label>
                                    <select name="year" id="year" class="form-control" required>
                                        @for($i = 2023; $i <= date('Y') + 5; $i++)
                                            <option value="{{ $i }}">{{ $i }}</option>
                                        @endfor
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="form-group mb-0">
                            <label class="as-modal-label">{{ __('Reason') }}</label>
                            <textarea name="reason" id="reason" rows="3" class="form-control" required></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-dismiss="modal">{{ __('Cancel') }}</button>
                        <button type="submit" class="btn btn-primary">{{ __('Update') }}</button>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <div class="modal fade as-modal" id="advance_salary_Approval_modal">
        <form action="{{ route('advance.salary.approval') }}" method="POST">
            @csrf
            <input type="hidden" name="advance_salary_id" id="advance_salary_id">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">{{ __('Approve Advance Salary') }}</h5>
                        <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                    </div>
                    <div class="modal-body">
                        <p class="mb-0"><i class="fas fa-check-circle text-success"></i> {{ __('Are you sure you want to approve this application?') }}</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-dismiss="modal">{{ __('Cancel') }}</button>
                        <button type="submit" class="btn btn-success">{{ __('Approve') }}</button>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <div class="modal fade as-modal" id="advance_salary_Payment_Schedules_modal">
        <form action="{{ route('advance.salary.cash.store') }}" method="POST">
            @csrf
            <div class="modal-dialog modal-lg modal-dialog-scrollable">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">{{ __('Payment Schedules') }}</h5>
                        <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                    </div>
                    <div class="modal-body">
                        <div class="as-modal-section mb-3" id="Info_hide_show" style="display:none;">
                            <div class="form-row text-center">
                                <div class="col-6 col-md-3 mb-2"><small class="text-muted d-block">Approved</small><strong id="approval_amount"></strong></div>
                                <div class="col-6 col-md-3 mb-2"><small class="text-muted d-block">Collected</small><strong id="collected_amount"></strong></div>
                                <div class="col-6 col-md-3 mb-2"><small class="text-muted d-block">Due</small><strong id="due_amount"></strong></div>
                                <div class="col-6 col-md-3 mb-2"><small class="text-muted d-block">Scheduled</small><strong id="schudled_amount"></strong></div>
                            </div>
                        </div>
                        <div id="data_show"></div>
                        <div class="loading-overlay" id="loadingOverlay"><div class="spinner"></div></div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-info" id="addRowBtn">Add Row</button>
                        <button type="button" class="btn btn-light" data-dismiss="modal">{{ __('Cancel') }}</button>
                        <button type="submit" id="advance_salary_received_btn" class="btn btn-primary">{{ __('Save All') }}</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection

@section('script')
    <script>
        $(document).ready(function () {
            $('.as-filters select.select2').select2({ width: '100%' });
            $('#advance_salary_modal select.select2').select2({ width: '100%', dropdownParent: $('#advance_salary_modal') });
        });

        function advance_salary_approval(id) {
            $('#advance_salary_id').val(id);
            $('#advance_salary_Approval_modal').modal('show');
        }

        function advance_salary() {
            $('#advance_salary_modal').modal('show');
        }

        $(document).on('click', '.js-edit-advance', function () {
            var $b = $(this);
            $('#payment_method').val($b.data('payment'));
            $('#duration').val($b.data('duration'));
            $('#amount').val($b.data('amount'));
            $('#month').val($b.data('month'));
            $('#year').val($b.data('year'));
            $('#reason').val($b.data('reason'));
            $('#staff_id').val($b.data('staff-id'));
            $('#apply_date').text($b.data('apply-date'));
            $('#apply_dates').val($b.data('apply-date'));
            $('#id').val($b.data('id'));
            $('#advance_salary_modal_update').modal('show');
        });

        function advance_salary_Payment_Schedules_modal(id, total_amount, paid_amount, due_amount) {
            $('#Info_hide_show').hide();
            $('#data_show').html('');
            $('#loadingOverlay').show();
            $('#advance_salary_Payment_Schedules_modal').modal('show');

            $.ajax({
                url: '{{ route('advance.salary.cash') }}',
                method: 'GET',
                data: { id: id },
                success: function (res) {
                    if (res) {
                        $('#data_show').html(res);
                        $('#Info_hide_show').show();
                        $('#approval_amount').html(total_amount);
                        $('#collected_amount').html(paid_amount);
                        $('#due_amount').html(due_amount);
                        $('#schudled_amount').html(total_amount);
                    } else {
                        $('#data_show').html('Loading...');
                    }
                    $('#loadingOverlay').hide();
                },
                error: function () {
                    $('#data_show').html(@json(__('Could not load payment schedule.')));
                    $('#loadingOverlay').hide();
                }
            });
        }

        function amountValidation_check() {
            var totalSum = 0;
            var total_amount = parseFloat($('#approval_amount').html());
            $('.amount_check').each(function () {
                totalSum += parseFloat($(this).val()) || 0;
            });
            if (total_amount === totalSum) {
                $('#advance_salary_received_btn').show();
            } else {
                alert(@json(__('Approved amount and scheduled amount must match.')));
                $('#advance_salary_received_btn').hide();
            }
        }

        $(document).on('click', '#advance_salary_table .deleteRowBtn', function () {
            var $row = $(this).closest('tr');
            if (!$row.hasClass('templateRow')) {
                $row.remove();
                amountValidation_check();
            } else {
                alert(@json(__('You cannot delete this row.')));
            }
        });

        $('#addRowBtn').click(function () {
            var clonedRow = $('.templateRow').clone().removeClass('templateRow');
            clonedRow.find('input').prop('readonly', false);
            $('#advance_salary_table tbody').append(clonedRow);
            amountValidation_check();
        });

        function makePayment(id) {
            var token = $('meta[name="csrf-token"]').attr('content');
            $('#data_show').html('');
            $('#loadingOverlay').show();
            $.ajax({
                headers: { 'X-CSRF-TOKEN': token },
                url: '{{ route('advance.salary.cash.payment') }}',
                method: 'POST',
                data: { id: id },
                success: function (res) {
                    $('#loadingOverlay').hide();
                    if (res) {
                        $('#data_show').html(res);
                    } else {
                        $('#data_show').html('Loading...');
                    }
                },
                error: function () {
                    $('#loadingOverlay').hide();
                }
            });
        }
    </script>
@endsection