@extends('layouts.app')

@section('title', 'Contact View')

@section('content')
    @include('shared.crm-professional-ui')
    <!-- [ page-header ] start -->
    <div class="page-header crm-professional-header">
        <div class="page-header-left d-flex align-items-center">
            <div class="page-header-title">
                <h5 class="mb-1">Contact Profile</h5>
                <small class="text-muted d-none d-lg-block">Contact #{{ str_pad((string) $contact->id, 4, '0', STR_PAD_LEFT) }}</small>
            </div>
        </div>
        <div class="page-header-right ms-auto">
            <div class="page-header-right-items">
                <div class="d-flex d-md-none">
                    <a href="javascript:void(0)" class="page-header-right-close-toggle">
                        <i class="feather-arrow-left me-2"></i>
                        <span>Back</span>
                    </a>
                </div>
                <div class="d-flex align-items-center gap-2 page-header-right-items-wrapper">
                    <a href="{{ route('contacts-create') }}" class="btn btn-primary">
                        <i class="feather-plus me-2"></i>
                        <span>Create Contact</span>
                    </a>
                </div>
            </div>
            <div class="d-md-none d-flex align-items-center">
                <a href="javascript:void(0)" class="page-header-right-open-toggle">
                    <i class="feather-align-right fs-20"></i>
                </a>
            </div>
        </div>
    </div>
    <!-- [ page-header ] end -->
    <!-- [ Main Content ] start -->

    <div class="main-content crm-professional-profile">

        <x-campaign-conversion-attribution :record="$contact" />

        <div class="row">

            <div class="content-sidebar content-sidebar-md" data-scrollbar-target="#psScrollbarInit">

                <div class="content-sidebar-body mt-2">
                    <ul class="nav flex-column nxl-content-sidebar-item customers-nav-tabs sidebar-style" id="myTab"
                        role="tablist">
                        <li class="nav-item border-top" role="presentation">
                            <a href="javascript:void(0);" class="nav-link active" id="overviewTabLink" data-bs-toggle="tab"
                                data-bs-target="#overviewTab" role="tab" aria-controls="overviewTab"
                                aria-selected="true">
                                <i class="feather-pie-chart"></i>
                                <span>Overview</span>
                            </a>
                        </li>
                        <li class="nav-item border-top" role="presentation">
                            <a href="javascript:void(0);" class="nav-link" id="activitiesTabLink" data-bs-toggle="tab"
                                data-bs-target="#activityTab" role="tab" aria-controls="activityTab"
                                aria-selected="false">
                                <i class="feather-activity"></i>
                                <span>Activities</span>
                            </a>
                        </li>
                        <li class="nav-item border-top" role="presentation">
                            <a href="javascript:void(0);" class="nav-link" id="productTabLink" data-bs-toggle="tab"
                                data-bs-target="#productTab" role="tab" aria-controls="productTab"
                                aria-selected="false">
                                <i class="feather-box"></i>
                                <span>Products &amp; Projects</span>
                            </a>
                        </li>
                        <li class="nav-item border-top" role="presentation">
                            <a href="javascript:void(0);" class="nav-link" id="accountDetailsTabLink" data-bs-toggle="tab"
                                data-bs-target="#accountDetailsTab" role="tab" aria-controls="accountDetailsTab"
                                aria-selected="false">
                                <i class="feather-user"></i>
                                <span>Account Details</span>
                            </a>
                        </li>
                        <li class="nav-item border-top" role="presentation">
                            <a href="javascript:void(0);" class="nav-link" id="tradeDetailsTabLink" data-bs-toggle="tab"
                                data-bs-target="#tradeDetailsTab" role="tab" aria-controls="tradeDetailsTab"
                                aria-selected="false">
                                <i class="feather-trending-up"></i>
                                <span>Trade Details</span>
                            </a>
                        </li>
                        <li class="nav-item border-top" role="presentation">
                            <a href="javascript:void(0);" class="nav-link" id="ticketTabLink" data-bs-toggle="tab"
                                data-bs-target="#ticketTab" role="tab" aria-controls="ticketTab"
                                aria-selected="false">
                                <i class="feather-tag"></i>
                                <span>Ticket</span>
                            </a>
                        </li>
                        <li class="nav-item border-top" role="presentation">
                            <a href="javascript:void(0);" class="nav-link" id="projectsTabLink" data-bs-toggle="tab"
                                data-bs-target="#projectsTab" role="tab" aria-controls="projectsTab"
                                aria-selected="false">
                                <i class="feather-folder"></i>
                                <span>Projects</span>
                            </a>
                        </li>
                        <li class="nav-item border-top" role="presentation">
                            <a href="javascript:void(0);" class="nav-link" id="filesTabLink" data-bs-toggle="tab"
                                data-bs-target="#filesTab" role="tab" aria-controls="filesTab" aria-selected="false">
                                <i class="feather-file"></i>
                                <span>Files</span>
                            </a>
                        </li>
                        <li class="nav-item border-top" role="presentation">
                            <a href="javascript:void(0);" class="nav-link" id="campaignsTabLink" data-bs-toggle="tab"
                                data-bs-target="#campaignTab" role="tab" aria-controls="campaignTab"
                                aria-selected="false">
                                <i class="feather-mic"></i>
                                <span>Campaigns</span>
                            </a>
                        </li>
                        <li class="nav-item border-top" role="presentation">
                            <a href="javascript:void(0);" class="nav-link" id="caseTabLink" data-bs-toggle="tab"
                                data-bs-target="#caseTab" role="tab" aria-controls="caseTab" aria-selected="false">
                                <i class="feather-briefcase"></i>
                                <span>Case</span>
                            </a>
                        </li>
                        <li class="nav-item border-top" role="presentation">
                            <a href="javascript:void(0);" class="nav-link" data-bs-toggle="tab"
                                data-bs-target="#movementTab" role="tab" aria-controls="movementTab">
                                <i class="feather-repeat"></i><span>Movement History</span>
                            </a>
                        </li>
                        <li class="nav-item border-top" role="presentation">
                            <a href="javascript:void(0);" class="nav-link" id="surveyTabLink" data-bs-toggle="tab"
                                data-bs-target="#surveyTab" role="tab" aria-controls="surveyTab"
                                aria-selected="false">
                                <i class="feather-edit"></i>
                                <span>Survey</span>
                            </a>
                        </li>
                    </ul>




                </div>
            </div>

            <div class="col min-w-0">

                <div class="card border-top-0">
                    <div class="card stretch stretch-full">
                        <div class="card-body task-header d-md-flex align-items-center justify-content-between">
                            <div class="me-4">
                                <h4 class="mb-4 fw-bold d-flex align-items-center">
                                    <span class="text-truncate-1-line">
                                        {{ $contact->first_name }} {{ $contact->last_name }}
                                        <span class="badge bg-soft-primary text-primary mx-3"></span>
                                    </span>
                                </h4>

                                <div>
                                    <div class="row">
                                        <!-- Left Column -->
                                        <div class="col-md-6">
                                            <!-- Email -->
                                            <div class="d-flex align-items-center mb-3">
                                                <i class="feather-mail text-primary me-2"></i>
                                                <span class="text-muted">
                                                    @if ($contact->contactEmails->isNotEmpty())
                                                        {{ $contact->contactEmails->first()->email }}
                                                    @else
                                                        No Email
                                                    @endif
                                                </span>
                                            </div>



                                            <!-- Company -->
                                            <div class="d-flex align-items-center mb-3">
                                                <i class="feather-users text-info me-2"></i>
                                                <span class="text-muted">
                                                    {{ \App\Models\Company::find($contact->company_id)->name ?? 'No Company' }}
                                                </span>
                                            </div>

                                        </div>

                                        <!-- Right Column -->
                                        <div class="col-md-6">

                                            <!-- Phone -->
                                            <div class="d-flex align-items-center mb-3">
                                                <i class="feather-phone text-success me-2"></i>
                                                <span class="text-muted">
                                                    @if ($contact->contactPhones->isNotEmpty())
                                                        {{ $contact->contactPhones->first()->phone }}
                                                    @else
                                                        No Phone
                                                    @endif
                                                </span>
                                            </div>
                                            <!-- Job Title -->
                                            <div class="d-flex align-items-center mb-3">
                                                <i class="feather-briefcase text-warning me-2"></i>
                                                <span class="text-muted">
                                                    {{ $contact->job_title ?? 'No Job Title' }}
                                                </span>
                                            </div>

                                        </div>
                                        <div class="d-flex align-items-center mb-3">
                                            <i class="feather-globe text-secondary me-2"></i>
                                            <span class="text-muted">
                                                @php
                                                    $languages = $contact->contactLanguages
                                                        ->map(function ($contactLanguage) {
                                                            $language = \App\Models\Language::find(
                                                                $contactLanguage->language_id,
                                                            );
                                                            return $language ? $language->name : null;
                                                        })
                                                        ->filter()
                                                        ->join(', ');
                                                @endphp
                                                {{ $languages ?: 'No Languages' }}
                                            </span>
                                        </div>
                                    </div>

                                </div>

                                <div class="d-flex align-items-center">
                                    <div class="dropdown">
                                        <a class="btn btn-icon btn-light-brand dropdown-toggle" data-bs-toggle="dropdown"
                                            data-bs-offset="0, 10">
                                            Activities
                                        </a>
                                        <div class="dropdown-menu wd-300">
                                            <!-- Add Meeting Icon -->
                                            <!-- <a href="#" class="dropdown-item" data-bs-toggle="modal"
                                                data-bs-target="#addActivity">
                                                <i class="feather feather-calendar me-2"></i>
                                                <span>Add Meeting</span>
                                            </a> -->

                                            <!-- Add Call Icon -->
                                            <a href="{{ route('schedule-activity-create') }}" class="dropdown-item">
                                                <i class="feather feather-phone me-2"></i>
                                                <span>Add Call</span>
                                            </a>

                                            <!-- Add Task Icon -->
                                            <a href="{{ route('schedule-activity-create') }}" class="dropdown-item">
                                                <i class="feather feather-clipboard me-2"></i>
                                                <span>Add Task</span>
                                            </a>

                                            <!-- Add Note Icon -->
                                            <a href="{{ route('schedule-activity-create') }}" class="dropdown-item">
                                                <i class="feather feather-edit-3 me-2"></i>
                                                <span>Add Note</span>
                                            </a>

                                            <!-- Add Lead Icon -->
                                            <a href="{{ route('leads-create') }}?id={{ $contact->id }}"
                                                class="dropdown-item">
                                                <i class="feather feather-arrow-right-circle me-2"></i>
                                                <span>Move to Lead</span>
                                            </a>

                                            <a href="{{ route('schedule-activity-create') }}" class="dropdown-item">
                                                <i class="feather feather-mail me-2"></i>
                                                <span>Send Mail</span>
                                            </a>
                                            <!-- <a href="#" class="dropdown-item">
                                                <i class="feather feather-phone-call me-2"></i>
                                                <span>Make Call</span>
                                            </a>
                                            <a href="#" class="dropdown-item">
                                                <i class="feather feather-message-square me-2"></i>
                                                <span>Add SMS</span>
                                            </a> -->
                                            <a href="{{ route('deals-create', ['contactId' => $contact->id]) }}"
                                                class="dropdown-item">
                                                <i class="feather feather-arrow-right-circle me-2"></i>
                                                <span>Move to Deal</span>
                                            </a>


                                        </div>
                                    </div>

                                    {{-- <span class="vr mx-3 text-muted"></span> --}}

                                </div>
                            </div>
                            <div class="mt-4 mt-md-0">
                                <div class="d-flex gap-2">
                                    <!-- <a href="javascript:void(0);" class="btn btn-icon" data-bs-toggle="tooltip"
                                        title="Make as Complete">
                                        <i class="feather-check-circle"></i>
                                    </a> -->
                                    <!-- <a href="javascript:void(0);" class="btn btn-icon" data-bs-toggle="tooltip"
                                        title="Timesheets">
                                        <i class="feather-calendar"></i>
                                    </a> -->
                                    <form method="POST" action="{{ route('contacts.update-stage') }}" style="display: inline;">
                                        @csrf
                                        <input type="hidden" name="contact_id" value="{{ $contact->id }}">
                                        <input type="hidden" name="stage_id" value="3">
                                        <button type="submit" 
                                                class="btn btn-success" 
                                                data-bs-toggle="tooltip"
                                                title="Make as Complete"
                                                onclick="return confirm('Are you sure you want to mark this contact as complete?')">
                                            <i class="feather-check-circle"></i>
                                            <span>Make as Complete</span>
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="tab-content">
                        <!-- Activity Tab Content -->
                        <div class="tab-pane fade show active p-4" id="overviewTab" role="tabpanel"
                            aria-labelledby="overviewTabLink">
                            @include('contacts.partials.profile-overview')
                            @if (false) {{-- Legacy flat Contact overview replaced by the professional overview above. --}}
                            {{-- <div class="pb-5">
                                <div class="arrow-steps clearfix">
                                    <div class="step current"> <span> New</span> </div>
                                    <div class="step"> <span>In Progress</span> </div>
                                    <div class="step"> <span>Testing</span> </div>
                                    <div class="step"> <span>Completed</span> </div>
                                </div>
                            </div> --}}

                            <div class="pt-0 px-5 pb-5">
                                <div class="row">
                                    <!-- First Column -->
                                    <div class="col-md-6 mb-2">
                                        <div class="d-flex align-items-center">
                                            <span class="text-muted fw-medium d-flex gap-3">
                                                <i class="feather-user-check"></i> Gender
                                            </span>
                                            <a href="javascript:void(0);"
                                                class="fw-semibold ms-auto">{{ $contact->gender }}</a>
                                        </div>
                                    </div>

                                    <div class="col-md-6 mb-2">
                                        <div class="d-flex align-items-center">
                                            <span class="text-muted fw-medium d-flex gap-3">
                                                <i class="feather-users"></i> Department
                                            </span>
                                            <a href="javascript:void(0);"
                                                class="fw-semibold ms-auto">{{ $contact->department }}</a>
                                        </div>
                                    </div>

                                    <div class="col-md-6 mb-2">
                                        <div class="d-flex align-items-center">
                                            <span class="text-muted fw-medium d-flex gap-3">
                                                <i class="feather-calendar"></i> Date of Birth
                                            </span>
                                            <a href="javascript:void(0);"
                                                class="fw-semibold ms-auto">{{ $contact->date_of_birth }}</a>
                                        </div>
                                    </div>

                                    <div class="col-md-6 mb-2">
                                        <div class="d-flex align-items-center">
                                            <span class="text-muted fw-medium d-flex gap-3">
                                                <i class="feather-map-pin"></i> Address 1
                                            </span>
                                            <a href="javascript:void(0);"
                                                class="fw-semibold ms-auto">{{ $contact->address_1 }}</a>
                                        </div>
                                    </div>

                                    <div class="col-md-6 mb-2">
                                        <div class="d-flex align-items-center">
                                            <span class="text-muted fw-medium d-flex gap-3">
                                                <i class="feather-map-pin"></i> Address 2
                                            </span>
                                            <a href="javascript:void(0);"
                                                class="fw-semibold ms-auto">{{ $contact->address_2 }}</a>
                                        </div>
                                    </div>

                                    <div class="col-md-6 mb-2">
                                        <div class="d-flex align-items-center">
                                            <span class="text-muted fw-medium d-flex gap-3">
                                                <i class="feather-map"></i> Zip Code
                                            </span>
                                            <a href="javascript:void(0);"
                                                class="fw-semibold ms-auto">{{ $contact->zip_code }}</a>
                                        </div>
                                    </div>

                                    <div class="col-md-6 mb-2">
                                        <div class="d-flex align-items-center">
                                            <span class="text-muted fw-medium d-flex gap-3">
                                                <i class="feather-layers"></i> Province
                                            </span>
                                            <a href="javascript:void(0);"
                                                class="fw-semibold ms-auto">{{ $contact->province }}</a>
                                        </div>
                                    </div>

                                    <div class="col-md-6 mb-2">
                                        <div class="d-flex align-items-center">
                                            <span class="text-muted fw-medium d-flex gap-3">
                                                <i class="feather-map-pin"></i> City
                                            </span>
                                            <a href="javascript:void(0);"
                                                class="fw-semibold ms-auto">{{ $contact->city }}</a>
                                        </div>
                                    </div>

                                    <div class="col-md-6 mb-2">
                                        <div class="d-flex align-items-center">
                                            <span class="text-muted fw-medium d-flex gap-3">
                                                <i class="feather-globe"></i> Country
                                            </span>
                                            <a href="javascript:void(0);" class="fw-semibold ms-auto">
                                                {{ \App\Models\Country::find($contact->country_id)?->name ?? '' }}
                                            </a>
                                        </div>
                                    </div>

                                    <div class="col-md-6 mb-2">
                                        <div class="d-flex align-items-center">
                                            <span class="text-muted fw-medium d-flex gap-3">
                                                <i class="feather-phone"></i> Communication
                                            </span>
                                            <a href="javascript:void(0);" class="fw-semibold ms-auto">Email, Phone</a>
                                        </div>
                                    </div>
                                    <div class="col-md-6 mb-2">
                                        <div class="d-flex align-items-center">
                                            <span class="text-muted fw-medium d-flex gap-3">
                                                <i class="feather-bookmark"></i> Stage
                                            </span>
                                            <a href="javascript:void(0);" class="fw-semibold ms-auto">
                                                {{ \App\Models\Stage::find($contact->stage_id)?->name ?? '' }}
                                            </a>
                                        </div>
                                    </div>
                                    <div class="col-md-6 mb-2">
                                        <div class="d-flex align-items-center">
                                            <span class="text-muted fw-medium d-flex gap-3">
                                                <i class="feather-award"></i> Status
                                            </span>
                                            <a href="javascript:void(0);" class="fw-semibold ms-auto">
                                                {{ $contact->status ?? '' }}
                                            </a>
                                        </div>
                                    </div>

                                    <div class="col-md-6 mb-2">
                                        <div class="d-flex align-items-center">
                                            <span class="text-muted fw-medium d-flex gap-3">
                                                <i class="feather-users"></i> Type
                                            </span>
                                            <span class="fw-semibold ms-auto">
                                                {{ $contact->type ? ucfirst($contact->type) : 'Not set' }}
                                            </span>
                                        </div>
                                    </div>

                                    <div class="col-md-6 mb-2">
                                        <div class="d-flex align-items-center">
                                            <span class="text-muted fw-medium d-flex gap-3">
                                                <i class="feather-flag"></i> Priority
                                            </span>
                                            <span class="fw-semibold ms-auto">
                                                {{ $contact->priority ? ucfirst($contact->priority) : 'Not set' }}
                                            </span>
                                        </div>
                            </div>
                        </div>

                            </div>
                        @endif

                        </div>
                        <!-- Activity Tab Content -->
                        <div class="tab-pane fade p-4" id="activityTab" role="tabpanel"
                            aria-labelledby="activityTabLink">
                            <x-crm-related-workflows module="contacts" :record="$contact" />
                            <a class="btn btn-sm btn-outline-primary mb-3" href="{{ route('related-activity.index', ['contacts', $contact->id]) }}">Messages, Follow-ups & To-dos</a>
                            <!-- Content for Activity Tab -->
                            <div class="about-section mb-5">
                                <div class="mb-4 d-flex align-items-center justify-content-end">
                                    <a href="{{ route('schedule-activity-create') }}?id={{ $contact->id }}"
                                        class="btn btn-sm btn-light-brand">Create Activity</a>
                                </div>
                            </div>
                            @php
                                $futureActivities = $activities->filter(function ($activity) {
                                    $activityDate = $activity->end_date ?? ($activity->due_date ?? $activity->close_by);
                                    return $activityDate &&
                                        \Carbon\Carbon::parse($activityDate)->isFuture() &&
                                        $activity->activity_type_id != 2;
                                });
                            @endphp

                            @if ($futureActivities->isNotEmpty())
                                <div class="profile-details mb-5">
                                    <div class="mb-4 d-flex align-items-center justify-content-between">
                                        <h5 class="fw-bold mb-0">Scheduled Activities:</h5>

                                        <div class="card-body custom-card-action">
                                            <ul class="list-unstyled mb-0 activity-feed-1">
                                                @foreach ($activities as $activity)
                                                    @php
                                                        $activityDate =
                                                            $activity->end_date ??
                                                            ($activity->due_date ?? $activity->close_by);
                                                    @endphp

                                                    @if ($activityDate && \Carbon\Carbon::parse($activityDate)->isFuture() && $activity->activity_type_id != 2)
                                                        <li class="feed-item feed-item-primary">
                                                            <div class="d-flex gap-4 justify-content-between">
                                                                <div>
                                                                    <div class="mb-2 text-truncate-1-line">
                                                                        <a href="javascript:void(0)"
                                                                            class="fw-semibold text-dark">{{ $activity->title }}</a>
                                                                    </div>
                                                                    <p class="fs-12 text-muted mb-3 text-truncate-2-line">
                                                                        {{ $activity->description }}
                                                                    </p>

                                                                    <div>
                                                                        <a href="javascript:void(0)"
                                                                            class="badge text-success border border-dashed border-gray-500">
                                                                            Start-
                                                                            {{ \Carbon\Carbon::parse($activity->start_date ?? ($activity->due_date ?? $activity->received_on))->format('Y-m-d') }}
                                                                        </a>

                                                                        <a href="javascript:void(0)"
                                                                            class="badge text-danger border border-dashed border-gray-500">
                                                                            End-
                                                                            {{ \Carbon\Carbon::parse($activity->end_date ?? ($activity->due_date ?? $activity->close_by))->format('Y-m-d') }}
                                                                        </a>
                                                                        <a href="javascript:void(0)"
                                                                            class="badge text-warning border border-dashed border-gray-500">Duration-
                                                                            {{ $activity->duration }}</a>
                                                                    </div>
                                                                </div>
                                                                <div
                                                                    class="fs-10 fw-medium text-uppercase text-muted text-nowrap">
                                                                    {{ $activity->created_at->diffForHumans() }}
                                                                </div>
                                                            </div>
                                                        </li>
                                                    @endif
                                                @endforeach
                                            </ul>


                                        </div>
                                    </div>
                                </div>
                                <hr class="my-0">

                            @endif
                            @php
                                $futureActivities = $activities->filter(function ($activity) {
                                    $activityDate = $activity->end_date ?? ($activity->due_date ?? $activity->close_by);
                                    return $activityDate &&
                                        \Carbon\Carbon::parse($activityDate)->isPast() &&
                                        $activity->activity_type_id != 2;
                                });
                            @endphp

                            @if ($futureActivities->isNotEmpty())

                                <div class="profile-details mb-5">
                                    <div class="mb-4 d-flex align-items-center justify-content-between">
                                        <h5 class="fw-bold mb-0">Expired Activities:</h5>

                                        <div class="card-body custom-card-action">
                                            <ul class="list-unstyled mb-0 activity-feed-1">
                                                @foreach ($activities as $activity)
                                                    @php
                                                        $activityDate =
                                                            $activity->end_date ??
                                                            ($activity->due_date ?? $activity->close_by);
                                                    @endphp

                                                    @if ($activityDate && \Carbon\Carbon::parse($activityDate)->isPast())
                                                        <li class="feed-item feed-item-primary">
                                                            <div class="d-flex gap-4 justify-content-between">
                                                                <div>
                                                                    <div class="mb-2 text-truncate-1-line">
                                                                        <a href="javascript:void(0)"
                                                                            class="fw-semibold text-dark">{{ $activity->title }}</a>
                                                                    </div>
                                                                    <p class="fs-12 text-muted mb-3 text-truncate-2-line">
                                                                        {{ $activity->description }}
                                                                    </p>
                                                                    <div>
                                                                        <a href="javascript:void(0)"
                                                                            class="badge text-success border border-dashed border-gray-500">
                                                                            Start-
                                                                            {{ $activity->start_date ?? ($activity->due_date ?? $activity->received_on) }}
                                                                        </a>
                                                                        <a href="javascript:void(0)"
                                                                            class="badge text-danger border border-dashed border-gray-500">
                                                                            End-
                                                                            {{ $activity->end_date ?? ($activity->due_date ?? $activity->close_by) }}
                                                                        </a>
                                                                    </div>
                                                                </div>
                                                                <div
                                                                    class="fs-10 fw-medium text-uppercase text-muted text-nowrap">
                                                                    {{ $activity->created_at->diffForHumans() }}
                                                                </div>
                                                            </div>
                                                        </li>
                                                    @endif
                                                @endforeach
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        </div>

                        <!-- Note Tab Content -->
                        <div class="tab-pane fade p-4" id="noteTab" role="tabpanel" aria-labelledby="noteTabLink">


                            <form action="{{ route('notes.store') }}" method="post">
                                @csrf

                                <input type="hidden" name="contact_id" value="{{ request('id') }}">
                                <div class="mb-3">
                                    <label for="noteTitle" class="form-label">Note Title</label>
                                    <input type="text" class="form-control" id="noteTitle" name="noteTitle"
                                        placeholder="Enter note title" required>
                                </div>
                                <div class="mb-3">
                                    <label for="noteDescription" class="form-label">Note Description</label>
                                    <textarea class="form-control" id="noteDescription" name="noteDescription" rows="4"
                                        placeholder="Enter note description" required></textarea>
                                </div>
                                <div class="d-flex justify-content-end">
                                    <button type="submit" class="btn btn-primary">Add Note</button>
                                </div>
                            </form>


                            <div class="profile-details mb-5">
                                <div class="mb-4 d-flex align-items-center justify-content-between">
                                    <h5 class="fw-bold mb-0">Notes:</h5>
                                </div>

                                <div class="row">
                                    @foreach ($notes as $note)
                                        <div
                                            class="col-xxl-4 col-xl-6 col-lg-4 col-sm-6 single-note-item all-category note-important note-archive">
                                            <div class="card card-body mb-4 stretch stretch-full">
                                                <span class="side-stick"></span>
                                                <h5 class="note-title text-truncate w-75 mb-1"
                                                    data-noteheading="{{ $note->title }}">
                                                    {{ $note->title }}
                                                    <i class="point bi bi-circle-fill ms-1 fs-7"></i>
                                                </h5>
                                                <p class="fs-11 text-muted note-date">
                                                    {{ $note->created_at->format('d M Y') }}
                                                </p>
                                                <div class="note-content flex-grow-1">
                                                    <p class="text-muted note-inner-content text-truncate-3-line"
                                                        data-notecontent="{{ $note->description }}">
                                                        {{ $note->description }}
                                                    </p>
                                                </div>
                                                <div class="d-flex align-items-center gap-1">
                                                    <span class="avatar-text avatar-sm">
                                                        <i class="feather-star favourite-note"></i>
                                                    </span>
                                                    <span class="avatar-text avatar-sm">
                                                        <i class="feather-trash-2 remove-note"></i>
                                                    </span>
                                                    <div class="ms-auto">
                                                        <div class="dropdown btn-group category-selector">
                                                            <a class="nav-link dropdown-toggle category-dropdown label-group p-0"
                                                                data-bs-toggle="dropdown" href="#" role="button"
                                                                aria-haspopup="true" aria-expanded="true">
                                                                <div class="category">
                                                                    <div class="category-business"></div>
                                                                    <div class="category-social"></div>
                                                                    <div class="category-important"></div>
                                                                </div>
                                                            </a>
                                                            <div class="dropdown-menu dropdown-menu-right category-menu">
                                                                <a class="note-tasks badge-group-item badge-tasks dropdown-item position-relative category-tasks"
                                                                    href="javascript:void(0);"><span
                                                                        class="wd-5 ht-5 bg-danger rounded-circle me-3"></span>Tasks
                                                                </a>
                                                                <a class="note-works badge-group-item badge-works dropdown-item position-relative category-works"
                                                                    href="javascript:void(0);"><span
                                                                        class="wd-5 ht-5 bg-primary rounded-circle me-3"></span>Works
                                                                </a>
                                                                <a class="note-social badge-group-item badge-social dropdown-item position-relative category-social"
                                                                    href="javascript:void(0);"><span
                                                                        class="wd-5 ht-5 bg-info rounded-circle me-3"></span>Social
                                                                </a>
                                                                <a class="note-archive badge-group-item badge-archive dropdown-item position-relative category-archive"
                                                                    href="javascript:void(0);"><span
                                                                        class="wd-5 ht-5 bg-dark rounded-circle me-3"></span>Archive
                                                                </a>
                                                                <a class="note-priority badge-group-item badge-priority dropdown-item position-relative category-priority"
                                                                    href="javascript:void(0);"><span
                                                                        class="wd-5 ht-5 bg-danger rounded-circle me-3"></span>Priority
                                                                </a>
                                                                <a class="note-personal badge-group-item badge-personal dropdown-item position-relative category-personal"
                                                                    href="javascript:void(0);"><span
                                                                        class="wd-5 ht-5 bg-primary rounded-circle me-3"></span>Personal
                                                                </a>
                                                                <a class="note-business badge-group-item badge-business dropdown-item position-relative category-business"
                                                                    href="javascript:void(0);"><span
                                                                        class="wd-5 ht-5 bg-warning rounded-circle me-3"></span>Business
                                                                </a>
                                                                <a class="note-important badge-group-item badge-important dropdown-item position-relative category-important"
                                                                    href="javascript:void(0);"><span
                                                                        class="wd-5 ht-5 bg-success rounded-circle me-3"></span>Important
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>




                            </div>
                        </div>

                        <!-- Meeting Tab Content -->
                        <div class="tab-pane fade p-4" id="meetingTab" role="tabpanel" aria-labelledby="meetingTabLink">
                            <!-- Content for Meeting Tab -->
                            <div class="about-section mb-5">
                                <div class="mb-4 d-flex align-items-center justify-content-end">
                                    <a href="{{ route('schedule-activity-create') }}?id={{ $contact->id }}"
                                        class="btn btn-sm btn-light-brand">Create Meeting</a>
                                </div>
                            </div>
                            @php
                                $futureMeetings = $activities->filter(function ($activity) {
                                    $activityDate = $activity->end_date ?? ($activity->due_date ?? $activity->close_by);
                                    return $activityDate &&
                                        \Carbon\Carbon::parse($activityDate)->isFuture() &&
                                        $activity->activity_type_id == 2;
                                });
                            @endphp

                            @if ($futureMeetings->isNotEmpty())
                                <div class="profile-details mb-5">
                                    <div class="mb-4 d-flex align-items-center justify-content-between">
                                        <h5 class="fw-bold mb-0">Scheduled Meetings:</h5>

                                        <div class="card-body custom-card-action">
                                            <ul class="list-unstyled mb-0 activity-feed-1">
                                                @foreach ($activities as $activity)
                                                    @php
                                                        $activityDate =
                                                            $activity->end_date ??
                                                            ($activity->due_date ?? $activity->close_by);
                                                    @endphp

                                                    @if ($activityDate && \Carbon\Carbon::parse($activityDate)->isFuture() && $activity->activity_type_id == 2)
                                                        <li class="feed-item feed-item-primary">
                                                            <div class="d-flex gap-4 justify-content-between">
                                                                <div>
                                                                    <div class="mb-2 text-truncate-1-line">
                                                                        <a href="javascript:void(0)"
                                                                            class="fw-semibold text-dark">{{ $activity->title }}</a>
                                                                    </div>
                                                                    <p class="fs-12 text-muted mb-3 text-truncate-2-line">
                                                                        {{ $activity->description }}
                                                                    </p>

                                                                    <div>
                                                                        <a href="javascript:void(0)"
                                                                            class="badge text-success border border-dashed border-gray-500">
                                                                            Start-
                                                                            {{ \Carbon\Carbon::parse($activity->start_date ?? ($activity->due_date ?? $activity->received_on))->format('Y-m-d') }}
                                                                        </a>

                                                                        <a href="javascript:void(0)"
                                                                            class="badge text-danger border border-dashed border-gray-500">
                                                                            End-
                                                                            {{ \Carbon\Carbon::parse($activity->end_date ?? ($activity->due_date ?? $activity->close_by))->format('Y-m-d') }}
                                                                        </a>
                                                                        <a href="javascript:void(0)"
                                                                            class="badge text-warning border border-dashed border-gray-500">Duration-
                                                                            {{ $activity->duration }}</a>
                                                                    </div>
                                                                </div>
                                                                <div
                                                                    class="fs-10 fw-medium text-uppercase text-muted text-nowrap">
                                                                    {{ $activity->created_at->diffForHumans() }}
                                                                </div>
                                                            </div>
                                                        </li>
                                                    @endif
                                                @endforeach
                                            </ul>


                                        </div>
                                    </div>

                                </div>
                            @endif

                            @php
                                $futureMeetings = $activities->filter(function ($activity) {
                                    $activityDate = $activity->end_date ?? ($activity->due_date ?? $activity->close_by);
                                    return $activityDate &&
                                        \Carbon\Carbon::parse($activityDate)->isPast() &&
                                        $activity->activity_type_id == 2;
                                });
                            @endphp

                            @if ($futureMeetings->isNotEmpty())
                                <div class="profile-details mb-5">
                                    <div class="mb-4 d-flex align-items-center justify-content-between">
                                        <h5 class="fw-bold mb-0">Expired Meetings:</h5>

                                        <div class="card-body custom-card-action">
                                            <ul class="list-unstyled mb-0 activity-feed-1">
                                                @foreach ($activities as $activity)
                                                    @php
                                                        $activityDate =
                                                            $activity->end_date ??
                                                            ($activity->due_date ?? $activity->close_by);
                                                    @endphp

                                                    @if ($activityDate && \Carbon\Carbon::parse($activityDate)->isPast() && $activity->activity_type_id == 2)
                                                        <li class="feed-item feed-item-primary">
                                                            <div class="d-flex gap-4 justify-content-between">
                                                                <div>
                                                                    <div class="mb-2 text-truncate-1-line">
                                                                        <a href="javascript:void(0)"
                                                                            class="fw-semibold text-dark">{{ $activity->title }}</a>
                                                                    </div>
                                                                    <p class="fs-12 text-muted mb-3 text-truncate-2-line">
                                                                        {{ $activity->description }}
                                                                    </p>

                                                                    <div>
                                                                        <a href="javascript:void(0)"
                                                                            class="badge text-success border border-dashed border-gray-500">
                                                                            Start-
                                                                            {{ \Carbon\Carbon::parse($activity->start_date ?? ($activity->due_date ?? $activity->received_on))->format('Y-m-d') }}
                                                                        </a>

                                                                        <a href="javascript:void(0)"
                                                                            class="badge text-danger border border-dashed border-gray-500">
                                                                            End-
                                                                            {{ \Carbon\Carbon::parse($activity->end_date ?? ($activity->due_date ?? $activity->close_by))->format('Y-m-d') }}
                                                                        </a>
                                                                        <a href="javascript:void(0)"
                                                                            class="badge text-warning border border-dashed border-gray-500">Duration-
                                                                            {{ $activity->duration }}</a>
                                                                    </div>
                                                                </div>
                                                                <div
                                                                    class="fs-10 fw-medium text-uppercase text-muted text-nowrap">
                                                                    {{ $activity->created_at->diffForHumans() }}
                                                                </div>
                                                            </div>
                                                        </li>
                                                    @endif
                                                @endforeach
                                            </ul>


                                        </div>
                                    </div>

                                </div>
                            @endif

                        </div>

                        <!-- Email Tab Content -->
                        <div class="tab-pane fade p-4" id="emailTab" role="tabpanel" aria-labelledby="emailTabLink">
                            <!-- Content for Email Tab -->
                            <div class="about-section mb-5">


                                <div class="modal-content">
                                    <!--! BEGIN: [modal-header] !-->
                                    <div class="modal-header">
                                        <h2 class="d-flex flex-column mb-0">
                                            <span class="fs-18 fw-bold mb-1">Compose Mail</span>

                                        </h2>

                                    </div>
                                    <!--! BEGIN: [modal-body] !-->
                                    <div class="modal-body p-0">
                                        <div class="position-relative border-bottom">
                                            <div class="px-2 d-flex align-items-center">
                                                <div class="p-0 w-100">
                                                    <input class="form-control border-0 text-dark" name="tomailmodal"
                                                        placeholder="TO">
                                                </div>
                                            </div>
                                            <a href="javascript:void(0)"
                                                class="position-absolute top-50 end-0 translate-middle badge bg-gray-100 border border-gray-3 fs-10 fw-semibold text-uppercase text-dark rounded-pill c-pointer z-index-100"
                                                id="ccbccToggleModal"><span data-bs-toggle="tooltip"
                                                    data-bs-trigger="hover" title="CC / BCC"
                                                    style="font-size: 9px !important">CC / BCC</span></a>
                                        </div>
                                        <div class="border-bottom mail-cc-bcc-fields" id="ccbccToggleModalFileds"
                                            style="display: none">
                                            <div class="px-2 w-100 d-flex align-items-center border-bottom">
                                                <input class="form-control border-0 text-dark" name="ccmailmodal"
                                                    placeholder="CC">
                                            </div>
                                            <div class="px-2 w-100 d-flex align-items-center">
                                                <input class="form-control border-0 text-dark" name="bccmailmodal"
                                                    placeholder="BCC">
                                            </div>
                                        </div>
                                        <div class="px-3 w-100 d-flex align-items-center">
                                            <input class="form-control border-0 my-1 w-100 shadow-none" type="email"
                                                placeholder="Subject">
                                        </div>
                                        <div class="px-3">
                                            <textarea class="form-control border-0 text-dark" rows="8" placeholder="Write here..."></textarea>
                                        </div>
                                    </div>
                                    <!--! BEGIN: [modal-footer] !-->
                                    <div class="modal-footer d-flex align-items-center justify-content-between">
                                        <!--! BEGIN: [mail-editor-action-left] !-->
                                        <div class="d-flex align-items-center">
                                            <div class="dropdown me-2">
                                                <a href="javascript:void(0)" data-bs-toggle="dropdown"
                                                    data-bs-offset="0, 0">
                                                    <span class="btn btn-primary dropdown-toggle" data-bs-toggle="tooltip"
                                                        data-bs-trigger="hover" title="Send Message"> Send </span>
                                                </a>
                                                <div class="dropdown-menu">
                                                    <a href="javascript:void(0)" class="dropdown-item"
                                                        data-action-target="#mailActionMessage">
                                                        <i class="feather-send me-3"></i>
                                                        <span>Instant Send</span>
                                                    </a>
                                                    <a href="javascript:void(0);"
                                                        class="dropdown-item successAlertMessage">
                                                        <i class="feather-clock me-3"></i>
                                                        <span>Schedule Send</span>
                                                    </a>
                                                    <div class="dropdown-divider"></div>
                                                    <a href="javascript:void(0)"
                                                        class="dropdown-item successAlertMessage">
                                                        <i class="feather-x me-3"></i>
                                                        <span>Discard Now</span>
                                                    </a>
                                                    <a href="javascript:void(0)"
                                                        class="dropdown-item successAlertMessage">
                                                        <i class="feather-edit-3 me-3"></i>
                                                        <span>Save as Draft</span>
                                                    </a>
                                                </div>
                                            </div>
                                            <div class="dropdown me-2 d-none d-sm-block">
                                                <a href="javascript:void(0)" data-bs-toggle="dropdown"
                                                    data-bs-offset="0, 0">
                                                    <span class="btn btn-icon" data-bs-toggle="tooltip"
                                                        data-bs-trigger="hover" title="Pick Template">
                                                        <i class="feather-hash"></i>
                                                    </span>
                                                </a>
                                                <div class="dropdown-menu wd-300">
                                                    <a href="javascript:void(0)" class="dropdown-item">
                                                        <i class="feather-file-text me-3"></i>
                                                        <span>Welcome you message</span>
                                                    </a>
                                                    <a href="javascript:void(0)" class="dropdown-item">
                                                        <i class="feather-file-text me-3"></i>
                                                        <span>Your issues solved</span>
                                                    </a>
                                                    <a href="javascript:void(0)" class="dropdown-item">
                                                        <i class="feather-file-text me-3"></i>
                                                        <span>Thank you message</span>
                                                    </a>
                                                    <a href="javascript:void(0)" class="dropdown-item">
                                                        <i class="feather-file-text me-3"></i>
                                                        <span>Make a offer message</span>
                                                    </a>
                                                    <a href="javascript:void(0)" class="dropdown-item">
                                                        <i class="feather-file-text me-3"></i>
                                                        <span>Add the Unsubscribe option</span>
                                                    </a>
                                                    <a href="javascript:void(0)" class="dropdown-item">
                                                        <i class="feather-file-text me-3"></i>
                                                        <span>Thank your customer for joining</span>
                                                    </a>
                                                    <div class="dropdown-divider"></div>
                                                    <a href="javascript:void(0)" class="dropdown-item">
                                                        <i class="feather-save me-3"></i>
                                                        <span>Save as Template</span>
                                                    </a>
                                                    <a href="javascript:void(0)" class="dropdown-item">
                                                        <i class="feather-sun me-3"></i>
                                                        <span>Manage Template</span>
                                                    </a>
                                                </div>
                                            </div>
                                            <div class="dropdown">
                                                <a href="javascript:void(0)" data-bs-toggle="dropdown"
                                                    data-bs-offset="0, 0">
                                                    <span class="btn btn-icon" data-bs-toggle="tooltip"
                                                        data-bs-trigger="hover" title="Upload Attachments">
                                                        <i class="feather-upload"></i>
                                                    </span>
                                                </a>
                                                <div class="dropdown-menu">
                                                    <a href="javascript:void(0)" class="dropdown-item">
                                                        <i class="feather-image me-3"></i>
                                                        <span>Upload Images</span>
                                                    </a>
                                                    <a href="javascript:void(0)" class="dropdown-item">
                                                        <i class="feather-video me-3"></i>
                                                        <span>Upload Videos</span>
                                                    </a>
                                                    <a href="javascript:void(0)" class="dropdown-item">
                                                        <i class="feather-mic me-3"></i>
                                                        <span>Upload Musics</span>
                                                    </a>
                                                    <a href="javascript:void(0)" class="dropdown-item">
                                                        <i class="feather-file-text me-3"></i>
                                                        <span>Upload Documents</span>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                        <!--! BEGIN: [mail-editor-action-right] !-->
                                        <div class="d-flex align-items-center">
                                            <div class="dropdown me-2">
                                                <a href="javascript:void(0)" data-bs-toggle="dropdown"
                                                    data-bs-offset="0, 0">
                                                    <span class="btn btn-icon" data-bs-toggle="tooltip"
                                                        data-bs-trigger="hover" title="Editing Actions">
                                                        <i class="feather-more-horizontal"></i>
                                                    </span>
                                                </a>
                                                <ul class="dropdown-menu">
                                                    <li>
                                                        <a href="javascript:void(0)" class="dropdown-item">
                                                            <i class="feather-type me-3"></i>
                                                            <span>Plain Text Mode</span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="javascript:void(0)" class="dropdown-item">
                                                            <i class="feather-check me-3"></i>
                                                            <span>Check Spelling</span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="javascript:void(0)" class="dropdown-item">
                                                            <i class="feather-compass me-3"></i>
                                                            <span>Smart Compose</span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="javascript:void(0)" class="dropdown-item">
                                                            <i class="feather-feather me-3"></i>
                                                            <span>Manage Signature</span>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>
                                            <a href="javascript:void(0);" data-bs-dismiss="modal">
                                                <span class="btn btn-icon" data-bs-toggle="tooltip"
                                                    data-bs-trigger="hover" title="Delete Message">
                                                    <i class="feather-x"></i>
                                                </span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="profile-details mb-5">
                                <div class="mb-4 d-flex align-items-center justify-content-between">
                                    {{-- <h5 class="fw-bold mb-0">Scheduled Emails:</h5> --}}
                                </div>
                            </div>
                        </div>

                        <!-- Leads Tab Content -->
                        <div class="tab-pane fade p-4" id="leadsTab" role="tabpanel" aria-labelledby="leadsTabLink">
                            <!-- Content for Leads Tab -->
                            <div class="about-section mb-5">
                                <div class="mb-4 d-flex align-items-center justify-content-end">
                                    <a href="javascript:void(0);" class="btn btn-sm btn-light-brand me-2"
                                        data-bs-toggle="modal" data-bs-target="#tasksModal">Assign Leads</a>

                                    <a href="{{ route('leads-create') }}?id={{ $contact->id }}"
                                        class="btn btn-sm btn-light-brand">Create Leads</a>
                                </div>

                            </div>

                            @if ($leads->isNotEmpty())
                                <div class="card-body custom-card-action p-0">
                                    <div class="table-responsive">
                                        <table class="table table-hover mb-0">
                                            <thead>
                                                <tr class="border-b">
                                                    <th scope="row">Name</th>
                                                    <th>Priority</th>
                                                    <th>Status</th>
                                                    <th class="wd-250">Stage</th>
                                                    <th class="text-end">Actions</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($leads as $lead)
                                                    <tr>
                                                        <td>
                                                            <div class="d-flex align-items-center gap-3">

                                                                <a href="{{ route('leads.view', ['id' => $lead->id]) }}">
                                                                    <span class="d-block">{{ $lead->topic }}</span>
                                                                    <span
                                                                        class="fs-12 d-block fw-normal text-muted"></span>
                                                                </a>
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <span class="badge bg-gray-200 text-dark">
                                                                {{ \App\Models\Priority::find($lead->priority_id)->name ?? '' }}</span>
                                                        </td>
                                                        <td>
                                                            @php
                                                                $stage = \App\Models\LeadStage::find($lead->stage_id);

                                                                $stageMapping = [
                                                                    'Introduction Meeting' => [
                                                                        'class' => 'info',
                                                                        'width' => 10,
                                                                    ],
                                                                    'Marketing Qualified' => [
                                                                        'class' => 'primary',
                                                                        'width' => 20,
                                                                    ],
                                                                    'Sale Qualified' => [
                                                                        'class' => 'success',
                                                                        'width' => 30,
                                                                    ],
                                                                    'Proposal' => [
                                                                        'class' => 'warning',
                                                                        'width' => 40,
                                                                    ],
                                                                    'Demo' => [
                                                                        'class' => 'secondary',
                                                                        'width' => 50,
                                                                    ],
                                                                    'Campaign Assessment' => [
                                                                        'class' => 'danger',
                                                                        'width' => 60,
                                                                    ],
                                                                    'Following Terms' => [
                                                                        'class' => 'dark',
                                                                        'width' => 70,
                                                                    ],
                                                                    'Quotation' => [
                                                                        'class' => 'info',
                                                                        'width' => 80,
                                                                    ],
                                                                    'Negotiation' => [
                                                                        'class' => 'primary',
                                                                        'width' => 90,
                                                                    ],
                                                                    'Review' => [
                                                                        'class' => 'success',
                                                                        'width' => 100,
                                                                    ],
                                                                ];

                                                                $stageClass =
                                                                    $stageMapping[$stage->name ?? '']['class'] ??
                                                                    'danger';
                                                                $stageWidth =
                                                                    $stageMapping[$stage->name ?? '']['width'] ?? 0;
                                                            @endphp

                                                            <span
                                                                class="badge bg-soft-{{ $stageClass }} text-{{ $stageClass }}">
                                                                {{ $stage->name ?? 'Unknown Stage' }}
                                                            </span>
                                                        </td>

                                                        <td>
                                                            <div class="progress ht-3">
                                                                <div class="progress-bar bg-{{ $stageClass }}"
                                                                    role="progressbar"
                                                                    style="width: {{ $stageWidth }}%"
                                                                    aria-valuenow="{{ $stageWidth }}" aria-valuemin="0"
                                                                    aria-valuemax="100">
                                                                </div>
                                                            </div>
                                                        </td>


                                                        <td class="text-end">
                                                            <div class="dropdown">
                                                                <a class="text-muted" href="#"
                                                                    id="dropdownMenuButton" data-bs-toggle="dropdown"
                                                                    aria-expanded="false">
                                                                    <i class="feather feather-more-vertical"></i>
                                                                </a>
                                                                <ul class="dropdown-menu dropdown-menu-end"
                                                                    aria-labelledby="dropdownMenuButton">
                                                                    <li><a class="dropdown-item"
                                                                            href="{{ route('leads.view', ['id' => $lead->id]) }}">View Profile</a>
                                                                    </li>
                                                                    <li><a class="dropdown-item"
                                                                            href="{{ route('leads.edit') }}?id={{ $lead->id }}">Edit</a>
                                                                    </li>
                                                                    <li>
                                                                        <form
                                                                            action="{{ route('leads.destroy', $lead->id) }}"
                                                                            method="POST"
                                                                            onsubmit="return confirm('Are you sure you want to delete this lead?');">
                                                                            @csrf
                                                                            @method('DELETE')
                                                                            <button type="submit"
                                                                                class="dropdown-item">Delete</button>
                                                                        </form>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            @endif


                        </div>

                        <!-- Deals Tab Content -->
                        <div class="tab-pane fade p-4" id="dealsTab" role="tabpanel" aria-labelledby="dealsTabLink">
                            <!-- Content for Deals Tab -->
                            <div class="about-section mb-5">
                                <div class="mb-4 d-flex align-items-center justify-content-end">
                                    <a href="javascript:void(0);" class="btn btn-sm btn-light-brand me-2"
                                        data-bs-toggle="modal" data-bs-target="#dealsModal">Assign Deals</a>
                                    <a href="{{ route('deals-create') }}?id={{ $contact->id }}"
                                        class="btn btn-sm btn-light-brand">Create Deal</a>
                                </div>
                            </div>

                            @if ($deals->isNotEmpty())
                                <div class="card-body custom-card-action p-0">
                                    <div class="table-responsive">
                                        <table class="table table-hover mb-0">
                                            <thead>
                                                <tr class="border-b">
                                                    <th scope="row">Name</th>
                                                    <th>Priority</th>
                                                    <th>Status</th>
                                                    <th class="wd-250">Stage</th>
                                                    <th class="text-end">Actions</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($deals as $deal)
                                                    <tr>
                                                        <td>
                                                            <div class="d-flex align-items-center gap-3">
                                                                <a href="{{ route('deals.view', ['id' => $deal->id]) }}">
                                                                    <span class="d-block">{{ $deal->name }}</span>
                                                                    <span
                                                                        class="fs-12 d-block fw-normal text-muted"></span>
                                                                </a>
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <span class="badge bg-gray-200 text-dark">
                                                                {{ \App\Models\Priority::find($deal->priority_id)->name ?? '' }}</span>
                                                        </td>
                                                        <td>
                                                            @php
                                                                // Define a mapping for stage names to badge and progress bar classes
                                                                $stageMapping = [
                                                                    'Qualification' => [
                                                                        'class' => 'info',
                                                                        'width' => 10,
                                                                    ],
                                                                    'Need Analysis' => [
                                                                        'class' => 'primary',
                                                                        'width' => 20,
                                                                    ],
                                                                    'Value Proposition' => [
                                                                        'class' => 'success',
                                                                        'width' => 30,
                                                                    ],
                                                                    'Decision Makers' => [
                                                                        'class' => 'warning',
                                                                        'width' => 40,
                                                                    ],
                                                                    'Proposal' => [
                                                                        'class' => 'secondary',
                                                                        'width' => 50,
                                                                    ],
                                                                    'Demo' => [
                                                                        'class' => 'danger',
                                                                        'width' => 60,
                                                                    ],
                                                                    'Presentation' => [
                                                                        'class' => 'dark',
                                                                        'width' => 70,
                                                                    ],
                                                                    'Quotation' => [
                                                                        'class' => 'info',
                                                                        'width' => 80,
                                                                    ],
                                                                    'Negotiation' => [
                                                                        'class' => 'primary',
                                                                        'width' => 85,
                                                                    ],
                                                                    'Closed Won' => [
                                                                        'class' => 'success',
                                                                        'width' => 100,
                                                                    ],
                                                                    'Closed Lost' => [
                                                                        'class' => 'danger',
                                                                        'width' => 95,
                                                                    ],
                                                                    'Costed Lost to Competition' => [
                                                                        'class' => 'warning',
                                                                        'width' => 75,
                                                                    ],
                                                                    'Future Contact' => [
                                                                        'class' => 'secondary',
                                                                        'width' => 50,
                                                                    ],
                                                                    'Finalizing Terms' => [
                                                                        'class' => 'success',
                                                                        'width' => 100,
                                                                    ],
                                                                ];

                                                                // Fetch the stage from stage_id using DealStage model
                                                                $stage = \App\Models\DealStage::find($deal->stage_id);

                                                                // Get the class and width for the current stage, default to 'danger' and '0%' if unknown
                                                                $stageClass =
                                                                    $stageMapping[$stage->name ?? '']['class'] ??
                                                                    'danger';
                                                                $stageWidth =
                                                                    $stageMapping[$stage->name ?? '']['width'] ?? 0;
                                                            @endphp

                                                            <!-- Badge for the stage -->
                                                            <span
                                                                class="badge bg-soft-{{ $stageClass }} text-{{ $stageClass }}">
                                                                {{ $stage->name ?? 'Unknown Stage' }}
                                                            </span>
                                                        </td>

                                                        <td>
                                                            <!-- Progress bar for the stage -->
                                                            <div class="progress ht-3">
                                                                <div class="progress-bar bg-{{ $stageClass }}"
                                                                    role="progressbar"
                                                                    style="width: {{ $stageWidth }}%"
                                                                    aria-valuenow="{{ $stageWidth }}" aria-valuemin="0"
                                                                    aria-valuemax="100">
                                                                </div>
                                                            </div>
                                                        </td>

                                                        <td class="text-end">
                                                            <div class="dropdown">
                                                                <a class="text-muted" href="#"
                                                                    id="dropdownMenuButton" data-bs-toggle="dropdown"
                                                                    aria-expanded="false">
                                                                    <i class="feather feather-more-vertical"></i>
                                                                </a>
                                                                <ul class="dropdown-menu dropdown-menu-end"
                                                                    aria-labelledby="dropdownMenuButton">
                                                                    <li><a class="dropdown-item"
                                                                            href="{{ route('deals.view', ['id' => $deal->id]) }}">View Profile</a>
                                                                    </li>
                                                                    <li><a class="dropdown-item"
                                                                            href="{{ route('deals.edit') }}?id={{ $deal->id }}">Edit</a>
                                                                    </li>
                                                                    <li>
                                                                        <form
                                                                            action="{{ route('deals.destroy', $deal->id) }}"
                                                                            method="POST"
                                                                            onsubmit="return confirm('Are you sure you want to delete this deal?');">
                                                                            @csrf
                                                                            @method('DELETE')
                                                                            <button type="submit"
                                                                                class="dropdown-item">Delete</button>
                                                                        </form>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            @endif


                        </div>

                        <!-- Campaign Tab Content -->
                        <div class="tab-pane fade p-4" id="campaignTab" role="tabpanel"
                            aria-labelledby="campaignTabLink">
                            <!-- Content for Campaign Tab -->
                            <div class="about-section mb-5">
                                <div class="mb-4 d-flex align-items-center justify-content-end">
                                    <a href="javascript:void(0);" class="btn btn-sm btn-light-brand me-2"
                                        data-bs-toggle="modal" data-bs-target="#campaignsModal">Assign
                                        Campaign</a>
                                    <a href="{{ route('campaigns-create') }}?id={{ $contact->id }}"
                                        class="btn btn-sm btn-light-brand">Create Campaign</a>
                                </div>
                            </div>
                            @if ($campaigns->isNotEmpty())
                                <div class="card-body custom-card-action p-0">
                                    <div class="table-responsive">
                                        <table class="table table-hover mb-0">
                                            <thead>
                                                <tr class="border-b">
                                                    <th scope="row">Name</th>
                                                    <th>Description</th>
                                                    <th>Template</th>
                                                    <th>Status</th>
                                                    <th class="text-end">Actions</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($campaigns as $campaign)
                                                    <tr>
                                                        <td>
                                                            <div class="d-flex align-items-center gap-3">
                                                                <a href="javascript:void(0);">
                                                                    <span
                                                                        class="d-block">{{ $campaign->campaign_name }}</span>
                                                                </a>
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <span class="badge bg-gray-200 text-dark">
                                                                {{ $campaign->description }}
                                                            </span>
                                                        </td>
                                                        <td>
                                                            <span class="badge bg-gray-200 text-dark">
                                                                {{ $campaign->template }}
                                                            </span>
                                                        </td>
                                                        <td>
                                                            {{ $campaign->status }}
                                                        </td>

                                                        <td class="text-end">
                                                            <div class="dropdown">
                                                                <a class="text-muted" href="#"
                                                                    id="dropdownMenuButton" data-bs-toggle="dropdown"
                                                                    aria-expanded="false">
                                                                    <i class="feather feather-more-vertical"></i>
                                                                </a>
                                                                <ul class="dropdown-menu dropdown-menu-end"
                                                                    aria-labelledby="dropdownMenuButton">
                                                                    <li><a class="dropdown-item"
                                                                            href="{{ route('campaigns.edit') }}?id={{ $campaign->id }}">Edit</a>
                                                                    </li>
                                                                    <li>
                                                                        <form
                                                                            action="{{ route('campaigns.destroy', $campaign->id) }}"
                                                                            method="POST"
                                                                            onsubmit="return confirm('Are you sure you want to delete this campaign?');">
                                                                            @csrf
                                                                            @method('DELETE')
                                                                            <button type="submit"
                                                                                class="dropdown-item">Delete</button>
                                                                        </form>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            @endif

                        </div>
                        @include('contacts.partials.profile-completion-tabs')
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!-- [ Main Content ] end -->
@endsection


