@php
    $member = (isset($data) && $data instanceof \Illuminate\Database\Eloquent\Model)
        ? $data
        : ((isset($dataTypeContent) && $dataTypeContent instanceof \Illuminate\Database\Eloquent\Model) ? $dataTypeContent : null);
    $memberId = $member ? $member->id : null;
    $availableCompanies = \App\Models\Company::orderBy('name')->get();
    $maxCompanies = $availableCompanies->count();
    
    // Load existing roles for this member
    $existingRoles = $memberId
        ? \App\Models\TeamCompanyRole::where('employee_id', $memberId)->orderBy('display_order')->get()
        : collect();
@endphp

@if(isset($view) && ($view === 'browse' || $view === 'read'))
    {{-- Browse / Read Table View: Render structured table of Company Affiliations & Designations --}}
    @if($existingRoles->isNotEmpty())
        <div style="overflow-x: auto; max-width: 100%;">
            <table class="table table-bordered table-condensed table-hover" style="margin-bottom: 0; background: #ffffff; font-size: 11.5px; border: 1px solid #e2e8f0; border-radius: 6px; box-shadow: 0 1px 2px rgba(0,0,0,0.03);">
                <thead>
                    <tr style="background: #f8fafc; color: #475569; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.5px;">
                        <th style="padding: 5px 8px; font-weight: 700; border-bottom: 2px solid #e2e8f0; white-space: nowrap;">
                            <i class="voyager-shop" style="color: #10b981; margin-right: 4px;"></i> Company
                        </th>
                        <th style="padding: 5px 8px; font-weight: 700; border-bottom: 2px solid #e2e8f0;">
                            <i class="voyager-briefcase" style="color: #6366f1; margin-right: 4px;"></i> Designation
                        </th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($existingRoles as $r)
                        <tr>
                            <td style="padding: 5px 8px; font-weight: 600; color: #0f172a; vertical-align: middle; white-space: nowrap;">
                                {{ $r->company_name }}
                            </td>
                            <td style="padding: 5px 8px; color: #334155; vertical-align: middle;">
                                <span class="badge" style="background: #f1f5f9; color: #1e293b; border: 1px solid #cbd5e1; font-weight: 600; font-size: 11px; padding: 2px 6px;">
                                    {{ $r->designation }}
                                </span>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @elseif($member && (!empty($member->company_working_with) || !empty($member->designation)))
        @php
            $rawComps = !empty($member->company_working_with)
                ? array_filter(array_map('trim', explode(',', $member->company_working_with)))
                : ['Farmers For Forests'];
            $defaultDesig = !empty($member->designation) ? $member->designation : '—';
        @endphp
        <div style="overflow-x: auto; max-width: 100%;">
            <table class="table table-bordered table-condensed table-hover" style="margin-bottom: 0; background: #ffffff; font-size: 11.5px; border: 1px solid #e2e8f0; border-radius: 6px; box-shadow: 0 1px 2px rgba(0,0,0,0.03);">
                <thead>
                    <tr style="background: #f8fafc; color: #475569; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.5px;">
                        <th style="padding: 5px 8px; font-weight: 700; border-bottom: 2px solid #e2e8f0; white-space: nowrap;">
                            <i class="voyager-shop" style="color: #10b981; margin-right: 4px;"></i> Company
                        </th>
                        <th style="padding: 5px 8px; font-weight: 700; border-bottom: 2px solid #e2e8f0;">
                            <i class="voyager-briefcase" style="color: #6366f1; margin-right: 4px;"></i> Designation
                        </th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($rawComps as $comp)
                        <tr>
                            <td style="padding: 5px 8px; font-weight: 600; color: #0f172a; vertical-align: middle; white-space: nowrap;">
                                {{ $comp }}
                            </td>
                            <td style="padding: 5px 8px; color: #334155; vertical-align: middle;">
                                <span class="badge" style="background: #f1f5f9; color: #1e293b; border: 1px solid #cbd5e1; font-weight: 600; font-size: 11px; padding: 2px 6px;">
                                    {{ $defaultDesig }}
                                </span>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @else
        <span class="text-muted" style="font-size: 11.5px; font-style: italic;">No company affiliations</span>
    @endif
