@extends('layouts.app')

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

@push('css')

<link rel="stylesheet" href="{{ asset('assets/css/custom/lead.css') }}">
<style>
    .select2-container--default .select2-selection--multiple {
        position: relative;
        padding-right: 30px;
        /* Space for dropdown arrow */
    }

    .select2-container--default .select2-selection--multiple:after {
        content: "▼";
        /* Downward arrow ▼ */
        font-size: 8px;
        color: #888888;
        position: absolute;
        right: 5px;
        top: 35%;
        transform: translateY(-50%);
        pointer-events: none;
    }

    th {
        border-top: none;
        border-left: none;
        border-right: none;
        border-bottom: 1px solid #ddd;
    }

    table.dataTable tbody td {
        padding: 0rem 0.5rem !important;
    }

    #lead-table_wrapper {
        overflow: unset !important;
    }

    .dataTables_length {
        margin-bottom: 0px !important;
    }

    #lead-table_filter {
        margin-bottom: 0px !important;
    }
    /* Apply background color to data tabl */
    #lead-table, #lead-table th, #lead-table td {
    border: 1px solid #ecedf1 !important;
    /* background-color: #ecedf1; Apply background color */
}

</style>
@endpush

@section('content')
@use('Carbon\Carbon')

<x-content-body>

    <x-breadcrumbs :breadcrumbs="$breadcrumbs" />

    <x-filter id="leadFilter">
        <div class="row mt-2">
            <div class="mb-3 col-md-3">
                <label class="form-label">Lead Source</label>
                <select class="multi-select form-control form-control-sm wide lead-source" multiple="multiple"
                    name="contact-source" id="filter_contact_source" data-placeholder="Select Contact Source...">
                    <option disabled>Select Option</option>
                    <option value="cold_calling">Cold Calling</option>
                    <option value="previous_clients">Previous Clients</option>
                    <option value="social_media_marketing_general">Social Media Marketing General</option>
                    <option value="facebook">Facebook</option>
                    <option value="linkedin">LinkedIn</option>
                    <option value="google_ads">Google Ads</option>
                    <option value="company_leads">Company Leads</option>
                    <option value="company_referrals">Company Referrals</option>
                    <option value="networking_events">Networking Events</option>
                    <option value="open_houses">Open Houses</option>
                    <option value="direct_mail_campaigns">Direct Mail Campaigns</option>
                    <option value="online_advertising">Online Advertising (Google, Facebook, etc.)</option>
                    <option value="real_estate_website_or_blog">Real Estate Website or Blog</option>
                    <option value="local_community_involvement">Local Community Involvement</option>
                    <option value="door_knocking">Door Knocking</option>
                    <option value="referrals_from_previous_clients">Referrals From Previous Clients</option>
                    <option value="real_estate_seminars_and_workshops">Real Estate Seminars and Workshops</option>
                    <option value="real_estate_investor_groups">Real Estate Investor Groups</option>
                    <option value="email_marketing_campaigns">Email Marketing Campaigns</option>
                    <option value="local_business_directories">Local Business Directories</option>
                    <option value="website">Website</option>
                    <option value="real_estate_lead_generation_services">Real Estate Lead Generation Services
                    </option>
                    <option value="fsbo">FSBO (For Sale By Owner)</option>
                    <option value="real_estate_auctions">Real Estate Auctions</option>
                    <option value="property_management_services">Property Management Services</option>
                    <option value="paid_online_leads">Paid Online Leads (Zillow, Realtor.com, etc.)</option>
                    <option value="lenders_and_mortgage_brokers">Lenders and Mortgage Brokers</option>
                    <option value="chamber_of_commerce_meetings">Chamber of Commerce Meetings</option>
                    <option value="free_property_valuations">Free Property Valuations</option>
                    <option value="community_sponsorships_and_partnerships">Community Sponsorships and Partnerships
                    </option>
                    <option value="webinars_and_virtual_tours">Webinars and Virtual Tours</option>
                    <option value="real_estate_meetups_and_groups">Real Estate Meetups and Groups</option>
                    <option value="home_service_providers">Home Service Providers (e.g., contractors)</option>
                    <option value="video_marketing_and_youtube_channel">Video Marketing and YouTube Channel
                    </option>
                    <option value="client_appreciation_events">Client Appreciation Events</option>
                    <option value="linkedin_networking">LinkedIn Networking</option>
                    <option value="content_marketing">Content Marketing (Blogging, eBooks)</option>
                    <option value="testimonials_and_reviews">Testimonials and Reviews</option>
                    <option value="real_estate_app_partnerships">Real Estate App Partnerships</option>
                    <option value="targeted_sms_or_text_campaigns">Targeted SMS or Text Campaigns</option>
                    <option value="niche_market_focus">Niche Market Focus (luxury, senior housing, etc.)</option>
                    <option value="local_newspaper_or_magazine_ads">Local Newspaper or Magazine Ads</option>
                    <option value="community_bulletin_boards">Community Bulletin Boards</option>
                    <option value="relocation_companies">Relocation Companies</option>
                    <option value="sponsoring_local_sports_teams_or_events">Sponsoring Local Sports Teams or Events
                    </option>
                    <option value="utilizing_qr_codes_on_marketing_materials">Utilizing QR Codes on Marketing
                        Materials</option>
                    <option value="local_trade_shows">Local Trade Shows</option>
                    <option value="first_time_buyer_workshops">First-Time Buyer Workshops</option>
                    <option value="television_radio_advertising">Television / Radio Advertising</option>
                </select>
            </div>
            <div class="mb-3 col-md-3">
                <x-input-label for="Referral" :value="__('Referral Name')" />
                <x-text-input placeholder="Search by Referral Name" class="referral-name" />
            </div>
        </div>
        {{-- <div class="text-end mt-2">
            <a type="button" href="javascript:void(0)" class="btn btn-rounded btn-primary btn-sm">
                <i class="fas fa-calendar me-3"></i>
                Search</a>
        </div> --}}
    </x-filter>


    {{-- content section  --}}
    <x-row-card>
        <x-slot:title>
            <h4 class="card-title">Manage Leads</h4>
            <div class="heading-btn-group">
                <x-button class="btn-danger bulk-lead-delete-btn d-none" data-bs-toggle="modal"
                    data-bs-target="#bulkLeadsdeleteConfirmationModal"> Delete </x-button>
                <a type="button" href="{{ route('leads.create') }}" class="btn btn-rounded btn-primary btn-sm">
                    Add New Lead
                </a>

            </div>
        </x-slot:title>

        {{-- pipeline code   --}}

        <div class="container-fluid overflow-auto  px-1 w-100">
            <div class="row justify-content-center align-items-center m-0">
                <div class="col-12 p-0">
                    <ul id="lead-breadcrumb" class="d-flex justify-content-center overflow-y-hidden py-2 w-100"
                        role="tablist">
                        <li data-column="3" class="{{ $pipelines &&  count($pipelines) == 0 ? 'w-100' : '' }}" style="width:400px">
                            <a href="javascript:void(0)" id="" class="active-breadcrumb" style="padding-right: 8px;">All</a>
                        </li>

                        @forelse ($pipelines as $pipeline)
                        @php
                        // Determine the number of remaining pipeline items on the first loop
                        if ($loop->first) {
                        $class = 'w-25'; // Default class
                        $remainingPipeLine = $loop->count % 7; // 7 is per page pipeline define in the js section
                        }

                        // Adjust class based on remaining items and modulo result
                        if (
                        ($loop->remaining === 2 && $remainingPipeLine === 3) ||
                        ($loop->remaining === 1 && $remainingPipeLine === 2)
                        ) {
                        $class = 'w-50';
                        } elseif ($loop->remaining === 0 && $remainingPipeLine === 1) {
                        $class = 'w-100';
                        }
                        @endphp
                        {{-- the data  data-column attribute is used for the filtring the contact according to pipe line --}}
                        {{-- the value of  data-column is the cloumn index of the data table currently we are filtring the lead status ,the column number is   --}}
                        <li class="breadcrumb-item" data-column="3" style="display: none;">
                            <a href="javascript:void(0)"
                                id="{{ strtolower($pipeline['pipline_name']) }}">{{ $pipeline['pipline_name'] }}</a>
                        </li>
                        @empty
                        @endforelse

                        <!-- Navigation buttons -->
                        <li id="prev" class="breadcrumb-item" style="display: none;">
                            <a href="javascript:void(0)">&lt;&lt;</a>
                        </li>
                        <li id="next" class="breadcrumb-item">
                            <a href="javascript:void(0)">&gt;&gt;</a>
                        </li>
                        <li id="sidebar-toggle" style="width: auto">
                            <a href="#" style="padding-left: 6px;"><span class="fa-solid fa-gear fs-4"></span></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>



        {{-- table  --}}

        <div class="table-responsive">
            <table class="table-bordered" id="lead-table" data-module="sticky-table" style=" width: 100%;">
                <thead>
                    <tr>
                        <th><input class="form-check-input lead-checkbox" type="checkbox" id="selectAllLeads"></th>
                        <th>Name</th>
                        <th>Address</th>
                        <th>Type</th>
                        <th>Company</th>
                        <th>Email</th>
                        <th>Phone Number</th>
                        <th>Additional Phone Number</th>
                        <th>Tags</th>
                        <th>Lead Source</th>
                        <th>Status</th>
                        <th>Created By</th>
                        <th>Assign To</th>
                        <th>Referral</th>
                        <th>Date</th>
                        <th class="text-center">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($leads as $lead)
                    <tr>
                        <!-- Checkbox for selecting individual lead -->
                        <td class="p-0">
                            <input class="form-check-input lead-checkbox" type="checkbox" value="{{ $lead['id'] }}">
                        </td>

                        <td class="p-0" style="width: 100% !important; min-width: 150px !important; max-width: 150px !important; overflow: hidden !important;text-overflow: ellipsis;">
                            <a ondblclick="event.preventDefault(); window.location.href='{{ route('leads.show', ['lead' => $lead['id']]) }}'">
                                {{ $lead['f_name'] ?? '' }} {{ $lead['l_name'] ?? '' }}
                                @if (!empty($lead['nick_name']))
                                {{ $lead['nick_name'] }}
                                @endif
                            </a>
                            <div class="d-flex justify-content-lg-end">
                                <a href="{{ route('leads.show', ['lead' => $lead['id']]) }}"
                                    class="text-warning me-2">
                                    <i class="fa-solid fa-eye"></i>
                                </a>
                                <a href="{{ route('leads.edit', ['lead' => $lead['id']]) }}"
                                    class="text-primary me-2">
                                    <i class="fa fa-pencil"></i>
                                </a>
                                <span data-url="{{ route('leads.destroy', ['lead' => $lead['id']]) }}"
                                    class="text-danger deleteButton">
                                    <i class="fa fa-trash"></i>
                                </span>

                            </div>
                        </td>


                        <td class="p-0" style="min-width: 200px; display: flex; flex-wrap: wrap;">
                            {{ trim($lead['address'] ?? '') }}<br>
                            {{ trim($lead['city'] ?? '') }}, {{ trim($lead['state'] ?? '') }} {{ trim($lead['zip_code'] ?? '') }}
                        </td>

                        <td class="p-0">{{ $lead['leadType'] ?? '-' }}</td>
                        <td class="p-0" style="width: 100% !important; min-width: 100px !important; max-width: 150px !important; overflow: hidden !important;text-overflow: ellipsis;">{{ $lead['company'] ?? '-' }}</td>
                        <td class="p-0">{{ $lead['email'] ?? '-' }}</td>
                        <td class="p-0" style="width: 100% !important; min-width: 150px !important; max-width: 150px !important; overflow: hidden !important;text-overflow: ellipsis;">{{ $lead['phone'] ?? '-' }}</td>
                        <td class="p-0" style="width: 100% !important; min-width: 100px !important; max-width: 150px !important; overflow: hidden !important;text-overflow: ellipsis;">{{ $lead['additional_phone'] ?? '-' }}</td>
                        <!-- <td class="p-0">{{ $lead['tags'] ?? '-' }}</td> -->
                        <td class="p-0"> 
                            @php
                            // Ensure tags is a valid JSON before decoding
                            $tags = is_string($lead['tags']) ? json_decode($lead['tags'], true) : [];
                            // Check if json_decode was successful and returned an array
                            if (!is_array($tags)) {
                            $tags = explode(",",$tags); // Set to empty array if decoding fails
                            }
                            @endphp

                            @if (!empty($tags))
                            {{-- Show first two tags --}}
                            @foreach(array_slice($tags, 0, 2) as $tag)
                            <span class="badge bg-primary border small ">{{ $tag }}</span>
                            @endforeach

                            {{-- Show "More" button if more than 2 tags exist --}}
                            @if (count($tags) > 2)
                            <button class="badge bg-info me-1 border" data-bs-toggle="modal" data-bs-target="#tagsModal-{{ $lead['id'] }}">
                                More
                            </button>

                            <!-- Modal -->
                            <div class="modal fade" id="tagsModal-{{ $lead['id'] }}" tabindex="-1" aria-labelledby="tagsModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="tagsModalLabel">All Tags</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            @foreach($tags as $tag)
                                            <span class="badge bg-primary me-1 border">{{ $tag }}</span>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endif
                            @else

                            @endif
                        </td>

                        <td class="p-0">
                            @php
                            $leadSource = ucfirst(str_replace("_", " ", trim($lead['lead_source'])));
                            $displayText = strlen($leadSource) > 12 ? substr($leadSource, 0, 12) . '...' : $leadSource;
                            @endphp

                            <span class="badge bg-primary me-1 border" title="{{ $leadSource }}">
                                {{ $displayText }}
                            </span>
                        </td>

                        <td class="p-0">
                            <span class="badge bg-primary me-1 border">{{ $lead['lead_status'] ?? '-' }}</span>
                        </td>
                        <td class="p-0">
                            <strong>{{ $lead['created_user']['f_name'] ?? '' }} {{ $lead['created_user']['l_name'] ?? '' }}</strong>
                        </td>

                        <td class="p-0">
                            {{ $lead['assigned_to']['f_name'] ?? 'Not Assigned' }}
                        </td>

                        <td class="p-0">
                            {{ $lead['referral_name'] ?? '-' }}
                        </td>

                        <td class="p-0" style="width: 100% !important; min-width: 100px !important; max-width: 150px !important; overflow: hidden !important;text-overflow: ellipsis;">{{ Carbon::parse($lead['created_at'])->format('Y-m-d') }}</td>

                        <td class="p-0">
                            <div class="d-flex justify-content-center">
                                <a href="{{ route('leads.show', ['lead' => $lead['id']]) }}" class="btn btn-warning shadow btn-xs sharp me-1 border"><i class="fa-solid fa-eye"></i></a>
                                <a href="{{ route('leads.edit', ['lead' => $lead['id']]) }}" class="btn btn-primary shadow btn-xs sharp me-1 border"><i class="fa fa-pencil"></i></a>
                                <button class="btn btn-danger shadow btn-xs sharp deleteButton me-2 border"
                                    data-url="{{ route('leads.destroy', ['lead' => $lead['id']]) }}">
                                    <i class="fa fa-trash"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="10" class="text-center">
                            <h4>No Lead Found</h4>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

    </x-row-card>

    <!-- side bar for pipe line   -->
    <x-lead-contact-common.side-bar title="Lead Pipeline" type="lead" :pipelines="$pipelines" />

    <!-- bulk contact  Delete confirmation Modal -->
    @include('layouts.includes.modals.lead.bulk_deleate')
