@extends('admin.layouts.app', ['title' => 'Dealer Management'])

@push('head')
    <style>
        .admin-module-hero {
            position: relative;
            overflow: hidden;
            border: 0;
            border-radius: 0.5rem;
            padding: 1.25rem 1.35rem;
            margin-bottom: 1rem;
            color: #f8fbff;
            background: linear-gradient(135deg, #0f4c5c 0%, #146c7d 45%, #1a879c 100%);
            box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
        }

        .admin-module-hero::before {
            content: "";
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle at top right, rgba(255, 255, 255, 0.18), transparent 34%),
                linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 55%);
            pointer-events: none;
        }

        .admin-module-hero > * {
            position: relative;
            z-index: 1;
        }

        .dealer-modal.assign-merchants-modal .modal-content {
            max-height: calc(100vh - 2rem);
            border: 0;
            overflow: hidden;
        }

        .dealer-modal.assign-merchants-modal .modal-header {
            position: sticky;
            top: 0;
            z-index: 3;
            background: var(--bs-modal-bg, #fff);
        }

        .dealer-modal.assign-merchants-modal .modal-body {
            flex: 1 1 auto;
            overflow: hidden;
            padding-bottom: 0.75rem;
        }

        .dealer-modal.assign-merchants-modal .modal-footer {
            position: sticky;
            bottom: 0;
            z-index: 3;
            background: var(--bs-modal-bg, #fff);
            border-top: 1px solid rgba(148, 163, 184, 0.16);
        }

        html[data-theme="dark"] .dealer-modal.assign-merchants-modal .modal-content {
            background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 0.96));
            color: var(--admin-text);
            box-shadow: 0 24px 60px rgba(0, 0, 0, 0.38);
        }

        html[data-theme="dark"] .dealer-modal.assign-merchants-modal .modal-header,
        html[data-theme="dark"] .dealer-modal.assign-merchants-modal .modal-footer {
            background: rgba(15, 23, 42, 0.96);
            border-color: rgba(148, 163, 184, 0.18);
        }

        html[data-theme="dark"] .dealer-modal.assign-merchants-modal .modal-title,
        html[data-theme="dark"] .dealer-modal.assign-merchants-modal .form-label {
            color: #e5eefb;
        }

        html[data-theme="dark"] .dealer-modal.assign-merchants-modal .btn-close {
            filter: invert(1) grayscale(100%);
            opacity: 0.85;
        }

        .dealer-modal.form-modal .modal-content {
            max-height: calc(100vh - 2rem);
            overflow: hidden;
        }

        .dealer-modal.form-modal .modal-body {
            overflow-y: auto;
        }

        html[data-theme="dark"] .dealer-modal.form-modal .modal-content {
            background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 0.96));
            color: var(--admin-text);
            box-shadow: 0 24px 60px rgba(0, 0, 0, 0.38);
        }

        html[data-theme="dark"] .dealer-modal.form-modal .modal-header,
        html[data-theme="dark"] .dealer-modal.form-modal .modal-footer {
            background: rgba(15, 23, 42, 0.96);
            border-color: rgba(148, 163, 184, 0.18);
        }

        html[data-theme="dark"] .dealer-modal.form-modal .modal-title,
        html[data-theme="dark"] .dealer-modal.form-modal .form-label {
            color: #e5eefb;
        }

        html[data-theme="dark"] .dealer-modal.form-modal .btn-close {
            filter: invert(1) grayscale(100%);
            opacity: 0.85;
        }

        html[data-theme="dark"] .dealer-modal.form-modal .form-control,
        html[data-theme="dark"] .dealer-modal.form-modal .form-select {
            background: rgba(15, 23, 42, 0.88);
            color: #e5eefb;
            border-color: rgba(148, 163, 184, 0.2);
        }

        html[data-theme="dark"] .dealer-modal.form-modal .form-control::placeholder {
            color: #8ea0b8;
        }

        html[data-theme="dark"] .dealer-modal.form-modal .form-control:focus,
        html[data-theme="dark"] .dealer-modal.form-modal .form-select:focus {
            border-color: rgba(96, 165, 250, 0.45);
            box-shadow: 0 0 0 0.18rem rgba(59, 130, 246, 0.16);
        }

        html[data-theme="dark"] .admin-body .table {
            --bs-table-bg: transparent;
            --bs-table-color: var(--admin-text);
            --bs-table-border-color: var(--admin-border);
            --bs-table-striped-bg: rgba(148, 163, 184, 0.04);
            --bs-table-striped-color: var(--admin-text);
            --bs-table-hover-bg: rgba(148, 163, 184, 0.06);
            --bs-table-hover-color: var(--admin-text);
        }

        html[data-theme="dark"] .admin-body .table > :not(caption) > * > * {
            background-color: transparent !important;
            color: var(--admin-text) !important;
            border-bottom-color: var(--admin-border) !important;
        }

        html[data-theme="dark"] .admin-body .table thead th {
            color: #cbd5e1 !important;
        }

        html[data-theme="dark"] .admin-body .table-responsive {
            border-radius: 1rem;
        }

        .merchant-picker-shell {
            border: 1px solid rgba(148, 163, 184, 0.18);
            border-radius: 1rem;
            background: rgba(248, 250, 252, 0.9);
            padding: 0.9rem;
            display: flex;
            flex-direction: column;
            max-height: calc(100vh - 240px);
        }

        .assign-dealer-field {
            margin-bottom: 0.75rem;
        }

        .assign-dealer-field .form-label {
            margin-bottom: 0.35rem;
            font-size: 0.8rem;
            font-weight: 700;
        }

        .assign-dealer-field .form-control,
        .merchant-picker-search .form-control {
            min-height: 2.35rem;
            font-size: 0.88rem;
        }

        html[data-theme="dark"] .merchant-picker-shell {
            background: rgba(15, 23, 42, 0.72);
            border-color: rgba(148, 163, 184, 0.16);
        }

        html[data-theme="dark"] .assign-dealer-field .form-control,
        html[data-theme="dark"] .merchant-picker-search .form-control,
        html[data-theme="dark"] .merchant-settings-field .form-control {
            background: rgba(15, 23, 42, 0.88);
            color: #e5eefb;
            border-color: rgba(148, 163, 184, 0.2);
        }

        html[data-theme="dark"] .assign-dealer-field .form-control::placeholder,
        html[data-theme="dark"] .merchant-picker-search .form-control::placeholder {
            color: #8ea0b8;
        }

        html[data-theme="dark"] .assign-dealer-field .form-control:focus,
        html[data-theme="dark"] .merchant-picker-search .form-control:focus,
        html[data-theme="dark"] .merchant-settings-field .form-control:focus {
            border-color: rgba(96, 165, 250, 0.45);
            box-shadow: 0 0 0 0.18rem rgba(59, 130, 246, 0.16);
        }

        .merchant-picker-toolbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            margin-bottom: 0.75rem;
            flex-wrap: wrap;
            flex: 0 0 auto;
        }

        .merchant-picker-search {
            position: relative;
            flex: 1 1 280px;
        }

        .merchant-picker-search .bi {
            position: absolute;
            left: 0.85rem;
            top: 50%;
            transform: translateY(-50%);
            color: var(--admin-muted);
        }

        .merchant-picker-search input {
            padding-left: 2.35rem;
            border-radius: 999px;
        }

        .merchant-selection-count {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            padding: 0.5rem 0.9rem;
            border-radius: 999px;
            background: rgba(14, 116, 144, 0.12);
            color: #0f766e;
            font-weight: 700;
            font-size: 0.84rem;
        }

        html[data-theme="dark"] .merchant-selection-count {
            color: #67e8f9;
            background: rgba(34, 211, 238, 0.12);
        }

        .merchant-selected-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-bottom: 0.75rem;
            min-height: 1.5rem;
            flex: 0 0 auto;
        }

        .merchant-chip {
            display: inline-flex;
            align-items: center;
            padding: 0.38rem 0.7rem;
            border-radius: 999px;
            font-size: 0.78rem;
            font-weight: 700;
            background: rgba(59, 130, 246, 0.12);
            color: #1d4ed8;
        }

        html[data-theme="dark"] .merchant-chip {
            background: rgba(96, 165, 250, 0.14);
            color: #bfdbfe;
        }

        .merchant-chip-empty {
            color: var(--admin-muted);
            background: transparent;
            padding-left: 0;
        }

        .merchant-picker-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0.75rem;
            max-height: none;
            flex: 1 1 auto;
            min-height: 0;
            overflow-y: auto;
            padding-right: 0.35rem;
            padding-bottom: 0.9rem;
            align-content: start;
        }

        .merchant-picker-item {
            position: relative;
        }

        .merchant-picker-checkbox {
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }

        .merchant-picker-card {
            display: block;
            border: 1px solid rgba(148, 163, 184, 0.18);
            border-radius: 1rem;
            padding: 0.8rem 0.9rem;
            background: var(--admin-card, #fff);
            cursor: pointer;
            transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
        }

        .merchant-picker-card:hover {
            transform: translateY(-1px);
            border-color: rgba(14, 116, 144, 0.28);
        }

        .merchant-picker-item.is-locked .merchant-picker-card {
            opacity: 0.58;
            filter: grayscale(0.15);
            cursor: not-allowed;
            background: linear-gradient(180deg, rgba(148, 163, 184, 0.12), rgba(148, 163, 184, 0.04));
        }

        .merchant-picker-item.is-locked .merchant-picker-card:hover {
            transform: none;
            border-color: rgba(148, 163, 184, 0.22);
        }

        .merchant-picker-lock-note {
            display: none;
            margin-top: 0.4rem;
            color: #b45309;
            font-size: 0.72rem;
            font-weight: 700;
        }

        .merchant-picker-item.is-locked .merchant-picker-lock-note {
            display: block;
        }

        .assign-merchant-status-note {
            display: none;
            margin-bottom: 0.65rem;
        }

        .assign-merchant-status-note.is-visible {
            display: block;
        }

        html[data-theme="dark"] .merchant-picker-card {
            background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(17, 24, 39, 0.94));
            border-color: rgba(148, 163, 184, 0.16);
            box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
        }

        html[data-theme="dark"] .merchant-picker-item.is-locked .merchant-picker-card {
            background: linear-gradient(180deg, rgba(30, 41, 59, 0.92), rgba(15, 23, 42, 0.96));
            border-color: rgba(148, 163, 184, 0.18);
        }

        html[data-theme="dark"] .merchant-picker-lock-note {
            color: #fbbf24;
        }

        html[data-theme="dark"] .merchant-picker-card:hover {
            border-color: rgba(34, 211, 238, 0.26);
        }

        .merchant-picker-checkbox:checked + .merchant-picker-card {
            border-color: #0f766e;
            box-shadow: 0 14px 30px rgba(15, 118, 110, 0.14);
            background: linear-gradient(180deg, rgba(20, 184, 166, 0.08), rgba(15, 118, 110, 0.03));
        }

        html[data-theme="dark"] .merchant-picker-checkbox:checked + .merchant-picker-card {
            border-color: rgba(45, 212, 191, 0.65);
            box-shadow: 0 14px 30px rgba(13, 148, 136, 0.24);
            background: linear-gradient(180deg, rgba(20, 184, 166, 0.16), rgba(15, 23, 42, 0.96));
        }

        .merchant-picker-head {
            display: flex;
            align-items: start;
            justify-content: space-between;
            gap: 0.75rem;
            margin-bottom: 0.35rem;
        }

        .merchant-picker-name {
            font-weight: 700;
        }

        html[data-theme="dark"] .merchant-picker-name {
            color: #f8fbff;
        }

        .merchant-picker-meta {
            color: var(--admin-muted);
            font-size: 0.76rem;
            line-height: 1.35;
        }

        .merchant-picker-status {
            white-space: nowrap;
        }

        .merchant-picker-empty {
            display: none;
            text-align: center;
            color: var(--admin-muted);
            padding: 1.1rem 0.5rem 0.25rem;
            font-size: 0.9rem;
        }

        .merchant-settings-card {
            display: none;
            margin-top: 0.55rem;
            border: 1px solid rgba(148, 163, 184, 0.18);
            border-radius: 1rem;
            background: rgba(255, 255, 255, 0.82);
            padding: 0.65rem;
        }

        .merchant-picker-item.is-selected .merchant-settings-card {
            display: block;
        }

        html[data-theme="dark"] .merchant-settings-card {
            background: rgba(15, 23, 42, 0.82);
            border-color: rgba(148, 163, 184, 0.16);
        }

        html[data-theme="dark"] .merchant-settings-heading {
            color: #dbeafe;
        }

        .merchant-settings-heading {
            font-weight: 800;
            font-size: 0.78rem;
            margin-bottom: 0.45rem;
        }

        .merchant-settings-columns {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            gap: 0.6rem;
            align-items: start;
        }

        .merchant-settings-section {
            min-width: 0;
        }

        .merchant-settings-section + .merchant-settings-section {
            margin-top: 0;
            padding-top: 0;
            padding-left: 0.6rem;
            border-top: 0;
            border-left: 1px dashed rgba(148, 163, 184, 0.2);
        }

        .merchant-settings-grid {
            display: grid;
            gap: 0.4rem;
        }

        .merchant-settings-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 98px;
            gap: 0.4rem;
            align-items: end;
        }

        .merchant-settings-row.has-commission {
            grid-template-columns: minmax(0, 1fr) 98px;
        }

        .merchant-settings-field {
            display: grid;
            gap: 0.3rem;
        }

        .merchant-settings-field label {
            margin: 0;
            font-size: 0.66rem;
            font-weight: 700;
            color: var(--admin-muted);
            line-height: 1.2;
        }

        .merchant-settings-field input {
            min-height: 1.95rem;
            border-radius: 0.6rem;
            font-size: 0.8rem;
            padding: 0.3rem 0.5rem;
        }

        .merchant-settings-field input[readonly] {
            background: rgba(148, 163, 184, 0.08);
        }

        html[data-theme="dark"] .merchant-settings-field input[readonly] {
            background: rgba(30, 41, 59, 0.88);
            color: #e5eefb;
        }

        @media (max-width: 767.98px) {
            .dealer-modal.assign-merchants-modal .modal-dialog {
                margin: 0.65rem;
                max-width: none;
            }

            .dealer-modal.assign-merchants-modal .modal-content {
                max-height: calc(100vh - 1.3rem);
                border-radius: 0.7rem;
            }

            .dealer-modal.assign-merchants-modal .modal-header,
            .dealer-modal.assign-merchants-modal .modal-footer {
                padding: 0.65rem 0.8rem;
            }

            .dealer-modal.assign-merchants-modal .modal-body {
                padding: 0.75rem;
            }

            .dealer-modal.form-modal .modal-dialog {
                margin: 0.65rem;
                max-width: none;
            }

            .dealer-modal.form-modal .modal-content {
                max-height: calc(100vh - 1.3rem);
                border-radius: 0.7rem;
            }

            .dealer-modal.form-modal .modal-header {
                padding: 0.65rem 0.8rem;
            }

            .dealer-modal.form-modal .modal-body {
                padding: 0.75rem;
                max-height: calc(100vh - 4.4rem);
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
            }

            .assign-dealer-field {
                margin-bottom: 0.5rem;
            }

            .assign-dealer-field .form-label {
                font-size: 0.68rem;
                margin-bottom: 0.22rem;
            }

            .assign-dealer-field .form-control,
            .merchant-picker-search .form-control {
                min-height: 1.72rem;
                font-size: 0.72rem;
                padding-top: 0.12rem;
                padding-bottom: 0.12rem;
            }

            .merchant-picker-shell {
                max-height: calc(100vh - 170px);
                padding: 0.6rem;
            }

            .merchant-picker-toolbar {
                gap: 0.6rem;
                margin-bottom: 0.45rem;
            }

            .merchant-picker-search .bi {
                left: 0.68rem;
                font-size: 0.78rem;
            }

            .merchant-picker-search input {
                padding-left: 2rem;
            }

            .merchant-selection-count {
                padding: 0.38rem 0.65rem;
                font-size: 0.74rem;
            }

            .merchant-selection-count {
                display: none;
            }

            .merchant-picker-grid {
                grid-template-columns: minmax(0, 1fr);
                gap: 0.6rem;
                padding-bottom: 4.25rem;
            }

            .merchant-settings-row,
            .merchant-settings-row.has-commission {
                grid-template-columns: minmax(0, 1fr) 76px;
            }

            .merchant-settings-columns {
                grid-template-columns: 40% minmax(0, 60%);
                gap: 0.35rem;
            }

            .merchant-settings-section + .merchant-settings-section {
                margin-top: 0;
                padding-top: 0;
                padding-left: 0.45rem;
                border-top: 0;
                border-left: 1px dashed rgba(148, 163, 184, 0.2);
            }

            .merchant-selected-chips {
                display: none;
            }

            .merchant-settings-card {
                padding: 0.45rem;
                margin-top: 0.45rem;
            }

            .merchant-settings-heading {
                font-size: 0.68rem;
                margin-bottom: 0.28rem;
            }

            .merchant-settings-grid {
                gap: 0.24rem;
            }

            .merchant-settings-field label {
                font-size: 0.56rem;
            }

            .merchant-settings-field input {
                min-height: 1.56rem;
                padding: 0.16rem 0.3rem;
                font-size: 0.68rem;
            }

            .merchant-picker-card {
                padding: 0.55rem 0.6rem;
            }

            .merchant-picker-name {
                font-size: 0.8rem;
            }

            .merchant-picker-meta {
                font-size: 0.64rem;
                line-height: 1.25;
            }

            .merchant-picker-status {
                font-size: 0.6rem;
            }

            .modal-footer .btn {
                min-height: 2.1rem;
                font-size: 0.78rem;
                padding-inline: 0.75rem;
            }
        }
    </style>
