{{-- resources/views/agent/leads/partials/assigned.blade.php --}}
@php
    use Illuminate\Support\Facades\Route;

    // Safe fallback if the controller didn't pass $assignedData
$assigned = is_array($assignedData ?? null) ? $assignedData : [];

// Tabs we support for ASSIGNED
$types = [
    'life' => 'Life',
    'mortgage' => 'Mortgage Protection',
];

// If at least one dataset exists, start there; else default to Life
$available = array_values(array_filter(array_keys($types), fn($k) => array_key_exists($k, $assigned)));
$firstActive = $available[0] ?? 'life';

    // Unique IDs so these don’t collide with Purchased tab
    $paneId = fn($key) => "assigned-{$key}";
    $tabId = fn($key) => "assigned-tab-{$key}";
@endphp

<style>
    /* Keep the sticky setup you liked */
    .table-responsive {
        position: relative;
    }

    .sticky-col {
        position: sticky;
        background: #fff;
        z-index: 2;
    }

    thead th.sticky-col {
        background: #f8f9fa;
        z-index: 3;
    }

    .sticky-col-1 {
        left: 0;
        min-width: 160px;
        box-shadow: 2px 0 0 rgba(0, 0, 0, .05);
    }

    .sticky-col-2 {
        left: 160px;
        min-width: 160px;
        box-shadow: 2px 0 0 rgba(0, 0, 0, .05);
    }

    .sticky-status {
        right: 0;
        min-width: 160px;
    }
</style>

