@extends('layouts.master')

@push('css')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" href="{{ asset('css/hr-forms.css') }}">
@endpush

@section('content')
<div class="card shadow-sm border-0 mb-4">
    <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center flex-wrap gap-2 border-bottom">
        <div>
            <h4 class="mb-0 fw-bold text-dark">
                <i class="fa fa-hand-holding-usd text-primary me-2"></i> Employee Advances (ملازمین ایڈوانسز)
            </h4>
            <small class="text-muted">ملازمین کے ایڈوانس کھاتوں اور بقایا جات کا خلاصہ</small>
        </div>
        <div class="d-flex gap-2">
            <button class="btn btn-primary btn-sm px-3 shadow-sm"
                    data-toggle="modal" data-target="#addAdvanceModal"
                    data-bs-toggle="modal" data-bs-target="#addAdvanceModal">
                <i class="fa fa-plus me-1"></i> نیا ایڈوانس شامل کریں (Add Advance)
            </button>
        </div>
    </div>

    <div class="card-body">

        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <i class="fa fa-check-circle me-1"></i> {{ session('success') }}
                <button type="button" class="close ms-auto" data-dismiss="alert" data-bs-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        @endif

        @if(isset($errors) && $errors->any())
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <strong><i class="fa fa-exclamation-triangle me-1"></i> غلطیاں:</strong>
                <ul class="mb-0 mt-1">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
                <button type="button" class="close ms-auto" data-dismiss="alert" data-bs-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        @endif

        {{-- Overall Summary KPIs --}}
        <div class="row g-3 mb-4">
            <div class="col-md-2 col-sm-6">
                <div class="card advance-stat-card border-start border-4 border-primary">
                    <div class="card-body py-2 px-3 text-center">
                        <small class="text-muted d-block">کل ملازمین</small>
                        <h5 class="mb-0 fw-bold text-primary">{{ number_format($overall['total_employees']) }}</h5>
                    </div>
                </div>
            </div>
            <div class="col-md-2 col-sm-6">
                <div class="card advance-stat-card border-start border-4 border-info">
                    <div class="card-body py-2 px-3 text-center">
                        <small class="text-muted d-block">ایکٹیو ایڈوانسز</small>
                        <h5 class="mb-0 fw-bold text-info">{{ number_format($overall['active_advances']) }}</h5>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="card advance-stat-card border-start border-4 border-secondary">
                    <div class="card-body py-2 px-3 text-center">
                        <small class="text-muted d-block">کل ایڈوانس رقم</small>
                        <h5 class="mb-0 fw-bold text-dark">Rs. {{ number_format($overall['total_amount'], 0) }}</h5>
                    </div>
                </div>
            </div>
            <div class="col-md-2 col-sm-6">
                <div class="card advance-stat-card border-start border-4 border-success">
                    <div class="card-body py-2 px-3 text-center">
                        <small class="text-muted d-block">کل وصولی</small>
                        <h5 class="mb-0 fw-bold text-success">Rs. {{ number_format($overall['total_recovered'], 0) }}</h5>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-12">
                <div class="card advance-stat-card border-start border-4 border-danger bg-light">
                    <div class="card-body py-2 px-3 text-center">
                        <small class="text-muted d-block">کل بقایا رقم (Net Balance)</small>
                        <h5 class="mb-0 fw-bold text-danger">Rs. {{ number_format($overall['total_balance'], 0) }}</h5>
                    </div>
                </div>
            </div>
        </div>

        {{-- Search Bar --}}
        <form method="GET" action="{{ route('advances.index') }}" class="row g-2 mb-3">
            <div class="col-md-5 col-sm-8">
                <div class="input-group">
                    <input type="text" name="search" class="form-control"
                           placeholder="ملازم کا نام، نمبر یا فون تلاش کریں..."
                           value="{{ request('search') }}">
                    <button class="btn btn-outline-secondary" type="submit">
                        <i class="fa fa-search"></i> تلاش کریں
                    </button>
                    @if(request('search'))
                        <a href="{{ route('advances.index') }}" class="btn btn-outline-danger">
                            <i class="fa fa-times"></i> ریسٹ
                        </a>
                    @endif
                </div>
            </div>
        </form>

        {{-- Main Employees Summary Table (1 Entry per Employee) --}}
        <div class="table-responsive">
            <table class="table table-bordered table-hover align-middle">
                <thead class="table-light">
                    <tr>
                        <th class="text-center" style="width: 50px;">#</th>
                        <th>Employee (ملازم)</th>
                        <th class="text-center">Advances Count</th>
                        <th class="text-end">Total Advance</th>
                        <th class="text-end">Recovered</th>
                        <th class="text-end">Remaining Balance</th>
                        <th class="text-end">Monthly Deduction</th>
                        <th class="text-center">Status</th>
                        <th class="text-center" style="width: 140px;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($employeesWithAdvances as $emp)
                        @php
                            $totalAmt   = (float) $emp->advances->sum('amount');
                            $totalRec   = (float) $emp->advances->sum('recovered');
                            $balance    = $totalAmt - $totalRec;
                            $monthlyDed = (float) $emp->advances->where('status', 'active')->sum('monthly_deduction');
                            $activeCount = $emp->advances->where('status', 'active')->count();
                            $totalCount  = $emp->advances->count();
                            $initials   = strtoupper(substr($emp->first_name, 0, 1) . substr($emp->last_name ?? '', 0, 1));
                        @endphp
                        <tr>
                            <td class="text-center fw-bold">{{ $loop->iteration + ($employeesWithAdvances->currentPage() - 1) * $employeesWithAdvances->perPage() }}</td>
                            <td>
                                <div class="d-flex align-items-center">
                                    <div class="emp-avatar">{{ $initials }}</div>
                                    <div>
                                        <div class="fw-bold text-dark">{{ $emp->first_name }} {{ $emp->last_name }}</div>
                                        <small class="text-muted">
                                            <span class="badge bg-light text-secondary border me-1">{{ $emp->employee_no ?? ('EMP-' . $emp->id) }}</span>
                                            @if($emp->department)
                                                <span>{{ $emp->department->department_name ?? ($emp->department->name ?? '') }}</span>
                                            @endif
                                            @if($emp->designation)
                                                <span>&bull; {{ $emp->designation->designation_name ?? ($emp->designation->title ?? ($emp->designation->name ?? '')) }}</span>
                                            @endif
                                        </small>
                                    </div>
                                </div>
                            </td>
                            <td class="text-center">
                                <span class="badge bg-primary text-white">{{ $totalCount }} Total</span>
                                @if($activeCount > 0)
                                    <span class="badge bg-warning text-dark">{{ $activeCount }} Active</span>
                                @else
                                    <span class="badge bg-success text-white">All Clear</span>
                                @endif
                            </td>
                            <td class="text-end fw-semibold">
                                {{ number_format($totalAmt, 0) }}
                            </td>
                            <td class="text-end text-success fw-semibold">
                                {{ number_format($totalRec, 0) }}
                            </td>
                            <td class="text-end fw-bold {{ $balance > 0 ? 'text-danger' : 'text-muted' }}">
                                {{ number_format($balance, 0) }}
                            </td>
                            <td class="text-end">
                                {{ number_format($monthlyDed, 0) }}
                            </td>
                            <td class="text-center">
                                @if($balance > 0)
                                    <span class="badge bg-warning text-dark px-2 py-1">Active (جاری)</span>
                                @else
                                    <span class="badge bg-success text-white px-2 py-1">Cleared (مکمل)</span>
                                @endif
                            </td>
                            <td class="text-center">
                                <div class="btn-group" role="group">
                                    <button type="button" class="btn btn-info btn-sm px-2"
                                            data-toggle="modal" data-target="#viewEmpAdvancesModal{{ $emp->id }}"
                                            data-bs-toggle="modal" data-bs-target="#viewEmpAdvancesModal{{ $emp->id }}"
                                            title="View all advances of {{ $emp->first_name }}">
                                        <i class="fa fa-eye me-1"></i> View
                                    </button>
                                    <button type="button" class="btn btn-outline-primary btn-sm btn-quick-add"
                                            data-emp-id="{{ $emp->id }}"
                                            data-toggle="modal" data-target="#addAdvanceModal"
                                            data-bs-toggle="modal" data-bs-target="#addAdvanceModal"
                                            title="Add new advance for {{ $emp->first_name }}">
                                        <i class="fa fa-plus"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="9" class="text-center py-4 text-muted">
                                <i class="fa fa-info-circle fa-2x mb-2 d-block"></i>
                                کوئی ایڈوانس ریکارڈ نہیں ملا۔ نیا ایڈوانس شامل کرنے کے لیے اوپر دیے گئے بٹن پر کلک کریں۔
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="mt-3 d-flex justify-content-between align-items-center flex-wrap">
            <small class="text-muted">
                Showing {{ $employeesWithAdvances->firstItem() ?? 0 }} to {{ $employeesWithAdvances->lastItem() ?? 0 }} of {{ $employeesWithAdvances->total() }} employees
            </small>
            <div>
                {{ $employeesWithAdvances->links() }}
            </div>
        </div>

    </div>
