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

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

@section('page-style')
    <style>
        /* Sticky helpers */
        .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);
        }

        .convert-btn {
            white-space: nowrap;
        }

        .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">
                        {{-- Unified purchased partial (Purchase Lead button + per-type tabs + Convert actions) --}}
                        @include('agent.leads.partials.purchased', ['data' => $data])
                    </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 src="{{ asset('js/leads-status.js') }}" defer></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            function showTab(targetSelector) {
                var trigger = document.querySelector('a.nav-link[data-bs-toggle="tab"][href="' + targetSelector +
                    '"]');
                var pane = document.querySelector(targetSelector);
                if (!trigger || !pane) {
                    return;
                }

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

                    document.querySelectorAll('.tab-pane').forEach(function(p) {
                        p.classList.remove('active', 'show');
                    });
                    pane.classList.add('active', 'show');
                }
            }

            var validTargets = ['#assigned', '#personal', '#purchased', '#social'];
            var hash = window.location.hash;
            var target = validTargets.indexOf(hash) >= 0 ? hash : '#assigned';
            showTab(target);

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

                link.addEventListener('click', function(e) {
                    if (!(window.bootstrap && window.bootstrap.Tab)) {
                        e.preventDefault();
                        var href = e.currentTarget.getAttribute('href');
                        if (href) {
                            showTab(href);
                            history.replaceState(null, '', href);
                        }
                    }
                });
            });

            // If ptype query is present, ensure Purchased tab is visible.
            var params = new URLSearchParams(window.location.search);
            var ptype = params.get('ptype');
            if (ptype && target !== '#purchased') {
                showTab('#purchased');
            }
        });
    </script>
@endsection