@endpush

@section('content')
    <div class="admin-module-hero d-flex align-items-center justify-content-between flex-wrap gap-3">
        <div>
            <h1 class="h4 mb-0">Dealer Management</h1>
            {{-- <div class="small text-white-50">Create separate dealer accounts, assign merchants, and control login access.</div> --}}
        </div>
        <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#createDealerModal">
            <i class="bi bi-person-plus me-1"></i> Create Dealer
        </button>
    </div>

    <div class="card admin-card">
        <div class="card-body" id="dealerCardBody">
            @if (session('status'))
                <div class="alert alert-success">{{ session('status') }}</div>
            @endif

            @if ($errors->any())
                <div class="alert alert-danger">{{ $errors->first() }}</div>
            @endif

            <form method="GET" action="{{ route('admin.dealers.index') }}" class="row g-2 mb-4">
                <div class="col-md-6">
                    <input
                        type="search"
                        name="search"
                        class="form-control"
                        id="dealerSearchInput"
                        value="{{ $search }}"
                        placeholder="Search dealers"
                        autocomplete="off">
                </div>
            </form>

            <div class="table-responsive">
                <table class="table align-middle">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Username</th>
                            <th>Email</th>
                            <th>Phone</th>
                            <th>Commission</th>
                            <th>Status</th>
                            <th>Assigned Merchants</th>
                            <th>Last Login</th>
                            <th class="text-end">Actions</th>
                        </tr>
                    </thead>
                    <tbody id="dealerTableBody">
                        @forelse ($dealers as $dealer)
                            @include('admin.dealers._row', ['dealer' => $dealer])
                        @empty
                            <tr id="dealerEmptyState">
                                <td colspan="9" class="text-center text-muted py-4">No dealers found.</td>
                            </tr>
                        @endforelse
                        <tr id="dealerFilteredEmptyState" class="d-none">
                            <td colspan="9" class="text-center text-muted py-4">No dealers found.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            {{ $dealers->links() }}
        </div>
    </div>

    <div class="modal fade" id="createDealerModal" tabindex="-1" aria-labelledby="createDealerModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable dealer-modal form-modal">
            <div class="modal-content">
                <form method="POST" action="{{ route('admin.dealers.store') }}" id="createDealerForm">
                    @csrf
                    <div class="modal-header">
                        <h2 class="modal-title fs-5" id="createDealerModalLabel">Create Dealer</h2>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        @include('admin.dealers._form', ['mode' => 'create', 'dealer' => $newDealer, 'isModal' => true, 'formPrefix' => 'create_dealer'])
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="editDealerModal" tabindex="-1" aria-labelledby="editDealerModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable dealer-modal form-modal">
            <div class="modal-content">
                <form method="POST" id="editDealerForm">
                    @csrf
                    @method('PUT')
                    <div class="modal-header">
                        <h2 class="modal-title fs-5" id="editDealerModalLabel">Edit Dealer</h2>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        @include('admin.dealers._form', ['mode' => 'edit', 'dealer' => new \App\Models\Dealer(), 'isModal' => true, 'formPrefix' => 'edit_dealer'])
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="assignMerchantsModal" tabindex="-1" aria-labelledby="assignMerchantsModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable dealer-modal assign-merchants-modal">
            <div class="modal-content">
                <form method="POST" id="assignMerchantsForm">
                    @csrf
                    @method('PUT')
                    <input type="hidden" name="search" value="{{ $search }}">
                    <div class="modal-header">
                        <div>
                            <h2 class="modal-title fs-5 mb-1" id="assignMerchantsModalLabel">Assign Merchants</h2>
                            {{-- <div class="small text-muted">Search merchants in realtime and select the ones you want to attach.</div> --}}
                        </div>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="assign-dealer-field">
                            <label class="form-label" for="assign_dealer_name">Dealer</label>
                            <input id="assign_dealer_name" type="text" class="form-control" value="" readonly>
                        </div>

                        <div class="alert alert-warning assign-merchant-status-note" id="assignMerchantStatusNote" role="alert"></div>

                        <div class="merchant-picker-shell">
                            <div class="merchant-picker-toolbar">
                                <div class="merchant-picker-search">
                                    <i class="bi bi-search"></i>
                                    <input id="assignMerchantSearchInput" type="search" class="form-control" placeholder="Search merchant by name, username, or email" autocomplete="off">
                                </div>
                                <div class="merchant-selection-count">
                                    <i class="bi bi-people"></i>
                                    <span id="assignMerchantSelectionCount">0 selected</span>
                                </div>
                            </div>

                            <div class="merchant-selected-chips" id="assignMerchantSelectedChips">
                                <span class="merchant-chip merchant-chip-empty">No merchant selected.</span>
                            </div>

                            <div class="merchant-picker-grid" id="assignMerchantList">
                                @foreach ($users as $user)
                                    @php
                                        $merchantSearch = strtolower(trim(implode(' ', array_filter([$user->name, $user->username, $user->email]))));
                                    @endphp
                                    <div class="merchant-picker-item" data-merchant-item data-search="{{ $merchantSearch }}">
                                        <input
                                            class="merchant-picker-checkbox"
                                            type="checkbox"
                                            id="assign_user_{{ $user->id }}"
                                            name="assigned_user_ids[]"
                                            value="{{ $user->id }}"
                                            data-merchant-name="{{ $user->name }}"
                                            data-merchant-username="{{ $user->username }}"
                                            data-merchant-email="{{ $user->email }}"
                                            data-merchant-overall-charge="{{ number_format((float) ($user->payin_overall_charge ?? 0), 2, '.', '') }}"
                                            data-merchant-easypaisa-charge="{{ number_format((float) ($user->payin_easypaisa_charge ?? 0), 2, '.', '') }}"
                                            data-merchant-jazzcash-charge="{{ number_format((float) ($user->payin_jazz_charge ?? 0), 2, '.', '') }}"
                                            data-merchant-payout-overall-charge="{{ number_format((float) ($user->payout_overall_charge ?? 0), 2, '.', '') }}"
                                            data-merchant-payout-mobile-wallet-charge="{{ number_format((float) ($user->payout_jazz_charge ?? 0), 2, '.', '') }}"
                                            data-merchant-payout-ibft-charge="{{ number_format((float) ($user->payout_ibft_charge ?? 0), 2, '.', '') }}"
                                            data-merchant-dealers='@json($user->dealers->map(fn ($dealer) => ['id' => $dealer->id, 'name' => $dealer->name])->values())'
                                        >
                                        <label class="merchant-picker-card" for="assign_user_{{ $user->id }}">
                                            <div class="merchant-picker-head">
                                                <div>
                                                    <div class="merchant-picker-name">{{ $user->name }}</div>
                                                </div>
                                                <span class="badge merchant-picker-status {{ $user->status ? 'text-bg-success' : 'text-bg-secondary' }}">{{ $user->status ? 'Active' : 'Inactive' }}</span>
                                            </div>
                                            <div class="merchant-picker-meta">{{ $user->email }}</div>
                                        </label>
                                        <div class="merchant-picker-lock-note" data-merchant-lock-note></div>

                                        <div class="merchant-settings-card" data-merchant-settings-card>
                                            <div class="merchant-settings-columns">
                                                <div class="merchant-settings-section">
                                                    <div class="merchant-settings-heading">Merchant Payin Charges</div>
                                                    <div class="merchant-settings-grid">
                                                        <div class="merchant-settings-field">
                                                            <label for="merchant_overall_charge_{{ $user->id }}">Overall Charges</label>
                                                            <input id="merchant_overall_charge_{{ $user->id }}" type="number" step="0.01" class="form-control" value="{{ number_format((float) ($user->payin_overall_charge ?? 0), 2, '.', '') }}" readonly>
                                                        </div>
                                                        <div class="merchant-settings-field">
                                                            <label for="merchant_easypaisa_charge_{{ $user->id }}">EasyPaisa Charges</label>
                                                            <input id="merchant_easypaisa_charge_{{ $user->id }}" type="number" step="0.01" class="form-control" value="{{ number_format((float) ($user->payin_easypaisa_charge ?? 0), 2, '.', '') }}" readonly>
                                                        </div>
                                                        <div class="merchant-settings-field">
                                                            <label for="merchant_jazzcash_charge_{{ $user->id }}">JazzCash Charges</label>
                                                            <input id="merchant_jazzcash_charge_{{ $user->id }}" type="number" step="0.01" class="form-control" value="{{ number_format((float) ($user->payin_jazz_charge ?? 0), 2, '.', '') }}" readonly>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="merchant-settings-section">
                                                    <div class="merchant-settings-heading">Dealer Payin Charges</div>
                                                    <div class="merchant-settings-grid">
                                                        <div class="merchant-settings-row has-commission">
                                                            <div class="merchant-settings-field">
                                                                <label for="dealer_overall_charge_{{ $user->id }}">Overall Charges</label>
                                                                <input
                                                                    id="dealer_overall_charge_{{ $user->id }}"
                                                                    type="number"
                                                                    step="0.01"
                                                                    min="0"
                                                                    class="form-control dealer-charge-input"
                                                                    name="merchant_settings[{{ $user->id }}][dealer_payin_overall_charges]"
                                                                    data-merchant-id="{{ $user->id }}"
                                                                    data-merchant-charge-field="overall"
                                                                    placeholder="0.00"
                                                                    disabled
                                                                >
                                                            </div>
                                                            <div class="merchant-settings-field">
                                                                <label for="dealer_overall_commission_{{ $user->id }}">Commission</label>
                                                                <input
                                                                    id="dealer_overall_commission_{{ $user->id }}"
                                                                    type="number"
                                                                    step="0.01"
                                                                    class="form-control dealer-commission-output"
                                                                    name="merchant_settings[{{ $user->id }}][dealer_payin_overall_commission]"
                                                                    data-merchant-id="{{ $user->id }}"
                                                                    data-merchant-commission-field="overall"
                                                                    readonly
                                                                >
                                                            </div>
                                                        </div>

                                                        <div class="merchant-settings-row has-commission">
                                                            <div class="merchant-settings-field">
                                                                <label for="dealer_easypaisa_charge_{{ $user->id }}">EasyPaisa Charges</label>
                                                                <input
                                                                    id="dealer_easypaisa_charge_{{ $user->id }}"
                                                                    type="number"
                                                                    step="0.01"
                                                                    min="0"
                                                                    class="form-control dealer-charge-input"
                                                                    name="merchant_settings[{{ $user->id }}][dealer_payin_easypaisa_charges]"
                                                                    data-merchant-id="{{ $user->id }}"
                                                                    data-merchant-charge-field="easypaisa"
                                                                    placeholder="0.00"
                                                                    disabled
                                                                >
                                                            </div>
                                                            <div class="merchant-settings-field">
                                                                <label for="dealer_easypaisa_commission_{{ $user->id }}">Commission</label>
                                                                <input
                                                                    id="dealer_easypaisa_commission_{{ $user->id }}"
                                                                    type="number"
                                                                    step="0.01"
                                                                    class="form-control dealer-commission-output"
                                                                    name="merchant_settings[{{ $user->id }}][dealer_payin_easypaisa_commission]"
                                                                    data-merchant-id="{{ $user->id }}"
                                                                    data-merchant-commission-field="easypaisa"
                                                                    readonly
                                                                >
                                                            </div>
                                                        </div>

                                                        <div class="merchant-settings-row has-commission">
                                                            <div class="merchant-settings-field">
                                                                <label for="dealer_jazzcash_charge_{{ $user->id }}">JazzCash Charges</label>
                                                                <input
                                                                    id="dealer_jazzcash_charge_{{ $user->id }}"
                                                                    type="number"
                                                                    step="0.01"
                                                                    min="0"
                                                                    class="form-control dealer-charge-input"
                                                                    name="merchant_settings[{{ $user->id }}][dealer_payin_jazzcash_charges]"
                                                                    data-merchant-id="{{ $user->id }}"
                                                                    data-merchant-charge-field="jazzcash"
                                                                    placeholder="0.00"
                                                                    disabled
                                                                >
                                                            </div>
                                                            <div class="merchant-settings-field">
                                                                <label for="dealer_jazzcash_commission_{{ $user->id }}">Commission</label>
                                                                <input
                                                                    id="dealer_jazzcash_commission_{{ $user->id }}"
                                                                    type="number"
                                                                    step="0.01"
                                                                    class="form-control dealer-commission-output"
                                                                    name="merchant_settings[{{ $user->id }}][dealer_payin_jazzcash_commission]"
                                                                    data-merchant-id="{{ $user->id }}"
                                                                    data-merchant-commission-field="jazzcash"
                                                                    readonly
                                                                >
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="merchant-settings-card" data-merchant-payout-settings-card>
                                            <div class="merchant-settings-columns">
                                                <div class="merchant-settings-section">
                                                    <div class="merchant-settings-heading">Merchant Payout Charges</div>
                                                    <div class="merchant-settings-grid">
                                                        <div class="merchant-settings-field">
                                                            <label for="merchant_payout_overall_charge_{{ $user->id }}">Overall Charges</label>
                                                            <input id="merchant_payout_overall_charge_{{ $user->id }}" type="number" step="0.01" class="form-control" value="{{ number_format((float) ($user->payout_overall_charge ?? 0), 2, '.', '') }}" readonly>
                                                        </div>
                                                        <div class="merchant-settings-field">
                                                            <label for="merchant_payout_mobile_wallet_charge_{{ $user->id }}">Mobile Wallet</label>
                                                            <input id="merchant_payout_mobile_wallet_charge_{{ $user->id }}" type="number" step="0.01" class="form-control" value="{{ number_format((float) ($user->payout_jazz_charge ?? 0), 2, '.', '') }}" readonly>
                                                        </div>
                                                        <div class="merchant-settings-field">
                                                            <label for="merchant_payout_ibft_charge_{{ $user->id }}">IBFT</label>
                                                            <input id="merchant_payout_ibft_charge_{{ $user->id }}" type="number" step="0.01" class="form-control" value="{{ number_format((float) ($user->payout_ibft_charge ?? 0), 2, '.', '') }}" readonly>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="merchant-settings-section">
                                                    <div class="merchant-settings-heading">Dealer Payout Charges</div>
                                                    <div class="merchant-settings-grid">
                                                        <div class="merchant-settings-row has-commission">
                                                            <div class="merchant-settings-field">
                                                                <label for="dealer_payout_overall_charge_{{ $user->id }}">Overall Charges</label>
                                                                <input
                                                                    id="dealer_payout_overall_charge_{{ $user->id }}"
                                                                    type="number"
                                                                    step="0.01"
                                                                    min="0"
                                                                    class="form-control dealer-payout-charge-input"
                                                                    name="merchant_settings[{{ $user->id }}][dealer_payout_overall_charges]"
                                                                    data-merchant-id="{{ $user->id }}"
                                                                    data-merchant-payout-charge-field="overall"
                                                                    placeholder="0.00"
                                                                    disabled
                                                                >
                                                            </div>
                                                            <div class="merchant-settings-field">
                                                                <label for="dealer_payout_overall_commission_{{ $user->id }}">Commission</label>
                                                                <input
                                                                    id="dealer_payout_overall_commission_{{ $user->id }}"
                                                                    type="number"
                                                                    step="0.01"
                                                                    class="form-control dealer-payout-commission-output"
                                                                    name="merchant_settings[{{ $user->id }}][dealer_payout_overall_commission]"
                                                                    data-merchant-id="{{ $user->id }}"
                                                                    data-merchant-payout-commission-field="overall"
                                                                    readonly
                                                                >
                                                            </div>
                                                        </div>

                                                        <div class="merchant-settings-row has-commission">
                                                            <div class="merchant-settings-field">
                                                                <label for="dealer_payout_mobile_wallet_charge_{{ $user->id }}">Mobile Wallet</label>
                                                                <input
                                                                    id="dealer_payout_mobile_wallet_charge_{{ $user->id }}"
                                                                    type="number"
                                                                    step="0.01"
                                                                    min="0"
                                                                    class="form-control dealer-payout-charge-input"
                                                                    name="merchant_settings[{{ $user->id }}][dealer_payout_mobile_wallet_charges]"
                                                                    data-merchant-id="{{ $user->id }}"
                                                                    data-merchant-payout-charge-field="mobile_wallet"
                                                                    placeholder="0.00"
                                                                    disabled
                                                                >
                                                            </div>
                                                            <div class="merchant-settings-field">
                                                                <label for="dealer_payout_mobile_wallet_commission_{{ $user->id }}">Commission</label>
                                                                <input
                                                                    id="dealer_payout_mobile_wallet_commission_{{ $user->id }}"
                                                                    type="number"
                                                                    step="0.01"
                                                                    class="form-control dealer-payout-commission-output"
                                                                    name="merchant_settings[{{ $user->id }}][dealer_payout_mobile_wallet_commission]"
                                                                    data-merchant-id="{{ $user->id }}"
                                                                    data-merchant-payout-commission-field="mobile_wallet"
                                                                    readonly
                                                                >
                                                            </div>
                                                        </div>

                                                        <div class="merchant-settings-row has-commission">
                                                            <div class="merchant-settings-field">
                                                                <label for="dealer_payout_ibft_charge_{{ $user->id }}">IBFT</label>
                                                                <input
                                                                    id="dealer_payout_ibft_charge_{{ $user->id }}"
                                                                    type="number"
                                                                    step="0.01"
                                                                    min="0"
                                                                    class="form-control dealer-payout-charge-input"
                                                                    name="merchant_settings[{{ $user->id }}][dealer_payout_ibft_charges]"
                                                                    data-merchant-id="{{ $user->id }}"
                                                                    data-merchant-payout-charge-field="ibft"
                                                                    placeholder="0.00"
                                                                    disabled
                                                                >
                                                            </div>
                                                            <div class="merchant-settings-field">
                                                                <label for="dealer_payout_ibft_commission_{{ $user->id }}">Commission</label>
                                                                <input
                                                                    id="dealer_payout_ibft_commission_{{ $user->id }}"
                                                                    type="number"
                                                                    step="0.01"
                                                                    class="form-control dealer-payout-commission-output"
                                                                    name="merchant_settings[{{ $user->id }}][dealer_payout_ibft_commission]"
                                                                    data-merchant-id="{{ $user->id }}"
                                                                    data-merchant-payout-commission-field="ibft"
                                                                    readonly
                                                                >
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>

                            <div class="merchant-picker-empty" id="assignMerchantEmptyState">No merchants match your search.</div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save Assignment</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const searchInput = document.getElementById('dealerSearchInput');
            const filteredEmptyState = document.getElementById('dealerFilteredEmptyState');
            const tableBody = document.getElementById('dealerTableBody');
            const dealerCardBody = document.getElementById('dealerCardBody');
            const editModal = document.getElementById('editDealerModal');
            const editForm = document.getElementById('editDealerForm');
            const createModal = document.getElementById('createDealerModal');
            const createForm = document.getElementById('createDealerForm');
            const assignModal = document.getElementById('assignMerchantsModal');
            const assignForm = document.getElementById('assignMerchantsForm');
            const assignMerchantSearchInput = document.getElementById('assignMerchantSearchInput');
            const assignMerchantList = document.getElementById('assignMerchantList');
            const assignMerchantEmptyState = document.getElementById('assignMerchantEmptyState');
            const assignMerchantSelectionCount = document.getElementById('assignMerchantSelectionCount');
            const assignMerchantSelectedChips = document.getElementById('assignMerchantSelectedChips');
            const assignMerchantStatusNote = document.getElementById('assignMerchantStatusNote');
            let activeAssignDealerId = null;

            const showPageAlert = function (type, message) {
                if (!dealerCardBody) {
                    return;
                }

                Array.from(dealerCardBody.querySelectorAll('[data-dealer-live-alert]')).forEach(function (alert) {
                    alert.remove();
                });

                const alert = document.createElement('div');
                alert.className = 'alert alert-' + type;
                alert.setAttribute('data-dealer-live-alert', 'true');
                alert.textContent = message;
                dealerCardBody.prepend(alert);
            };

            const hideAssignStatusNote = function () {
                if (!assignMerchantStatusNote) {
                    return;
                }

                assignMerchantStatusNote.textContent = '';
                assignMerchantStatusNote.classList.remove('is-visible');
            };

            const showAssignStatusNote = function (message) {
                if (!assignMerchantStatusNote) {
                    return;
                }

                assignMerchantStatusNote.textContent = message;
                assignMerchantStatusNote.classList.add('is-visible');
            };

            const applyFilter = function () {
                const query = (searchInput?.value || '').trim().toLowerCase();
                let visibleCount = 0;

                Array.from(document.querySelectorAll('[data-dealer-row]')).forEach(function (row) {
                    const haystack = row.getAttribute('data-search') || '';
                    const shouldShow = query === '' || haystack.includes(query);
                    row.classList.toggle('d-none', !shouldShow);

                    if (shouldShow) {
                        visibleCount += 1;
                    }
                });

                if (filteredEmptyState) {
                    filteredEmptyState.classList.toggle('d-none', visibleCount !== 0);
                }
            };

            const upsertRow = function (rowHtml, dealerId, prependRow) {
                if (!tableBody || !rowHtml) {
                    return;
                }

                const wrapper = document.createElement('tbody');
                wrapper.innerHTML = rowHtml.trim();
                const nextRow = wrapper.firstElementChild;

                if (!nextRow) {
                    return;
                }

                const existingRow = document.querySelector('[data-dealer-id="' + dealerId + '"]');

                if (existingRow) {
                    existingRow.replaceWith(nextRow);
                } else {
                    const emptyRow = document.getElementById('dealerEmptyState');

                    if (emptyRow) {
                        emptyRow.remove();
                    }

                    if (prependRow) {
                        tableBody.prepend(nextRow);
                    } else {
                        tableBody.appendChild(nextRow);
                    }
                }

                if (window.adminInitMobileTables) {
                    window.adminInitMobileTables(document);
                }

                applyFilter();
            };

            const setValue = function (id, value) {
                const field = document.getElementById(id);

                if (field) {
                    field.value = value || '';
                }
            };

            const submitDealerForm = async function (formElement, options) {
                const submitButton = formElement.querySelector('button[type="submit"]');
                const originalLabel = submitButton ? submitButton.textContent : '';

                if (submitButton) {
                    submitButton.disabled = true;
                    submitButton.textContent = 'Saving...';
                }

                try {
                    const response = await fetch(formElement.action, {
                        method: 'POST',
                        headers: {
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest',
                        },
                        body: new FormData(formElement),
                    });

                    const data = await response.json();

                    if (!response.ok) {
                        const message = data.message || Object.values(data.errors || {}).flat()[0] || 'Unable to save changes.';
                        throw new Error(message);
                    }

                    upsertRow(data.row_html, data.dealer_id, options.prependRow);

                    if (options.modalElement) {
                        bootstrap.Modal.getOrCreateInstance(options.modalElement).hide();
                    }

                    if (options.resetAfterSuccess) {
                        formElement.reset();
                    }

                    if (options.afterSuccess) {
                        options.afterSuccess();
                    }

                    showPageAlert('success', data.message || 'Saved successfully.');
                } catch (error) {
                    showPageAlert('danger', error.message || 'Unable to save changes.');
                } finally {
                    if (submitButton) {
                        submitButton.disabled = false;
                        submitButton.textContent = originalLabel;
                    }
                }
            };

            const updateMerchantSelectionPreview = function () {
                if (!assignForm || !assignMerchantSelectionCount || !assignMerchantSelectedChips) {
                    return;
                }

                const selectedInputs = Array.from(assignForm.querySelectorAll('.merchant-picker-checkbox:checked'));
                assignMerchantSelectionCount.textContent = selectedInputs.length + ' selected';

                Array.from(assignForm.querySelectorAll('.merchant-picker-checkbox')).forEach(function (input) {
                    const item = input.closest('[data-merchant-item]');
                    const isLocked = item ? item.classList.contains('is-locked') : false;

                    if (item) {
                        item.classList.toggle('is-selected', input.checked && !isLocked);
                    }

                    Array.from(document.querySelectorAll('.dealer-charge-input[data-merchant-id="' + input.value + '"]')).forEach(function (field) {
                        field.disabled = !input.checked || isLocked;
                    });

                    Array.from(document.querySelectorAll('.dealer-commission-output[data-merchant-id="' + input.value + '"]')).forEach(function (field) {
                        field.disabled = !input.checked || isLocked;
                    });

                    Array.from(document.querySelectorAll('.dealer-payout-charge-input[data-merchant-id="' + input.value + '"]')).forEach(function (field) {
                        field.disabled = !input.checked || isLocked;
                    });

                    Array.from(document.querySelectorAll('.dealer-payout-commission-output[data-merchant-id="' + input.value + '"]')).forEach(function (field) {
                        field.disabled = !input.checked || isLocked;
                    });
                });

                if (selectedInputs.length === 0) {
                    assignMerchantSelectedChips.innerHTML = '<span class="merchant-chip merchant-chip-empty">No merchant selected.</span>';
                    return;
                }

                assignMerchantSelectedChips.innerHTML = selectedInputs.map(function (input) {
                    const name = input.getAttribute('data-merchant-name') || 'Merchant';
                    const username = input.getAttribute('data-merchant-username') || '';
                    const suffix = username ? ' (' + username + ')' : '';
                    return '<span class="merchant-chip">' + name + suffix + '</span>';
                }).join('');
            };

            const getMerchantChargeValue = function (merchantId, chargeField) {
                const checkbox = assignForm ? assignForm.querySelector('.merchant-picker-checkbox[value="' + merchantId + '"]') : null;

                if (!checkbox) {
                    return 0;
                }

                const attributeMap = {
                    overall: 'data-merchant-overall-charge',
                    easypaisa: 'data-merchant-easypaisa-charge',
                    jazzcash: 'data-merchant-jazzcash-charge',
                };

                return parseFloat(checkbox.getAttribute(attributeMap[chargeField]) || '0') || 0;
            };

            const updateDealerCommission = function (merchantId, chargeField) {
                if (!assignForm) {
                    return;
                }

                const dealerInput = assignForm.querySelector('.dealer-charge-input[data-merchant-id="' + merchantId + '"][data-merchant-charge-field="' + chargeField + '"]');
                const commissionInput = assignForm.querySelector('.dealer-commission-output[data-merchant-id="' + merchantId + '"][data-merchant-commission-field="' + chargeField + '"]');

                if (!dealerInput || !commissionInput) {
                    return;
                }

                const merchantCharge = getMerchantChargeValue(merchantId, chargeField);
                const dealerCharge = parseFloat(dealerInput.value || '0');

                if (dealerInput.value === '') {
                    commissionInput.value = '';
                    return;
                }

                commissionInput.value = (merchantCharge - (isNaN(dealerCharge) ? 0 : dealerCharge)).toFixed(2);
            };

            const updateAllDealerCommissions = function () {
                if (!assignForm) {
                    return;
                }

                Array.from(assignForm.querySelectorAll('.dealer-charge-input')).forEach(function (input) {
                    updateDealerCommission(input.getAttribute('data-merchant-id'), input.getAttribute('data-merchant-charge-field'));
                });
            };

            const getMerchantPayoutChargeValue = function (merchantId, chargeField) {
                const checkbox = assignForm ? assignForm.querySelector('.merchant-picker-checkbox[value="' + merchantId + '"]') : null;

                if (!checkbox) {
                    return 0;
                }

                const attributeMap = {
                    overall: 'data-merchant-payout-overall-charge',
                    mobile_wallet: 'data-merchant-payout-mobile-wallet-charge',
                    ibft: 'data-merchant-payout-ibft-charge',
                };

                return parseFloat(checkbox.getAttribute(attributeMap[chargeField]) || '0') || 0;
            };

            const updateDealerPayoutCommission = function (merchantId, chargeField) {
                if (!assignForm) {
                    return;
                }

                const dealerInput = assignForm.querySelector('.dealer-payout-charge-input[data-merchant-id="' + merchantId + '"][data-merchant-payout-charge-field="' + chargeField + '"]');
                const commissionInput = assignForm.querySelector('.dealer-payout-commission-output[data-merchant-id="' + merchantId + '"][data-merchant-payout-commission-field="' + chargeField + '"]');

                if (!dealerInput || !commissionInput) {
                    return;
                }

                const merchantCharge = getMerchantPayoutChargeValue(merchantId, chargeField);
                const dealerCharge = parseFloat(dealerInput.value || '0');

                if (dealerInput.value === '') {
                    commissionInput.value = '';
                    return;
                }

                commissionInput.value = (merchantCharge - (isNaN(dealerCharge) ? 0 : dealerCharge)).toFixed(2);
            };

            const updateAllDealerPayoutCommissions = function () {
                if (!assignForm) {
                    return;
                }

                Array.from(assignForm.querySelectorAll('.dealer-payout-charge-input')).forEach(function (input) {
                    updateDealerPayoutCommission(input.getAttribute('data-merchant-id'), input.getAttribute('data-merchant-payout-charge-field'));
                });
            };

            const applyMerchantSearch = function () {
                if (!assignMerchantList || !assignMerchantSearchInput || !assignMerchantEmptyState) {
                    return;
                }

                const query = assignMerchantSearchInput.value.trim().toLowerCase();
                let visibleCount = 0;

                Array.from(assignMerchantList.querySelectorAll('[data-merchant-item]')).forEach(function (item) {
                    const haystack = item.getAttribute('data-search') || '';
                    const shouldShow = query === '' || haystack.includes(query);
                    item.classList.toggle('d-none', !shouldShow);

                    if (shouldShow) {
                        visibleCount += 1;
                    }
                });

                assignMerchantEmptyState.style.display = visibleCount === 0 ? 'block' : 'none';
            };

            const setMerchantSelection = function (values) {
                if (!assignForm) {
                    return;
                }

                const selectedValues = Array.isArray(values) ? values.map(function (value) {
                    return String(value);
                }) : [];

                Array.from(assignForm.querySelectorAll('.merchant-picker-checkbox')).forEach(function (input) {
                    input.checked = selectedValues.includes(input.value);
                });

                updateMerchantSelectionPreview();
                updateAllDealerCommissions();
                updateAllDealerPayoutCommissions();
            };

            const updateMerchantAvailability = function () {
                if (!assignForm) {
                    return;
                }

                Array.from(assignForm.querySelectorAll('.merchant-picker-checkbox')).forEach(function (input) {
                    const item = input.closest('[data-merchant-item]');
                    const note = item ? item.querySelector('[data-merchant-lock-note]') : null;
                    let dealerData = [];

                    try {
                        dealerData = JSON.parse(input.getAttribute('data-merchant-dealers') || '[]');
                    } catch (error) {
                        dealerData = [];
                    }

                    const otherDealers = dealerData.filter(function (dealer) {
                        return String(dealer.id) !== String(activeAssignDealerId);
                    });

                    const isLocked = otherDealers.length > 0;

                    if (item) {
                        item.classList.toggle('is-locked', isLocked);
                    }

                    if (note) {
                        note.textContent = isLocked
                            ? 'Already assigned to ' + otherDealers.map(function (dealer) { return dealer.name; }).join(', ')
                            : '';
                    }

                    input.disabled = isLocked;

                    if (isLocked) {
                        input.checked = false;
                    }
                });

                updateMerchantSelectionPreview();
            };

            const setMerchantSettings = function (settingsByUserId) {
                if (!assignForm) {
                    return;
                }

                Array.from(assignForm.querySelectorAll('.dealer-charge-input, .dealer-commission-output, .dealer-payout-charge-input, .dealer-payout-commission-output')).forEach(function (input) {
                    input.value = '';
                });

                Object.keys(settingsByUserId || {}).forEach(function (userId) {
                    const settings = settingsByUserId[userId] || {};
                    const fieldMap = {
                        dealer_payin_overall_charges: 'overall',
                        dealer_payin_easypaisa_charges: 'easypaisa',
                        dealer_payin_jazzcash_charges: 'jazzcash',
                        dealer_payin_overall_commission: 'overall',
                        dealer_payin_easypaisa_commission: 'easypaisa',
                        dealer_payin_jazzcash_commission: 'jazzcash',
                    };
                    const payoutFieldMap = {
                        dealer_payout_overall_charges: 'overall',
                        dealer_payout_mobile_wallet_charges: 'mobile_wallet',
                        dealer_payout_ibft_charges: 'ibft',
                        dealer_payout_overall_commission: 'overall',
                        dealer_payout_mobile_wallet_commission: 'mobile_wallet',
                        dealer_payout_ibft_commission: 'ibft',
                    };

                    Object.keys(fieldMap).forEach(function (key) {
                        const isChargeField = key.includes('_charges');
                        const selector = isChargeField
                            ? '.dealer-charge-input[data-merchant-id="' + userId + '"][data-merchant-charge-field="' + fieldMap[key] + '"]'
                            : '.dealer-commission-output[data-merchant-id="' + userId + '"][data-merchant-commission-field="' + fieldMap[key] + '"]';
                        const input = assignForm.querySelector(selector);

                        if (input) {
                            input.value = settings[key] ?? '';
                        }
                    });

                    Object.keys(payoutFieldMap).forEach(function (key) {
                        const isChargeField = key.includes('_charges');
                        const selector = isChargeField
                            ? '.dealer-payout-charge-input[data-merchant-id="' + userId + '"][data-merchant-payout-charge-field="' + payoutFieldMap[key] + '"]'
                            : '.dealer-payout-commission-output[data-merchant-id="' + userId + '"][data-merchant-payout-commission-field="' + payoutFieldMap[key] + '"]';
                        const input = assignForm.querySelector(selector);

                        if (input) {
                            input.value = settings[key] ?? '';
                        }
                    });
                });

                updateAllDealerCommissions();
                updateAllDealerPayoutCommissions();
            };

            if (searchInput) {
                searchInput.addEventListener('input', applyFilter);
                applyFilter();
            }

            if (createForm && createModal) {
                createForm.addEventListener('submit', function (event) {
                    event.preventDefault();
                    submitDealerForm(createForm, {
                        modalElement: createModal,
                        prependRow: true,
                        resetAfterSuccess: true,
                    });
                });

                @if (request()->boolean('create_dealer'))
                    bootstrap.Modal.getOrCreateInstance(createModal).show();
                @endif
            }

            if (editModal && editForm) {
                editModal.addEventListener('show.bs.modal', function (event) {
                    const button = event.relatedTarget;

                    if (!button) {
                        return;
                    }

                    editForm.setAttribute('action', "{{ url('/admin/dealers') }}/" + button.getAttribute('data-dealer-id'));
                    setValue('edit_dealer_name', button.getAttribute('data-name'));
                    setValue('edit_dealer_username', button.getAttribute('data-username'));
                    setValue('edit_dealer_email', button.getAttribute('data-email'));
                    setValue('edit_dealer_phone', button.getAttribute('data-phone'));
                    setValue('edit_dealer_status', button.getAttribute('data-status'));
                    setValue('edit_dealer_commission_rate', button.getAttribute('data-commission-rate'));
                    setValue('edit_dealer_password', '');
                    setValue('edit_dealer_password_confirmation', '');
                });

                editForm.addEventListener('submit', function (event) {
                    event.preventDefault();
                    submitDealerForm(editForm, {
                        modalElement: editModal,
                        prependRow: false,
                        resetAfterSuccess: false,
                    });
                });
            }

            if (assignForm) {
                assignForm.addEventListener('change', function (event) {
                    if (event.target.classList.contains('merchant-picker-checkbox')) {
                        hideAssignStatusNote();
                        updateMerchantSelectionPreview();
                        updateAllDealerCommissions();
                        updateAllDealerPayoutCommissions();
                    }
                });

                assignForm.addEventListener('input', function (event) {
                    if (event.target.classList.contains('dealer-charge-input')) {
                        updateDealerCommission(event.target.getAttribute('data-merchant-id'), event.target.getAttribute('data-merchant-charge-field'));
                    }

                    if (event.target.classList.contains('dealer-payout-charge-input')) {
                        updateDealerPayoutCommission(event.target.getAttribute('data-merchant-id'), event.target.getAttribute('data-merchant-payout-charge-field'));
                    }
                });

                assignForm.addEventListener('submit', function (event) {
                    event.preventDefault();
                    hideAssignStatusNote();
                    submitDealerForm(assignForm, {
                        modalElement: assignModal,
                        prependRow: false,
                        resetAfterSuccess: false,
                        afterSuccess: function () {
                            if (assignMerchantSearchInput) {
                                assignMerchantSearchInput.value = '';
                            }
                            applyMerchantSearch();
                        },
                    });
                });
            }

            if (assignMerchantSearchInput) {
                assignMerchantSearchInput.addEventListener('input', applyMerchantSearch);
            }

            if (assignMerchantList) {
                assignMerchantList.addEventListener('click', function (event) {
                    const item = event.target.closest('[data-merchant-item].is-locked');

                    if (!item) {
                        return;
                    }

                    const note = item.querySelector('[data-merchant-lock-note]');
                    showAssignStatusNote(note?.textContent || 'This merchant is already assigned.');
                });
            }

            if (assignModal && assignForm) {
                assignModal.addEventListener('show.bs.modal', function (event) {
                    const button = event.relatedTarget;

                    if (!button) {
                        return;
                    }

                    assignForm.setAttribute('action', "{{ url('/admin/dealers') }}/" + button.getAttribute('data-dealer-id') + "/users");
                    activeAssignDealerId = button.getAttribute('data-dealer-id');
                    setValue('assign_dealer_name', button.getAttribute('data-dealer-name'));
                    hideAssignStatusNote();

                    if (assignMerchantSearchInput) {
                        assignMerchantSearchInput.value = '';
                    }

                    try {
                        setMerchantSelection(JSON.parse(button.getAttribute('data-assigned-user-ids') || '[]'));
                        setMerchantSettings(JSON.parse(button.getAttribute('data-assigned-merchant-settings') || '{}'));
                    } catch (error) {
                        setMerchantSelection([]);
                        setMerchantSettings({});
                    }

                    updateMerchantAvailability();
                    applyMerchantSearch();
                });
            }
        });
    </script>
@endpush