{{-- resources/views/agent/leads/partials/assigned.blade.php --}}

<style>
    /* Container must be relative for sticky to behave inside .table-responsive */
    .table-responsive {
        position: relative;
    }

    /* Sticky Left Columns (First + Last Name) */
    .sticky-col {
        position: sticky;
        background: #fff;
        z-index: 2;
    }

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

    /* Specific left positions + widths for the 2 sticky left columns */
    .sticky-col-1 {
        left: 0;
        min-width: 160px;
        box-shadow: 2px 0 0 rgba(0, 0, 0, 0.05);
    }

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

    /* Sticky Right "Status" column */
    .sticky-status {
        position: sticky;
        right: 0;
        background: #fff;
        z-index: 2;
        box-shadow: -2px 0 0 rgba(0, 0, 0, 0.05);
    }

    thead th.sticky-status {
        background: #f8f9fa;
        z-index: 3;
    }
</style>

@php
    // Fallback life options if not provided by controller
    $lifeInsuranceTypes =
        $lifeInsuranceTypes ??
        ($insuranceTypes ?? [
            'term_life' => 'Term Life',
            'whole_life' => 'Whole Life',
            'final_expense' => 'Final Expense',
            'iul' => 'Index Universal Life (IUL)',
        ]);
    $mortgageOptionKey = $mortgageInsuranceType ?? 'mortgage_protection';
    $mortgageOptionLabel = 'Mortgage Protection';
@endphp