</div>

{{-- ══════════════════════════════════════════════════════════════════════════ --}}
{{-- EMPLOYEE ADVANCES VIEW MODALS (One Modal per Employee)                     --}}
{{-- ══════════════════════════════════════════════════════════════════════════ --}}
@foreach($employeesWithAdvances as $emp)
    @php
        $empTotalAmt   = (float) $emp->advances->sum('amount');
        $empTotalRec   = (float) $emp->advances->sum('recovered');
        $empBalance    = $empTotalAmt - $empTotalRec;
        $empMonthlyDed = (float) $emp->advances->where('status', 'active')->sum('monthly_deduction');
    @endphp

    <div class="modal fade adv-modal adv-modal-view" id="viewEmpAdvancesModal{{ $emp->id }}" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">
                        <span class="adv-modal-icon icon-view"><i class="fa-solid fa-clock-rotate-left"></i></span>
                        <span><strong>{{ $emp->first_name }} {{ $emp->last_name }}</strong> &mdash; تمام ایڈوانسز کی تفصیل (Advances History)</span>
                    </h5>
                    <button type="button" class="close ms-auto" data-dismiss="modal" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">

                    {{-- Employee mini stat bar inside modal --}}
                    <div class="row g-3 mb-4">
                        <div class="col-md-3 col-6">
                            <div class="adv-stat-pill">
                                <small>Employee ID</small>
                                <span class="stat-val text-dark">{{ $emp->employee_no ?? ('EMP-' . $emp->id) }}</span>
                            </div>
                        </div>
                        <div class="col-md-3 col-6">
                            <div class="adv-stat-pill pill-blue">
                                <small>کل ایڈوانس (Total Advance)</small>
                                <span class="stat-val text-primary">Rs. {{ number_format($empTotalAmt, 0) }}</span>
                            </div>
                        </div>
                        <div class="col-md-3 col-6">
                            <div class="adv-stat-pill pill-green">
                                <small>کل وصولی (Recovered)</small>
                                <span class="stat-val text-success">Rs. {{ number_format($empTotalRec, 0) }}</span>
                            </div>
                        </div>
                        <div class="col-md-3 col-6">
                            <div class="adv-stat-pill pill-red">
                                <small>باقی بیلنس (Net Balance)</small>
                                <span class="stat-val text-danger">Rs. {{ number_format($empBalance, 0) }}</span>
                            </div>
                        </div>
                    </div>

                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h6 class="fw-bold mb-0 text-dark" style="font-size: 14px;">
                            <i class="fa-solid fa-list-check text-primary me-1"></i> ایڈوانس ریکارڈز کی فہرست ({{ $emp->advances->count() }})
                        </h6>
                        <button type="button" class="btn btn-outline-primary btn-sm btn-quick-add"
                                data-emp-id="{{ $emp->id }}"
                                data-toggle="modal" data-target="#addAdvanceModal"
                                data-bs-toggle="modal" data-bs-target="#addAdvanceModal">
                            <i class="fa-solid fa-plus me-1"></i> نیا ایڈوانس شامل کریں
                        </button>
                    </div>

                    {{-- Individual Advances Table --}}
                    <div class="table-responsive">
                        <table class="table adv-table align-middle text-center mb-0">
                            <thead>
                                <tr>
                                    <th style="width: 40px;">#</th>
                                    <th>Advance Amount</th>
                                    <th>Recovered</th>
                                    <th>Balance</th>
                                    <th>Monthly Ded.</th>
                                    <th>Given Date</th>
                                    <th>Status</th>
                                    <th>Notes</th>
                                    <th style="width: 110px;">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($emp->advances as $adv)
                                    <tr>
                                        <td>{{ $loop->iteration }}</td>
                                        <td class="text-end fw-semibold">
                                            Rs. {{ number_format($adv->amount, 0) }}
                                        </td>
                                        <td class="text-end text-success fw-semibold">
                                            Rs. {{ number_format($adv->recovered, 0) }}
                                        </td>
                                        <td class="text-end fw-bold {{ $adv->balance > 0 ? 'text-danger' : 'text-muted' }}">
                                            Rs. {{ number_format($adv->balance, 0) }}
                                        </td>
                                        <td class="text-end">
                                            Rs. {{ number_format($adv->monthly_deduction, 0) }}
                                        </td>
                                        <td>
                                            {{ \Carbon\Carbon::parse($adv->given_date)->format('d/m/Y') }}
                                        </td>
                                        <td>
                                            <span class="adv-badge adv-badge-{{ $adv->status === 'active' ? 'active' : ($adv->status === 'recovered' ? 'recovered' : 'cancelled') }}">
                                                {{ ucfirst($adv->status) }}
                                            </span>
                                        </td>
                                        <td class="text-start">
                                            <small class="text-muted">{{ $adv->notes ?: '—' }}</small>
                                        </td>
                                        <td>
                                            <button type="button" class="btn btn-sm btn-light text-warning px-2 me-1 border"
                                                    data-toggle="modal" data-target="#editAdvModal{{ $adv->id }}"
                                                    data-bs-toggle="modal" data-bs-target="#editAdvModal{{ $adv->id }}"
                                                    title="Edit Advance">
                                                <i class="fa-solid fa-pen-to-square"></i>
                                            </button>

                                            <form method="POST" action="{{ route('advances.destroy', $adv->id ?? $adv) }}" class="d-inline"
                                                  onsubmit="return confirm('کیا آپ واقعی یہ ایڈوانس (رقم: {{ number_format($adv->amount, 0) }}) حذف کرنا چاہتے ہیں؟')">
                                                @csrf @method('DELETE')
                                                <button type="submit" class="btn btn-sm btn-light text-danger px-2 border" title="Delete">
                                                    <i class="fa-solid fa-trash"></i>
                                                </button>
                                            </form>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="9" class="text-center py-4 text-muted">کوئی ایڈوانس موجود نہیں ہے۔</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="hr-btn-cancel" data-dismiss="modal" data-bs-dismiss="modal">
                        <i class="fa-solid fa-xmark"></i> بند کریں (Close)
                    </button>
                </div>
            </div>
        </div>
    </div>
