@extends('layouts.layout')

@section('content')
    <div id="main">
        <header class="mb-3">
            <a href="#" class="burger-btn d-block d-xl-none">
                <i class="bi bi-justify fs-3"></i>
            </a>
        </header>

        <div class="page-heading">
            <div class="page-title">
                <div class="row">
                    <div class="col-12 col-md-6 order-md-1 order-last">
                        <h3>Bank Management</h3>
                        <p class="text-subtitle text-muted">Manage and view registered banks</p>
                    </div>
                    <div class="col-12 col-md-6 order-md-2 order-first">
                        <nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="{{ url('/') }}">Dashboard</a></li>
                                <li class="breadcrumb-item active" aria-current="page">Bank Management -> Bank</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>

            {{-- Add Bank Form --}}
            <section id="basic-vertical-layouts">
                <div class="row match-height">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Add New Bank</h4>
                            </div>
                            <div class="card-content">
                                <div class="card-body">
                                    <form class="form form-vertical" action="{{ route('bank.store') }}" method="POST">
                                        @csrf
                                        <div class="form-body">
                                            <div class="row">
                                                <div class="col-12 col-md-6">
                                                    <div class="form-group mb-3">
                                                        <label for="bank_name">Bank Name <span
                                                                class="text-danger">*</span></label>
                                                        <div class="input-group">
                                                            <span class="input-group-text"><i
                                                                    class="bi bi-building"></i></span>
                                                            <input type="text" id="bank_name"
                                                                class="form-control @error('bank_name') is-invalid @enderror"
                                                                name="bank_name" value="{{ old('bank_name') }}"
                                                                placeholder="e.g. Advance Bank of Asia" required>
                                                            @error('bank_name')
                                                                <div class="invalid-feedback">{{ $message }}</div>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-12 col-md-6">
                                                    <div class="form-group mb-3">
                                                        <label for="bank_acronym">Acronym <span
                                                                class="text-danger">*</span></label>
                                                        <div class="input-group">
                                                            <span class="input-group-text"><i class="bi bi-tag"></i></span>
                                                            <input type="text" id="bank_acronym"
                                                                class="form-control @error('bank_acronym') is-invalid @enderror"
                                                                name="bank_acronym" value="{{ old('bank_acronym') }}"
                                                                placeholder="e.g. ABA" maxlength="10" required>
                                                            @error('bank_acronym')
                                                                <div class="invalid-feedback">{{ $message }}</div>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-12 col-md-6">
                                                    <div class="form-group mb-3">
                                                        {{-- FIX: use "bankofficer" to match your JSON/DB column --}}
                                                        <label for="bankofficer">Bank Officer <span
                                                                class="text-danger">*</span></label>
                                                        <div class="input-group">
                                                            <span class="input-group-text"><i
                                                                    class="bi bi-person"></i></span>
                                                            <input type="text" id="bankofficer"
                                                                class="form-control @error('bankofficer') is-invalid @enderror"
                                                                name="bankofficer" value="{{ old('bankofficer') }}"
                                                                placeholder="e.g. John Doe" maxlength="255" required>
                                                            @error('bankofficer')
                                                                <div class="invalid-feedback">{{ $message }}</div>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-12 col-md-6">
                                                    <div class="form-group mb-3">
                                                        <label for="bankcontact">Contact</label>
                                                        <div class="input-group">
                                                            <span class="input-group-text"><i
                                                                    class="bi bi-telephone"></i></span>
                                                            <input type="text" id="bankcontact"
                                                                class="form-control @error('bankcontact') is-invalid @enderror"
                                                                name="bankcontact" value="{{ old('bankcontact') }}"
                                                                placeholder="e.g. 098 203 981">
                                                            @error('bankcontact')
                                                                <div class="invalid-feedback">{{ $message }}</div>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-12 col-md-6">
                                                    <div class="form-group mb-3">
                                                        <label for="bank_province_id">Province <span
                                                                class="text-danger">*</span></label>
                                                        <div class="input-group">
                                                            <span class="input-group-text"><i
                                                                    class="bi bi-geo-alt"></i></span>
                                                            {{-- FIX: use province ID as value, not name --}}
                                                            <select id="bank_province_id"
                                                                class="form-select @error('bank_province_id') is-invalid @enderror"
                                                                name="bank_province_id" required>
                                                                <option value="">Select Province</option>
                                                                @foreach ($provinces ?? [] as $province)
                                                                    <option value="{{ $province['provinces_id'] ?? '' }}">
                                                                        {{ $province['provinces_name'] ?? '' }}
                                                                    </option>
                                                                @endforeach
                                                            </select>
                                                            @error('bank_province_id')
                                                                <div class="invalid-feedback">{{ $message }}</div>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-12 col-md-6">
                                                    <div class="form-group mb-3">
                                                        <label for="bank_district_id">Khan / District <span
                                                                class="text-danger">*</span></label>
                                                        <div class="input-group">
                                                            <span class="input-group-text"><i
                                                                    class="bi bi-geo-alt"></i></span>
                                                            <select id="bank_district_id"
                                                                class="form-select @error('bank_district_id') is-invalid @enderror"
                                                                name="bank_district_id" required>
                                                                <option value="">Select District</option>
                                                                {{-- Populated dynamically via JS after province is selected --}}
                                                                @foreach ($districts ?? [] as $district)
                                                                    <option value="{{ $district['district_id'] ?? '' }}">
                                                                        {{ $district['district_name'] ?? '' }}
                                                                    </option>
                                                                @endforeach
                                                            </select>
                                                            @error('bank_district_id')
                                                                <div class="invalid-feedback">{{ $message }}</div>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-12 col-md-6">
                                                    <div class="form-group mb-3">
                                                        <label for="bank_commune_id">Sangkat / Commune <span
                                                                class="text-danger">*</span></label>
                                                        <div class="input-group">
                                                            <span class="input-group-text"><i
                                                                    class="bi bi-geo-alt"></i></span>
                                                            <select id="bank_commune_id"
                                                                class="form-select @error('bank_commune_id') is-invalid @enderror"
                                                                name="bank_commune_id" required>
                                                                <option value="">Select Commune</option>
                                                                {{-- Populated dynamically via JS after district is selected --}}
                                                            </select>
                                                            @error('bank_commune_id')
                                                                <div class="invalid-feedback">{{ $message }}</div>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                </div>


                                                <div class="col-12 col-md-6">
                                                    <div class="form-group mb-3">
                                                        <label for="bank_published">Published <span
                                                                class="text-danger">*</span></label>
                                                        <div class="input-group">
                                                            <span class="input-group-text">
                                                                <i class="bi bi-eye"></i></span>
                                                            <select id="bank_published"
                                                                class="form-select @error('bank_published') is-invalid @enderror"
                                                                name="bank_published" required>
                                
                                                                <option value="0">Show</option>
                                                                <option value="1">Hide</option>
                                                            </select>
                                                            @error('bank_published')
                                                                <div class="invalid-feedback">{{ $message }}</div>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-12">
                                                    <div class="form-group mb-3">
                                                        <label for="bank_village">Location</label>
                                                        <div class="input-group">
                                                            <span class="input-group-text"><i
                                                                    class="bi bi-geo-alt"></i></span>
                                                            <input type="text" id="bank_village"
                                                                class="form-control @error('bank_village') is-invalid @enderror"
                                                                name="bank_village" value="{{ old('bank_village') }}"
                                                                placeholder="e.g. Street 51, Phnom Penh">
                                                            @error('bank_village')
                                                                <div class="invalid-feedback">{{ $message }}</div>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                </div>


                                                <div class="col-12 d-flex justify-content-end gap-2">
                                                    <button type="submit" class="btn btn-primary me-1 mb-1">
                                                        <i class="bi bi-plus-circle me-1"></i> Add Bank
                                                    </button>
                                                    <button type="reset" class="btn btn-light-secondary me-1 mb-1">
                                                        <i class="bi bi-arrow-counterclockwise me-1"></i> Reset
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {{-- Bank List Table --}}
            <section class="section">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <h4 class="card-title mb-0">
                                    <i class="bi bi-bank me-2 text-primary"></i>Bank List
                                </h4>
                                <span class="badge bg-primary rounded-pill">{{ count($data) }} Banks</span>
                            </div>

                            <div class="card-body">
                                <div class="mb-3">
                                    <input type="text" id="searchInput" class="form-control"
                                        placeholder="Search by name, acronym, contact or location...">
                                </div>

                                <div class="table-responsive">
                                    <table class="table table-hover table-bordered align-middle mb-0" id="bankTable">
                                        <thead class="table-primary">
                                            <tr>
                                                <th class="text-center" style="width: 70px;">ID</th>
                                                <th>NAME</th>
                                                <th class="text-start" style="width: 100px;">ACRONYM</th>
                                                <th>CONTACT</th>
                                                <th>LOCATION</th>
                                                <th class="text-center" style="width: 140px;">CREATED AT</th>
                                                <th class="text-center" style="width: 100px;">ACTION</th>
                                            </tr>
                                        </thead>
                                        <tbody id="tableBody">
                                            @forelse ($data as $bank)
                                                <tr>
                                                    <td class="text-center">
                                                        <span class="badge text-secondary">{{ $bank['bank_id'] }}</span>
                                                    </td>
                                                    <td class="fw-semibold">{{ $bank['bank_name'] }}</td>
                                                    <td class="text-start">
                                                        <span class="badge bg-primary">{{ $bank['bank_acronym'] }}</span>
                                                    </td>
                                                    <td>
                                                        @if (!empty($bank['bankcontact']))
                                                            <i
                                                                class="bi bi-telephone me-1 text-success"></i>{{ $bank['bankcontact'] }}
                                                        @else
                                                            <span class="text-muted fst-italic">N/A</span>
                                                        @endif
                                                    </td>
                                                    <td>
                                                        @if (!empty($bank['bank_village']))
                                                            <i class="bi bi-geo-alt me-1 text-danger"></i>
                                                            {{ $bank['bank_village'] }}
                                                        @else
                                                            <span class="text-muted fst-italic">N/A</span>
                                                        @endif
                                                    </td>
                                                    <td>
                                                        
                                                        @if (!empty($bank['bank_created_date']))
                                                        <i class="bi bi-calendar3 me-1"></i>
                                                            {{ \Carbon\Carbon::parse($bank['bank_created_date'])->format('d M Y') }}
                                                        @else
                                                            <span class="text-muted fst-italic">N/A</span>
                                                        @endif
                                                    </td>
                                                    <td>
                                                        <div class="d-flex justify-content-center gap-1">

                                                            {{-- FIX: Added all missing data-* attributes including officer, province, district, commune --}}
                                                            <button type="button"
                                                                class="btn btn-sm btn-outline-primary btn-edit"
                                                                data-bs-toggle="modal" data-bs-target="#editBankModal"
                                                                data-id="{{ $bank['bank_id'] }}"
                                                                data-name="{{ $bank['bank_name'] }}"
                                                                data-acronym="{{ $bank['bank_acronym'] }}"
                                                                data-officer="{{ $bank['bankofficer'] }}"
                                                                data-contact="{{ $bank['bankcontact'] }}"
                                                                data-province-id="{{ $bank['bank_province_id'] }}"
                                                                data-district-id="{{ $bank['bank_district_id'] }}"
                                                                data-commune-id="{{ $bank['bank_commune_id'] }}"
                                                                data-village="{{ $bank['bank_village'] }}">
                                                                <i class="bi bi-pencil"></i>
                                                            </button>

                                                            {{-- Delete Button --}}
                                                            {{-- <form action="{{ route('bank.destroy', $bank['bank_id']) }}"
                                                                method="POST" class="d-inline">
                                                                @csrf
                                                                @method('DELETE') --}}
                                                            <button type="button"
                                                                class="btn btn-sm btn-outline-danger btn-delete"
                                                                data-id="{{ $bank['bank_id'] }}"
                                                                data-name="{{ $bank['bank_name'] }}">
                                                                <i class="bi bi-trash"></i>
                                                            </button>
                                                            {{-- </form> --}}

                                                        </div>
                                                    </td>
                                                </tr>
                                            @empty
                                                <tr>
                                                    <td colspan="7" class="text-center py-4 text-muted">
                                                        <i class="bi bi-inbox fs-3 d-block mb-2"></i>No banks found.
                                                    </td>
                                                </tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>

        @include('layouts.footer')
    </div>



    {{-- ==================== TOAST NOTIFICATION ==================== --}}
    <div id="toastContainer"
        style="position:fixed;top:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:10px;"></div>

    @if (session('success'))
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                showToast('success', 'Success', '{{ session('success') }}');
            });
        </script>
    @endif

    @if (session('error'))
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                showToast('error', 'Error', '{{ session('error') }}');
            });
        </script>
    @endif


    {{-- ==================== EDIT MODAL ==================== --}}
    <div class="modal fade" id="editBankModal" tabindex="-1" aria-labelledby="editBankModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">

                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title" id="editBankModalLabel">
                        <i class="bi bi-pencil-square me-2"></i>Edit Bank
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>

                <form id="editBankForm" method="POST" action="">
                    @csrf
                    @method('POST')

                    <div class="modal-body px-4 py-3">
                        <div class="row g-3">

                            <div class="col-12 col-md-6">
                                <label class="form-label fw-semibold">Bank Name <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="bi bi-building"></i></span>
                                    <input type="text" class="form-control" id="edit_bank_name" name="bank_name"
                                        placeholder="Bank Name" required>
                                </div>
                            </div>

                            <div class="col-12 col-md-6">
                                <label class="form-label fw-semibold">Acronym <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="bi bi-tag"></i></span>
                                    <input type="text" class="form-control" id="edit_bank_acronym"
                                        name="bank_acronym" placeholder="Acronym" maxlength="10" required>
                                </div>
                            </div>

                            <div class="col-12 col-md-6">
                                <label class="form-label fw-semibold">Bank Officer <span
                                        class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="bi bi-person"></i></span>
                                    {{-- FIX: name="bankofficer" to match DB column --}}
                                    <input type="text" class="form-control" id="edit_bankofficer" name="bankofficer"
                                        placeholder="Bank Officer" required>
                                </div>
                            </div>

                            <div class="col-12 col-md-6">
                                <label class="form-label fw-semibold">Contact</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="bi bi-telephone"></i></span>
                                    <input type="text" class="form-control" id="edit_bankcontact" name="bankcontact"
                                        placeholder="Contact Number">
                                </div>
                            </div>

                            <div class="col-12 col-md-6">
                                <label class="form-label fw-semibold">Province <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="bi bi-geo-alt"></i></span>
                                    {{-- FIX: removed invalid type="text" from select --}}
                                    <select class="form-select" id="edit_bank_province_id" name="bank_province_id"
                                        required>
                                        <option value="">Select Province</option>
                                        @foreach ($provinces ?? [] as $province)
                                            <option value="{{ $province['provinces_id'] ?? '' }}">
                                                {{ $province['provinces_name'] ?? '' }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="col-12 col-md-6">
                                <label class="form-label fw-semibold">Khan / District <span
                                        class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="bi bi-geo-alt"></i></span>
                                    <select class="form-select" id="edit_bank_district_id" name="bank_district_id"
                                        required>
                                        <option value="">Select District</option>
                                        @foreach ($districts ?? [] as $district)
                                            <option value="{{ $district['district_id'] ?? '' }}">
                                                {{ $district['district_name'] ?? '' }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="col-12 col-md-6">
                                <label class="form-label fw-semibold">Sangkat / Commune <span
                                        class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="bi bi-geo-alt"></i></span>
                                    <select class="form-select" id="edit_bank_commune_id" name="bank_commune_id"
                                        required>
                                        <option value="">Select Commune</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-12 col-md-6">
                                <label class="form-label fw-semibold">Location</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="bi bi-geo-alt"></i></span>
                                    <input type="text" class="form-control" id="edit_bank_village"
                                        name="bank_village" placeholder="Location">
                                </div>
                            </div>



                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                            <i class="bi bi-x-circle me-1"></i> Cancel
                        </button>
                        <button type="submit" class="btn btn-primary" id="editSubmitBtn">
                            <i class="bi bi-check-circle me-1"></i> Save Changes
                        </button>
                    </div>

                </form>
            </div>
        </div>
    </div>
    {{-- ==================== END MODAL ==================== --}}



    {{-- ==================== DELETE MODAL ==================== --}}
    <div class="modal fade" id="deleteBankModal" tabindex="-1" aria-labelledby="deleteBankModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">

                <div class="modal-header bg-danger text-white">
                    <h5 class="modal-title" id="deleteBankModalLabel">
                        <i class="bi bi-exclamation-triangle me-2"></i>Confirm Delete
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body text-center py-4">
                    <i class="bi bi-trash3 text-danger" style="font-size: 3rem;"></i>
                    <h5 class="mt-3">Are you sure?</h5>
                    <p class="text-muted mb-0">
                        You are about to delete <strong id="deleteBankName"></strong>.
                        <br>This action <span class="text-danger fw-semibold">cannot be undone</span>.
                    </p>
                </div>

                <div class="modal-footer justify-content-center gap-2">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                        <i class="bi bi-x-circle me-1"></i> Cancel
                    </button>
                    <form id="deleteBankForm" method="POST">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-danger" id="deleteSubmitBtn">
                            <i class="bi bi-trash me-1"></i> Yes, Delete
                        </button>
                    </form>
                </div>

            </div>
        </div>
    </div>
    {{-- ==================== END DELETE MODAL ==================== --}}


    <script>
        // ── Cascade helper: fetch districts or communes via your API ──
        // Adjust the URLs to match your actual routes.
        async function loadDistricts(provinceId, targetSelect, selectedId = null) {
            targetSelect.innerHTML = '<option value="">Loading...</option>';
            try {
                const res = await fetch(`districts/${provinceId}`);
                if (!res.ok) throw new Error('Network error: ' + res.status);
                const data = await res.json();
                targetSelect.innerHTML = '<option value="">Select District</option>';
                data.forEach(d => {
                    const opt = new Option(d.district_name, d.district_id);
                    if (selectedId && String(d.district_id) === String(selectedId)) opt.selected = true;
                    targetSelect.appendChild(opt);
                });
            } catch (err) {
                console.error('Failed to load districts:', err);
                targetSelect.innerHTML = '<option value="">Error loading districts</option>';
            }
        }

        async function loadCommunes(districtId, targetSelect, selectedId = null) {
            targetSelect.innerHTML = '<option value="">Loading...</option>';
            try {
                const res = await fetch(`communes/${districtId}`);
                if (!res.ok) throw new Error('Network error: ' + res.status);
                const data = await res.json();
                targetSelect.innerHTML = '<option value="">Select Commune</option>';
                data.forEach(d => {
                    const opt = new Option(d.commune_name, d.commune_id);
                    if (selectedId && String(d.commune_id) === String(selectedId)) opt.selected = true;
                    targetSelect.appendChild(opt);
                });
            } catch (err) {
                console.error('Failed to load communes:', err);
                targetSelect.innerHTML = '<option value="">Error loading communes</option>';
            }
        }

        // ── ADD FORM cascades ─────────────────────────────────────────
        const addProvince = document.getElementById('bank_province_id');
        const addDistrict = document.getElementById('bank_district_id');
        const addCommune = document.getElementById('bank_commune_id');

        addProvince.addEventListener('change', function() {
            addDistrict.innerHTML = '<option value="">Select District</option>';
            addCommune.innerHTML = '<option value="">Select Commune</option>';
            if (this.value) loadDistricts(this.value, addDistrict);
        });

        addDistrict.addEventListener('change', function() {
            addCommune.innerHTML = '<option value="">Select Commune</option>';
            if (this.value) loadCommunes(this.value, addCommune);
        });

        // ── EDIT MODAL cascades ───────────────────────────────────────
        const editProvince = document.getElementById('edit_bank_province_id');
        const editDistrict = document.getElementById('edit_bank_district_id');
        const editCommune = document.getElementById('edit_bank_commune_id');


        editProvince.addEventListener('change', function() {
            editDistrict.innerHTML = '<option value="">Select District</option>';
            editCommune.innerHTML = '<option value="">Select Commune</option>';
            if (this.value) loadDistricts(this.value, editDistrict);
        });

        editDistrict.addEventListener('change', function() {
            editCommune.innerHTML = '<option value="">Select Commune</option>';
            if (this.value) loadCommunes(this.value, editCommune);
        });

        // ── Populate Edit Modal ───────────────────────────────────────
        document.querySelectorAll('.btn-edit').forEach(btn => {
            btn.addEventListener('click', async function() {
                const id = this.dataset.id;
                const name = this.dataset.name;
                const acronym = this.dataset.acronym;
                const officer = this.dataset.officer; // FIX: was missing
                const contact = this.dataset.contact;
                const provinceId = this.dataset.provinceId;
                const districtId = this.dataset.districtId;
                const communeId = this.dataset.communeId;
                const village = this.dataset.village;
                


                // Basic fields
                document.getElementById('edit_bank_name').value = name;
                document.getElementById('edit_bank_acronym').value = acronym;
                document.getElementById('edit_bankofficer').value = officer; // FIX
                document.getElementById('edit_bankcontact').value = contact;
                document.getElementById('edit_bank_village').value = village;


                // Province
                editProvince.value = provinceId;

                // FIX: Load districts then communes sequentially so selected values work
                await loadDistricts(provinceId, editDistrict, districtId);
                await loadCommunes(districtId, editCommune, communeId);

                // Set form action using named route pattern
                document.getElementById('editBankForm').action = `bank/${id}`;
            });
        });


        // ── Delete Modal ──────────────────────────────────────────
        document.querySelectorAll('.btn-delete').forEach(btn => {
            btn.addEventListener('click', function() {
                const id = this.dataset.id;
                const name = this.dataset.name;

                document.getElementById('deleteBankName').textContent = name;
                document.getElementById('deleteBankForm').action = `bank/${id}`; // ✅ dynamic

                new bootstrap.Modal(document.getElementById('deleteBankModal')).show();
            });
        });

        // Loading state on delete submit
        document.getElementById('deleteBankForm').addEventListener('submit', function() {
            const btn = document.getElementById('deleteSubmitBtn');
            btn.disabled = true;
            btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span> Deleting...';
        });





        // ── Auto-uppercase acronym ────────────────────────────────────
        ['bank_acronym', 'edit_bank_acronym'].forEach(id => {
            const el = document.getElementById(id);
            if (el) el.addEventListener('input', () => el.value = el.value.toUpperCase());
        });

        // ── Live Search ───────────────────────────────────────────────
        document.getElementById('searchInput').addEventListener('keyup', function() {
            const query = this.value.toLowerCase();
            document.querySelectorAll('#tableBody tr').forEach(row => {
                row.style.display = row.textContent.toLowerCase().includes(query) ? '' : 'none';
            });
        });

        // ── Loading state on edit submit ──────────────────────────────
        document.getElementById('editBankForm').addEventListener('submit', function() {
            const btn = document.getElementById('editSubmitBtn');
            btn.disabled = true;
            btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span> Saving...';
        });

        async function loadDistricts(provinceId, targetSelect, selectedId = null) {
            targetSelect.innerHTML = '<option value="">Loading...</option>';

            try {
                const res = await fetch(`districts/${provinceId}`);

                if (!res.ok) throw new Error('Network error: ' + res.status);

                const data = await res.json();
                // console.log('Districts response:', data); // ← check this in browser console

                targetSelect.innerHTML = '<option value="">Select District</option>';

                // Adjust these keys to match your actual API response
                data.forEach(d => {
                    const opt = new Option(d.district_name, d.district_id);
                    if (selectedId && String(d.district_id) === String(selectedId)) opt.selected = true;
                    targetSelect.appendChild(opt);
                });

            } catch (err) {
                console.error('Failed to load districts:', err);
                targetSelect.innerHTML = '<option value="">Error loading districts</option>';
            }
        }
        async function loadCommunes(districtId, targetSelect, selectedId = null) {
            targetSelect.innerHTML = '<option value="">Loading...</option>';

            try {
                const res = await fetch(`communes/${districtId}`);

                if (!res.ok) throw new Error('Network error: ' + res.status);

                const data = await res.json();
                // console.log('Communes response:', data); // ← check this in browser console

                targetSelect.innerHTML = '<option value="">Select Commune</option>';

                // Adjust these keys to match your actual API response
                data.forEach(d => {
                    const opt = new Option(d.commune_name, d.commune_id);
                    if (selectedId && String(d.commune_id) === String(selectedId)) opt.selected = true;
                    targetSelect.appendChild(opt);
                });

            } catch (err) {
                console.error('Failed to load communes:', err);
                targetSelect.innerHTML = '<option value="">Error loading communes</option>';
            }
        }

        function showToast(type, title, message, duration = 4000) {
            const container = document.getElementById('toastContainer');
            const toast = document.createElement('div');
            const isSuccess = type === 'success';
            toast.style.cssText = `
        display:flex;align-items:flex-start;gap:12px;
        background:var(--color-background-primary,#fff);
        border:0.5px solid #ddd;border-radius:12px;
        padding:14px 16px;min-width:300px;max-width:380px;
        border-left:3px solid ${isSuccess ? '#1D9E75' : '#E24B4A'};
        animation:toastIn .3s ease;
    `;
            toast.innerHTML = `
        <div style="width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:13px;font-weight:500;background:${isSuccess ? '#E1F5EE' : '#FCEBEB'};color:${isSuccess ? '#0F6E56' : '#A32D2D'};">
            ${isSuccess ? '✓' : '✕'}
        </div>
        <div style="flex:1;">
            <p style="font-size:14px;font-weight:500;margin:0 0 2px;">${title}</p>
            <p style="font-size:13px;color:#666;margin:0;">${message}</p>
        </div>
        <button onclick="this.parentElement.remove()" style="font-size:18px;background:none;border:none;cursor:pointer;color:#999;padding:0;line-height:1;">×</button>
    `;

            if (!document.getElementById('toastKeyframes')) {
                const style = document.createElement('style');
                style.id = 'toastKeyframes';
                style.textContent =
                    '@keyframes toastIn{from{transform:translateX(40px);opacity:0}to{transform:translateX(0);opacity:1}}';
                document.head.appendChild(style);
            }

            container.appendChild(toast);
            setTimeout(() => toast.remove(), duration);
        }
    </script>
@endsection