<div class="card mb-4">
    <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
        <h5 class="mb-0">Assigned Leads</h5>
        <ul class="nav nav-tabs card-header-tabs" id="assignedLeadsTabs" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active text-white" id="life-tab" data-bs-toggle="tab" data-bs-target="#life"
                    type="button" role="tab">Life Leads</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link text-white" id="mortgage-tab" data-bs-toggle="tab" data-bs-target="#mortgage"
                    type="button" role="tab">Mortgage Protection</button>
            </li>
        </ul>
    </div>

    <div class="card-body tab-content" id="assignedLeadsTabContent">
        {{-- Life Leads Tab --}}
        <div class="tab-pane fade show active" id="life" role="tabpanel">
            @if ($assignedLifeLeads->isEmpty())
                <p>No assigned life leads available.</p>
            @else
                <div class="mb-3 text-end">
                    <a href="{{ route('agent.leads.life.export') }}" class="btn btn-sm btn-outline-success">Export Life
                        Leads</a>
                </div>
                <div class="table-responsive">
                    <table class="table table-bordered table-hover align-middle">
                        <thead class="table-light">
                            <tr>
                                <th class="sticky-col sticky-col-1">First Name</th>
                                <th class="sticky-col sticky-col-2">Last Name</th>
                                <th>Phone</th>
                                <th>Email</th>
                                <th>Age</th>
                                <th>Date of Birth</th>
                                <th>Address</th>
                                <th>City</th>
                                <th>State</th>
                                <th>Zipcode</th>
                                <th>County</th>
                                <th>Insurance Type</th>
                                {{-- NEW: Lead Type header --}}
                                <th>Lead Type</th>
                                <th class="sticky-status" style="min-width:150px;">Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($assignedLifeLeads as $lead)
                                <tr>
                                    <td class="sticky-col sticky-col-1">{{ $lead->first_name }}</td>
                                    <td class="sticky-col sticky-col-2">{{ $lead->last_name }}</td>
                                    <td>{{ $lead->phone_number }}</td>
                                    <td>{{ $lead->email }}</td>
                                    <td>{{ $lead->age }}</td>
                                    <td>{{ $lead->date_of_birth }}</td>
                                    <td>{{ $lead->address }}</td>
                                    <td>{{ $lead->city }}</td>
                                    <td>{{ $lead->state }}</td>
                                    <td>{{ $lead->zipcode }}</td>
                                    <td>{{ $lead->county }}</td>

                                    {{-- ✅ Convert to Client (Life): select + button --}}
                                    <td>
                                        <form action="{{ route('agent.leads.convert') }}" method="POST"
                                            class="d-inline">
                                            @csrf
                                            <input type="hidden" name="lead_type" value="assigned_life">
                                            <input type="hidden" name="lead_id" value="{{ $lead->id }}">

                                            <select name="insurance_type"
                                                class="form-select form-select-sm d-inline w-auto" required>
                                                <option value="" disabled
                                                    {{ empty($lead->insurance_type) ? 'selected' : '' }}>Select type…
                                                </option>
                                                @foreach ($lifeInsuranceTypes as $key => $label)
                                                    <option value="{{ $key }}"
                                                        {{ ($lead->insurance_type ?? '') === $key ? 'selected' : '' }}>
                                                        {{ $label }}
                                                    </option>
                                                @endforeach
                                            </select>

                                            <button type="submit" class="btn btn-success btn-sm ms-1">
                                                Convert to Client
                                            </button>
                                        </form>
                                    </td>

                                    {{-- NEW: Lead Type cell --}}
                                    <td><span class="badge bg-secondary">Assigned</span></td>

                                    <td class="sticky-status">
                                        <select class="form-select form-select-sm lead-status-dropdown"
                                            style="min-width: 140px;" data-lead-id="{{ $lead->id }}"
                                            data-lead-type="life">
                                            <option {{ $lead->status == 'New' ? 'selected' : '' }}>New</option>
                                            <option {{ $lead->status == 'Contacted' ? 'selected' : '' }}>Contacted
                                            </option>
                                            <option {{ $lead->status == 'Qualified' ? 'selected' : '' }}>Qualified
                                            </option>
                                            <option {{ $lead->status == 'Closed' ? 'selected' : '' }}>Closed</option>
                                            <option {{ $lead->status == 'Unresponsive' ? 'selected' : '' }}>
                                                Unresponsive</option>
                                        </select>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        </div>

        {{-- Mortgage Protection Leads Tab --}}
        <div class="tab-pane fade" id="mortgage" role="tabpanel">
            @if ($assignedMortgageLeads->isEmpty())
                <p>No assigned mortgage protection leads available.</p>
            @else
                <div class="mb-3 text-end">
                    <a href="{{ route('agent.leads.mortgage.export') }}" class="btn btn-sm btn-outline-success">Export
                        Mortgage Leads</a>
                </div>
                <div class="table-responsive">
                    <table class="table table-bordered table-hover align-middle">
                        <thead class="table-light">
                            <tr>
                                <th class="sticky-col sticky-col-1">First Name</th>
                                <th class="sticky-col sticky-col-2">Last Name</th>
                                <th>Phone</th>
                                <th>Email</th>
                                <th>Age</th>
                                <th>Date of Birth</th>
                                <th>Mortgage</th>
                                <th>Lender</th>
                                <th>Address</th>
                                <th>City</th>
                                <th>State</th>
                                <th>Zipcode</th>
                                <th>County</th>
                                <th>Insurance Type</th>
                                {{-- NEW: Lead Type header --}}
                                <th>Lead Type</th>
                                <th class="sticky-status" style="min-width:150px;">Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($assignedMortgageLeads as $lead)
                                <tr>
                                    <td class="sticky-col sticky-col-1">{{ $lead->first_name }}</td>
                                    <td class="sticky-col sticky-col-2">{{ $lead->last_name }}</td>
                                    <td>{{ $lead->phone_number }}</td>
                                    <td>{{ $lead->email }}</td>
                                    <td>{{ $lead->age }}</td>
                                    <td>{{ $lead->date_of_birth }}</td>
                                    <td>${{ number_format($lead->mortgage, 2) }}</td>
                                    <td>{{ $lead->lender }}</td>
                                    <td>{{ $lead->address }}</td>
                                    <td>{{ $lead->city }}</td>
                                    <td>{{ $lead->state }}</td>
                                    <td>{{ $lead->zipcode }}</td>
                                    <td>{{ $lead->county }}</td>

                                    {{-- ✅ Convert to Client (Mortgage): fixed insurance type --}}
                                    <td>
                                        <form action="{{ route('agent.leads.convert') }}" method="POST"
                                            class="d-inline">
                                            @csrf
                                            <input type="hidden" name="lead_type" value="assigned_mortgage">
                                            <input type="hidden" name="lead_id" value="{{ $lead->id }}">
                                            <input type="hidden" name="insurance_type"
                                                value="{{ $mortgageOptionKey }}">

                                            <span class="me-2">{{ $mortgageOptionLabel }}</span>
                                            <button type="submit" class="btn btn-success btn-sm">
                                                Convert to Client
                                            </button>
                                        </form>
                                    </td>

                                    {{-- NEW: Lead Type cell --}}
                                    <td><span class="badge bg-secondary">Assigned</span></td>

                                    <td class="sticky-status">
                                        <select class="form-select form-select-sm lead-status-dropdown"
                                            style="min-width: 140px;" data-lead-id="{{ $lead->id }}"
                                            data-lead-type="mortgage">
                                            <option {{ $lead->status == 'New' ? 'selected' : '' }}>New</option>
                                            <option {{ $lead->status == 'Contacted' ? 'selected' : '' }}>Contacted
                                            </option>
                                            <option {{ $lead->status == 'Qualified' ? 'selected' : '' }}>Qualified
                                            </option>
                                            <option {{ $lead->status == 'Closed' ? 'selected' : '' }}>Closed</option>
                                            <option {{ $lead->status == 'Unresponsive' ? 'selected' : '' }}>
                                                Unresponsive</option>
                                        </select>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        </div>
    </div>
</div>