@extends('dashboard.layouts.app')

@section('content')
    @include('components.alert')

    <style>
        .influencers-page .ui-card {
            border: 2px solid #e5e7eb !important;
            border-radius: 18px;
            background: #fff;
            box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
            overflow: hidden;
        }

        .influencers-page .ui-card__header {
            padding: 1rem 1.25rem;
            border-bottom: 1px solid #eef2f7;
            background: #fff;
        }

        .influencers-table-wrap {
            width: 100%;
            overflow-x: auto;
        }

        .influencers-page table {
            min-width: 1000px;
            width: 100%;
            vertical-align: middle;
        }

        .influencers-page table thead th {
            background: #f8fafc;
            color: #475569;
            font-size: 0.78rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.035em;
            border-bottom: 1px solid #e5e7eb;
            white-space: nowrap;
        }

        .influencers-page table tbody td {
            color: #334155;
            font-size: 0.9rem;
            font-weight: 600;
            border-color: #eef2f7;
            vertical-align: middle;
            white-space: nowrap;
        }

        .influencers-page table tbody tr {
            transition: 0.16s ease;
        }

        .influencers-page table tbody tr:hover {
            background: #f8fafc;
        }

        .influencer-index {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 34px;
            height: 30px;
            border-radius: 999px;
            background: #f3f4f6;
            color: #374151;
            font-size: 0.78rem;
            font-weight: 850;
        }

        .influencer-profile-cell {
            display: flex;
            align-items: center;
            gap: 0.65rem;
            min-width: 220px;
        }

        .influencer-icon {
            width: 38px;
            height: 38px;
            border-radius: 13px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #eff6ff, #eef2ff);
            color: #2563eb;
            font-size: 1rem;
            flex-shrink: 0;
        }

        .influencer-link {
            color: #111827;
            font-size: 0.9rem;
            font-weight: 850;
            line-height: 1.35;
            text-decoration: none;
            max-width: 180px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: inline-block;
            vertical-align: middle;
        }

        .influencer-link:hover {
            color: #2563eb;
            text-decoration: underline;
        }

        .influencer-sub {
            color: #94a3b8;
            font-size: 0.76rem;
            font-weight: 650;
            margin-top: 0.1rem;
        }

        .influencer-contact {
            color: #475569;
            font-size: 0.88rem;
        }

        .influencer-actions {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.45rem;
        }

        .table-empty-state {
            padding: 3rem 1rem;
            text-align: center;
            color: #94a3b8;
            background: #fff;
        }

        .table-empty-state i {
            display: block;
            font-size: 2.3rem;
            color: #cbd5e1;
            margin-bottom: 0.75rem;
        }

        .table-empty-state h6 {
            margin: 0;
            color: #475569;
            font-weight: 850;
        }

        .table-empty-state p {
            margin: 0.35rem 0 0;
            font-size: 0.9rem;
        }

        .table-pagination {
            padding: 1rem 1.25rem;
            border-top: 1px solid #eef2f7;
            background: #fff;
        }

        .influencer-modal .modal-content {
            border: 0;
            border-radius: 20px;
            box-shadow: 0 24px 70px rgba(15, 23, 42, 0.20);
            overflow: hidden;
        }

        .influencer-modal .modal-header {
            border-bottom: 1px solid #eef2f7;
            background: #f8fafc;
            padding: 1rem 1.25rem;
        }

        .influencer-modal .modal-title {
            color: #111827;
            font-size: 1rem;
            font-weight: 900;
        }

        .modal-subtitle {
            color: #64748b;
            font-size: 0.86rem;
            margin-top: 0.15rem;
        }

        .influencer-modal .modal-body {
            padding: 1.25rem;
        }

        .influencer-modal .modal-footer {
            border-top: 1px solid #eef2f7;
            background: #fff;
            padding: 1rem 1.25rem;
        }

        /* Influencer type cards */
        .inf-type-card {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: .35rem;
            padding: .75rem .5rem;
            border: 2px solid #e5e7eb;
            border-radius: 14px;
            cursor: pointer;
            transition: border-color .18s, background .18s, box-shadow .18s;
            background: #f9fafb;
            user-select: none;
        }

        .inf-type-card:hover {
            border-color: #93c5fd;
            background: #eff6ff;
        }

        .inf-type-card.selected {
            border-color: #2563eb;
            background: #eff6ff;
            box-shadow: 0 0 0 3px rgba(37,99,235,.12);
        }

        .inf-type-icon {
            width: 38px;
            height: 38px;
            border-radius: 12px;
            background: #e0e7ff;
            color: #2563eb;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            transition: background .18s;
        }

        .inf-type-card.selected .inf-type-icon {
            background: #2563eb;
            color: #fff;
        }

        .inf-type-label {
            font-size: .82rem;
            font-weight: 800;
            color: #374151;
        }

        .inf-type-card.selected .inf-type-label {
            color: #1d4ed8;
        }

        .asset-form-grid {
            display: grid;
            grid-template-columns: repeat(12, minmax(0, 1fr));
            gap: 1rem;
        }

        .asset-col-12 {
            grid-column: span 12 / span 12;
        }

        .asset-col-6 {
            grid-column: span 6 / span 6;
        }

        .asset-label {
            display: inline-block;
            margin-bottom: 0.45rem;
            font-weight: 750;
            color: #374151;
            font-size: 0.9rem;
        }

        .asset-input,
        .influencer-modal .form-control {
            width: 100% !important;
            min-height: 44px;
            border: 1px solid #dbe2ea !important;
            border-radius: 14px !important;
            padding: 0.68rem 0.9rem;
            background: #fff;
            color: #111827;
            transition: 0.2s ease;
            box-shadow: none !important;
        }

        .asset-input:focus,
        .influencer-modal .form-control:focus {
            outline: none;
            border-color: #b8c4d6 !important;
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08) !important;
        }

        .delete-warning-box {
            border: 1px solid #fecaca;
            background: #fef2f2;
            color: #991b1b;
            border-radius: 18px;
            padding: 1rem;
            display: flex;
            align-items: flex-start;
            gap: 0.85rem;
        }

        .delete-warning-box__icon {
            width: 42px;
            height: 42px;
            border-radius: 14px;
            background: #fff;
            color: #dc2626;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1.25rem;
            flex-shrink: 0;
        }

        .delete-warning-box__title {
            font-weight: 900;
            margin-bottom: 0.15rem;
        }

        .delete-warning-box__text {
            font-size: 0.9rem;
            line-height: 1.5;
            color: #b91c1c;
        }

        .ui-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.35rem;
            border-radius: 999px;
            padding: 0.36rem 0.72rem;
            font-size: 0.74rem;
            font-weight: 850;
            line-height: 1.2;
            white-space: nowrap;
        }

        .ui-pill--primary { background: #eff6ff; color: #1d4ed8; }
        .ui-pill--success { background: #f0fdf4; color: #166534; }
        .ui-pill--neutral { background: #f3f4f6; color: #374151; }

        @media (max-width: 991.98px) {
            .influencers-page .ui-card__header>.d-flex {
                align-items: flex-start !important;
            }

            .asset-col-6 {
                grid-column: span 12 / span 12;
            }
        }
    </style>

    <div class="container-fluid app-bg influencers-page">
        <div class="page-shell">
            <div class="space-y-4">

                <x-page-title title="Influencers"
                    description="Configure influencers and link them to promocodes to track total registrations and calculate commission fees.">
                    <a href="javascript:void(0)" class="asset-btn asset-btn--primary" data-bs-toggle="modal"
                        data-bs-target="#createInfluencerModal" id="addNewInfluencerBtn">
                        + Add New Influencer
                    </a>
                </x-page-title>

                <div class="ui-card ui-card--table">
                    <div class="ui-card__header">
                        <div class="d-flex align-items-center gap-3 flex-wrap w-100">
                            <h6 class="mb-0 font-semibold text-gray-800 whitespace-nowrap" style="margin-right: auto;">
                                Filters
                            </h6>

                            <x-table-controls :action="route('influencers.index')" searchName="search" searchPlaceholder="search"
                                formId="influencers-table-controls" :clearUrl="route('influencers.index')" />
                        </div>
                    </div>

                    <div class="influencers-table-wrap">
                        <x-table :headers="[
                            'Index',
                            'Name',
                            'Type',
                            'System User Link',
                            'Phone',
                            'Email',
                            'Promocodes Count',
                            'Total Usages',
                            'Total Earnings',
                            'Actions',
                        ]">
                            @forelse ($influencers as $influencer)
                                <tr>
                                    <td class="text-center">
                                        <span class="influencer-index">
                                            {{ method_exists($influencers, 'firstItem') ? $influencers->firstItem() + $loop->index : $loop->iteration }}
                                        </span>
                                    </td>

                                    <td>
                                        <div class="influencer-profile-cell">
                                            <div class="influencer-icon">
                                                <i class="fas fa-user-tie"></i>
                                            </div>

                                            <div>
                                                <a href="{{ route('influencers.show', $influencer->id) }}"
                                                    class="influencer-link" title="{{ $influencer->name }}">
                                                    {{ $influencer->name }}
                                                </a>
                                                <div class="influencer-sub">
                                                    View profile & reports
                                                </div>
                                            </div>
                                        </div>
                                    </td>

                                    <td class="text-center">
                                        @php
                                            $typeLabel = match($influencer->influencer_type ?? 'manual') {
                                                'staff'   => ['label' => 'Staff',   'class' => 'ui-pill--primary'],
                                                'student' => ['label' => 'Student', 'class' => 'ui-pill--success'],
                                                default   => ['label' => 'Manual',  'class' => 'ui-pill--neutral'],
                                            };
                                        @endphp
                                        <span class="ui-pill {{ $typeLabel['class'] }}">
                                            {{ $typeLabel['label'] }}
                                        </span>
                                    </td>

                                    <td class="text-center">
                                        @if ($influencer->user)
                                            <span class="ui-pill ui-pill--info">
                                                <i class="fas fa-link me-1"></i>
                                                {{ $influencer->user->name }}
                                            </span>
                                        @else
                                            <span class="ui-pill ui-pill--neutral">No Link</span>
                                        @endif
                                    </td>

                                    <td class="text-center">
                                        <span class="influencer-contact">
                                            <i class="fas fa-phone-alt me-1 text-muted"></i>
                                            {{ $influencer->phone }}
                                        </span>
                                    </td>

                                    <td class="text-center">
                                        <span class="influencer-contact">
                                            <i class="fas fa-envelope me-1 text-muted"></i>
                                            {{ $influencer->email }}
                                        </span>
                                    </td>

                                    <td class="text-center">
                                        <span class="ui-pill ui-pill--primary">
                                            {{ $influencer->promocodes_count }}
                                        </span>
                                    </td>

                                    <td class="text-center">
                                        <strong class="text-dark">
                                            {{ $influencer->total_usages }}
                                        </strong>
                                    </td>

                                    <td class="text-center">
                                        <span class="ui-pill ui-pill--success font-bold">
                                            {{ number_format($influencer->total_earnings, 2) }} EGP
                                        </span>
                                    </td>

                                    <td class="text-center">
                                        <div class="influencer-actions">
                                            <x-table-action type="view" :url="route('influencers.show', $influencer->id)" />
                                            <x-table-action type="edit" :target="'#editInfluencerModal' . $influencer->id" />
                                            <x-table-action type="delete" :target="'#deleteInfluencerModal' . $influencer->id" />
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="9">
                                        <div class="table-empty-state">
                                            <i class="fas fa-user-tie"></i>
                                            <h6>No influencers found.</h6>
                                            <p>Start by adding your first influencer.</p>
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </x-table>
                    </div>

                    @if ($influencers->hasPages())
                        <div class="table-pagination">
                            {{ $influencers->appends(request()->except('page'))->links('pagination::bootstrap-5') }}
                        </div>
                    @endif
                </div>

            </div>
        </div>
    </div>

    {{-- Create Modal --}}
    <div class="modal fade influencer-modal" id="createInfluencerModal" tabindex="-1" aria-labelledby="createInfluencerModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <form action="{{ route('influencers.store') }}" method="POST" id="createInfluencerForm" class="w-100">
                @csrf
                <input type="hidden" name="influencer_type" id="createInfluencerType" value="manual">

                <div class="modal-content">
                    <div class="modal-header">
                        <div>
                            <h5 class="modal-title" id="createInfluencerModalLabel">Add Influencer</h5>
                            <p class="modal-subtitle mb-0">Create a new influencer profile to configure relationships.</p>
                        </div>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>

                    <div class="modal-body">
                        <div class="asset-form-grid">

                            {{-- Step 1: Type selection --}}
                            <div class="asset-col-12">
                                <label class="asset-label">Influencer Type <span class="text-danger">*</span></label>
                                <div class="d-flex gap-2 mt-1" id="influencerTypeCards">
                                    <label class="inf-type-card" data-value="manual">
                                        <input type="radio" name="_influencer_type" value="manual" hidden>
                                        <span class="inf-type-icon"><i class="fas fa-pen"></i></span>
                                        <span class="inf-type-label">Manual</span>
                                    </label>
                                    <label class="inf-type-card" data-value="staff">
                                        <input type="radio" name="_influencer_type" value="staff" hidden>
                                        <span class="inf-type-icon"><i class="fas fa-user-tie"></i></span>
                                        <span class="inf-type-label">Staff</span>
                                    </label>
                                    <label class="inf-type-card" data-value="student">
                                        <input type="radio" name="_influencer_type" value="student" hidden>
                                        <span class="inf-type-icon"><i class="fas fa-user-graduate"></i></span>
                                        <span class="inf-type-label">Student</span>
                                    </label>
                                </div>
                            </div>

                            {{-- User select: shown for staff/student only --}}
                            <div class="asset-col-12" id="createUserSelectWrap" style="display:none">
                                <label class="asset-label">Select System User</label>
                                <select name="user_id" id="createUserSelect" class="asset-select general-select">
                                    <option value="">— Choose —</option>
                                </select>
                            </div>

                            {{-- Manual inputs: shown only for manual type --}}
                            <div id="createManualFields" style="display:none; grid-column: span 12;">
                                <div class="asset-form-grid">
                                    <div class="asset-col-12">
                                        <label class="asset-label">Name <span class="text-danger">*</span></label>
                                        <input type="text" name="name" id="createName" class="asset-input" placeholder="Enter full name">
                                    </div>
                                    <div class="asset-col-12">
                                        <label class="asset-label">Phone <span class="text-danger">*</span></label>
                                        <input type="text" name="phone" id="createPhone" class="asset-input" placeholder="Enter phone number">
                                    </div>
                                    <div class="asset-col-12">
                                        <label class="asset-label">Email <span class="text-danger">*</span></label>
                                        <input type="email" name="email" id="createEmail" class="asset-input" placeholder="Enter email address">
                                    </div>
                                </div>
                            </div>

                            {{-- Hidden fields: populated from user select for staff/student --}}
                            <input type="hidden" name="name"  id="createNameHidden">
                            <input type="hidden" name="phone" id="createPhoneHidden">
                            <input type="hidden" name="email" id="createEmailHidden">

                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary rounded-pill" data-bs-dismiss="modal">
                            Cancel
                        </button>
                        <button type="submit" class="btn btn-outline-primary rounded-pill">
                            <i class="fas fa-save me-1"></i>
                            Save Influencer
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    {{-- Edit Modals --}}
    @foreach ($influencers as $influencer)
        <div class="modal fade influencer-modal" id="editInfluencerModal{{ $influencer->id }}" tabindex="-1"
            aria-labelledby="editInfluencerModalLabel{{ $influencer->id }}" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <form action="{{ route('influencers.update', $influencer->id) }}" method="POST" class="w-100">
                    @csrf
                    @method('PUT')

                    <div class="modal-content">
                        <div class="modal-header">
                            <div>
                                <h5 class="modal-title" id="editInfluencerModalLabel{{ $influencer->id }}">Edit Influencer</h5>
                                <p class="modal-subtitle mb-0">Update influencer contact info.</p>
                            </div>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>

                        <div class="modal-body">
                            <div class="asset-form-grid">
                                <div class="asset-col-12">
                                    <label class="asset-label">Name <span class="text-danger">*</span></label>
                                    <input type="text" name="name" class="asset-input" value="{{ old('name', $influencer->name) }}" required>
                                </div>

                                <div class="asset-col-12">
                                    <label class="asset-label">Phone <span class="text-danger">*</span></label>
                                    <input type="text" name="phone" class="asset-input" value="{{ old('phone', $influencer->phone) }}" required>
                                </div>

                                <div class="asset-col-12">
                                    <label class="asset-label">Email <span class="text-danger">*</span></label>
                                    <input type="email" name="email" class="asset-input" value="{{ old('email', $influencer->email) }}" required>
                                </div>

                                 <div class="asset-col-12">
                                     <label class="asset-label">Linked System User</label>
                                     <select name="user_id"
                                         class="asset-select general-select edit-user-select"
                                         data-influencer="{{ $influencer->id }}"
                                         data-current-user="{{ $influencer->user_id }}"
                                         data-type="{{ $influencer->influencer_type ?? 'manual' }}">
                                         <option value="">— No System User Link —</option>
                                         @if ($influencer->user_id && $influencer->user)
                                             <option value="{{ $influencer->user_id }}" selected>
                                                 {{ $influencer->user->name ?? $influencer->name }}
                                             </option>
                                         @endif
                                     </select>
                                     <small class="text-muted">Opens linked {{ $influencer->influencer_type ?? 'manual' }} users list.</small>
                                 </div>
                            </div>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-outline-secondary rounded-pill" data-bs-dismiss="modal">
                                Cancel
                            </button>
                            <button type="submit" class="btn btn-outline-success rounded-pill">
                                <i class="fas fa-check me-1"></i>
                                Update Influencer
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    @endforeach

    {{-- Delete Modals --}}
    @foreach ($influencers as $influencer)
        <div class="modal fade influencer-modal" id="deleteInfluencerModal{{ $influencer->id }}" tabindex="-1"
            aria-labelledby="deleteInfluencerLabel{{ $influencer->id }}" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <form action="{{ route('influencers.destroy', $influencer->id) }}" method="POST" class="w-100">
                    @csrf
                    @method('DELETE')

                    <div class="modal-content">
                        <div class="modal-header">
                            <div>
                                <h5 class="modal-title" id="deleteInfluencerLabel{{ $influencer->id }}">Delete Influencer</h5>
                                <p class="modal-subtitle mb-0">This action cannot be undone.</p>
                            </div>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>

                        <div class="modal-body">
                            <div class="delete-warning-box">
                                <div class="delete-warning-box__icon">
                                    <i class="fas fa-trash-alt"></i>
                                </div>

                                <div>
                                    <div class="delete-warning-box__title">
                                        Are you sure?
                                    </div>
                                    <div class="delete-warning-box__text">
                                        You are about to delete influencer
                                        <strong>{{ $influencer->name }}</strong>.
                                        This will dissociate them from their promocodes.
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-outline-secondary rounded-pill" data-bs-dismiss="modal">
                                Cancel
                            </button>
                            <button type="submit" class="btn btn-outline-danger rounded-pill">
                                <i class="fas fa-trash me-1"></i>
                                Delete Influencer
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    @endforeach

    <script>
        document.addEventListener('DOMContentLoaded', function () {

            // ── Select2 re-init inside modals ──
            if (window.jQuery && jQuery.fn.select2) {
                $('#createInfluencerModal').on('shown.bs.modal', function () {
                    $(this).find('.general-select').select2({
                        allowClear: true, width: '100%', dropdownParent: $(this)
                    });
                });
                $('[id^="editInfluencerModal"]').on('shown.bs.modal', function () {
                    const $editModal = $(this);
                    const $sel = $editModal.find('.edit-user-select');
                    const type = $sel.data('type');
                    const currentUserId = parseInt($sel.data('current-user'));

                    if (type && type !== 'manual') {
                        fetch(`{{ route('influencers.usersByType') }}?type=${type}`, {
                            headers: { 'X-Requested-With': 'XMLHttpRequest' }
                        })
                        .then(r => r.json())
                        .then(({ users, linkedUserIds }) => {
                            const currentVal = $sel.val();
                            $sel.find('option:not(:first)').remove();
                            users.forEach(u => {
                                const isLinked = linkedUserIds.includes(u.id) && u.id !== currentUserId;
                                const opt = new Option(
                                    u.name + ' (' + u.email + ')' + (isLinked ? ' — already linked' : ''),
                                    u.id,
                                    u.id === currentUserId,
                                    u.id === currentUserId
                                );
                                opt.disabled = isLinked;
                                $sel.append(opt);
                            });
                            $sel.select2({ allowClear: true, width: '100%', dropdownParent: $editModal });
                        });
                    } else {
                        $editModal.find('.general-select').select2({
                            allowClear: true, width: '100%', dropdownParent: $editModal
                        });
                    }
                });
            }

            // ── Create Modal ──
            const $modal        = document.getElementById('createInfluencerModal');
            const $form         = document.getElementById('createInfluencerForm');
            const selectWrap    = document.getElementById('createUserSelectWrap');
            const manualFields  = document.getElementById('createManualFields');
            const userSelect    = document.getElementById('createUserSelect');
            const hiddenName    = document.getElementById('createNameHidden');
            const hiddenPhone   = document.getElementById('createPhoneHidden');
            const hiddenEmail   = document.getElementById('createEmailHidden');
            const hiddenType    = document.getElementById('createInfluencerType');
            const typeRadios    = document.querySelectorAll('#createInfluencerModal input[name="_influencer_type"]');

            // Toggle required on manual inputs
            function setManualRequired(required) {
                ['createName','createPhone','createEmail'].forEach(id => {
                    const el = document.getElementById(id);
                    if (!el) return;
                    required ? el.setAttribute('required', true) : el.removeAttribute('required');
                });
            }

            // Rebuild the <select> options via AJAX for the chosen type
            function rebuildSelect(type) {
                if (!userSelect) return;

                // Destroy Select2 first
                if (window.jQuery && jQuery.fn.select2 && $(userSelect).data('select2')) {
                    $(userSelect).select2('destroy');
                }

                userSelect.innerHTML = '<option value="">— Loading... —</option>';
                hiddenName.value = hiddenPhone.value = hiddenEmail.value = '';

                fetch(`{{ route('influencers.usersByType') }}?type=${type}`, {
                    headers: { 'X-Requested-With': 'XMLHttpRequest' }
                })
                .then(r => r.json())
                .then(({ users, linkedUserIds }) => {
                    userSelect.innerHTML = '<option value="">— Choose —</option>';
                    users.forEach(u => {
                        const isLinked = linkedUserIds.includes(u.id);
                        const opt = document.createElement('option');
                        opt.value         = u.id;
                        opt.dataset.name  = u.name;
                        opt.dataset.email = u.email;
                        opt.dataset.phone = u.phone;
                        opt.disabled      = isLinked;
                        opt.textContent   = u.name + ' (' + u.email + ')' + (isLinked ? ' — already linked' : '');
                        userSelect.appendChild(opt);
                    });

                    if (window.jQuery && jQuery.fn.select2) {
                        $(userSelect).select2({
                            allowClear: true,
                            width: '100%',
                            dropdownParent: $('#createInfluencerModal')
                        });
                    }
                })
                .catch(() => {
                    userSelect.innerHTML = '<option value="">— Failed to load —</option>';
                });
            }

            // Reset everything
            function resetModal() {
                if ($form) $form.reset();
                selectWrap.style.display   = 'none';
                manualFields.style.display = 'none';
                hiddenName.value  = hiddenPhone.value = hiddenEmail.value = '';
                hiddenName.disabled = hiddenPhone.disabled = hiddenEmail.disabled = false;
                hiddenType.value = '';
                setManualRequired(false);
                // Re-enable visible inputs in case they were disabled on submit
                ['createName','createPhone','createEmail'].forEach(id => {
                    const el = document.getElementById(id);
                    if (el) el.disabled = false;
                });
                typeRadios.forEach(r => r.checked = false);
                document.querySelectorAll('.inf-type-card').forEach(c => c.classList.remove('selected'));
                if (window.jQuery && jQuery.fn.select2) {
                    if ($(userSelect).data('select2')) $(userSelect).select2('destroy');
                    $(userSelect).val(null);
                }
                userSelect.innerHTML = '<option value="">— Choose —</option>';
            }

            // Radio change
            typeRadios.forEach(radio => {
                radio.addEventListener('change', function () {
                    // Update card selected state
                    document.querySelectorAll('.inf-type-card').forEach(c => c.classList.remove('selected'));
                    const card = document.querySelector(`.inf-type-card[data-value="${this.value}"]`);
                    if (card) card.classList.add('selected');

                    hiddenType.value = this.value;
                    hiddenName.value = hiddenPhone.value = hiddenEmail.value = '';

                    if (this.value === 'manual') {
                        selectWrap.style.display   = 'none';
                        manualFields.style.display = '';
                        setManualRequired(true);
                        if (window.jQuery && jQuery.fn.select2) {
                            $(userSelect).val(null).trigger('change');
                        }
                    } else {
                        manualFields.style.display = 'none';
                        selectWrap.style.display   = '';
                        setManualRequired(false);
                        rebuildSelect(this.value);
                    }
                });
            });

            // User select change → populate hidden fields
            if (userSelect && window.jQuery) {
                $(userSelect).on('change', function () {
                    const opt = userSelect.options[userSelect.selectedIndex];
                    if (userSelect.value && opt) {
                        hiddenName.value  = opt.dataset.name  || '';
                        hiddenPhone.value = opt.dataset.phone || '';
                        hiddenEmail.value = opt.dataset.email || '';
                    } else {
                        hiddenName.value = hiddenPhone.value = hiddenEmail.value = '';
                    }
                });
            }

            // Reset on open
            if ($modal) {
                $modal.addEventListener('show.bs.modal', resetModal);
            }

            // On submit: disable the unused set of fields to avoid duplicate POST keys
            if ($form) {
                $form.addEventListener('submit', function () {
                    const type = hiddenType.value;
                    if (type === 'manual') {
                        // Disable hidden fields — manual inputs carry the values
                        hiddenName.disabled  = true;
                        hiddenPhone.disabled = true;
                        hiddenEmail.disabled = true;
                    } else {
                        // Disable visible manual inputs — hidden fields carry the values
                        const visName  = document.getElementById('createName');
                        const visPhone = document.getElementById('createPhone');
                        const visEmail = document.getElementById('createEmail');
                        if (visName)  visName.disabled  = true;
                        if (visPhone) visPhone.disabled = true;
                        if (visEmail) visEmail.disabled = true;
                    }
                });
            }
        });
    </script>
@endsection