@else
    {{-- Edit / Add View: Interactive Multi-Company Repeater --}}
    <div class="company-roles-widget" style="background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 16px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.03);">
        
        <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; flex-wrap: wrap; gap: 8px;">
            <label class="control-label" style="font-size: 13.5px; font-weight: 700; color: #0f172a; margin: 0; display: flex; align-items: center; gap: 6px;">
                <i class="voyager-briefcase" style="color: #10b981; font-size: 16px;"></i>
                <span>Company Affiliations & Designations</span>
            </label>
            <span id="company-roles-counter-badge" class="badge" style="background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; font-size: 11.5px; font-weight: 600; padding: 4px 8px;">
                0 / {{ $maxCompanies }} Companies
            </span>
        </div>

        <p class="text-muted" style="font-size: 12px; line-height: 1.45; margin-bottom: 14px; color: #64748b;">
            Assign this member to one or more companies with their company-specific designation (e.g. <em>Director</em>, <em>President</em>, <em>Trustee</em>). Limited to the <strong>{{ $maxCompanies }}</strong> companies in the database, with no duplicates allowed.
        </p>

        {{-- Rows Container --}}
        <div id="company-roles-container">
            @if($existingRoles->isNotEmpty())
                @foreach($existingRoles as $idx => $role)
                    <div class="company-role-row" data-index="{{ $idx }}" style="display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; transition: all 0.2s ease;">
                        <div style="flex: 1; min-width: 180px;">
                            <label style="font-size: 11px; text-transform: uppercase; color: #475569; font-weight: 700; margin-bottom: 4px; display: block;">Company</label>
                            <select name="company_roles[{{ $idx }}][company_id]" class="form-control company-select" required style="font-size: 13px;">
                                <option value="">-- Select Company --</option>
                                @foreach($availableCompanies as $company)
                                    <option value="{{ $company->id }}" {{ $role->company_id == $company->id ? 'selected' : '' }}>
                                        {{ $company->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div style="flex: 1.4; min-width: 200px;">
                            <label style="font-size: 11px; text-transform: uppercase; color: #475569; font-weight: 700; margin-bottom: 4px; display: block;">Designation in Company</label>
                            <input type="text" name="company_roles[{{ $idx }}][designation]" class="form-control designation-input" value="{{ $role->designation }}" placeholder="e.g. Co-Founder & Director, President" required style="font-size: 13px;">
                        </div>
                        <div style="padding-top: 22px;">
                            <button type="button" class="btn btn-danger btn-sm btn-remove-company-role" title="Remove Company" style="margin: 0; padding: 6px 10px; border-radius: 6px;">
                                <i class="voyager-trash"></i>
                            </button>
                        </div>
                    </div>
                @endforeach
            @endif
        </div>

        {{-- Empty State Notification --}}
        <div id="company-roles-empty-msg" style="display: {{ $existingRoles->isEmpty() ? 'block' : 'none' }}; padding: 14px; background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 8px; text-align: center; color: #64748b; font-size: 12.5px; margin-bottom: 12px;">
            <i class="voyager-info-circled" style="margin-right: 4px;"></i> No companies assigned yet. Click <strong>+ Add Company</strong> below to assign a company and role.
        </div>

        {{-- Action Bar --}}
        <div style="display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
            <button type="button" id="btn-add-company-role" class="btn btn-success btn-sm" style="font-weight: 600; padding: 6px 14px; border-radius: 6px; display: inline-flex; align-items: center; gap: 5px;">
                <i class="voyager-plus"></i> Add Company
            </button>
            <span id="company-max-reached-alert" style="display: none; color: #b45309; font-size: 12px; font-weight: 600; background: #fef3c7; border: 1px solid #fde68a; padding: 4px 10px; border-radius: 6px;">
                <i class="voyager-check-circle" style="color: #d97706; margin-right: 3px;"></i> All available companies have been assigned.
            </span>
        </div>
    </div>

    {{-- JavaScript for Duplicate Prevention and Max Limit Handling --}}
    <script>
        (function() {
            const maxCompanies = {{ $maxCompanies }};
            const availableCompanies = @json($availableCompanies);

            function updateCompanyControls() {
                const container = document.getElementById('company-roles-container');
                if (!container) return;

                const rows = container.querySelectorAll('.company-role-row');
                const rowCount = rows.length;
                const counterBadge = document.getElementById('company-roles-counter-badge');
                const emptyMsg = document.getElementById('company-roles-empty-msg');
                const addBtn = document.getElementById('btn-add-company-role');
                const maxAlert = document.getElementById('company-max-reached-alert');

                // Update badge and empty state
                if (counterBadge) {
                    counterBadge.innerText = `${rowCount} / ${maxCompanies} Companies`;
                }
                if (emptyMsg) {
                    emptyMsg.style.display = rowCount === 0 ? 'block' : 'none';
                }

                // Check limit
                if (rowCount >= maxCompanies) {
                    if (addBtn) addBtn.disabled = true;
                    if (maxAlert) maxAlert.style.display = 'inline-block';
                } else {
                    if (addBtn) addBtn.disabled = false;
                    if (maxAlert) maxAlert.style.display = 'none';
                }

                // Gather selected IDs across all rows to prevent duplicates
                const selectedIds = [];
                rows.forEach(row => {
                    const select = row.querySelector('.company-select');
                    if (select && select.value) {
                        selectedIds.push(select.value);
                    }
                });

                // Disable options that are selected in OTHER rows
                rows.forEach(row => {
                    const select = row.querySelector('.company-select');
                    if (!select) return;
                    const currentValue = select.value;

                    Array.from(select.options).forEach(opt => {
                        if (!opt.value) return; // Keep "-- Select Company --"
                        if (opt.value === currentValue) {
                            opt.disabled = false; // keep self enabled
                        } else if (selectedIds.includes(opt.value)) {
                            opt.disabled = true; // already taken by another row
                        } else {
                            opt.disabled = false;
                        }
                    });
                });
            }

            function addCompanyRow() {
                const container = document.getElementById('company-roles-container');
                if (!container) return;

                const rows = container.querySelectorAll('.company-role-row');
                if (rows.length >= maxCompanies) {
                    return;
                }

                const uniqueIndex = 'new_' + Date.now() + '_' + Math.floor(Math.random() * 1000);

                // Build company options
                let optionsHtml = '<option value="">-- Select Company --</option>';
                availableCompanies.forEach(comp => {
                    optionsHtml += `<option value="${comp.id}">${comp.name}</option>`;
                });

                const rowDiv = document.createElement('div');
                rowDiv.className = 'company-role-row';
                rowDiv.setAttribute('data-index', uniqueIndex);
                rowDiv.style.cssText = 'display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; transition: all 0.2s ease;';

                rowDiv.innerHTML = `
                    <div style="flex: 1; min-width: 180px;">
                        <label style="font-size: 11px; text-transform: uppercase; color: #475569; font-weight: 700; margin-bottom: 4px; display: block;">Company</label>
                        <select name="company_roles[${uniqueIndex}][company_id]" class="form-control company-select" required style="font-size: 13px;">
                            ${optionsHtml}
                        </select>
                    </div>
                    <div style="flex: 1.4; min-width: 200px;">
                        <label style="font-size: 11px; text-transform: uppercase; color: #475569; font-weight: 700; margin-bottom: 4px; display: block;">Designation in Company</label>
                        <input type="text" name="company_roles[${uniqueIndex}][designation]" class="form-control designation-input" placeholder="e.g. Co-Founder & Director, President" required style="font-size: 13px;">
                    </div>
                    <div style="padding-top: 22px;">
                        <button type="button" class="btn btn-danger btn-sm btn-remove-company-role" title="Remove Company" style="margin: 0; padding: 6px 10px; border-radius: 6px;">
                            <i class="voyager-trash"></i>
                        </button>
                    </div>
                `;

                container.appendChild(rowDiv);

                // Bind remove event
                const removeBtn = rowDiv.querySelector('.btn-remove-company-role');
                if (removeBtn) {
                    removeBtn.addEventListener('click', function() {
                        rowDiv.remove();
                        updateCompanyControls();
                    });
                }

                // Bind change event on select
                const select = rowDiv.querySelector('.company-select');
                if (select) {
                    select.addEventListener('change', updateCompanyControls);
                }

                updateCompanyControls();
            }

            function initCompanyRoles() {
                const outerLabel = document.querySelector('label[for="company_working_with"]');
                if (outerLabel) {
                    outerLabel.style.display = 'none';
                }

                const addBtn = document.getElementById('btn-add-company-role');
                if (addBtn && !addBtn.dataset.bound) {
                    addBtn.dataset.bound = 'true';
                    addBtn.addEventListener('click', addCompanyRow);
                }

                const container = document.getElementById('company-roles-container');
                if (container && !container.dataset.bound) {
                    container.dataset.bound = 'true';
                    container.addEventListener('click', function(e) {
                        const btn = e.target.closest('.btn-remove-company-role');
                        if (btn) {
                            const row = btn.closest('.company-role-row');
                            if (row) {
                                row.remove();
                                updateCompanyControls();
                            }
                        }
                    });

                    container.addEventListener('change', function(e) {
                        if (e.target && e.target.classList.contains('company-select')) {
                            updateCompanyControls();
                        }
                    });
                }

                updateCompanyControls();
            }

            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', initCompanyRoles);
            } else {
                initCompanyRoles();
            }
        })();
    </script>
@endif