@section('contactmodals')

    @php
        $stages = \App\Models\LeadStage::active()->orderBy('id')->get();
        $priorities = \App\Models\Priority::all();
    @endphp

    <div class="modal fade" id="tasksModal" tabindex="-1" aria-labelledby="tasksModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="tasksModalLabel">Assign Leads</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <!-- Table for displaying leads -->
                    <div class="table-responsive tasks-items-wrapper">
                        <table class="table table-hover mb-0">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Tasks</th>
                                    <th class="wd-150">Stage</th>
                                    <th class="wd-150">Priority</th>
                                    <th class="wd-150">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($allLeads as $index => $allLead)
                                    @if (is_null($allLead->primary_contact_id))
                                        <tr>
                                            <td>{{ $index + 1 }}</td>
                                            <td>
                                                {{ $allLead->topic }}
                                                <p class="fs-12 text-muted mt-2 text-truncate-1-line">
                                                    {{ \Carbon\Carbon::parse($allLead->created_at)->format('d M, Y') }}
                                                </p>
                                            </td>
                                            <!-- Stage Dropdown -->
                                            <td>
                                                <form method="POST" action="{{ route('assign-lead') }}">
                                                    @csrf
                                                    <input type="hidden" name="lead_id" value="{{ $allLead->id }}">
                                                    <input type="hidden" name="contact_id" value="{{ $contact->id }}">
                                                    <select name="stage_id" class="form-control"
                                                        data-select2-selector="status" required>
                                                        <option value="" disabled selected data-bg="">Select
                                                            Stage</option>
                                                        @foreach ($stages as $stage)
                                                            <option value="{{ $stage->id }}" data-bg="bg-primary">
                                                                {{ $stage->name }}</option>
                                                        @endforeach
                                                    </select>
                                            </td>
                                            <!-- Priority Dropdown -->
                                            <td>
                                                <select name="priority_id" class="form-control"
                                                    data-select2-selector="status" required>
                                                    <option value="" disabled selected>Select Priority</option>
                                                    @foreach ($priorities as $priority)
                                                        <option data-bg="bg-success" value="{{ $priority->id }}">
                                                            {{ $priority->name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </td>

                                            <!-- Submit Button -->
                                            <td>
                                                <button type="submit" class="btn btn-sm btn-primary">Assign</button>
                                                </form>
                                            </td>
                                        </tr>
                                    @endif
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>


    <!----Deal assign model---->

    @php
        $stages = \App\Models\DealStage::all();
        $priorities = \App\Models\Priority::all();
    @endphp

    <div class="modal fade" id="dealsModal" tabindex="-1" aria-labelledby="dealsModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="dealsModalLabel">Assign Deals</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <!-- Table for displaying deals -->
                    <div class="table-responsive deals-items-wrapper">
                        <table class="table table-hover mb-0">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Deal</th>
                                    <th class="wd-150">Stage</th>
                                    <th class="wd-150">Priority</th>
                                    <th class="wd-150">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($allDeals as $index => $allDeal)
                                    @if (is_null($allDeal->contact_id))
                                        <tr>
                                            <td>{{ $index + 1 }}</td>
                                            <td>
                                                {{ $allDeal->topic }}
                                                <p class="fs-12 text-muted mt-2 text-truncate-1-line">
                                                    {{ \Carbon\Carbon::parse($allDeal->created_at)->format('d M, Y') }}
                                                </p>
                                            </td>
                                            <!-- Stage Dropdown -->
                                            <td>
                                                <form method="POST" action="{{ route('assign-deal') }}">
                                                    @csrf
                                                    <input type="hidden" name="deal_id" value="{{ $allDeal->id }}">
                                                    <input type="hidden" name="contact_id"
                                                        value="{{ $contact->id }}">
                                                    <select name="stage_id" class="form-control"
                                                        data-select2-selector="status" required>
                                                        <option value="" disabled selected data-bg="">Select
                                                            Stage</option>
                                                        @foreach ($stages as $stage)
                                                            <option value="{{ $stage->id }}" data-bg="bg-primary">
                                                                {{ $stage->name }}</option>
                                                        @endforeach
                                                    </select>
                                            </td>
                                            <!-- Priority Dropdown -->
                                            <td>
                                                <select name="priority_id" class="form-control"
                                                    data-select2-selector="status" required>
                                                    <option value="" disabled selected>Select Priority</option>
                                                    @foreach ($priorities as $priority)
                                                        <option data-bg="bg-success" value="{{ $priority->id }}">
                                                            {{ $priority->name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </td>

                                            <!-- Submit Button -->
                                            <td>
                                                <button type="submit" class="btn btn-sm btn-primary">Assign</button>
                                                </form>
                                            </td>
                                        </tr>
                                    @endif
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <!----Campaigns Assign Modal---->

    {{-- @php
    $stages = \App\Models\Stage::all();
    $priorities = \App\Models\Priority::all();
@endphp --}}

    <div class="modal fade" id="campaignsModal" tabindex="-1" aria-labelledby="campaignsModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="campaignsModalLabel">Assign Campaigns</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <!-- Table for displaying campaigns -->
                    <div class="table-responsive campaigns-items-wrapper">
                        <table class="table table-hover mb-0">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Campaign</th>
                                    <th class="wd-150">Description</th>
                                    <th class="wd-150">Template</th>
                                    <th class="wd-150">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($allCampaigns as $index => $campaign)
                                    @if (is_null($campaign->contact_id))
                                        <tr>
                                            <td>{{ $index + 1 }}</td>
                                            <td>
                                                {{ $campaign->campaign_name }}
                                                <p class="fs-12 text-muted mt-2 text-truncate-1-line">
                                                    {{ \Carbon\Carbon::parse($campaign->created_at)->format('d M, Y') }}
                                                </p>
                                            </td>
                                            <!-- Stage Dropdown -->
                                            <td>
                                                {{ $campaign->description }}
                                                <form method="POST" action="{{ route('assign-campaign') }}">
                                                    @csrf
                                                    <input type="hidden" name="campaign_id"
                                                        value="{{ $campaign->id }}">
                                                    <input type="hidden" name="contact_id"
                                                        value="{{ $contact->id }}">

                                            </td>
                                            <!-- Priority Dropdown -->
                                            <td>
                                                {{ $campaign->template }}
                                            </td>

                                            <!-- Submit Button -->
                                            <td>
                                                <button type="submit" class="btn btn-sm btn-primary">Assign</button>
                                                </form>
                                            </td>
                                        </tr>
                                    @endif
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>


@endsection