@endforeach

{{-- ══════════════════════════════════════════════════════════════════════════ --}}
{{-- EDIT ADVANCE MODALS (One Modal per Individual Advance)                     --}}
{{-- ══════════════════════════════════════════════════════════════════════════ --}}
@foreach($employeesWithAdvances as $emp)
    @foreach($emp->advances as $adv)
        <div class="modal fade modal-sub adv-modal adv-modal-edit" id="editAdvModal{{ $adv->id }}" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <form method="POST" action="{{ route('advances.update', $adv->id ?? $adv) }}" style="width: 100%;">
                    @csrf @method('PUT')
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">
                                <span class="adv-modal-icon icon-edit"><i class="fa-solid fa-pen-to-square"></i></span>
                                <span>Edit Advance &mdash; <strong>{{ $emp->first_name }} {{ $emp->last_name }}</strong></span>
                            </h5>
                            <button type="button" class="close ms-auto" data-dismiss="modal" data-bs-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body row g-3">
                            <div class="col-6">
                                <label class="adv-label">Advance Amount <span class="required">*</span></label>
                                <input type="number" name="amount" class="adv-input" step="0.01" min="1" value="{{ $adv->amount }}" required>
                            </div>
                            <div class="col-6">
                                <label class="adv-label">Recovered <span class="required">*</span></label>
                                <input type="number" name="recovered" class="adv-input" step="0.01" min="0" value="{{ $adv->recovered }}" required>
                            </div>
                            <div class="col-6">
                                <label class="adv-label">Monthly Deduction <span class="required">*</span></label>
                                <input type="number" name="monthly_deduction" class="adv-input" step="0.01" min="0" value="{{ $adv->monthly_deduction }}" required>
                            </div>
                            <div class="col-6">
                                <label class="adv-label">Status <span class="required">*</span></label>
                                <select name="status" class="adv-select">
                                    @foreach(['active' => 'Active', 'recovered' => 'Recovered', 'cancelled' => 'Cancelled'] as $val => $lbl)
                                        <option value="{{ $val }}" {{ $adv->status === $val ? 'selected' : '' }}>{{ $lbl }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-12">
                                <label class="adv-label">Given Date <span class="required">*</span></label>
                                <input type="date" name="given_date" class="adv-input" value="{{ \Carbon\Carbon::parse($adv->given_date)->format('Y-m-d') }}" required>
                            </div>
                            <div class="col-12">
                                <label class="adv-label">Notes / تفصیل</label>
                                <textarea name="notes" class="adv-textarea" rows="2" placeholder="اختیاری تفصیل لکھیں...">{{ $adv->notes }}</textarea>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="hr-btn-cancel" data-dismiss="modal" data-bs-dismiss="modal">
                                <i class="fa-solid fa-xmark"></i> منسوخ کریں (Cancel)
                            </button>
                            <button type="submit" class="hr-btn-submit">
                                <i class="fa-solid fa-floppy-disk"></i> تبدیلی محفوظ کریں (Update)
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    @endforeach
@endforeach

{{-- ══════════════════════════════════════════════════════════════════════════ --}}
{{-- ADD NEW ADVANCE MODAL                                                      --}}
{{-- ══════════════════════════════════════════════════════════════════════════ --}}
<div class="modal fade modal-sub adv-modal adv-modal-add" id="addAdvanceModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <form method="POST" action="{{ route('advances.store') }}" style="width: 100%;">
            @csrf
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">
                        <span class="adv-modal-icon icon-add"><i class="fa-solid fa-plus"></i></span>
                        <span>نیا ایڈوانس شامل کریں (Add Advance)</span>
                    </h5>
                    <button type="button" class="close ms-auto" data-dismiss="modal" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body row g-3">
                    <div class="col-12">
                        <label class="adv-label">ملازم (Employee) <span class="required">*</span></label>
                        <select name="employee_id" id="add_employee_id" class="adv-select" required>
                            <option value="">— ملازم منتخب کریں —</option>
                            @foreach($employees as $e)
                                <option value="{{ $e->id }}">
                                    {{ $e->first_name }} {{ $e->last_name }} ({{ $e->employee_no ?? ('EMP-' . $e->id) }})
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-6">
                        <label class="adv-label">Advance Amount <span class="required">*</span></label>
                        <input type="number" name="amount" class="adv-input" step="0.01" min="1" placeholder="مثلاً: 25000" required>
                    </div>
                    <div class="col-6">
                        <label class="adv-label">Monthly Deduction <span class="required">*</span></label>
                        <input type="number" name="monthly_deduction" class="adv-input" step="0.01" min="0" placeholder="مثلاً: 5000" required>
                    </div>
                    <div class="col-12">
                        <label class="adv-label">Given Date <span class="required">*</span></label>
                        <input type="date" name="given_date" class="adv-input" value="{{ date('Y-m-d') }}" required>
                    </div>
                    <div class="col-12">
                        <label class="adv-label">Notes / تفصیل</label>
                        <textarea name="notes" class="adv-textarea" rows="2" placeholder="اختیاری تفصیل لکھیں..."></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="hr-btn-cancel" data-dismiss="modal" data-bs-dismiss="modal">
                        <i class="fa-solid fa-xmark"></i> منسوخ کریں (Cancel)
                    </button>
                    <button type="submit" class="hr-btn-submit">
                        <i class="fa-solid fa-floppy-disk"></i> ایڈوانس محفوظ کریں (Save Advance)
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
    $(document).ready(function() {
        // Quick add button handler to pre-select employee
        $(document).on('click', '.btn-quick-add', function() {
            var empId = $(this).data('emp-id');
            if (empId) {
                $('#add_employee_id').val(empId).trigger('change');
            }
        });

        // Initialize Select2 inside Add Advance modal
        $('#add_employee_id').select2({
            dropdownParent: $('#addAdvanceModal'),
            width: '100%',
            placeholder: '— ملازم منتخب کریں —'
        });

        // If Add or Edit is clicked from INSIDE the View Advances modal,
        // cleanly dismiss the view modal so backdrops don't conflict or stack incorrectly
        $(document).on('click', '.adv-modal-view [data-target="#addAdvanceModal"], .adv-modal-view [data-bs-target="#addAdvanceModal"]', function() {
            var parentModal = $(this).closest('.modal');
            if (parentModal.length) {
                parentModal.modal('hide');
            }
        });

        $(document).on('click', '.adv-modal-view [data-target^="#editAdvModal"], .adv-modal-view [data-bs-target^="#editAdvModal"]', function() {
            var parentModal = $(this).closest('.modal');
            if (parentModal.length) {
                parentModal.modal('hide');
            }
        });

        // Ensure backdrops don't multiply on modal show
        $(document).on('shown.bs.modal', '.modal', function() {
            var backdrops = $('.modal-backdrop');
            if (backdrops.length > 1) {
                backdrops.not(':last').remove();
            }
        });

        // Bulletproof backdrop cleanup whenever any modal is hidden
        $(document).on('hidden.bs.modal', '.modal', function () {
            setTimeout(function() {
                var visibleModals = $('.modal.show:visible');
                if (visibleModals.length > 0) {
                    $('body').addClass('modal-open');
                } else {
                    // No modal visible -> remove any leftover stuck backdrops
                    $('.modal-backdrop').remove();
                    $('body').removeClass('modal-open').css('padding-right', '');
                }
            }, 100);
        });

        // Explicit fallback for cancel / close buttons
        $(document).on('click', '[data-dismiss="modal"], [data-bs-dismiss="modal"]', function() {
            var modal = $(this).closest('.modal');
            if (modal.length) {
                modal.modal('hide');
            }
            setTimeout(function() {
                if ($('.modal.show:visible').length === 0) {
                    $('.modal-backdrop').remove();
                    $('body').removeClass('modal-open').css('padding-right', '');
                }
            }, 250);
        });
    });
</script>
@endpush