<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="mb-0">Assigned Leads</h5>

        {{-- Optional Bulk Update controls (Status / Insurance Type) --}}
        <div class="d-flex gap-2">
            {{-- Bulk Status --}}
            <form method="POST" action="{{ route('agent.leads.bulkUpdate') }}" id="assignedBulkStatusForm"
                class="d-flex align-items-center gap-2">
                @csrf
                <input type="hidden" name="field" value="status">
                {{-- dynamic ids[life][], ids[mortgage][] will be injected by JS --}}
                <select name="value" class="form-select form-select-sm" title="Bulk Status">
                    @foreach ($dropdowns['statuses'] ?? [] as $s)
                        <option value="{{ $s }}">{{ ucfirst(str_replace('_', ' ', $s)) }}</option>
                    @endforeach
                </select>
                <button type="button" class="btn btn-sm btn-outline-primary" id="applyAssignedBulkStatus">Apply
                    Status</button>
            </form>

            {{-- Bulk Insurance Type --}}
            <form method="POST" action="{{ route('agent.leads.bulkUpdate') }}" id="assignedBulkTypeForm"
                class="d-flex align-items-center gap-2">
                @csrf
                <input type="hidden" name="field" value="insurance_type">
                <select name="value" class="form-select form-select-sm" title="Bulk Insurance Type"
                    id="assignedBulkTypeSelect">
                    {{-- Default to Life list; JS will not validate the exact type against each row.
                         If you prefer per-tab options, just change the select when tab changes. --}}
                    @foreach ($dropdowns['lifeInsuranceTypes'] ?? [] as $opt)
                        <option value="{{ $opt }}">{{ ucfirst(str_replace('_', ' ', $opt)) }}</option>
                    @endforeach
                    @if (!empty($dropdowns['mortgageInsuranceType']))
                        <option value="{{ $dropdowns['mortgageInsuranceType'] }}">
                            {{ ucfirst(str_replace('_', ' ', $dropdowns['mortgageInsuranceType'])) }}</option>
                    @endif
                </select>
                <button type="button" class="btn btn-sm btn-outline-secondary" id="applyAssignedBulkType">Apply
                    Type</button>
            </form>
        </div>
    </div>

    <div class="card-body">
        {{-- Tabs --}}
        <ul class="nav nav-tabs" role="tablist">
            @foreach ($types as $key => $label)
                @if (array_key_exists($key, $assigned))
                    <li class="nav-item" role="presentation">
                        <button class="nav-link @if ($key === $firstActive) active @endif"
                            id="{{ $tabId($key) }}" data-bs-toggle="tab" data-bs-target="#{{ $paneId($key) }}"
                            type="button" role="tab">
                            {{ $label }}
                        </button>
                    </li>
                @endif
            @endforeach
        </ul>

        {{-- Tab panes --}}
        <div class="tab-content mt-3">
            @foreach ($types as $key => $label)
                @if (array_key_exists($key, $assigned))
                    @php $rows = $assigned[$key]; @endphp
                    <div class="tab-pane fade @if ($key === $firstActive) show active @endif"
                        id="{{ $paneId($key) }}" role="tabpanel" aria-labelledby="{{ $tabId($key) }}">
                        <div class="table-responsive">
                            <table class="table table-bordered table-hover align-middle">
                                <thead>
                                    <tr>
                                        <th style="min-width:42px;"><input type="checkbox" class="check-all"
                                                data-scope="{{ $key }}"></th>
                                        <th class="sticky-col sticky-col-1">First</th>
                                        <th class="sticky-col sticky-col-2">Last</th>
                                        <th>Email</th>
                                        <th>Phone</th>
                                        <th>City</th>
                                        <th>State</th>
                                        <th>Insurance Type</th>
                                        <th>Status</th>
                                        <th>Last Updated</th>
                                        <th class="text-nowrap">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($rows as $lead)
                                        <tr>
                                            <td>
                                                <input type="checkbox" name="ids[{{ $key }}][]"
                                                    value="{{ $lead->id }}"
                                                    class="row-check row-check-{{ $key }}">
                                            </td>
                                            <td class="sticky-col sticky-col-1">{{ $lead->first_name }}</td>
                                            <td class="sticky-col sticky-col-2">{{ $lead->last_name }}</td>
                                            <td>{{ $lead->email }}</td>
                                            <td>{{ $lead->phone_number }}</td>
                                            <td>{{ $lead->city }}</td>
                                            <td>{{ $lead->state }}</td>

                                            {{-- Inline Insurance Type --}}
                                            <td>
                                                <form method="POST" action="{{ route('agent.leads.inline') }}">
                                                    @csrf
                                                    @method('PATCH')
                                                    <input type="hidden" name="scope"
                                                        value="assigned_{{ $key }}">
                                                    <input type="hidden" name="id" value="{{ $lead->id }}">
                                                    <input type="hidden" name="field" value="insurance_type">
                                                    <select name="value" class="form-select form-select-sm"
                                                        onchange="this.form.submit()">
                                                        @php
                                                            $opts =
                                                                $key === 'life'
                                                                    ? $dropdowns['lifeInsuranceTypes'] ?? []
                                                                    : [
                                                                        $dropdowns['mortgageInsuranceType'] ??
                                                                        'mortgage_protection',
                                                                    ];
                                                        @endphp
                                                        @foreach ($opts as $opt)
                                                            <option value="{{ $opt }}"
                                                                @selected($lead->insurance_type === $opt)>
                                                                {{ ucfirst(str_replace('_', ' ', $opt)) }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </form>
                                            </td>

                                            {{-- Inline Status --}}
                                            <td>
                                                <form method="POST" action="{{ route('agent.leads.inline') }}">
                                                    @csrf
                                                    @method('PATCH')
                                                    <input type="hidden" name="scope"
                                                        value="assigned_{{ $key }}">
                                                    <input type="hidden" name="id" value="{{ $lead->id }}">
                                                    <input type="hidden" name="field" value="status">
                                                    <select name="value" class="form-select form-select-sm"
                                                        onchange="this.form.submit()">
                                                        @foreach ($dropdowns['statuses'] ?? [] as $s)
                                                            <option value="{{ $s }}"
                                                                @selected($lead->status === $s)>
                                                                {{ ucfirst(str_replace('_', ' ', $s)) }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </form>
                                            </td>

                                            {{-- Last Updated (from updated_at or last_modified_at if present) --}}
                                            <td>
                                                @php
                                                    $last = $lead->last_modified_at ?? ($lead->updated_at ?? null);
                                                @endphp
                                                {{ $last ? \Illuminate\Support\Carbon::parse($last)->format('Y-m-d H:i') : '' }}
                                            </td>

                                            {{-- Convert Button --}}
                                            <td class="text-nowrap">
                                                <form method="POST" action="{{ route('agent.leads.convert') }}">
                                                    @csrf
                                                    <input type="hidden" name="type"
                                                        value="assigned_{{ $key }}">
                                                    <input type="hidden" name="id"
                                                        value="{{ $lead->id }}">
                                                    <button type="submit"
                                                        class="btn btn-sm btn-success">Convert</button>
                                                </form>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="11" class="text-center">No {{ $label }} leads
                                                found.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                        {{-- Pagination --}}
                        <div class="mt-2">
                            {{ $rows->links() }}
                        </div>
                    </div>
                @endif
            @endforeach
        </div>
    </div>
</div>

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Select all checkbox
            document.querySelectorAll('.check-all').forEach(el => {
                el.addEventListener('change', function() {
                    let scope = this.dataset.scope;
                    document.querySelectorAll('.row-check-' + scope).forEach(c => {
                        c.checked = this.checked;
                    });
                });
            });

            // Helpers to collect selected IDs by tab (life/mortgage)
            function collectAssignedSelections() {
                const out = {
                    life: [],
                    mortgage: []
                };
                ['life', 'mortgage'].forEach(scope => {
                    document.querySelectorAll('.row-check-' + scope + ':checked').forEach(c => out[scope]
                        .push(c.value));
                });
                return out;
            }

            // Bulk Status
            const applyStatusBtn = document.getElementById('applyAssignedBulkStatus');
            if (applyStatusBtn) {
                applyStatusBtn.addEventListener('click', function() {
                    const sel = collectAssignedSelections();
                    if (sel.life.length === 0 && sel.mortgage.length === 0) {
                        alert('Select at least one lead.');
                        return;
                    }
                    const form = document.getElementById('assignedBulkStatusForm');

                    // Clear previous hidden inputs
                    form.querySelectorAll('input[name^="ids["]').forEach(n => n.remove());

                    // Inject ids[life][], ids[mortgage][]
                    Object.entries(sel).forEach(([scope, ids]) => {
                        ids.forEach(id => {
                            const i = document.createElement('input');
                            i.type = 'hidden';
                            i.name = `ids[${scope}][]`;
                            i.value = id;
                            form.appendChild(i);
                        });
                    });

                    form.submit();
                });
            }

            // Bulk Insurance Type
            const applyTypeBtn = document.getElementById('applyAssignedBulkType');
            if (applyTypeBtn) {
                applyTypeBtn.addEventListener('click', function() {
                    const sel = collectAssignedSelections();
                    if (sel.life.length === 0 && sel.mortgage.length === 0) {
                        alert('Select at least one lead.');
                        return;
                    }
                    const form = document.getElementById('assignedBulkTypeForm');

                    // Clear previous hidden inputs
                    form.querySelectorAll('input[name^="ids["]').forEach(n => n.remove());

                    // Inject ids[life][], ids[mortgage][]
                    Object.entries(sel).forEach(([scope, ids]) => {
                        ids.forEach(id => {
                            const i = document.createElement('input');
                            i.type = 'hidden';
                            i.name = `ids[${scope}][]`;
                            i.value = id;
                            form.appendChild(i);
                        });
                    });

                    form.submit();
                });
            }
        });
    </script>
@endpush