{{-- resources/views/agent/leads/index.blade.php --}}
@extends('layouts.contentLayoutMaster')

@section('title', 'My Leads')

@section('page-style')
    <style>
        /* Sticky helpers (match your example classes) */
        .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: 150px;
            box-shadow: -2px 0 0 rgba(0, 0, 0, .05);
        }

        /* Extra spacing for controls */
        .convert-btn {
            white-space: nowrap;
        }

        .search-row .form-control {
            min-width: 160px;
        }

        .nowrap {
            white-space: nowrap;
        }
    </style>
@endsection

@section('content')
    <div class="container py-4">
        <div class="card shadow rounded">
            <div class="card-header bg-success text-white d-flex justify-content-between align-items-center">
                <h4 class="mb-0">My Leads</h4>
            </div>

            <div class="card-body">
                {{-- Tab Navigation --}}
                <ul class="nav nav-tabs mb-4" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" id="assigned-tab" data-bs-toggle="tab" href="#assigned" role="tab"
                            aria-controls="assigned" aria-selected="true">
                            Assigned Leads
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="personal-tab" data-bs-toggle="tab" href="#personal" role="tab"
                            aria-controls="personal" aria-selected="false">
                            Personal Leads
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="purchased-tab" data-bs-toggle="tab" href="#purchased" role="tab"
                            aria-controls="purchased" aria-selected="false">
                            Purchased Leads
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="social-tab" data-bs-toggle="tab" href="#social" role="tab"
                            aria-controls="social" aria-selected="false">
                            Social Media Leads
                        </a>
                    </li>
                </ul>

                {{-- Tab Content --}}
                <div class="tab-content">
                    <div class="tab-pane fade show active" id="assigned" role="tabpanel" aria-labelledby="assigned-tab">
                        @include('agent.leads.partials.assigned')
                    </div>

                    <div class="tab-pane fade" id="personal" role="tabpanel" aria-labelledby="personal-tab">
                        @include('agent.leads.partials.personal')
                    </div>

                    {{-- ==================== PURCHASED LEADS TAB ==================== --}}
                    <div class="tab-pane fade" id="purchased" role="tabpanel" aria-labelledby="purchased-tab">
                        @php
                            // Expected from controller; fallbacks supported
                            $pLife = $purchasedLifeLeads ?? ($lifePurchasedLeads ?? collect());
                            $pMortgage = $purchasedMortgageLeads ?? ($mortgagePurchasedLeads ?? collect());
                            $pHealth = $purchasedHealthLeads ?? ($healthPurchasedLeads ?? collect());

                            $currentPurchasedTab = request('ptype', 'life'); // 'life' | 'mortgage' | 'health'

                            // Status set aligns with your example (capitalized)
                            $statusOptions = ['New', 'Contacted', 'Qualified', 'Closed', 'Unresponsive'];

                            $insuranceOptions = [
                                'Term Life' => 'Term Life',
                                'Whole Life' => 'Whole Life',
                                'Universal Life' => 'Universal Life',
                                'Final Expense' => 'Final Expense',
                                'Mortgage Protection' => 'Mortgage Protection',
                                'Other' => 'Other',
                            ];
                        @endphp

                        {{-- Header actions for Purchased --}}
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <button class="btn btn-outline-secondary" onclick="history.back()">&larr; Back</button>
                            <button form="purchasedSaveForm" class="btn btn-success">Save Changes</button>
                        </div>

                        {{-- Search / Filter (keeps user on Purchased tab with #purchased) --}}
                        <form action="{{ url()->current() }}#purchased" method="GET" class="card card-body mb-3">
                            <input type="hidden" name="ptype" value="{{ $currentPurchasedTab }}">
                            <div class="row g-2 align-items-end search-row">
                                <div class="col-md-3">
                                    <label class="form-label mb-0">Name</label>
                                    <input name="q" value="{{ request('q', '') }}" class="form-control"
                                        placeholder="First or Last">
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label mb-0">State</label>
                                    <input name="state" value="{{ request('state', '') }}" class="form-control"
                                        placeholder="e.g. NC">
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label mb-0">Insurance Type</label>
                                    <select name="type" class="form-select">
                                        <option value="">Any</option>
                                        @foreach ($insuranceOptions as $k => $v)
                                            <option value="{{ $k }}"
                                                {{ request('type') === $k ? 'selected' : '' }}>{{ $v }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-3 text-md-end">
                                    <button class="btn btn-primary">Search</button>
                                    <a href="{{ url()->current() }}#purchased" class="btn btn-light">Reset</a>
                                </div>
                            </div>
                        </form>

                        {{-- Sub-tabs for purchased types --}}
                        <ul class="nav nav-pills mb-3">
                            <li class="nav-item">
                                <a class="nav-link {{ $currentPurchasedTab === 'life' ? 'active' : '' }}"
                                    href="{{ request()->fullUrlWithQuery(['ptype' => 'life']) }}#purchased">Life
                                    <span class="badge bg-secondary">{{ $pLife->count() }}</span></a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link {{ $currentPurchasedTab === 'mortgage' ? 'active' : '' }}"
                                    href="{{ request()->fullUrlWithQuery(['ptype' => 'mortgage']) }}#purchased">
                                    Mortgage Protection
                                    <span class="badge bg-secondary">{{ $pMortgage->count() }}</span></a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link {{ $currentPurchasedTab === 'health' ? 'active' : '' }}"
                                    href="{{ request()->fullUrlWithQuery(['ptype' => 'health']) }}#purchased">Health
                                    <span class="badge bg-secondary">{{ $pHealth->count() }}</span></a>
                            </li>
                        </ul>

                        {{-- Write changes --}}
                        <form id="purchasedSaveForm" action="{{ route('agent.purchased-leads.bulk-update') }}"
                            method="POST">
                            @csrf
                            <input type="hidden" name="ptype" value="{{ $currentPurchasedTab }}">

                            @if (session('success'))
                                <div class="alert alert-success">{{ session('success') }}</div>
                            @endif
                            @if ($errors->any())
                                <div class="alert alert-danger">
                                    <ul class="mb-0">
                                        @foreach ($errors->all() as $e)
                                            <li>{{ $e }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif

                            @php
                                $sets = [
                                    'life' => $pLife,
                                    'mortgage' => $pMortgage,
                                    'health' => $pHealth,
                                ];
                            @endphp

                            @foreach ($sets as $typeKey => $rows)
                                @if ($currentPurchasedTab !== $typeKey)
                                    @continue
                                @endif

                                <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>

                                                @if ($typeKey === 'mortgage')
                                                    <th>Mortgage</th>
                                                    <th>Lender</th>
                                                @endif

                                                <th>Street Address</th>
                                                <th>City</th>
                                                <th>State</th>
                                                <th>Zipcode</th>
                                                <th>County</th>
                                                <th class="nowrap">Purchase Date</th>

                                                <th>Insurance Type</th>
                                                <th class="sticky-status">Status</th>

                                                <th class="nowrap">Created At</th>
                                                <th class="nowrap">Updated At</th>
                                                <th class="nowrap">Last Modified</th>

                                                <th>Convert</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @forelse($rows as $lead)
                                                <tr data-lead-id="{{ $lead->id }}">
                                                    <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>

                                                    @if ($typeKey === 'mortgage')
                                                        <td>
                                                            @php
                                                                $m = $lead->mortgage;
                                                                echo is_numeric($m)
                                                                    ? '$' . number_format((float) $m, 2)
                                                                    : e($m);
                                                            @endphp
                                                        </td>
                                                        <td>{{ $lead->lender }}</td>
                                                    @endif

                                                    <td>{{ $lead->street_address ?? $lead->address }}</td>
                                                    <td>{{ $lead->city }}</td>
                                                    <td>{{ $lead->state }}</td>
                                                    <td>{{ $lead->zipcode }}</td>
                                                    <td>{{ $lead->county }}</td>
                                                    <td class="nowrap">{{ $lead->purchase_date ?? '' }}</td>

                                                    {{-- Insurance Type (DB column: insurance_type) --}}
                                                    <td style="min-width:190px;">
                                                        <select name="leads[{{ $lead->id }}][insurance_type]"
                                                            class="form-select form-select-sm">
                                                            @foreach ($insuranceOptions as $k => $v)
                                                                <option value="{{ $k }}"
                                                                    {{ ($lead->insurance_type ?? '') === $k ? 'selected' : '' }}>
                                                                    {{ $v }}</option>
                                                            @endforeach
                                                        </select>
                                                    </td>

                                                    {{-- Status (DB column: status) --}}
                                                    <td class="sticky-status">
                                                        <select name="leads[{{ $lead->id }}][status]"
                                                            class="form-select form-select-sm" style="min-width:150px;">
                                                            @foreach ($statusOptions as $opt)
                                                                <option
                                                                    {{ ($lead->status ?? 'New') === $opt ? 'selected' : '' }}>
                                                                    {{ $opt }}</option>
                                                            @endforeach
                                                        </select>
                                                    </td>

                                                    <td class="nowrap">{{ $lead->created_at ?? '' }}</td>
                                                    <td class="nowrap">{{ $lead->updated_at ?? '' }}</td>
                                                    <td class="nowrap">{{ $lead->last_modified_at ?? '' }}</td>

                                                    {{-- Convert --}}
                                                    <td>
                                                        <form
                                                            action="{{ route('agent.purchased-leads.convert', ['type' => $typeKey, 'id' => $lead->id]) }}"
                                                            method="POST" class="d-inline"
                                                            onsubmit="return confirm('Convert this lead to a Client?')">
                                                            @csrf
                                                            <button class="btn btn-success btn-sm convert-btn"
                                                                type="submit">
                                                                Convert to Client
                                                            </button>
                                                        </form>
                                                    </td>
                                                </tr>
                                            @empty
                                                <tr>
                                                    <td colspan="100" class="text-center py-4">No purchased
                                                        {{ $typeKey }} leads found.</td>
                                                </tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>
                            @endforeach
                        </form>
                    </div>
                    {{-- ================== /PURCHASED LEADS TAB ================== --}}

                    <div class="tab-pane fade" id="social" role="tabpanel" aria-labelledby="social-tab">
                        @include('agent.leads.partials.social')
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('page-script')
    <script>
        window.routes = {
            lifeStatus: "{{ route('agent.leads.life.update-status') }}",
            mortgageStatus: "{{ route('agent.leads.mortgage.update-status') }}",
            personalStatus: "{{ route('agent.leads.personal.update-status') }}",
            unifiedStatus: "{{ route('agent.leads.status') }}",
            inlineField: "{{ route('agent.leads.inline') }}"
        };
    </script>

    @php
        $base = rtrim(request()->getBaseUrl(), '/');
    @endphp
    <script src="{{ $base . mix('js/leads-status.js') }}" defer></script>

    <script>
        // Robust tab activation via URL hash (with Bootstrap fallback)
        document.addEventListener('DOMContentLoaded', function() {
            function activateTab(targetSelector) {
                const trigger = document.querySelector(`a.nav-link[href="${targetSelector}"]`);
                if (!trigger) return;

                if (window.bootstrap && window.bootstrap.Tab) {
                    new bootstrap.Tab(trigger).show();
                } else {
                    document.querySelectorAll('.nav-link[data-bs-toggle="tab"]').forEach(a => a.classList.remove(
                        'active'));
                    trigger.classList.add('active');

                    document.querySelectorAll('.tab-pane').forEach(p => p.classList.remove('active', 'show'));
                    const pane = document.querySelector(targetSelector);
                    if (pane) pane.classList.add('active', 'show');
                }
            }

            const hash = window.location.hash;
            const validTargets = ['#assigned', '#personal', '#purchased', '#social'];
            const target = validTargets.includes(hash) ? hash : '#assigned';
            activateTab(target);

            document.querySelectorAll('.nav-link[data-bs-toggle="tab"]').forEach(link => {
                link.addEventListener('shown.bs.tab', function(e) {
                    const href = e.target.getAttribute('href');
                    if (href) history.replaceState(null, '', href);
                });

                // Manual fallback if Bootstrap isn't present
                link.addEventListener('click', function(e) {
                    if (!(window.bootstrap && window.bootstrap.Tab)) {
                        e.preventDefault();
                        const href = e.currentTarget.getAttribute('href');
                        if (href) {
                            activateTab(href);
                            history.replaceState(null, '', href);
                        }
                    }
                });
            });
        });
    </script>
@endsection