{{-- resources/views/admin/assigned-leads/unassigned.blade.php --}}
@extends('layouts.contentLayoutMaster')

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

@section('content')
    <div class="container py-4">
        <h2 class="mb-4">Assign Leads to Agents</h2>

        {{-- Summary + Filter --}}
        <div class="alert alert-info d-flex justify-content-between align-items-center">
            <strong>Total Unassigned Leads: {{ $lifeLeads->count() + $mortgageLeads->count() }}</strong>
            <div>
                <label for="leadFilter" class="form-label me-2 mb-0">Filter:</label>
                <select id="leadFilter" class="form-select d-inline-block w-auto">
                    <option value="all">Show All</option>
                    <option value="life">Life Only</option>
                    <option value="mortgage">Mortgage Only</option>
                </select>
            </div>
        </div>

        @if (session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif

        {{-- Tabs --}}
        <ul class="nav nav-tabs" id="unassignedLeadTabs" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" id="life-tab" data-bs-toggle="tab" href="#life" role="tab">
                    Life Leads <span class="badge bg-secondary">{{ $lifeLeads->count() }}</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="mortgage-tab" data-bs-toggle="tab" href="#mortgage" role="tab">
                    Mortgage Protection Leads <span class="badge bg-secondary">{{ $mortgageLeads->count() }}</span>
                </a>
            </li>
        </ul>

        <div class="tab-content border p-4" id="unassignedLeadTabsContent">
            {{-- Life Leads --}}
            <div class="tab-pane fade show active" id="life" role="tabpanel">
                @if ($lifeLeads->isEmpty())
                    <p>No unassigned life leads found.</p>
                @else
                    {{-- ASSIGN SELECTED (POST) --}}
                    <form action="{{ route('admin.assigned-leads.assign') }}" method="POST" id="assign-life-form">
                        @csrf
                        <input type="hidden" name="lead_type" value="life">

                        <div class="mb-3">
                            <label for="agent_id_life">Assign to Agent:</label>
                            <select name="agent_id" class="form-select" id="agent_id_life" required>
                                <option value="">Select Agent</option>
                                @foreach ($agents as $agent)
                                    <option value="{{ $agent->id }}">{{ $agent->name }} ({{ $agent->email }})</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="table-responsive">
                            <table class="table table-bordered table-striped align-middle">
                                <thead class="table-light">
                                    <tr>
                                        <th><input type="checkbox" onclick="toggleCheckboxes('life')"></th>
                                        <th>First Name <span class="text-danger">*</span></th>
                                        <th>Last Name <span class="text-danger">*</span></th>
                                        <th>Phone <span class="text-danger">*</span></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>
                                        <th>Status</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($lifeLeads as $lead)
                                        <tr>
                                            <td>
                                                <input type="checkbox" name="lead_ids[]" value="{{ $lead->id }}"
                                                    class="life-checkbox">
                                            </td>
                                            <td>{{ $lead->first_name }}</td>
                                            <td>{{ $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>
                                            <td>{{ $lead->insurance_type ?? 'Life' }}</td>
                                            <td>{{ $lead->status ?? 'New' }}</td>
                                            <td>
                                                {{-- PER-ROW DELETE (NO NESTED FORM) --}}
                                                <button type="button" class="btn btn-sm btn-outline-danger delete-row"
                                                    data-url="{{ route('admin.assigned-leads.delete', ['type' => 'life', 'id' => $lead->id]) }}"
                                                    data-confirm="Delete this life lead?">
                                                    Delete
                                                </button>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                        <button type="submit" class="btn btn-primary mt-2">Assign Selected Life Leads</button>
                    </form>
                @endif
            </div>

            {{-- Mortgage Protection Leads --}}
            <div class="tab-pane fade" id="mortgage" role="tabpanel">
                @if ($mortgageLeads->isEmpty())
                    <p>No unassigned mortgage protection leads found.</p>
                @else
                    {{-- ASSIGN SELECTED (POST) --}}
                    <form action="{{ route('admin.assigned-leads.assign') }}" method="POST" id="assign-mortgage-form">
                        @csrf
                        <input type="hidden" name="lead_type" value="mortgage">

                        <div class="mb-3">
                            <label for="agent_id_mortgage">Assign to Agent:</label>
                            <select name="agent_id" class="form-select" id="agent_id_mortgage" required>
                                <option value="">Select Agent</option>
                                @foreach ($agents as $agent)
                                    <option value="{{ $agent->id }}">{{ $agent->name }} ({{ $agent->email }})
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="table-responsive">
                            <table class="table table-bordered table-striped align-middle">
                                <thead class="table-light">
                                    <tr>
                                        <th><input type="checkbox" onclick="toggleCheckboxes('mortgage')"></th>
                                        <th>First Name <span class="text-danger">*</span></th>
                                        <th>Last Name <span class="text-danger">*</span></th>
                                        <th>Phone <span class="text-danger">*</span></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>
                                        <th>Status</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($mortgageLeads as $lead)
                                        <tr>
                                            <td>
                                                <input type="checkbox" name="lead_ids[]" value="{{ $lead->id }}"
                                                    class="mortgage-checkbox">
                                            </td>
                                            <td>{{ $lead->first_name }}</td>
                                            <td>{{ $lead->last_name }}</td>
                                            <td>{{ $lead->phone_number }}</td>
                                            <td>{{ $lead->email }}</td>
                                            <td>{{ $lead->age }}</td>
                                            <td>{{ $lead->date_of_birth }}</td>
                                            <td>
                                                @php
                                                    $m = $lead->mortgage;
                                                    echo is_numeric($m) ? '$' . number_format((float) $m, 2) : e($m);
                                                @endphp
                                            </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>
                                            <td>{{ $lead->insurance_type ?? 'Mortgage Protection' }}</td>
                                            <td>{{ $lead->status ?? 'New' }}</td>
                                            <td>
                                                {{-- PER-ROW DELETE (NO NESTED FORM) --}}
                                                <button type="button" class="btn btn-sm btn-outline-danger delete-row"
                                                    data-url="{{ route('admin.assigned-leads.delete', ['type' => 'mortgage', 'id' => $lead->id]) }}"
                                                    data-confirm="Delete this mortgage lead?">
                                                    Delete
                                                </button>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                        <button type="submit" class="btn btn-primary mt-2">Assign Selected Mortgage Leads</button>
                    </form>
                @endif
            </div>
        </div>

        {{-- Standalone hidden DELETE form to avoid nesting --}}
        <form id="row-delete-form" method="POST" class="d-none" action="">
            @csrf
            @method('DELETE')
        </form>
    </div>

    {{-- JS --}}
    <script>
        function toggleCheckboxes(type) {
            const checkboxes = document.querySelectorAll(`.${type}-checkbox`);
            const allChecked = Array.from(checkboxes).every(cb => cb.checked);
            checkboxes.forEach(cb => cb.checked = !allChecked);
        }

        document.getElementById('leadFilter').addEventListener('change', function() {
            const value = this.value;
            const lifeTab = document.getElementById('life-tab').parentElement;
            const mortgageTab = document.getElementById('mortgage-tab').parentElement;
            const lifeContent = document.getElementById('life');
            const mortgageContent = document.getElementById('mortgage');

            if (value === 'life') {
                lifeTab.style.display = '';
                mortgageTab.style.display = 'none';
                lifeContent.classList.add('show', 'active');
                mortgageContent.classList.remove('show', 'active');
            } else if (value === 'mortgage') {
                lifeTab.style.display = 'none';
                mortgageTab.style.display = '';
                lifeContent.classList.remove('show', 'active');
                mortgageContent.classList.add('show', 'active');
            } else {
                lifeTab.style.display = '';
                mortgageTab.style.display = '';
                lifeContent.classList.add('show', 'active');
                mortgageContent.classList.remove('show', 'active');
            }
        });

        // Intercept per-row delete buttons and submit the standalone DELETE form
        document.addEventListener('click', function(e) {
            const btn = e.target.closest('.delete-row');
            if (!btn) return;
            const url = btn.getAttribute('data-url');
            const confirmMsg = btn.getAttribute('data-confirm') || 'Delete this lead?';
            if (!url) return;

            if (confirm(confirmMsg)) {
                const form = document.getElementById('row-delete-form');
                form.setAttribute('action', url);
                form.submit();
            }
        });
    </script>
@endsection