</x-content-body>
@endsection


@push('js')
<script>
    const pipelineRoute = @json(route('pipelines.store'));
    const redirectIndexRoute = @json(route('leads.index'));
</script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>
<script src="{{ asset('assets/js/custom/lead_contact_common.js') }}"></script>
<script src="{{ asset('assets/js/custom/lead/lead.js') }}"></script>

<script>
    // Number of pipeline items to show per page
    const itemsPerPage = 7;
    let currentPage = 1;

    function renderPipelines() {
        const breadcrumbContainer = document.getElementById('lead-breadcrumb');
        const pipelineItems = Array.from(breadcrumbContainer.querySelectorAll('.breadcrumb-item'));

        // Hide all items initially
        pipelineItems.forEach(item => item.style.display = 'none');

        // Calculate start and end indices for the current page
        const startIndex = (currentPage - 1) * itemsPerPage;
        const endIndex = Math.min(startIndex + itemsPerPage, pipelineItems.length);

        // Show only the items for the current page
        for (let i = startIndex; i < endIndex; i++) {
            pipelineItems[i].style.display = 'inline-block';
        }
        // Show or hide navigation buttons based on the current page
        document.getElementById('prev').style.display = currentPage > 1 ? 'inline-block' : 'none';
        document.getElementById('next').style.display = endIndex < pipelineItems.length - 2 ? 'inline-block' : 'none';
    }

    // Event listeners for navigation buttons
    document.getElementById('prev').onclick = () => {
        if (currentPage > 1) {
            currentPage--;
            renderPipelines();
        }
    };

    document.getElementById('next').onclick = () => {
        if ((currentPage * itemsPerPage) < document.querySelectorAll('.breadcrumb-item').length) {
            currentPage++;
            renderPipelines();
        }
    };

    // Initial render
    renderPipelines();
</script>

@endpush