@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>Branch Management</h3>
                        <p class="text-subtitle text-muted">Manage and view registered bank branches</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 -> Branch</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>

            {{-- Add Branch 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 Branch</h4>
                            </div>
                            <div class="card-content">
                                <div class="card-body">
                                    <form class="form form-vertical" action="{{ route('brand.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_branch_name">Branch 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_branch_name"
                                                                class="form-control @error('bank_branch_name') is-invalid @enderror"
                                                                name="bank_branch_name"
                                                                value="{{ old('bank_branch_name') }}"
                                                                placeholder="e.g. 271 Branch" required>
                                                            @error('bank_branch_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_brand_officer">Branch Officer</label>
                                                        <div class="input-group">
                                                            <span class="input-group-text"><i
                                                                    class="bi bi-person"></i></span>
                                                            <input type="text" id="bank_brand_officer"
                                                                class="form-control @error('bank_brand_officer') is-invalid @enderror"
                                                                name="bank_brand_officer"
                                                                value="{{ old('bank_brand_officer') }}"
                                                                placeholder="e.g. John Doe">
                                                            @error('bank_brand_officer')
                                                                <div class="invalid-feedback">{{ $message }}</div>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-12 col-md-6">
                                                    <label for="edit_brand_bank_name">Bank Name <span
                                                            class="text-danger">*</span></label>
                                                    <div class="input-group">
                                                        <span class="input-group-text"><i class="bi bi-bank"></i></span>
                                                        <select class="form-select" id="edit_brand_bank_name"
                                                            name="brand_bank_name">
                                                            <option value="">Select a Bank</option>
                                                            @foreach ($banks as $bank)
                                                                <option value="{{ $bank['bank_id'] }}">
                                                                    {{ $bank['bank_name'] }} ({{ $bank['bank_acronym'] }})
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="col-12 col-md-6">
                                                    <div class="form-group mb-3">
                                                        <label for="bank_brand_contact">Contact</label>
                                                        <div class="input-group">
                                                            <span class="input-group-text"><i
                                                                    class="bi bi-telephone"></i></span>
                                                            <input type="text" id="bank_brand_contact"
                                                                class="form-control @error('bank_brand_contact') is-invalid @enderror"
                                                                name="bank_brand_contact"
                                                                value="{{ old('bank_brand_contact') }}"
                                                                placeholder="e.g. 098 203 981">
                                                            @error('bank_brand_contact')
                                                                <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_branch_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>
                                                            <select id="bank_branch_province_id"
                                                                class="form-select @error('bank_branch_province_id') is-invalid @enderror"
                                                                name="bank_branch_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_branch_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_branch_district_id">Khan / District</label>
                                                        <div class="input-group">
                                                            <span class="input-group-text"><i
                                                                    class="bi bi-geo-alt"></i></span>
                                                            <select id="bank_branch_district_id"
                                                                class="form-select @error('bank_branch_district_id') is-invalid @enderror"
                                                                name="bank_branch_district_id">
                                                                <option value="">Select District</option>
                                                            </select>
                                                            @error('bank_branch_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_branch_commune_id">Sangkat / Commune</label>
                                                        <div class="input-group">
                                                            <span class="input-group-text"><i
                                                                    class="bi bi-geo-alt"></i></span>
                                                            <select id="bank_branch_commune_id"
                                                                class="form-select @error('bank_branch_commune_id') is-invalid @enderror"
                                                                name="bank_branch_commune_id">
                                                                <option value="">Select Commune</option>
                                                            </select>
                                                            @error('bank_branch_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_branch_published">Published</label>
                                                        <div class="input-group">
                                                            <span class="input-group-text"><i
                                                                    class="bi bi-eye"></i></span>
                                                            <select class="form-select" id="edit_branch_published"
                                                                name="bank_branch_published">
                                                                <option value="0">Show</option>
                                                                <option value="1">Hide</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-12">
                                                    <div class="form-group mb-3">
                                                        <label for="bank_branch_village">Village</label>
                                                        <div class="input-group">
                                                            <span class="input-group-text"><i
                                                                    class="bi bi-geo-alt"></i></span>
                                                            <input type="text" id="bank_branch_village"
                                                                class="form-control @error('bank_branch_village') is-invalid @enderror"
                                                                name="bank_branch_village"
                                                                value="{{ old('bank_branch_village') }}"
                                                                placeholder="e.g. Street 51, Phnom Penh">
                                                            @error('bank_branch_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 Branch
                                                    </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>

            {{-- Branch 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-diagram-3 me-2 text-primary"></i>Branch List
                                </h4>
                                <span class="badge bg-primary rounded-pill">{{ count($data) }} Branches</span>
                            </div>

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

                                <div class="table-responsive">
                                    <table class="table table-hover table-bordered align-middle mb-0" id="branchTable">
                                        <thead class="table-primary">
                                            <tr>
                                                <th class="text-center" style="width: 70px;">ID</th>
                                                <th>BRAND NAME</th>
                                                <th>BRAND OFFICER</th>
                                                <th>BRAND CONTACT</th>
                                                <th>BRAND LOCATION</th>

                                                <th>CREATED AT</th>
                                                <th>CREATED BY</th>
                                                <th class="text-center" style="width: 100px;">ACTION</th>
                                            </tr>
                                        </thead>
                                        <tbody id="tableBody">
                                            @forelse ($data as $branch)
                                                <tr>
                                                    <td class="text-center">
                                                        <span
                                                            class="badge text-secondary">{{ $branch['bank_branch_id'] }}</span>
                                                    </td>
                                                    <td class="fw-semibold">{{ $branch['bank_branch_name'] }}</td>
                                                    <td>
                                                        @if (!empty($branch['bank_brand_officer']))
                                                            <i
                                                                class="bi bi-person me-1 text-primary"></i>{{ $branch['bank_brand_officer'] }}
                                                        @else
                                                            <span class="text-muted fst-italic">N/A</span>
                                                        @endif
                                                    </td>
                                                    <td>
                                                        @if (!empty($branch['bank_brand_contact']))
                                                            <i
                                                                class="bi bi-telephone me-1 text-success"></i>{{ $branch['bank_brand_contact'] }}
                                                        @else
                                                            <span class="text-muted fst-italic">N/A</span>
                                                        @endif
                                                    </td>


                                                    <td>
                                                        @if (!empty($branch['bank_branch_village']))
                                                            <i
                                                                class="bi bi-geo-alt me-1 text-danger"></i>{{ $branch['bank_branch_village'] }}
                                                        @else
                                                            <span class="text-muted fst-italic">N/A</span>
                                                        @endif
                                                    </td>
                                                    <td>
                                                        
                                                        @if (!empty($branch['created_at']))
                                                            <i class="bi bi-calendar3 me-1"></i>
                                                            {{ \Carbon\Carbon::parse($branch['created_at'])->format('d M Y') }}
                                                        @else
                                                            <span class="text-muted fst-italic">N/A</span>
                                                        @endif
                                                    </td>
                                                    <td>
                                                        @if (!empty($branch['bank_branch_created_by']))
                                                            <i class="bi bi-person-badge me-1 text-info"></i>
                                                            {{ $admins[(string) $branch['bank_branch_created_by']] ?? 'Unknown' }}
                                                        @else
                                                            <span class="text-muted fst-italic">N/A</span>
                                                        @endif
                                                    </td>
                                                    <td>
                                                        <div class="d-flex justify-content-center gap-1">
                                                            <button type="button"
                                                                class="btn btn-sm btn-outline-primary btn-edit"
                                                                data-bs-toggle="modal" data-bs-target="#editBranchModal"
                                                                data-id="{{ $branch['bank_branch_id'] }}"
                                                                data-name="{{ $branch['bank_branch_name'] }}"
                                                                data-officer="{{ $branch['bank_brand_officer'] }}"
                                                                data-contact="{{ $branch['bank_brand_contact'] }}"
                                                                data-bank-id="{{ $branch['bank_branch_details_id'] }}"
                                                                data-province-id="{{ $branch['bank_branch_province_id'] }}"
                                                                data-district-id="{{ $branch['bank_branch_district_id'] }}"
                                                                data-commune-id="{{ $branch['bank_branch_commune_id'] }}"
                                                                data-village="{{ $branch['bank_branch_village'] }}">
                                                                <i class="bi bi-pencil"></i>
                                                            </button>

                                                            <button type="button"
                                                                class="btn btn-sm btn-outline-danger btn-delete"
                                                                data-id="{{ $branch['bank_branch_id'] }}"
                                                                data-name="{{ $branch['bank_branch_name'] }}">
                                                                <i class="bi bi-trash"></i>
                                                            </button>
                                                        </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 branches found.
                                                    </td>
                                                </tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>

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

    {{-- ==================== TOAST ==================== --}}
    <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="editBranchModal" tabindex="-1" aria-labelledby="editBranchModalLabel"
        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="editBranchModalLabel">
                        <i class="bi bi-pencil-square me-2"></i>Edit Branch
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>

                <form id="editBranchForm" method="POST">
                    @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">Branch 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_branch_name"
                                        name="bank_branch_name" placeholder="Branch Name" required>
                                </div>
                            </div>

                            <div class="col-12 col-md-6">
                                <label class="form-label fw-semibold">Branch Officer</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="bi bi-person"></i></span>
                                    <input type="text" class="form-control" id="edit_branch_officer"
                                        name="bank_brand_officer" placeholder="Branch Officer">
                                </div>
                            </div>

                            <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-geo-alt"></i></span>
                                    <select class="form-select" id="edit_brand_bank_id" name="branch_bank_id" required>
                                        <option value="">Select Bank</option>
                                        @foreach ($banks ?? [] as $bank)
                                            <option value="{{ $bank['bank_id'] }}"> {{-- ✅ was banks_id --}}
                                                {{ $bank['bank_name'] }} ({{ $bank['bank_acronym'] }})
                                            </option>
                                        @endforeach
                                    </select>
                                </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_branch_contact"
                                        name="bank_brand_contact" 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>
                                    <select class="form-select" id="edit_branch_province_id"
                                        name="bank_branch_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</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="bi bi-geo-alt"></i></span>
                                    <select class="form-select" id="edit_branch_district_id"
                                        name="bank_branch_district_id">
                                        <option value="">Select District</option>
                                    </select>
                                </div>
                            </div>

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

                            <div class="col-12 col-md-6">
                                <label class="form-label fw-semibold">Village</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_branch_village"
                                        name="bank_branch_village" placeholder="Village">
                                </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 EDIT MODAL ==================== --}}

    {{-- ==================== DELETE MODAL ==================== --}}
    <div class="modal fade" id="deleteBranchModal" tabindex="-1" aria-labelledby="deleteBranchModalLabel"
        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="deleteBranchModalLabel">
                        <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="deleteBranchName"></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="deleteBranchForm" 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 helpers ───────────────────────────────────────────
        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) {
                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) {
                targetSelect.innerHTML = '<option value="">Error loading communes</option>';
            }
        }

        // ── ADD FORM cascades ─────────────────────────────────────────
        const addProvince = document.getElementById('bank_branch_province_id');
        const addDistrict = document.getElementById('bank_branch_district_id');
        const addCommune = document.getElementById('bank_branch_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_branch_province_id');
        const editDistrict = document.getElementById('edit_branch_district_id');
        const editCommune = document.getElementById('edit_branch_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 officer = this.dataset.officer;
                const contact = this.dataset.contact;
                const bankId = this.dataset.bankId; // ✅ matches data-bank-id
                const provinceId = this.dataset.provinceId;
                const districtId = this.dataset.districtId;
                const communeId = this.dataset.communeId;
                const village = this.dataset.village;

                document.getElementById('edit_branch_name').value = name;
                document.getElementById('edit_branch_officer').value = officer;
                document.getElementById('edit_branch_contact').value = contact;
                document.getElementById('edit_branch_village').value = village;
                document.getElementById('edit_brand_bank_id').value = bankId; // ✅ was brandBankId

                editProvince.value = provinceId;

                if (provinceId && provinceId !== '0') {
                    await loadDistricts(provinceId, editDistrict, districtId);
                }
                if (districtId && districtId !== '0') {
                    await loadCommunes(districtId, editCommune, communeId);
                }

                document.getElementById('editBranchForm').action = `brand/${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('deleteBranchName').textContent = name;
                document.getElementById('deleteBranchForm').action = `brand/${id}`;

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

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

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

        // ── 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';
            });
        });

        // ── Toast ─────────────────────────────────────────────────────
        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:#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