@extends('layouts.app')

@section('title', 'Edit Lead')

@section('page-specific-style')
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css" rel="stylesheet" />
    <link rel="stylesheet" href="{{ asset('assets/libs/summernote/summernote.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/css/leads.css') }}">
    <style>
        .bootstrap-tagsinput .label-info {
            background-color: cadetblue;
            padding: 0 3px;
            border-radius: 5px;
        }

        .bootstrap-tagsinput {
            display: block;
        }

        .customer-image {
            width: 60px;
            height: auto;
            border-radius: 50%;
        }

        .accordion-body {
            padding-bottom: 3rem;
        }

        .dependent-item {
            margin-bottom: 2rem;
        }

        .opportunity-item {
            margin-bottom: 2rem;
        }

        .form-control-file {
            display: none;
        }

        /* Style for custom file upload button */
        .custom-file-upload {
            display: inline-block;
            cursor: pointer;
            text-align: center;
        }

        .custom-file-upload i {
            margin-right: 5px;
        }

        #history-datatable_paginate {
            float: right !important;
        }

        #activities-datatable_paginate {
            float: right !important;
        }
    </style>
@endsection

@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-xl-12">
                <div class="card">
                    <div class="card-body">

                        <div class="d-flex justify-content-between">
                            <h4 class="card-title text-primary"><a href="{{ route('leads.index') }}">All Leads</a> >
                                {{ $lead->fullName }} ({{ $lead->lead_code }})</h4>
                            <div>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-primary pr0"><i class="bx bx-phone-call"></i>
                                        Call</button>
                                    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split"
                                        data-bs-toggle="dropdown" aria-expanded="false">
                                        <i class="mdi mdi-chevron-down"></i>
                                    </button>
                                    <div class="dropdown-menu" style="">
                                        <a class="dropdown-item" href="#">Campaign 1 call</a>
                                        <a class="dropdown-item" href="#">Campaign 2 call</a>
                                        <a class="dropdown-item" href="#">Campaign 3 call</a>
                                        <!-- <div class="dropdown-divider"></div> -->
                                    </div>
                                </div>
                                <button class="btn btn-info" type="button" title="Send SMS" data-bs-toggle="offcanvas"
                                    data-bs-target="#offcanvasRightSendSMS" aria-controls="offcanvasRightSendSMS"><i
                                        class="bx bx-message-alt-dots"></i> SMS</button>
                                {{-- <button class="btn btn-info" type="button" title="Send whatsapp sms" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRightSendWhatsappSMS" aria-controls="offcanvasRightSendWhatsappSMS"><i class="bx bxl-whatsapp-square"></i></button> --}}
                                <button class="btn btn-info" type="button" title="Send email" data-bs-toggle="offcanvas"
                                    data-bs-target="#offcanvasRightSendEmail" aria-controls="offcanvasRightSendEmail"><i
                                        class="bx bx-mail-send"></i> Email</button>
                                <button class="btn btn-primary" type="button" title="Add note" data-bs-toggle="offcanvas"
                                    data-bs-target="#offcanvasRight" aria-controls="offcanvasRight"><i
                                        class="bx bx-notepad"></i> Note</button>
                            </div>
                        </div>

                        @include('includes.alerts')
                        <h1 class="mt-5">
                            @if ($lead->is_customer)
                                <img src="{{ asset('assets/images/customer/customer.png') }}" alt="Is a customer"
                                    class="customer-image" title="Is a customer">
                            @else
                                <i class="bx bx-user"></i>
                            @endif
                            {{ $lead->fullName }}
                        </h1>
                        <p class="card-title-desc">Customer Id {{ $lead->lead_code }}</p>

                        <form method="POST" action="{{ route('leads.update', $lead->id) }}" id="information-form"
                            autocomplete="off" enctype="multipart/form-data">
                            @csrf
                            @method('PUT')

                            <div class="row mb-3">
                                <div class="col-md-3 mb-3">
                                    <div class="select-wrapper position-relative">
                                        <select class="form-select" id="is_active" name="status">
                                            <option value="" disabled
                                                @if (!isset($lead) && $lead->status == '') selected @endif>Select status</option>
                                            @forelse ($leadStatusItems as $item)
                                                <option value="{{ $item->value }}"
                                                    {{ isset($lead) && $lead->status == $item->value ? 'selected' : '' }}>
                                                    {{ str_replace('_', ' ', $item->value) }}
                                                </option>
                                            @empty
                                                <option value="">No status found!</option>
                                            @endforelse
                                        </select>
                                        <label for="status" class="flotting-label">Status</label>
                                    </div>
                                </div>
                                <div class="col-md-3 mb-3">
                                    <div class="select-wrapper position-relative">
                                        <select class="form-select" id="assigned_to" name="assigned_to_user">
                                            <option value="" disabled
                                                @if (!isset($lead) && $lead->assigned_to_user == '') selected @endif>Select user</option>
                                            @forelse ($assignedToUsers as $user)
                                                <option value="{{ $user->id }}"
                                                    {{ isset($lead) && $lead->assigned_to_user == $user->id ? 'selected' : '' }}>
                                                    {{ $user->name }}
                                                </option>
                                            @empty
                                                <option value="">No user found!</option>
                                            @endforelse
                                        </select>
                                        <label for="is_active" class="flotting-label">Assigned to</label>
                                    </div>
                                </div>
                                <div class="col-md-3 mb-3">
                                    <div class="form-floating crmTags1">
                                        <input type="text" class="form-control" id="tags-common" name="tags[]"
                                            data-role="tagsinput" autocomplete="off" value="{{ $tagsString }}">
                                        <label for="tag" class="input-tags-label">Tags</label>
                                    </div>
                                    @error('tags')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                                {{-- @dd($lead->source); --}}
                                <div class="col-md-3 mb-3">
                                    <div class="select-wrapper position-relative">
                                        <select class="form-select" id="source-contact" name="source">
                                            <option value="" disabled
                                                @if ($lead->source == null) selected @endif>Select source</option>
                                            @forelse ($sourceItems as $source)
                                                <option value="{{ $source->value }}"
                                                    {{ isset($lead) && $lead->source == $source->value ? 'selected' : '' }}>
                                                    {{ $source->value }} </option>
                                            @empty
                                                <option value="">No source found!</option>
                                            @endforelse
                                        </select>
                                        <label for="source" class="flotting-label">Source</label>
                                    </div>
                                </div>
                            </div>


                            <!-- Nav tabs -->
                            <ul class="nav nav-tabs nav-tabs-custom nav-justified" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link" data-bs-toggle="tab" href="#contact" role="tab">
                                        <span class="d-none d-sm-block fw-bold text-uppercase">Information</span>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link d-flex gap-2" data-bs-toggle="tab" href="#dependents"
                                        role="tab">
                                        <span class="d-none d-sm-block fw-bold text-uppercase">Dependents</span>
                                        <span
                                            class="badge badge-soft-primary fs-6 @if ($lead->dependents->count() == 0) d-none @endif">{{ $lead->dependents->count() }}</span>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link d-flex gap-2" data-bs-toggle="tab" href="#opportunities"
                                        role="tab">
                                        <span class="d-none d-sm-block fw-bold text-uppercase">Opporunities </span>
                                        <span
                                            class="badge badge-soft-primary fs-6 @if ($lead->opportunities->count() == 0) d-none @endif">{{ $lead->opportunities->count() }}</span>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link d-flex gap-2" data-bs-toggle="tab" href="#policies"
                                        role="tab">
                                        <span class="d-none d-sm-block fw-bold text-uppercase">Policies</span>
                                        <span
                                            class="badge badge-soft-primary fs-6 @if ($lead->policies->count() == 0) d-none @endif">{{ $lead->policies->count() }}</span>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" data-bs-toggle="tab" href="#notes" role="tab">
                                        <span class="d-none d-sm-block fw-bold text-uppercase">Notes</span>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" data-bs-toggle="tab" href="#recording" role="tab">
                                        <span class="d-none d-sm-block fw-bold text-uppercase">Conversations</span>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" data-bs-toggle="tab" href="#activities" role="tab">
                                        <span class="d-none d-sm-block fw-bold text-uppercase">Activities</span>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" data-bs-toggle="tab" href="#documents" role="tab">
                                        <span class="d-none d-sm-block fw-bold text-uppercase">Documents</span>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" data-bs-toggle="tab" href="#history" role="tab">
                                        <span class="d-none d-sm-block fw-bold text-uppercase">History</span>
                                    </a>
                                </li>
                            </ul>

                            <div class="d-flex justify-content-center">
                                <div class="spinner-border text-secondary my-3" role="status" id="tabLoader">
                                    <span class="sr-only">Loading...</span>
                                </div>
                            </div>

                            <!-- Tab panes -->
                            <div class="tab-content p-3 text-muted">
                                <!-- Contact Tab -->
                                <div class="tab-pane" id="contact" role="tabpanel">
                                    <div class="accordion" id="accordionPanelsStayOpenExample">
                                        <div class="accordion-item">
                                            <h2 class="accordion-header" id="headingOne">
                                                <button class="accordion-button fw-medium fw-semibold" type="button"
                                                    data-bs-toggle="collapse" data-bs-target="#collapseOne"
                                                    aria-expanded="true" aria-controls="collapseOne">
                                                    Primary Information
                                                </button>
                                            </h2>
                                            <div id="collapseOne" class="accordion-collapse collapse show"
                                                aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                                                <div class="accordion-body py-4">
                                                    <input type="hidden" name="country_code" id="country_code"
                                                        value="{{ $lead->country_code }}">
                                                    <div class="row">
                                                        <div class="col-md-4 mb-3">
                                                            <div class="select-wrapper position-relative">
                                                                <select class="form-select" id="country"
                                                                    name="lead_country">
                                                                    <option value="" disabled
                                                                        @if (!isset($lead) && $lead->country == '') selected @endif>
                                                                        Select country</option>
                                                                    @forelse ($countries as $country)
                                                                        <option value="{{ $country->name }}"
                                                                            {{ isset($lead) && $lead->country == $country->name ? 'selected' : '' }}>
                                                                            {{ $country->name }} </option>
                                                                    @empty
                                                                        <option value="">Countries not found!
                                                                        </option>
                                                                    @endforelse
                                                                </select>
                                                                <label for="country"
                                                                    class="flotting-label">Country</label>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-8">
                                                            <div class="form-floating">
                                                                <input type="text" class="form-control"
                                                                    id="phone-primary" name="primary_phone_number"
                                                                    placeholder="Primary Phone"
                                                                    value="{{ old('primary_phone_number', $lead->primary_phone_number) }}"
                                                                    autocomplete="off" required placeholder="">
                                                                <label>Primary Phone</label>
                                                            </div>
                                                            <div id="phone-error" class="text-default text-bold mt-2"
                                                                style="display: none;"></div>
                                                            <div id="phone-loader"
                                                                class="position-absolute top-50 end-0 translate-middle-y me-2"
                                                                style="display: none;">
                                                                <div class="spinner-border text-primary" role="status">
                                                                    <span class="visually-hidden">Loading...</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-md-4">
                                                            <div class="form-floating">
                                                                <input type="text" class="form-control"
                                                                    id="first_name" name="first_name"
                                                                    value="{{ old('first_name', $lead->first_name) }}"
                                                                    required placeholder="">
                                                                <label for="first_name">First Name</label>
                                                            </div>
                                                            @error('first_name')
                                                                <div class="text-danger">{{ $message }}</div>
                                                            @enderror
                                                        </div>
                                                        <div class="col-md-4">
                                                            <div class="form-floating">
                                                                <input type="text" class="form-control"
                                                                    id="middle_name" name="middle_name"
                                                                    value="{{ old('middle_name', $lead->middle_name) }}"
                                                                    placeholder="">
                                                                <label for="middle_name">Middle Name</label>
                                                            </div>
                                                            @error('middle_name')
                                                                <div class="text-danger">{{ $message }}</div>
                                                            @enderror
                                                        </div>
                                                        <div class="col-md-4">
                                                            <div class="form-floating">
                                                                <input type="text" class="form-control" id="last_name"
                                                                    name="last_name"
                                                                    value="{{ old('last_name', $lead->last_name) }}"
                                                                    required placeholder="">
                                                                <label for="last_name">Last Name</label>
                                                            </div>
                                                            @error('last_name')
                                                                <div class="text-danger">{{ $message }}</div>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="accordion-item">
                                            <h2 class="accordion-header" id="headingTwo">
                                                <button class="accordion-button fw-medium collapsed fw-semibold"
                                                    type="button" data-bs-toggle="collapse"
                                                    data-bs-target="#collapseTwo" aria-expanded="false"
                                                    aria-controls="collapseTwo">
                                                    Basic Information </button>
                                            </h2>
                                            <div id="collapseTwo" class="accordion-collapse collapse"
                                                aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
                                                <div class="accordion-body py-4">
                                                    <div class="row">
                                                        <div class="col-md-3">
                                                            <div class="form-floating">
                                                                <input type="text" class="form-control"
                                                                    id="phone_2-contact" name="phone_2"
                                                                    value="{{ old('phone_2', $lead->information?->phone_2) }}"
                                                                    placeholder="">
                                                                <label for="phone_2">Phone 2</label>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-3">
                                                            <div class="form-floating">
                                                                <input type="text" class="form-control" id="phone_3"
                                                                    name="phone_3"
                                                                    value="{{ old('phone_3', $lead->information?->phone_3) }}"
                                                                    placeholder="">
                                                                <label for="phone_3">Phone 3</label>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-3">
                                                            <div class="form-floating">
                                                                <input type="email" class="form-control" id="email1"
                                                                    name="email"
                                                                    value="{{ old('email', $lead->information?->email) }}"
                                                                    placeholder="">
                                                                <label for="email1">Email 1</label>
                                                            </div>
                                                            @error('email1')
                                                                <div class="text-danger">{{ $message }}</div>
                                                            @enderror
                                                        </div>

                                                        <div class="col-md-3">
                                                            <div class="form-floating">
                                                                <input type="email" class="form-control" id="email2"
                                                                    name="email_2"
                                                                    value="{{ old('email_2', $lead->information?->email_2) }}"
                                                                    placeholder="">
                                                                <label for="email2">Email 2</label>
                                                            </div>
                                                            @error('email2')
                                                                <div class="text-danger">{{ $message }}</div>
                                                            @enderror
                                                        </div>

                                                    </div>
                                                    <div class="row mt-3">
                                                        <div class="col-12">
                                                            <div class="form-floating">
                                                                <input type="text" class="form-control" id="address"
                                                                    name="address"
                                                                    value="{{ old('address', $lead->information?->address) }}"
                                                                    placeholder="">
                                                                <label for="address">Address</label>
                                                            </div>
                                                            @error('address')
                                                                <div class="text-danger">{{ $message }}</div>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                    <div class="row mt-3">
                                                        <div class="col-md-3">
                                                            <div class="form-floating">
                                                                <input type="text" class="form-control" id="zip"
                                                                    name="zipcode"
                                                                    value="{{ old('zipcode', $lead->information?->zipcode) }}"
                                                                    placeholder="">
                                                                <label for="zip">Zip</label>
                                                            </div>
                                                            @error('zip')
                                                                <div class="text-danger">{{ $message }}</div>
                                                            @enderror
                                                        </div>

                                                        <div class="col-md-3">
                                                            <div class="select-wrapper position-relative">
                                                                <select class="form-select" id="country2"
                                                                    name="country">
                                                                    @forelse ($countries as $country)
                                                                        <option value="{{ $country->name }}"
                                                                            data-country_id="{{ $country->id }}"
                                                                            {{ old('country', isset($lead->information->country) ? $lead->information->country : '') == $country->name || (!isset($lead->information->country) && $country->shortname == 'US') ? 'selected' : '' }}>
                                                                            {{ $country->name }}
                                                                        </option>
                                                                    @empty
                                                                        <option value="">Countries not found!
                                                                        </option>
                                                                    @endforelse
                                                                </select>
                                                                <label for="country2"
                                                                    class="flotting-label">Country</label>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-3">
                                                            <div class="select-wrapper position-relative">
                                                                <select class="form-select" id="state-contact"
                                                                    name="state">
                                                                    <option value=""
                                                                        {{ !isset($lead->information->state) ? 'selected' : '' }}>
                                                                        Select state</option>
                                                                    @forelse ($states as $state)
                                                                        <option value="{{ $state->value }}"
                                                                            data-country_id="{{ $state->country_id }}"
                                                                            {{ old('state', isset($lead->information->state) ? $lead->information->state : '') == $state->value ? 'selected' : '' }}>
                                                                            {{ $state->name }}
                                                                        </option>
                                                                    @empty
                                                                        <option value="">States not found!</option>
                                                                    @endforelse

                                                                    @if ($states->isNotEmpty())
                                                                        <option value="other"
                                                                            {{ isset($lead->information->state) && $lead->information->state == 'other' ? 'selected' : '' }}>
                                                                            Other</option>
                                                                    @endif
                                                                </select>
                                                                <label for="state" class="flotting-label">State</label>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-3">
                                                            <div class="form-floating">
                                                                <input type="text" class="form-control" id="city"
                                                                    name="city"
                                                                    value="{{ old('city', $lead->information?->city) }}"
                                                                    placeholder="">
                                                                <label for="city">City</label>
                                                            </div>
                                                            @error('city')
                                                                <div class="text-danger">{{ $message }}</div>
                                                            @enderror
                                                        </div>

                                                    </div>
                                                    <div class="row mt-3">
                                                        <div class="col-md-3">
                                                            <div class="form-floating">
                                                                <input type="date" class="form-control" id="dob"
                                                                    name="dob"
                                                                    value="{{ old('dob', $lead->information?->dob) }}"
                                                                    max="{{ now()->format('Y-m-d') }}" placeholder="">
                                                                <label for="dob">Date of Birth</label>
                                                            </div>
                                                            @error('dob')
                                                                <div class="text-danger">{{ $message }}</div>
                                                            @enderror
                                                        </div>

                                                        <div class="col-md-3">
                                                            <div class="form-floating">
                                                                <input type="number" class="form-control" id="age"
                                                                    name="age"
                                                                    value="{{ old('age', $lead->information?->age) }}"
                                                                    readonly placeholder="">
                                                                <label for="age">Age</label>
                                                            </div>
                                                            @error('age')
                                                                <div class="text-danger">{{ $message }}</div>
                                                            @enderror
                                                        </div>

                                                        <div class="col-md-3">
                                                            <div class="select-wrapper position-relative">
                                                                <select class="form-select" id="gender"
                                                                    name="gender">
                                                                    @forelse ($genders as $gender)
                                                                        <option value="{{ $gender->value }}"
                                                                            {{ old('gender', isset($lead->information->gender) ? $lead->information->gender : '') == $gender->value ? 'selected' : '' }}>
                                                                            {{ $gender->value }}
                                                                        </option>
                                                                    @empty
                                                                        <option value="">Genders not found!</option>
                                                                    @endforelse
                                                                </select>
                                                                <label for="gender"
                                                                    class="flotting-label">Gender</label>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-3">
                                                            <div class="select-wrapper position-relative">
                                                                <select class="form-select" id="language"
                                                                    name="language">
                                                                    @forelse ($languages as $language)
                                                                        <option value="{{ $language->value }}"
                                                                            {{ old('language', isset($lead->information->language) ? $lead->information->language : '') == $language->value ? 'selected' : '' }}>
                                                                            {{ $language->value }} </option>
                                                                    @empty
                                                                        <option value="">Languages not found!
                                                                        </option>
                                                                    @endforelse
                                                                </select>
                                                                <label for="language"
                                                                    class="flotting-label">Language</label>
                                                            </div>
                                                        </div>

                                                    </div>
                                                    <div class="row mt-3">
                                                        <div class="col-md-3">
                                                            <div class="select-wrapper position-relative">
                                                                <select class="form-select" id="maritial_status"
                                                                    name="marital">
                                                                    @forelse ($maritialStatuses as $maritialStatus)
                                                                        <option value="{{ $maritialStatus->value }}"
                                                                            {{ old('marital', isset($lead->information->marital) ? $lead->information->marital : '') == $maritialStatus->value ? 'selected' : '' }}>
                                                                            {{ $maritialStatus->value }} </option>
                                                                    @empty
                                                                        <option value="">Maritial Statuses not found!
                                                                        </option>
                                                                    @endforelse
                                                                </select>
                                                                <label for="maritial_status"
                                                                    class="flotting-label">Maritial Status</label>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-3">
                                                            <div class="select-wrapper position-relative">
                                                                <select class="form-select" id="veteran"
                                                                    name="veteran">
                                                                    <option value="1"
                                                                        {{ old('veteran', isset($lead->information->veteran) ? $lead->information->veteran : '') == 1 ? 'selected' : '' }}>
                                                                        Yes</option>
                                                                    <option value="0"
                                                                        {{ old('veteran', isset($lead->information->veteran) ? $lead->information->veteran : '') == 0 ? 'selected' : '' }}>
                                                                        No</option>
                                                                </select>
                                                                <label for="veteran"
                                                                    class="flotting-label">Veteran</label>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-3">
                                                            <div class="form-floating">
                                                                <input type="time" class="form-control"
                                                                    id="contact_time" name="contact_time"
                                                                    value="{{ old('contact_time', $lead->information?->contact_time) }}"
                                                                    placeholder="">
                                                                <label for="contact_time">Contact Time</label>
                                                            </div>
                                                            @error('contact_time')
                                                                <div class="text-danger">{{ $message }}</div>
                                                            @enderror
                                                        </div>

                                                        <div class="col-md-3">
                                                            <div class="select-wrapper position-relative">
                                                                <select class="form-select" id="contact_method"
                                                                    name="contact_method">
                                                                    <option value="" disabled
                                                                        @if (!isset($lead) && $lead->information?->contact_method == '') selected @endif>
                                                                        Select contact method</option>
                                                                    @forelse ($contactMethods as $contactMethod)
                                                                        <option value="{{ $contactMethod->value }}"
                                                                            {{ old('contact_method', isset($lead->information->contact_method) ? $lead->information->contact_method : '') == $contactMethod->value ? 'selected' : '' }}>
                                                                            {{ $contactMethod->value }} </option>
                                                                    @empty
                                                                        <option value="">Contact Methods not found!
                                                                        </option>
                                                                    @endforelse
                                                                </select>
                                                                <label for="contact_method" class="flotting-label">Contact
                                                                    Method</label>
                                                            </div>
                                                        </div>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="accordion-item">
                                            <h2 class="accordion-header" id="headingThree">
                                                <button class="accordion-button fw-medium collapsed fw-semibold"
                                                    type="button" data-bs-toggle="collapse"
                                                    data-bs-target="#collapseThree" aria-expanded="false"
                                                    aria-controls="collapseThree">
                                                    Mailing Information and Concent
                                                </button>
                                            </h2>
                                            <div id="collapseThree" class="accordion-collapse collapse"
                                                aria-labelledby="headingThree" data-bs-parent="#accordionExample">
                                                <div class="accordion-body py-4">
                                                    <div class="row">
                                                        <div class="col-md-6 mb-3">
                                                            <div class="form-floating">
                                                                <input type="text" class="form-control"
                                                                    id="mailing_zipcode" name="mailing_zipcode"
                                                                    value="{{ $lead->information?->mailing_zipcode }}"
                                                                    placeholder="">
                                                                <label for="mailing_zipcode">Mailing Zipcode</label>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-6 mb-3">
                                                            <div class="form-floating">
                                                                <input type="text" class="form-control"
                                                                    id="mailing_city" name="mailing_city"
                                                                    value="{{ $lead->information?->mailing_city }}"
                                                                    placeholder="">
                                                                <label for="mailing_city">Mailing City</label>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-6 mb-3">
                                                            <div class="select-wrapper position-relative">
                                                                <select class="form-select" name="mailing_state">
                                                                    <option value=""
                                                                        {{ !isset($lead->information->mailing_state) ? 'selected' : '' }}>
                                                                        Select state</option>
                                                                    @forelse ($states->where('country_id', 231) as $state)
                                                                        <option value="{{ $state->value }}"
                                                                            {{ isset($lead->information) && $lead->information->mailing_state == $state->value ? 'selected' : '' }}>
                                                                            {{ $state->name }}
                                                                        </option>
                                                                    @empty
                                                                        <option value="">States not found!</option>
                                                                    @endforelse

                                                                    @if ($states->where('country_id', 231)->isNotEmpty())
                                                                        <option value="other"
                                                                            {{ isset($lead->information->mailing_state) && $lead->information->mailing_state == 'other' ? 'selected' : '' }}>
                                                                            Other</option>
                                                                    @endif
                                                                </select>
                                                                <label for="mailing_state" class="flotting-label">Mailing
                                                                    State</label>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-6 mb-3">
                                                            <div class="form-floating">
                                                                <input type="text" class="form-control"
                                                                    id="mailing_address" name="mailing_address"
                                                                    value="{{ old('mailing_address', $lead->information?->mailing_address) }}"
                                                                    placeholder="">
                                                                <label for="mailing_address">Mailing Address</label>
                                                            </div>
                                                            <div class="form-check mt-2">
                                                                <input class="form-check-input" type="checkbox"
                                                                    id="same_as_address" name="same_as_address"
                                                                    value="1">
                                                                <label class="form-check-label" for="same_as_address">
                                                                    Same as Address
                                                                </label>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="row">

                                                        <div class="col-md-6 mb-3">
                                                            <div class="form-floating">
                                                                <input type="text" class="form-control"
                                                                    id="taxable-household-member-concent"
                                                                    name="taxable_household_members"
                                                                    value="{{ $lead->information?->taxable_household_members }}"
                                                                    placeholder="">
                                                                <label for="taxable-household-member-concent">Taxable
                                                                    Household Member</label>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-6 mb-3">
                                                            <div class="select-wrapper position-relative">
                                                                <select class="form-select"
                                                                    id="consent_to_search_marketplace"
                                                                    name="consent_to_search_marketplace">
                                                                    <option value="1"
                                                                        {{ $lead->information?->consent_to_search_marketplace == 1 ? 'selected' : '' }}>
                                                                        Yes</option>
                                                                    <option value="0"
                                                                        {{ $lead->information?->consent_to_search_marketplace == 0 ? 'selected' : '' }}>
                                                                        No</option>
                                                                </select>
                                                                <label for="consent_to_search_marketplace"
                                                                    class="flotting-label">Consent to Search
                                                                    Marketplace</label>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-6 mb-3">
                                                            <div class="select-wrapper position-relative">
                                                                <select class="form-select"
                                                                    id="consent_to_assist_with_documents"
                                                                    name="consent_to_assist_with_documents">
                                                                    <option value="1"
                                                                        {{ $lead->information?->consent_to_assist_with_documents == 1 ? 'selected' : '' }}>
                                                                        Yes</option>
                                                                    <option value="0"
                                                                        {{ $lead->information?->consent_to_assist_with_documents == 0 ? 'selected' : '' }}>
                                                                        No</option>
                                                                </select>
                                                                <label for="consent_to_assist_with_documents"
                                                                    class="flotting-label">Consent To Assist With
                                                                    Documents</label>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-6 mb-3">
                                                            <div class="select-wrapper position-relative">
                                                                <select class="form-select"
                                                                    id="consent_to_call_text_email"
                                                                    name="consent_to_call_text_email">
                                                                    <option value="1"
                                                                        {{ $lead->information?->consent_to_call_text_email == 1 ? 'selected' : '' }}>
                                                                        Yes</option>
                                                                    <option value="0"
                                                                        {{ $lead->information?->consent_to_call_text_email == 0 ? 'selected' : '' }}>
                                                                        No</option>
                                                                </select>
                                                                <label for="consent_to_call_text_email"
                                                                    class="flotting-label">Consent To
                                                                    Call/Text/Email</label>
                                                            </div>
                                                        </div>

                                                    </div>

                                                    <div class="row">

                                                        <div class="col-md-6 mb-3">
                                                            <div class="select-wrapper position-relative">
                                                                <select class="form-select"
                                                                    id="consent_to_submit_application"
                                                                    name="consent_to_submit_application">
                                                                    <option value="1"
                                                                        {{ $lead->information?->consent_to_submit_application == 1 ? 'selected' : '' }}>
                                                                        Yes</option>
                                                                    <option value="0"
                                                                        {{ $lead->information?->consent_to_submit_application == 0 ? 'selected' : '' }}>
                                                                        No</option>
                                                                </select>
                                                                <label for="consent_to_submit_application"
                                                                    class="flotting-label">Consent To Submit
                                                                    Application</label>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-6 mb-3">
                                                            <div class="select-wrapper position-relative">
                                                                <select class="form-select" id="consent_to_reenroll_renew"
                                                                    name="consent_to_reenroll_renew">
                                                                    <option value="1"
                                                                        {{ $lead->information?->consent_to_reenroll_renew == 1 ? 'selected' : '' }}>
                                                                        Yes</option>
                                                                    <option value="0"
                                                                        {{ $lead->information?->consent_to_reenroll_renew == 0 ? 'selected' : '' }}>
                                                                        No</option>
                                                                </select>
                                                                <label for="consent_to_reenroll_renew"
                                                                    class="flotting-label">Consent To
                                                                    Reenroll/Renew</label>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-6 mb-3">
                                                            <div class="select-wrapper position-relative">
                                                                <select class="form-select"
                                                                    id="understand_duration_of_consent"
                                                                    name="understand_duration_of_consent">
                                                                    <option value="1"
                                                                        {{ $lead->information?->understand_duration_of_consent == 1 ? 'selected' : '' }}>
                                                                        Yes</option>
                                                                    <option value="0"
                                                                        {{ $lead->information?->understand_duration_of_consent == 0 ? 'selected' : '' }}>
                                                                        No</option>
                                                                </select>
                                                                <label for="understand_duration_of_consent"
                                                                    class="flotting-label">Understand Duration of
                                                                    Consent</label>
                                                            </div>
                                                        </div>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="accordion-item">
                                            <h2 class="accordion-header" id="headingFour">
                                                <button class="accordion-button fw-medium collapsed fw-semibold"
                                                    type="button" data-bs-toggle="collapse"
                                                    data-bs-target="#collapseFour" aria-expanded="false"
                                                    aria-controls="collapseFour">
                                                    Financial Information
                                                </button>
                                            </h2>
                                            <div id="collapseFour" class="accordion-collapse collapse"
                                                aria-labelledby="headingFour" data-bs-parent="#accordionExample">
                                                <div class="accordion-body py-4">
                                                    <div class="row mb-3">
                                                        <div class="col-md-3">
                                                            <div class="form-floating">
                                                                <input type="text" class="form-control"
                                                                    id="occupation" name="occupation"
                                                                    value="{{ $lead->information?->occupation }}"
                                                                    placeholder="">
                                                                <label for="occupation">Occupation</label>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-3">
                                                            <div class="form-floating">
                                                                <input type="number" class="form-control" id="budget"
                                                                    name="budget"
                                                                    value="{{ old('budget', $lead->information?->budget) }}"
                                                                    pattern="^\d{1,10}(\.\d{1,2})?$"
                                                                    title="Please enter a valid number with up to 10 digits before the decimal and up to 2 decimal places."
                                                                    placeholder="">
                                                                <label for="budget">Budget</label>

                                                                @error('budget')
                                                                    <span class="text-danger">{{ $message }}</span>
                                                                @enderror
                                                            </div>
                                                        </div>

                                                        <div class="col-md-3">
                                                            <div class="form-floating">
                                                                <input type="number" class="form-control"
                                                                    id="annual_income" name="annual_income"
                                                                    value="{{ old('annual_income', $lead->information?->annual_income) }}"
                                                                    pattern="^\d{1,12}(\.\d{1,2})?$"
                                                                    title="Please enter a valid number with up to 12 digits before the decimal and up to 2 decimal places."
                                                                    placeholder="">
                                                                <label for="annual_income">Annual Income</label>

                                                                @error('annual_income')
                                                                    <span class="text-danger">{{ $message }}</span>
                                                                @enderror
                                                            </div>
                                                        </div>

                                                        <div class="col-md-3">
                                                            <div class="form-floating">
                                                                <input type="number" class="form-control"
                                                                    id="monthly_income" name="monthly_income"
                                                                    value="{{ old('monthly_income', $lead->information?->monthly_income) }}"
                                                                    readonly placeholder="">
                                                                <label for="monthly_income">Monthly Income</label>

                                                                @error('monthly_income')
                                                                    <span class="text-danger">{{ $message }}</span>
                                                                @enderror
                                                            </div>
                                                        </div>

                                                    </div>

                                                    <div class="row">
                                                        <div class="col-md-3">
                                                            <div class="form-floating">
                                                                <input type="number" class="form-control"
                                                                    id="weekly_income" name="weekly_income"
                                                                    value="{{ old('weekly_income', $lead->information?->weekly_income) }}"
                                                                    readonly placeholder="">
                                                                <label for="weekly_income">Weekly Income</label>

                                                                @error('weekly_income')
                                                                    <span class="text-danger">{{ $message }}</span>
                                                                @enderror
                                                            </div>
                                                        </div>

                                                        <div class="col-md-3">
                                                            <div class="form-floating">
                                                                <input type="number" class="form-control"
                                                                    id="household_annual_income"
                                                                    name="household_annual_income"
                                                                    value="{{ old('household_annual_income', $lead->information?->household_annual_income) }}"
                                                                    placeholder="">
                                                                <label for="household_annual_income">Household Annual
                                                                    Income</label>

                                                                @error('household_annual_income')
                                                                    <span class="text-danger">{{ $message }}</span>
                                                                @enderror
                                                            </div>
                                                        </div>

                                                        <div class="col-md-3">
                                                            <div class="form-floating">
                                                                <input type="number" class="form-control"
                                                                    id="household_monthly_income"
                                                                    name="household_monthly_income"
                                                                    value="{{ old('household_monthly_income', $lead->information?->household_monthly_income) }}"
                                                                    readonly placeholder="">
                                                                <label for="household_monthly_income">Household Monthly
                                                                    Income</label>

                                                                @error('household_monthly_income')
                                                                    <span class="text-danger">{{ $message }}</span>
                                                                @enderror
                                                            </div>
                                                        </div>

                                                        <div class="col-md-3">
                                                            <div class="form-floating">
                                                                <input type="number" class="form-control"
                                                                    id="household_weekly_income"
                                                                    name="household_weekly_income"
                                                                    value="{{ old('household_weekly_income', $lead->information?->household_weekly_income) }}"
                                                                    readonly placeholder="">
                                                                <label for="household_weekly_income">Household Weekly
                                                                    Income</label>
                                                            </div>
                                                        </div>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="accordion-item">
                                            <h2 class="accordion-header" id="headingFive">
                                                <button class="accordion-button fw-medium collapsed fw-semibold"
                                                    type="button" data-bs-toggle="collapse"
                                                    data-bs-target="#collapseFive" aria-expanded="false"
                                                    aria-controls="collapseFive">
                                                    Medical Information
                                                </button>
                                            </h2>
                                            <div id="collapseFive" class="accordion-collapse collapse"
                                                aria-labelledby="headingFive" data-bs-parent="#accordionExample">
                                                <div class="accordion-body py-4">
                                                    <div class="row mb-3">
                                                        <!-- Medications and Conditions Textareas -->
                                                        <div class="col-md-6">
                                                            <div class="form-floating">
                                                                <textarea class="form-control" id="medications" name="medications" rows="5" placeholder="">{!! old('medications', $lead->information?->medications) !!}</textarea>
                                                                <label for="medications">Medications</label>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-floating">
                                                                <textarea class="form-control" id="conditions" name="conditions" rows="5" placeholder="">{!! old('conditions', $lead->information?->conditions) !!}</textarea>
                                                                <label for="conditions">Conditions</label>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="row mb-3">
                                                        <!-- Smoker Status -->
                                                        <div class="col-md-3">
                                                            <div class="select-wrapper position-relative">
                                                                <select class="form-select" id="is_smoker"
                                                                    name="is_smoker">
                                                                    <option value="1"
                                                                        {{ $lead->information?->is_smoker == 1 ? 'selected' : '' }}>
                                                                        Yes</option>
                                                                    <option value="0"
                                                                        {{ $lead->information?->is_smoker == 0 ? 'selected' : '' }}>
                                                                        No</option>
                                                                </select>
                                                                <label for="is_smoker" class="flotting-label">Is
                                                                    smoker?</label>
                                                            </div>
                                                        </div>

                                                        <!-- Diabetes Status -->
                                                        <div class="col-md-3">
                                                            <div class="select-wrapper position-relative">
                                                                <select class="form-select" id="has_diabetes"
                                                                    name="has_diabetes">
                                                                    <option value="1"
                                                                        {{ $lead->information?->has_diabetes == 1 ? 'selected' : '' }}>
                                                                        Yes</option>
                                                                    <option value="0"
                                                                        {{ $lead->information?->has_diabetes == 0 ? 'selected' : '' }}>
                                                                        No</option>
                                                                </select>
                                                                <label for="has_diabetes" class="flotting-label">Has
                                                                    diabetes?</label>
                                                            </div>
                                                        </div>

                                                        <!-- Cancer Status -->
                                                        <div class="col-md-3">
                                                            <div class="select-wrapper position-relative">
                                                                <select class="form-select" id="has_cancer"
                                                                    name="has_cancer">
                                                                    <option value="1"
                                                                        {{ $lead->information?->has_cancer == 1 ? 'selected' : '' }}>
                                                                        Yes</option>
                                                                    <option value="0"
                                                                        {{ $lead->information?->has_cancer == 0 ? 'selected' : '' }}>
                                                                        No</option>
                                                                </select>
                                                                <label for="has_cancer" class="flotting-label">Has
                                                                    cancer?</label>
                                                            </div>
                                                        </div>

                                                        <!-- Heart Disease Status -->
                                                        <div class="col-md-3">
                                                            <div class="select-wrapper position-relative">
                                                                <select class="form-select" id="has_heart_disease"
                                                                    name="has_heart_disease">
                                                                    <option value="1"
                                                                        {{ $lead->information?->has_heart_disease == 1 ? 'selected' : '' }}>
                                                                        Yes</option>
                                                                    <option value="0"
                                                                        {{ $lead->information?->has_heart_disease == 0 ? 'selected' : '' }}>
                                                                        No</option>
                                                                </select>
                                                                <label for="has_heart_disease" class="flotting-label">Has
                                                                    heart disease?</label>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="row mt-3">
                                                        <!-- PCP Name -->
                                                        <div class="col-md-3">
                                                            <div class="form-floating">
                                                                <input type="text" class="form-control" id="pcp_name"
                                                                    name="pcp_name"
                                                                    value="{{ old('pcp_name', $lead->information?->pcp_name) }}"
                                                                    placeholder="">
                                                                <label for="pcp_name">PCP Name</label>
                                                            </div>
                                                        </div>

                                                        <!-- PCP ID -->
                                                        <div class="col-md-3">
                                                            <div class="form-floating">
                                                                <input type="text" class="form-control" id="pcp_id"
                                                                    name="pcp_id"
                                                                    value="{{ old('pcp_id', $lead->information?->pcp_id) }}"
                                                                    placeholder="">
                                                                <label for="pcp_id">PCP ID</label>
                                                            </div>
                                                        </div>

                                                        <!-- PCP Office -->
                                                        <div class="col-md-3">
                                                            <div class="form-floating">
                                                                <input type="text" class="form-control"
                                                                    id="pcp_office-contact" name="pcp_office"
                                                                    value="{{ old('pcp_office', $lead->information?->pcp_office) }}"
                                                                    placeholder="">
                                                                <label for="pcp_office">PCP Office</label>
                                                            </div>
                                                        </div>

                                                        <!-- MRN -->
                                                        <div class="col-md-3">
                                                            <div class="form-floating">
                                                                <input type="text" class="form-control" id="mrn"
                                                                    name="mrn"
                                                                    value="{{ old('mrn', $lead->information?->mrn) }}"
                                                                    placeholder="">
                                                                <label for="mrn">MRN</label>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="row mt-3">
                                                        <!-- EMPI -->
                                                        <div class="col-md-3">
                                                            <div class="form-floating">
                                                                <input type="text" class="form-control" id="empi"
                                                                    name="empi"
                                                                    value="{{ old('empi', $lead->information?->empi) }}"
                                                                    placeholder="">
                                                                <label for="empi">EMPI</label>
                                                            </div>
                                                        </div>
                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                        <div class="accordion-item">
                                            <h2 class="accordion-header" id="headingSix">
                                                <button class="accordion-button fw-medium collapsed fw-semibold"
                                                    type="button" data-bs-toggle="collapse"
                                                    data-bs-target="#collapseSix" aria-expanded="false"
                                                    aria-controls="collapseSix">
                                                    Medicare Information
                                                </button>
                                            </h2>
                                            <div id="collapseSix" class="accordion-collapse collapse"
                                                aria-labelledby="headingSix" data-bs-parent="#accordionExample">
                                                <div class="accordion-body py-4">
                                                    <div class="row">
                                                        <div class="col-md-4 mb-3">
                                                            <div class="form-floating">
                                                                <input type="text" class="form-control"
                                                                    id="medicare_claim_number"
                                                                    name="medicare_claim_number"
                                                                    value="{{ old('medicare_claim_number', $lead->information?->medicare_claim_number) }}"
                                                                    placeholder="">
                                                                <label for="medicare_claim_number"
                                                                    class="form-label">Medicare claim Number</label>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-4 mb-3">
                                                            <div class="form-floating">
                                                                <input type="text" class="form-control"
                                                                    id="medicare_part_a" name="medicare_part_a"
                                                                    value="{{ old('medicare_part_a', $lead->information?->medicare_part_a) }}"
                                                                    placeholder="">
                                                                <label for="medicare_part_a">Medicare Part A</label>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-4 mb-3">
                                                            <div class="form-floating">
                                                                <input type="text" class="form-control"
                                                                    id="medicare_part_b" name="medicare_part_b"
                                                                    value="{{ old('medicare_part_b', $lead->information?->medicare_part_b) }}"
                                                                    placeholder="">
                                                                <label for="medicare_part_b">Medicare Part B</label>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-4">
                                                            <div class="form-floating">
                                                                <input type="text" class="form-control"
                                                                    id="medicaid_number" name="medicaid_number"
                                                                    value="{{ old('medicaid_number', $lead->information?->medicaid_number) }}"
                                                                    placeholder="">
                                                                <label for="medicaid_number">Medicaid Number</label>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-4">
                                                            <div class="select-wrapper position-relative">
                                                                <select name="medicaid_level" class="form-select"
                                                                    id="medicaid_level">
                                                                    @forelse ($medicaidLevels as $item)
                                                                        <option value="{{ $item->value }}"
                                                                            {{ isset($lead) && $lead->information?->medicaid_level == $item->value ? 'selected' : '' }}>
                                                                            {{ $item->value }}
                                                                        </option>
                                                                    @empty
                                                                        <option value="">Medicaid Levels not found!
                                                                        </option>
                                                                    @endforelse
                                                                </select>
                                                                <label for="medicaid_level"
                                                                    class="flotting-label">Medicaid Level</label>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-4">
                                                            <div class="select-wrapper position-relative">
                                                                <select name="enrollment_eligibility" class="form-select"
                                                                    id="enrollment_eligibility">
                                                                    @forelse ($enrollmentEligibilities as $item)
                                                                        <option value="{{ $item->value }}"
                                                                            {{ isset($lead) && $lead->information?->enrollment_eligibility == $item->value ? 'selected' : '' }}>
                                                                            {{ $item->value }}
                                                                        </option>
                                                                    @empty
                                                                        <option value="">Enrollment Eligibilities not
                                                                            found!</option>
                                                                    @endforelse
                                                                </select>
                                                                <label for="enrollment_eligibility"
                                                                    class="flotting-label">Enrollment Eligibility</label>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-4 mt-3">
                                                            <div class="select-wrapper position-relative">
                                                                <select name="scope_of_appointment" class="form-select"
                                                                    id="scope_of_appointment-contact">
                                                                    <option value="1"
                                                                        {{ $lead->information?->scope_of_appointment == 1 ? 'selected' : '' }}>
                                                                        Yes</option>
                                                                    <option value="0"
                                                                        {{ $lead->information?->scope_of_appointment == 0 ? 'selected' : '' }}>
                                                                        No</option>
                                                                </select>
                                                                <label for="scope_of_appointment"
                                                                    class="flotting-label">Scope of Appointment</label>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-4 mt-3">
                                                            <div class="form-floating">
                                                                <input type="text" class="form-control"
                                                                    id="medicaid_username" name="medicaid_username"
                                                                    value="{{ old('medicaid_username', $lead->information?->medicaid_username) }}"
                                                                    placeholder="">
                                                                <label for="medicaid_username">Medicaid Username</label>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-4 mt-3">
                                                            <div class="form-floating">
                                                                {{-- <input type="text" class="form-control" id="medicaid_password" name="medicaid_password" value="{{ $lead->information?->medicaid_password }}">
                                                             --}}

                                                                <div class="input-group auth-pass-inputgroup">
                                                                    <input type="password" class="form-control"
                                                                        placeholder="Medicaid password"
                                                                        name="medicaid_password" aria-label="Password"
                                                                        aria-describedby="password-addon"
                                                                        value="{{ old('medicaid_password', $lead->information?->medicaid_password) }}">
                                                                    <button class="btn btn-light " type="button"
                                                                        id="password-addon"><i
                                                                            class="mdi mdi-eye-outline"></i></button>
                                                                </div>
                                                                {{-- <label for="medicaid_password">Medicaid Password</label> --}}
                                                            </div>
                                                        </div>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="accordion-item">
                                            <h2 class="accordion-header" id="headingSeven">
                                                <button class="accordion-button fw-medium collapsed fw-semibold"
                                                    type="button" data-bs-toggle="collapse"
                                                    data-bs-target="#collapseSeven" aria-expanded="false"
                                                    aria-controls="collapseSeven">
                                                    Legal Information
                                                </button>
                                            </h2>
                                            <div id="collapseSeven" class="accordion-collapse collapse"
                                                aria-labelledby="headingSeven" data-bs-parent="#accordionExample">
                                                <div class="accordion-body py-4">
                                                    <div class="row">
                                                        <div class="col-md-4 mb-3">
                                                            <div class="form-floating">
                                                                <input type="text" class="form-control" id="ssn"
                                                                    name="ssn"
                                                                    value="{{ old('ssn', $lead->information?->ssn) }}"
                                                                    placeholder="">
                                                                <label for="ssn">SSN</label>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-4 mb-3">
                                                            <div class="select-wrapper position-relative">
                                                                <select name="tax_filing" class="form-select"
                                                                    id="tax_filing">
                                                                    @forelse ($taxFilings as $item)
                                                                        <option value="{{ $item->value }}"
                                                                            {{ isset($lead) && $lead->information?->tax_filing == $item->value ? 'selected' : '' }}>
                                                                            {{ $item->value }}
                                                                        </option>
                                                                    @empty
                                                                        <option value="">Tax Filings not found!
                                                                        </option>
                                                                    @endforelse
                                                                </select>
                                                                <label for="tax_filing" class="flotting-label">Tax
                                                                    Filing</label>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-4 mb-3">
                                                            <div class="form-floating">
                                                                <input type="text" class="form-control"
                                                                    id="drivers_license" name="drivers_license"
                                                                    value="{{ old('drivers_license', $lead->information?->drivers_license) }}"
                                                                    placeholder="">
                                                                <label for="drivers_license">Driver's License</label>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-4 mb-3">
                                                            <div class="select-wrapper position-relative">
                                                                <select name="drivers_license_state" class="form-select"
                                                                    id="drivers_license_state">
                                                                    <option value=""
                                                                        {{ !isset($lead->information->drivers_license_state) ? 'selected' : '' }}>
                                                                        Select state</option>
                                                                    @forelse ($states->where('country_id', 231) as $state)
                                                                        <option value="{{ $state->value }}"
                                                                            {{ isset($lead->information) && $lead->information->drivers_license_state == $state->value ? 'selected' : '' }}>
                                                                            {{ $state->name }}
                                                                        </option>
                                                                    @empty
                                                                        <option value="">States not found!</option>
                                                                    @endforelse

                                                                    @if ($states->where('country_id', 231)->isNotEmpty())
                                                                        <option value="other"
                                                                            {{ isset($lead->information->drivers_license_state) && $lead->information->drivers_license_state == 'other' ? 'selected' : '' }}>
                                                                            Other</option>
                                                                    @endif
                                                                </select>
                                                                <label for="drivers_license_state"
                                                                    class="flotting-label">Driver's License State</label>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-4 mb-3">
                                                            <div class="form-floating">
                                                                <input type="date" class="form-control"
                                                                    id="drivers_license_exp" name="drivers_license_exp"
                                                                    value="{{ old('drivers_license_exp', $lead->information?->drivers_license_exp) }}"
                                                                    placeholder="">
                                                                <label for="drivers_license_exp">Driver's License
                                                                    Expiration</label>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-4 mb-3">
                                                            <div class="form-floating">
                                                                <input type="text" class="form-control"
                                                                    id="mothers_maiden_name" name="mothers_maiden_name"
                                                                    value="{{ old('mothers_maiden_name', $lead->information?->mothers_maiden_name) }}"
                                                                    placeholder="">
                                                                <label for="mothers_maiden_name">Mother's Maiden
                                                                    Name</label>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="row">

                                                        <div class="col-md-4 mb-3">
                                                            <div class="select-wrapper position-relative">
                                                                <select name="legal_status" class="form-select"
                                                                    id="legal_status">
                                                                    @forelse ($legalStatuses as $item)
                                                                        <option value="{{ $item->value }}"
                                                                            {{ isset($lead) && $lead->information?->legal_status == $item->value ? 'selected' : '' }}>
                                                                            {{ $item->value }}
                                                                        </option>
                                                                    @empty
                                                                        <option value="">Legal Statuses not found!
                                                                        </option>
                                                                    @endforelse
                                                                </select>
                                                                <label for="citizenship" class="flotting-label">Legal
                                                                    status</label>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-4 mb-3">
                                                            <div class="form-floating">
                                                                <input type="text" class="form-control"
                                                                    id="immigration_document" name="immigration_document"
                                                                    value="{{ old('immigration_document', $lead->information?->immigration_document) }}"
                                                                    placeholder="">
                                                                <label for="immegration_document">Immigration
                                                                    Document</label>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-4 mb-3">
                                                            <div class="form-floating">
                                                                <input type="text" class="form-control"
                                                                    id="alien_number" name="alien_number"
                                                                    value="{{ old('alien_number', $lead->information?->alien_number) }}"
                                                                    placeholder="">
                                                                <label for="alien_number"
                                                                    data-tooltip="USCIS Number, format is A123456789">Alien
                                                                    #</label>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-4 mb-3">
                                                            <div class="form-floating">
                                                                <input type="text" class="form-control"
                                                                    id="i_94_number" name="i_94_number"
                                                                    value="{{ old('i_94_number', $lead->information?->i_94_number) }}"
                                                                    placeholder="">
                                                                <label for="i_94_number"
                                                                    data-tooltip="I-94 / I-94A Arrival / Departure Record #">I-94
                                                                    #</label>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-4 mb-3">
                                                            <div class="form-floating">
                                                                <input type="text" class="form-control"
                                                                    id="green_card_number" name="green_card_number"
                                                                    value="{{ old('green_card_number', $lead->information?->green_card_number) }}"
                                                                    placeholder="">
                                                                <label for="green_card_number">Green Card #</label>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-4 mb-3">
                                                            <div class="select-wrapper position-relative">
                                                                <select name="immigration_statuses"
                                                                    class="form-select pr-30" id="immigration_statuses">
                                                                    @forelse ($immigrationStatuses as $item)
                                                                        <option value="{{ $item->value }}"
                                                                            {{ isset($lead) && $lead->information?->immigration_statuses == $item->value ? 'selected' : '' }}>
                                                                            {{ $item->value }}
                                                                        </option>
                                                                    @empty
                                                                        <option value="">Immigration Statuses not
                                                                            found!</option>
                                                                    @endforelse
                                                                </select>
                                                                <label for="immigration_statuses"
                                                                    class="flotting-label">Immigration Statuses</label>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="row">
                                                        <div class="col-md-4 mb-3">
                                                            <div class="select-wrapper position-relative">
                                                                <select name="other_statuses" class="form-select pr-30"
                                                                    id="other_statuses">
                                                                    @forelse ($otherStatuses as $item)
                                                                        <option value="{{ $item->value }}"
                                                                            {{ isset($lead) && $lead->information?->other_statuses == $item->value ? 'selected' : '' }}>
                                                                            {{ $item->value }}
                                                                        </option>
                                                                    @empty
                                                                        <option value="">Other Statuses not found!
                                                                        </option>
                                                                    @endforelse
                                                                </select>
                                                                <label for="other_statuses" class="flotting-label">Other
                                                                    Statuses</label>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-4 mb-3">
                                                            <div class="form-floating">
                                                                <input type="text" class="form-control"
                                                                    id="savis_id" name="sevis_id"
                                                                    value="{{ old('sevis_id', $lead->information?->sevis_id) }}"
                                                                    placeholder="">
                                                                <label for="savis_id">Sevis ID</label>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-4 mb-3">
                                                            <div class="form-floating">
                                                                <input type="text" class="form-control"
                                                                    id="passport" name="passport"
                                                                    value="{{ old('passport', $lead->information?->passport) }}"
                                                                    placeholder="">
                                                                <label for="passport">Passport</label>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-4 mb-3">
                                                            <div class="select-wrapper position-relative">
                                                                <select name="passport_country" class="form-select"
                                                                    id="passport_country">
                                                                    @forelse ($passportCountries as $item)
                                                                        <option value="{{ $item->value }}"
                                                                            {{ isset($lead) && $lead->information?->passport_country == $item->value ? 'selected' : '' }}>
                                                                            {{ $item->value }}
                                                                        </option>
                                                                    @empty
                                                                        <option value="">Passport Countries not
                                                                            found!</option>
                                                                    @endforelse
                                                                </select>
                                                                <label for="passport_country"
                                                                    class="flotting-label">Passport Country</label>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-4 mb-3">
                                                            <div class="form-floating">
                                                                <input type="date" class="form-control"
                                                                    id="passport_expiration" name="passport_expiration"
                                                                    value="{{ old('passport_expiration', $lead->information?->passport_expiration) }}"
                                                                    placeholder="">
                                                                <label for="passport_expiration">Passport
                                                                    Expiration</label>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-4 mb-3">
                                                            <div class="form-floating">
                                                                <input type="text" class="form-control"
                                                                    id="ead_card_number" name="ead_card_number"
                                                                    value="{{ old('ead_card_number', $lead->information?->ead_card_number) }}"
                                                                    placeholder="">
                                                                <label for="ead_card_number">EAD Card Number</label>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="row">

                                                        <div class="col-md-4 mb-3">
                                                            <div class="form-floating">
                                                                <input type="text" class="form-control"
                                                                    id="ead_card_code" name="ead_code"
                                                                    value="{{ old('ead_code', $lead->information?->ead_code) }}"
                                                                    placeholder="">
                                                                <label for="ead_card_code">EAD Card Code</label>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-4 mb-3">
                                                            <div class="form-floating">
                                                                <input type="date" class="form-control"
                                                                    id="ead_card_expiration" name="ead_expiration"
                                                                    value="{{ old('ead_expiration', $lead->information?->ead_expiration) }}"
                                                                    placeholder="">
                                                                <label for="ead_card_expiration">EAD Card
                                                                    Expiration</label>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-4 mb-3">
                                                            <div class="form-floating">
                                                                <input type="text" class="form-control"
                                                                    id="naturalization" name="naturalization"
                                                                    value="{{ old('naturalization', $lead->information?->naturalization) }}"
                                                                    placeholder="">
                                                                <label for="naturalization">Naturalization</label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="accordion-item">
                                            <h2 class="accordion-header" id="headingEight">
                                                <button class="accordion-button fw-medium collapsed fw-semibold"
                                                    type="button" data-bs-toggle="collapse"
                                                    data-bs-target="#collapseEight" aria-expanded="false"
                                                    aria-controls="collapseEight">
                                                    Insurance Information
                                                </button>
                                            </h2>
                                            <div id="collapseEight" class="accordion-collapse collapse"
                                                aria-labelledby="headingEight" data-bs-parent="#accordionExample">
                                                <div class="accordion-body py-4">
                                                    <div class="row">
                                                        <div class="col-md-4 mb-3">
                                                            <div class="select-wrapper position-relative">
                                                                <select name="interested_in" class="form-select"
                                                                    id="intrested_in">
                                                                    @forelse ($masterInsurancePlanTypes as $item)
                                                                        <option value="{{ $item->id }}"
                                                                            {{ isset($lead) && $lead->information?->interested_in == $item->id ? 'selected' : '' }}>
                                                                            {{ $item->Medicare_Advantage_Plan }}
                                                                        </option>
                                                                    @empty
                                                                        <option value="">Insurance Plan Types not
                                                                            found!</option>
                                                                    @endforelse
                                                                </select>
                                                                <label for="intrested_in"
                                                                    class="flotting-label">Interested In</label>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-4 mb-3">
                                                            <div class="form-floating">
                                                                <input type="number" class="form-control"
                                                                    id="insured_premium" name="insured_premium"
                                                                    value="{{ old('insured_premium', $lead->information?->insured_premium) }}"
                                                                    placeholder="">
                                                                <label for="insured_premium">Insured Premium</label>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-4 mb-3">
                                                            <div class="select-wrapper position-relative">
                                                                <select name="insured_carrier" class="form-select"
                                                                    id="insured_carrier">
                                                                    @forelse ($masterInsuranceCarriers as $item)
                                                                        <option value="{{ $item->value }}"
                                                                            {{ isset($lead) && $lead->information?->insured_carrier == $item->value ? 'selected' : '' }}>
                                                                            {{ $item->value }}
                                                                        </option>
                                                                    @empty
                                                                        <option value="">Insurance Carriers not
                                                                            found!</option>
                                                                    @endforelse
                                                                </select>
                                                                <label for="insured_carrier"
                                                                    class="flotting-label">Insured Carrier</label>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-4 mb-3">
                                                            <div class="select-wrapper position-relative">
                                                                <select name="insured_intent" class="form-select"
                                                                    id="insured_intent">
                                                                    @forelse ($insuredIntents as $item)
                                                                        <option value="{{ $item->value }}"
                                                                            {{ isset($lead) && $lead->information?->insured_intent == $item->value ? 'selected' : '' }}>
                                                                            {{ $item->value }}
                                                                        </option>
                                                                    @empty
                                                                        <option value="">Insured Intents not found!
                                                                        </option>
                                                                    @endforelse
                                                                </select>
                                                                <label for="insured_intent"
                                                                    class="flotting-label">Insured Intent</label>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-4 mb-3">
                                                            <div class="form-floating">
                                                                <input type="text" class="form-control"
                                                                    id="term_wanted" name="term_wanted"
                                                                    value="{{ old('term_wanted', $lead->information?->term_wanted) }}"
                                                                    placeholder="">
                                                                <label for="term_wanted">Term Wanted</label>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-4 mb-3">
                                                            <div class="form-floating">
                                                                <input type="text" class="form-control"
                                                                    id="coverage_wanted" name="coverage_wanted"
                                                                    value="{{ old('coverage_wanted', $lead->information?->coverage_wanted) }}"
                                                                    placeholder="">
                                                                <label for="coverage_wanted">Coverage Wanted</label>
                                                            </div>
                                                        </div>

                                                    </div>

                                                    <div class="row">

                                                        <div class="col-md-4 mb-3">
                                                            <div class="select-wrapper position-relative">
                                                                <select name="is_insured" class="form-select"
                                                                    id="is_insured">
                                                                    <option value="1"
                                                                        {{ isset($lead) && $lead->information?->is_insured == 1 ? 'selected' : '' }}>
                                                                        Yes</option>
                                                                    <option value="0"
                                                                        {{ isset($lead) && $lead->information?->is_insured == 0 ? 'selected' : '' }}>
                                                                        No</option>
                                                                </select>
                                                                <label for="is_insured" class="flotting-label">Is
                                                                    Insured?</label>
                                                            </div>
                                                        </div>
                                                    </div>

                                                </div>
                                            </div>
                                        </div>

                                        <div class="accordion-item">
                                            <h2 class="accordion-header" id="headingNine">
                                                <button class="accordion-button fw-medium collapsed fw-semibold"
                                                    type="button" data-bs-toggle="collapse"
                                                    data-bs-target="#collapseNine" aria-expanded="false"
                                                    aria-controls="collapseNine">
                                                    Marketing Information
                                                </button>
                                            </h2>
                                            <div id="collapseNine" class="accordion-collapse collapse"
                                                aria-labelledby="headingNine" data-bs-parent="#accordionExample">
                                                <div class="accordion-body py-4">
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <div class="select-wrapper position-relative">
                                                                <select name="newsletter_opt_in" class="form-select"
                                                                    id="newsletter_opt_in">
                                                                    <option value="1"
                                                                        {{ isset($lead) && $lead->information?->newsletter_opt_in == 1 ? 'selected' : '' }}>
                                                                        Yes</option>
                                                                    <option value="0"
                                                                        {{ isset($lead) && $lead->information?->newsletter_opt_in == 0 ? 'selected' : '' }}>
                                                                        No</option>
                                                                </select>
                                                                <label for="newsletter_opt_in"
                                                                    class="flotting-label">Newsletter Opt In</label>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-6">
                                                            <div class="select-wrapper position-relative">
                                                                <select name="marketing_opt_in" class="form-select"
                                                                    id="marketing_opt_in">
                                                                    <option value="1"
                                                                        {{ isset($lead) && $lead->information?->marketing_opt_in == 1 ? 'selected' : '' }}>
                                                                        Yes</option>
                                                                    <option value="0"
                                                                        {{ isset($lead) && $lead->information?->marketing_opt_in == 0 ? 'selected' : '' }}>
                                                                        No</option>
                                                                </select>
                                                                <label for="marketing_opt_in"
                                                                    class="flotting-label">Marketing Opt In</label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                        </form>
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="headingTen">
                                <button class="accordion-button fw-medium collapsed fw-semibold" type="button"
                                    data-bs-toggle="collapse" data-bs-target="#collapseTen" aria-expanded="false"
                                    aria-controls="collapseTen">
                                    Upload document
                                </button>
                            </h2>
                            <div id="collapseTen" class="accordion-collapse collapse" aria-labelledby="headingTen"
                                data-bs-parent="#accordionExample">
                                <div class="accordion-body py-4">
                                    @include('modules.leads.includes.upload-document', [
                                        'linkedEntity' => 'information',
                                        'linkedEntityId' => null,
                                        'key' => 101,
                                        'leadId' => $lead->id,
                                        'documentTypes' => $documentTypes,
                                    ])

                                    @php
                                        $documents = $lead->attachments
                                            ->where('linked_entity', 'information')
                                            ->sortByDesc('uploaded_at');
                                    @endphp
                                    <div class="document-list-information">
                                        @if (count($documents) > 0)
                                            @include('modules.leads.includes.document-list', [
                                                'documents' => $documents,
                                            ])
                                        @endif
                                    </div>

                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="row mt-3">
                        <div class="col-12">
                            <button type="button" class="btn btn-primary submit-information">Submit</button>
                        </div>
                    </div>
                </div>

                <!-- Dependents Tab -->
                <div class="tab-pane" id="dependents" role="tabpanel">
                    @include('modules.leads.includes.lead-dependents', [
                        'lead' => $lead,
                        'dependents' => $lead->dependents,
                        'relationships' => $relationships,
                        'genders' => $genders,
                        'languages' => $languages,
                        'states' => $states,
                        'countries' => $countries,
                        'medicaidLevels' => $medicaidLevels,
                        'enrollmentEligibilities' => $enrollmentEligibilities,
                        'immigrationStatuses' => $immigrationStatuses,
                        'otherStatuses' => $otherStatuses,
                        'passportCountries' => $passportCountries,
                    ])
                </div>

                {{-- Opporunities Tab --}}
                <div class="tab-pane" id="opportunities" role="tabpanel">
                    @include('modules.leads.includes.lead-opportunities', [
                        'lead' => $lead,
                    ])
                </div>

                <!-- Policies Tab -->
                <div class="tab-pane" id="policies" role="tabpanel">
                    @include('modules.leads.includes.lead-policies', [
                        'lead' => $lead,
                    ])
                </div>

                <!-- Notes Tab -->
                <div class="tab-pane" id="notes" role="tabpanel">
                    @include('modules.leads.includes.lead-notes', [
                        'lead' => $lead,
                        'notesTypes' => $notesTypes,
                    ])
                </div>

                <!-- Recording Tab -->
                <div class="tab-pane" id="recording" role="tabpanel">
                    @include('modules.leads.includes.lead-recordings', [
                        'lead' => $lead,
                    ])
                </div>

                {{-- Activities --}}
                <div class="tab-pane" id="activities" role="tabpanel">
                    @include('modules.leads.includes.lead-activities', [
                        'lead' => $lead,
                    ])
                </div>

                <!-- Documents Tab -->
                <div class="tab-pane" id="documents" role="tabpanel">
                    @include('modules.leads.includes.lead-documents-tab', [
                        'lead' => $lead,
                        'leadDocuments' => $leadDocuments,
                    ])
                </div>

                {{-- History Tab --}}
                <div class="tab-pane" id="history" role="tabpanel">
                    @include('modules.leads.includes.lead-history', [
                        'lead' => $lead,
                    ])
                </div>
            </div>
        </div>
    </div>
    </div>
    </div>
    </div>

    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRightSendSMS"
        aria-labelledby="offcanvasRightLabel">
        <div class="offcanvas-header">
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"
                aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <div class="row">
                <div class="col-12">
                    <form action="{{ route('leads.sendSms') }}" method="POST">
                        @csrf

                        <input type="hidden" name="lead_id" value="{{ $lead->id }}">

                        <div class="form-group">
                            <label for="sms_template">SMS Template</label>
                            <select name="sms_template" id="sms_template" class="form-select">
                                <option value="" selected>Select SMS Template</option>
                                @forelse ($smsTemplates as $template)
                                    <option value="{{ $template->id }}" data-content="{{ $template->content }}">
                                        {{ $template->name }}</option>
                                @empty
                                    <option value="">SMS Templates not found!</option>
                                @endforelse
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="from">From Phone Number</label>
                            <input type="text" name="from" id="from"
                                value="{{ $settings['telnyx_sms_number'] ?? '' }}" class="form-control" readonly
                                required>
                        </div>

                        <div class="form-group mt-2">
                            <label for="to">To Phone Number</label>
                            <input type="text" name="to" id="to"
                                value="{{ $lead->primary_phone_number }}" class="form-control" readonly required>
                        </div>

                        <div class="form-group mt-2">
                            {{-- <label for="message">Message <span id="characterCount">(160 characters remaining)</span></label> --}}
                            <div id="char-count">0/160 characters</div>
                            <textarea name="body" id="message" cols="30" rows="10" class="form-control sms-content"
                                oninput="updateCharacterCount()" maxlength="160"></textarea>
                        </div>

                        <div class="d-grid gap-2">
                            <button type="submit"
                                class="btn btn-primary btn-md waves-effect waves-light mt-2 send-sms-btn">Send an
                                SMS</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>


    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRightSendEmail"
        aria-labelledby="offcanvasRightLabel">
        <div class="offcanvas-header">
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"
                aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <div class="row">
                <div class="col-12">
                    <form action="{{ route('leads.sendEmail') }}" method="POST">
                        @csrf

                        <input type="hidden" name="lead_id" value="{{ $lead->id }}">
                        <input type="hidden" name="reply_id" id="reply_id">

                        <div class="form-group">
                            <label for="email_template">Email Template</label>
                            <select name="email_template" id="email_template" class="form-select">
                                <option value="" selected>Select Email Template</option>
                                @forelse ($emailTemplates as $template)
                                    <option value="{{ $template->id }}" data-subject="{{ $template->subject }}"
                                        data-body="{{ $template->body }}">{{ $template->name }}</option>
                                @empty
                                    <option value="">Email Templates not found!</option>
                                @endforelse
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="from_email">From Email</label>
                            <input type="email" name="from_email" id="from_email"
                                value="{{ $settings['email_to_customer'] ?? '' }}" class="form-control" readonly
                                required>
                        </div>

                        <div class="form-group mt-2">
                            <label for="to_email">To email</label>
                            <input type="email" name="to_email" id="to_email"
                                value="{{ $lead->information?->email }}" class="form-control" readonly required>
                        </div>

                        <div class="form-group mt-2">
                            <label for="subject">Subject</label>
                            <input type="text" name="subject" id="subject" value=""
                                class="form-control" required>
                        </div>

                        <div class="form-group mt-2">
                            <label for="message">Message</label>
                            <textarea name="body" id="emailBody" cols="30" rows="10" class="form-control send-message"></textarea>
                        </div>

                        <div class="mt-2">
                            <blockquote class="border rounded p-2 bg-light" id="quotedMessage">
                                <!-- Quoted message will be injected here -->
                            </blockquote>
                        </div>

                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-primary btn-md waves-effect waves-light mt-2">Send
                                email</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>


    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRightViewEmail"
        aria-labelledby="offcanvasRightLabel">
        <div class="offcanvas-header">
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvasViewEmail"
                aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <div class="row">
                <div class="col-12">
                    <form action="" method="POST">
                        @csrf

                        <input type="hidden" name="lead_id" value="{{ $lead->id }}">
                        <input type="hidden" name="reply_id" id="view_reply_id">

                        <div class="form-group">
                            <label for="from_email">From Email</label>
                            <input type="email" name="from_email" id="view-from_email"
                                value="{{ $settings['email_to_customer'] ?? '' }}" class="form-control" readonly
                                required>
                        </div>

                        <div class="form-group mt-2">
                            <label for="to_email">To email</label>
                            <input type="email" name="to_email" id="view-to_email"
                                value="{{ $lead->information?->email }}" class="form-control">
                        </div>

                        <div class="form-group mt-2">
                            <label for="subject">Subject</label>
                            <input type="text" name="subject" id="view-subject" value=""
                                class="form-control" required>
                        </div>

                        <div class="form-group mt-2">
                            <label for="message">Message</label>
                            <textarea name="body" id="view-emailBody" cols="30" rows="10" class="form-control send-message"></textarea>
                        </div>

                        <div class="mt-2">
                            <blockquote class="border rounded p-2 bg-light" id="quotedMessage">
                                <!-- Quoted message will be injected here -->
                            </blockquote>
                        </div>

                        <div class="d-grid gap-2">
                            <button type="button"
                                class="btn btn-primary btn-md waves-effect waves-light mt-2 view-replay-button">Reply</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>


    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
        <div class="offcanvas-header">
            {{-- <h5 id="offcanvasRightLabel"></h5> --}}
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"
                aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <div class="row">
                <div class="col-12">
                    <form action="{{ route('leads.storeNote') }}" method="POST">
                        @csrf

                        <input type="hidden" name="lead_id" value="{{ $lead->id }}">
                        <textarea name="note" id="lead_note" cols="30" rows="10" class="form-control"></textarea>

                        <select name="type" id="type" class="form-select mt-2">
                            @forelse ($notesTypes as $item)
                                <option value="{{ $item->value }}">
                                    {{ $item->value }} </option>
                            @empty
                                <option value="">Note Types not found!</option>
                            @endforelse
                        </select>

                        <select name="related_opportunity" class="form-select mt-2">
                            <option value="">Select Opportunity</option>
                            @forelse ($opportunities as $opportunity)
                                <option value="{{ $opportunity->id }}">{{ $opportunity->opportunity_code }}</option>
                            @empty
                                <option value="">Opportunities not found!</option>
                            @endforelse
                        </select>
                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-primary btn-md waves-effect waves-light mt-2">Add
                                Note</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    @include('modules.leads.includes.modal', [
        'notesTypes' => $notesTypes,
    ])

    <div class="modal fade" id="editNoteModal" tabindex="-1" aria-labelledby="editNoteModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-md">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editNoteModalLabel">Edit Note</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="editNoteForm" action="{{ route('leads.updateNote') }}" method="POST">
                        @csrf
                        <input type="hidden" name="note_id" id="editNoteId">
                        <input type="hidden" name="lead_id" value="{{ $lead->id }}">

                        <div class="mb-3">
                            <div class="form-floating">
                                <textarea name="note" id="editNoteText" class="form-control" placeholder="Note" rows="10"></textarea>
                                <label for="editNoteText">Note</label>
                            </div>
                        </div>

                        <div class="mb-3">
                            <div class="select-wrapper position-relative">
                                <select name="type" id="editNoteType" class="form-select">
                                    @forelse ($notesTypes as $item)
                                        <option value="{{ $item->value }}">{{ $item->value }}</option>
                                    @empty
                                        <option value="">Note Types not found!</option>
                                    @endforelse
                                </select>
                                <label for="editNoteType" class="flotting-label">Type</label>
                            </div>
                        </div>

                        <div class="mb-3">
                            <div class="select-wrapper position-relative">
                                <select name="related_opportunity" class="form-select" id="editNoteOpportunity">
                                    <option value="">Select Opportunity</option>
                                    @forelse ($opportunities as $opportunity)
                                        <option value="{{ $opportunity->id }}">{{ $opportunity->opportunity_code }}
                                        </option>
                                    @empty
                                        <option value="">Opportunities not found!</option>
                                    @endforelse
                                </select>
                                <label for="editNoteOpportunity" class="flotting-label">Opportunity</label>
                            </div>
                        </div>

                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-primary btn-md">Update Note</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('page-specific-script')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.min.js"></script>

    <script src="{{ asset('assets/libs/summernote/summernote.min.js') }}"></script>

    <script>
        var relationships = @json($relationships);
        var genders = @json($genders);
        var languages = @json($languages);
        var states = @json($states);
        var countries = @json($countries);
        var medicaidLevels = @json($medicaidLevels);
        var enrollmentEligibilities = @json($enrollmentEligibilities);
        var passportCountries = @json($passportCountries);
        var orderStatuses = @json($otherStatuses);
        var immigrationStatuses = @json($immigrationStatuses);
        var legalStatuses = @json($legalStatuses);
        var opportunityUIAppendURL = '{{ route('leads.getOpportunitiesBlade') }}';
    </script>
    <script src="{{ asset('assets/js/lead-edit.js') }}"></script>
    <script>
        function updateCharacterCount() {
            const messageInput = document.getElementById('message');
            const characterCountLabel = document.getElementById('characterCount');
            const maxLength = 160;
            const currentLength = messageInput.value.length;
            const remainingCharacters = maxLength - currentLength;

            characterCountLabel.textContent = `(${remainingCharacters} characters remaining)`;

            // Disable further input if the limit is reached
            if (remainingCharacters <= 0) {
                messageInput.value = messageInput.value.substring(0, maxLength); // Trim to max length
            }
        }

        document.addEventListener('DOMContentLoaded', function() {
            $('#tags').tagsinput({
                trimValue: true,
                allowDuplicates: false
            });

            const searchInput = document.getElementById('searchNotes');
            const notesList = document.querySelector('.notes-list');

            searchInput.addEventListener('input', function() {
                const query = searchInput.value.trim();

                // Fetch search results from the server
                fetch('{{ route('leads.noteSearch') }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')
                                .getAttribute('content')
                        },
                        body: JSON.stringify({
                            query: query,
                            leadId: {{ $lead->id }}
                        })
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            // Update the notes list with the search results
                            notesList.innerHTML = data.notesHtml;
                        } else {
                            console.error('Error fetching notes');
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                    });
            });

            const containers = {
                dependents: document.getElementById('dependents-container'),
                policies: document.getElementById('policies-container'),
                notes: document.getElementById('notes-container')
            };

            // Add and Remove functionality for dependents, policies, and notes
            function handleTabAction(containerId, addClass, removeClass) {
                const container = containers[containerId];

                container.addEventListener('click', function(e) {
                    if (e.target.classList.contains(addClass)) {
                        e.preventDefault();
                        const template = document.querySelector(`.${containerId}-container .template`)
                            .cloneNode(true);
                        template.classList.remove('template', 'd-none');
                        container.appendChild(template);
                    }

                    if (e.target.classList.contains(removeClass)) {
                        e.preventDefault();
                        e.target.closest('.input-group').remove();
                        updateRemoveButtonVisibility(containerId);
                    }
                });

                function updateRemoveButtonVisibility(id) {
                    const inputGroups = containers[id].querySelectorAll('.input-group');
                    const removeButtons = containers[id].querySelectorAll(`.${removeClass}`);
                    removeButtons.forEach(button => button.classList.toggle('d-none', inputGroups.length <= 1));
                }

                // Initialize remove button visibility
                updateRemoveButtonVisibility(containerId);
            }

            // Initialize handlers for dependents, policies, and notes
            handleTabAction('dependents', 'add-dependent', 'remove-dependent');
            handleTabAction('policies', 'add-policy', 'remove-policy');
            handleTabAction('notes', 'add-note', 'remove-note');
        });

        $(document).ready(function() {
            // Function to update income fields
            function updateIncomeFields() {
                // Get values from inputs
                const annualIncome = parseFloat($('#annual_income').val()) || 0;
                const householdAnnualIncome = parseFloat($('#household_annual_income').val()) || 0;

                // Calculate monthly and weekly income
                const monthlyIncome = annualIncome / 12;
                const weeklyIncome = annualIncome / 52;

                const householdMonthlyIncome = householdAnnualIncome / 12;
                const householdWeeklyIncome = householdAnnualIncome / 52;

                // Update fields
                $('#monthly_income').val(monthlyIncome.toFixed(2));
                $('#weekly_income').val(weeklyIncome.toFixed(2));

                $('#household_monthly_income').val(householdMonthlyIncome.toFixed(2));
                $('#household_weekly_income').val(householdWeeklyIncome.toFixed(2));
            }

            // Attach event listeners to annual income fields using jQuery
            $(document).on('input', '#annual_income', updateIncomeFields);
            $(document).on('input', '#household_annual_income', updateIncomeFields);

            // Initial update
            updateIncomeFields();

            $('#country').on('change', function() {
                var selectedOption = $(this).find('option:selected');
                var countryCode = selectedOption.data('code');
                $('#country_code').val(countryCode);
            });

            $(document).on('change', '.address_same_as_contact', function() {
                var value = $(this).val();
                var key = $(this).find('option:selected').data('key');
                var $addressAccordion = $('#collapseThreeDependent-' + key).parent();

                if (value === '1') {
                    $addressAccordion.hide();
                } else {
                    $addressAccordion.show();
                }
            });

            function calculateAge(dob) {
                const today = new Date();
                const birthDate = new Date(dob);
                let age = today.getFullYear() - birthDate.getFullYear();
                const monthDifference = today.getMonth() - birthDate.getMonth();
                if (monthDifference < 0 || (monthDifference === 0 && today.getDate() < birthDate.getDate())) {
                    age--;
                }
                return age;
            }

            function updateAge(key) {
                var dobValue = $('#dob_dependent-' + key).val();
                console.log(dobValue);
                if (dobValue) {
                    $('#age_dependent-' + key).val(calculateAge(dobValue));
                }
            }

            // Initialize age calculation if DOB is already set
            // updateAge();

            // Update age when DOB changes
            $('.dob_dependent').on('change', function() {
                console.log('DOB changed');
                var key = $(this).data('key');
                updateAge(key);
            });


            function updateAgeOfContact() {
                const dobValue1 = $('#dob').val();
                if (dobValue1) {
                    $('#age').val(calculateAge(dobValue1));
                }
            }

            // Initialize age calculation if DOB is already set
            updateAgeOfContact();

            // Update age when DOB changes
            $('#dob').on('change', updateAgeOfContact);

            setTimeout(function() {
                const alerts = document.querySelectorAll('.alert');
                alerts.forEach(alert => {
                    if (alert.classList.contains('fade') && alert.classList.contains('show')) {
                        new bootstrap.Alert(alert).close();
                    }
                });
            }, 10000);


            $(document).on('click', '.update-note-start-icon', function() {
                const $starIcon = $(this);
                const noteId = $starIcon.data('note-id');
                const isFeatured = $starIcon.data('is-featured') === 1;
                const newFeaturedState = isFeatured ? 0 : 1;

                // Toggle the class
                if (newFeaturedState === 1) {
                    $starIcon.addClass('text-warning');
                } else {
                    $starIcon.removeClass('text-warning');
                }

                // Update the data-is-featured attribute
                $starIcon.data('is-featured', newFeaturedState);

                // Send AJAX request
                $.ajax({
                    url: '{{ route('leads.noteUpdateFeature') }}',
                    method: 'POST',
                    contentType: 'application/json',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: JSON.stringify({
                        id: noteId,
                        is_featured: newFeaturedState
                    }),
                    success: function(data) {
                        if (data.success) {
                            console.log('Note updated successfully');
                        } else {
                            console.error('Error updating note');
                            // Revert class change if the update fails
                            if (newFeaturedState === 1) {
                                $starIcon.removeClass('text-warning');
                            } else {
                                $starIcon.addClass('text-warning');
                            }
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error('Error:', error);
                        // Revert class change if there's an error
                        if (newFeaturedState === 1) {
                            $starIcon.removeClass('text-warning');
                        } else {
                            $starIcon.addClass('text-warning');
                        }
                    }
                });
            });

            $(document).on('click', '.edit-note-icon', function() {
                const $icon = $(this);
                const noteId = $icon.data('note-id');
                const noteType = $icon.data('note-type');
                const noteOpportunity = $icon.data('note-opportunity');
                const noteText = $icon.data('note-text');

                // Populate the modal fields
                $('#editNoteId').val(noteId);
                $('#editNoteText').val(noteText);
                $('#editNoteType').val(noteType);
                $('#editNoteOpportunity').val(noteOpportunity);

                // Show the modal
                var editNoteModal = new bootstrap.Modal(document.getElementById('editNoteModal'));
                editNoteModal.show();
            });

            // Handle the form submission
            $('#editNoteForm').on('submit', function(e) {
                e.preventDefault();

                // Gather form data
                const formData = $(this).serialize();

                // Send AJAX request
                $.ajax({
                    url: $(this).attr('action'),
                    method: 'POST',
                    data: formData,
                    success: function(response) {
                        if (response.success) {
                            console.log('Note updated successfully');
                            // Hide the modal
                            var editNoteModal = bootstrap.Modal.getInstance(document
                                .getElementById('editNoteModal'));
                            editNoteModal.hide();

                            location.reload();
                        } else {
                            console.error('Error updating note');
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error('Error:', error);
                    }
                });
            });

            $('.update-recording-star-icon').on('click', function() {
                const $icon = $(this);
                const recordingId = $icon.data('recording-id');
                const isFeatured = $icon.data('is-featured') === 1;
                const newFeaturedState = isFeatured ? 0 : 1;

                // Toggle the class
                $icon.toggleClass('text-warning', newFeaturedState === 1);

                // Update the data-is-featured attribute
                $icon.data('is-featured', newFeaturedState);

                // Send AJAX request
                $.ajax({
                    url: '{{ route('recordings.updateFeature') }}',
                    method: 'POST',
                    data: {
                        id: recordingId,
                        is_featured: newFeaturedState,
                        _token: $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        if (response.success) {
                            console.log('Recording updated successfully');
                        } else {
                            console.error('Error updating recording');
                            // Revert class change if the update fails
                            $icon.toggleClass('text-warning', isFeatured);
                        }
                    },
                    error: function() {
                        console.error('Error:', error);
                        // Revert class change if there's an error
                        $icon.toggleClass('text-warning', isFeatured);
                    }
                });
            });

            $('#searchRecording').on('input', function() {
                const query = $(this).val();

                $.ajax({
                    url: '{{ route('leads.recordingSearch') }}',
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: {
                        query: query,
                        leadId: {{ $lead->id }},
                    },
                    success: function(response) {
                        $('.recordings-list').html(response);
                    },
                    error: function(xhr) {
                        console.error('Error:', xhr);
                    }
                });
            });

            var activeTab = localStorage.getItem('activeTab');

            setTimeout(function() {
                $('#tabLoader').hide();
            }, 500);
            if (activeTab) {
                console.log('Active tab11:', activeTab);
                // Activate the stored tab
                $('#tabLoader').hide();
                $(`a.nav-link[href="${activeTab}"]`).tab('show');
            } else {
                // Show the first tab by default if no active tab is stored
                $('.nav-link:first').tab('show');
            }

            // Store the active tab in localStorage on click
            $('.nav-link').on('click', function() {
                const href = $(this).attr('href');
                localStorage.setItem('activeTab', href);

                // Show the loader before switching tabs
                $('#tabLoader').show();

                // Delay hiding the loader until the tab content is fully displayed
                setTimeout(function() {
                    $('#tabLoader').hide();
                }, 500); // Adjust the delay as needed (based on your tab content loading time)
            });

            // Optional: Hide the loader when a tab is shown and content is loaded
            // $('a.nav-link').on('shown.bs.tab', function () {
            //     $('#tabLoader').hide();  // Hide the loader once the tab content is shown
            // });

        });

        $(document).on('click', '.add-new-opportunity', function() {

            var countOfOpportunities = document.querySelectorAll('.opportunity-item').length;

            $.ajax({
                url: opportunityUIAppendURL, // Replace with your actual URL
                type: 'POST',
                data: {
                    count: countOfOpportunities
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    $('#opportunity-container').append(response.opportunitiesBlade);

                    // Find the newly added section
                    let $newSection = $('#opportunity-container').find('.opportunity-item').last();

                    if ($newSection.length) { // Check if the section was found
                        // Scroll to the newly added section
                        $('html, body').animate({
                            scrollTop: $newSection.offset().top
                        }, 1000); // Adjust the scroll duration as needed
                    } else {
                        console.error('New opportunity section not found.');
                    }
                },
                error: function(error) {
                    console.log(error);
                }
            });
        });

        // $(document).on('click', '.remove-opportunity', function() {
        //     $(this).closest('.opportunity-item').remove();
        // });


        $(document).on('click', '.add-more-benificary', function() {
            var countOfBenificiaries = document.querySelectorAll('.benificiaries-item').length;
            var index = $(this).data('index');

            $.ajax({
                url: '{{ route('leads.getBenificiariesBlade') }}', // Replace with your actual URL
                type: 'POST',
                data: {
                    count: countOfBenificiaries,
                    index: index
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    console.log(response);
                    $('#benificiaries-container-' + index).append(response.beneficiariesBlade);
                },
                error: function(error) {
                    console.log(error);
                }
            });
        });

        // $(document).on('click', '.remove-benificary', function() {
        //     $(this).closest('.benificiaries-item').remove();
        // });

        $(document).ready(function() {
            var opportunityToRemove, beneficiaryToRemove, opportunityId;

            var modalElement = $('#removeOpportunityModal');
            var modal = new bootstrap.Modal(modalElement[0]);

            var benificaryModalElement = $('#removeBeneficiaryModal');
            var benificaryModal = new bootstrap.Modal(benificaryModalElement[0]);

            $(document).on('click', '.remove-opportunity', function() {
                opportunityToRemove = $(this).closest('.opportunity-item');
                modal.show();
            });

            $('#confirmRemove').on('click', function() {
                if (opportunityToRemove) {
                    opportunityToRemove.remove();
                    modal.hide();
                }
            });

            modalElement.on('hidden.bs.modal', function() {
                opportunityToRemove = null;
            });

            $(document).on('click', '.remove-benificary', function() {
                console.log('remove-benificiary');
                beneficiaryToRemove = $(this).closest('.benificiaries-item');
                benificaryModal.show();
            });

            $('#confirmRemoveBeneficiary').on('click', function() {
                if (beneficiaryToRemove) {
                    beneficiaryToRemove.fadeOut(300, function() {
                        beneficiaryToRemove.remove();
                    });
                    benificaryModal.hide();
                    s
                }
            });

            $(document).on('click', 'button[data-opportunity_id]', function() {
                opportunityId = $(this).data('opportunity_id');
                $('#convertToPolicyModal').modal('show');
            });

            $('#confirmConvert').on('click', function() {
                if (opportunityId) {
                    $.ajax({
                        url: '{{ route('leads.opportunity.convertToPolicy') }}',
                        type: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                            opportunity_id: opportunityId
                        },
                        success: function(response) {
                            if (response.success) {
                                $('#successMessage').text(
                                    'Opportunity converted to policy successfully.');
                                $('#convertToPolicyModal').modal('hide');
                                $('#successMessageModal').modal('show');
                                // Optionally reload the page after a delay
                                setTimeout(function() {
                                    location.reload();
                                }, 2000);
                            } else {
                                $('#successMessage').text(
                                    'An error occurred while converting the opportunity to a policy.'
                                );
                                $('#convertToPolicyModal').modal('hide');
                                $('#successMessageModal').modal('show');
                            }
                        },
                        error: function(xhr) {
                            $('#successMessage').text(
                                'An error occurred while converting the opportunity to a policy.'
                            );
                            $('#convertToPolicyModal').modal('hide');
                            $('#successMessageModal').modal('show');
                        }
                    });
                }
            });

            $('#convertToPolicyModal').on('hidden.bs.modal', function() {
                opportunityId = null;
            });

            $(document).on('click', '.upload-document', function() {

                console.log('upload-document');


                $('#upload-document-form').submit();
            });

            $(document).on('click', '.submit-information', function() {
                $('#information-form').submit();
            });

            // disable right click


            // Check if APP_ENV is production and disable or enable accordingly
            @if (config('app.env') === 'production')
                $(document).on("contextmenu", function(e) {
                    e.preventDefault();
                });

                document.addEventListener('keyup', (e) => {
                    if (e.key == 'PrintScreen') {
                        navigator.clipboard.writeText('');
                        // alert('Screenshots disabled!');
                    }
                });

                // Disable certain key combinations
                $(document).on("keydown", function(e) {
                    // Prevent "Print Screen" key (keyCode 44)
                    if (e.keyCode === 44) {
                        e.preventDefault();

                        // Clear clipboard data
                        navigator.clipboard.writeText("");
                    }

                    // Prevent "Ctrl+P" (Print), "Ctrl+S" (Save), "Cmd+Shift+S" (Mac), "Ctrl+Shift+I" (Dev Tools), and "Ctrl+U" (View Source)
                    if ((e.ctrlKey && (e.key === "p" || e.key === "s" || e.key === "u" || (e.shiftKey && e
                            .key === "I"))) ||
                        (e.metaKey && e.shiftKey && e.key === "s") ||
                        (e.keyCode === 44 && e.key === "PrintScreen") ||
                        (e.keyCode === 91 && e.key === "PrintScreen")) {
                        e.preventDefault();
                    }

                    // Prevent "F12" (Developer Tools)
                    if (e.keyCode === 123) {
                        e.preventDefault();
                    }
                });
            @endif

            // opportunity form handled
            // Function to filter and populate plan types
            // function filterAndPopulatePlanTypes() {
            //     const selectedProduct = $('.product-dropdown').val();
            //     const selectedCarrier = $('.carrier-dropdown').val();
            //     const $planTypeDropdown = $('.plan-type-dropdown');

            //     // Clear the plan type dropdown
            //     $planTypeDropdown.empty().append('<option value="">Select plan type</option>'); // Start with empty option

            //     // Loop through plan types and filter based on selected carrier and product
            //     @foreach ($planTypes as $item)
            //         if ("{{ $item->master_carrier_id }}" == selectedCarrier && "{{ $item->master_product_id }}" == selectedProduct) {
            //             $planTypeDropdown.append('<option value="{{ $item->id }}">{{ $item->name }}</option>');
            //         }
            //     @endforeach

            //     // Reset plan type selection
            //     $planTypeDropdown.val('').change();

            //     // Check if all dropdowns have values
            //     if (selectedProduct && selectedCarrier && $planTypeDropdown.val()) {
            //         $('.new-opportunity-1').removeClass('some-class'); // Change 'some-class' to the class you want to remove
            //     } else {
            //         $('.new-opportunity-1').addClass('some-class'); // Add the class back if any dropdown is empty
            //     }
            // }

            // // Event listeners for dropdown changes
            // $('.product-dropdown, .carrier-dropdown').on('change', function() {
            //     filterAndPopulatePlanTypes();
            //     checkDropdowns(); // Check dropdowns on each change
            // });

            // $('.product-dropdown, .carrier-dropdown, .plan-type-dropdown').on('change', function() {
            //     checkDropdowns(); // Check dropdowns on each change
            // });

            // // Function to check if all dropdowns are filled
            // function checkDropdowns() {
            //     const selectedProduct = $('.product-dropdown').val();
            //     const selectedCarrier = $('.carrier-dropdown').val();
            //     const selectedPlanType = $('.plan-type-dropdown').val();

            //     if (selectedProduct && selectedCarrier && selectedPlanType) {
            //         $('.new-opportunity-1').removeClass('d-none');
            //     } else {
            //         $('.new-opportunity-1').addClass('d-none');
            //     }
            // }

            // $(document).on('change', '.product-dropdown', function() {
            //     var key = $(this).data('key');

            //     toggleOpportunityClass(key);
            // });

            // $(document).on('change', '.carrier-dropdown', function() {
            //     var key = $(this).data('key');

            //     filterAndPopulateProducts(key);
            // });

            // $(document).on('change', '.plan-type-dropdown', function() {
            //     var key = $(this).data('key');

            //    filterAndPopulateProducts(key);
            // });

            // function filterAndPopulateProducts($key) {
            //     var selectedCarrier = $(`.carrier-dropdown[data-key="${$key}"]`).val();
            //     var planTypeDropdown = $(`.product-dropdown[data-key="${$key}"]`);

            //     var $productTypeDropdown = $(`.product-dropdown[data-key="${$key}"]`);

            //     // Clear the product dropdown
            //     $productTypeDropdown.empty().append('');

            //     @foreach ($masterProducts as $item)
            //         if ("{{ $item->master_carrier_id }}" == selectedCarrier) {
            //             $productTypeDropdown.append('<option value="{{ $item->id }}">{{ $item->name }}</option>');
            //         }
            //     @endforeach

            //     // Reset product selection
            //     $productTypeDropdown.val('').change();

            //     // Toggle class based on selected values
            //     toggleOpportunityClass($key);

            // }


            // function filterAndPopulatePlanTypes($key) {
            //     var selectedProduct = $(`.product-dropdown[data-key="${$key}"]`).val();
            //     var selectedCarrier = $(`.carrier-dropdown[data-key="${$key}"]`).val();
            //     var $planTypeDropdown = $(`.plan-type-dropdown[data-key="${$key}"]`);

            //     // Clear the plan type dropdown
            //     $planTypeDropdown.empty().append('<option value="">Select plan type</option>');

            //     // Loop through plan types and filter based on selected carrier and product
            //     @foreach ($planTypes as $item)
            //         if ("{{ $item->master_carrier_id }}" == selectedCarrier && "{{ $item->master_product_id }}" == selectedProduct) {
            //             $planTypeDropdown.append('<option value="{{ $item->id }}">{{ $item->name }}</option>');
            //         }
            //     @endforeach

            //     // Reset plan type selection
            //     $planTypeDropdown.val('').change();

            //     // Toggle class based on selected values
            //     toggleOpportunityClass($key);
            // }

            // // Function to toggle class based on selection
            // function toggleOpportunityClass($key) {
            //     var selectedProduct = $(`.product-dropdown[data-key="${$key}"]`).val();
            //     var selectedCarrier = $(`.carrier-dropdown[data-key="${$key}"]`).val();
            //     var selectedPlanType = $(`.plan-type-dropdown[data-key="${$key}"]`).val();

            //     if (selectedProduct && selectedCarrier && selectedPlanType) {
            //         $(`.new-opportunity-${$key}`).removeClass('d-none'); // Replace 'some-class' with your class
            //     } else {
            //         $(`.new-opportunity-${$key}`).addClass('d-none'); // Replace 'some-class' with your class
            //     }
            // }



            $(document).on('change', '.plan-type-dropdown', function() {
                if ($(this).val() === 'Select plan') {
                    return;
                }
                var key = $(this).data('key');
                filterAndPopulateCarriers(key);
                resetProducts(key);
            });

            $(document).on('change', '.carrier-dropdown', function() {
                if ($(this).val() === 'Select carrier') {
                    return;
                }

                var key = $(this).data('key');

                filterAndPopulateProducts(key);
            });

            $(document).on('change', '.product-dropdown', function() {
                if ($(this).val() === 'Select product') {
                    return;
                }
                var key = $(this).data('key');
                toggleOpportunityClass(key);
            });

            function filterAndPopulatePlanTypes(key) {
                console.log(key);
                var selectedCarrier = $(`.carrier-dropdown[data-key="${key}"]`).val();
                var $planTypeDropdown = $(`.plan-type-dropdown[data-key="${key}"]`);

                $planTypeDropdown.empty().append('<option value="Select plan">Select plan</option>');

                @foreach ($masterInsurancePlanTypes as $item)
                    if ("{{ $item->id }}" == selectedCarrier) {
                        $planTypeDropdown.append(
                            `<option value="{{ $item->id }}">{{ $item->name }}</option>`);
                    }
                @endforeach

                $planTypeDropdown.val('').change();
            }

            function filterAndPopulateCarriers(key) {
                var selectedPlanType = $(`.plan-type-dropdown[data-key="${key}"]`).val();
                var selectedPlanTypesCarrierId = $(`.plan-type-dropdown[data-key="${key}"]`).find(':selected').data(
                    'master_carrier_id');
                console.log(selectedPlanTypesCarrierId);
                var $carrierDropdown = $(`.carrier-dropdown[data-key="${key}"]`);

                $carrierDropdown.empty().append('<option value="Select carrier">Select carrier</option>');

                @foreach ($masterCarriers as $item)
                    if ("{{ $item->id }}" == selectedPlanTypesCarrierId) {
                        $carrierDropdown.append(
                            `<option value="{{ $item->id }}">{{ $item->name }}</option>`);
                    }
                @endforeach

                $carrierDropdown.val('').change();
            }

            function filterAndPopulateProducts(key) {
                var selectedCarrier = $(`.carrier-dropdown[data-key="${key}"]`).val();
                var selectedPlanType = $(`.plan-type-dropdown[data-key="${key}"]`).val();
                var $productDropdown = $(`.product-dropdown[data-key="${key}"]`);

                $productDropdown.empty().append('<option value="Select product">Select product</option>');

                @foreach ($masterProducts as $item)
                    if ("{{ $item->master_carrier_id }}" == selectedCarrier && "{{ $item->master_plan_id }}" ==
                        selectedPlanType) {
                        $productDropdown.append(
                            `<option value="{{ $item->id }}">{{ $item->name }}</option>`);
                    }
                @endforeach

                $productDropdown.val('').change();
            }

            function resetProducts(key) {
                $(`.product-dropdown[data-key="${key}"]`).empty().append(
                    '<option value="Select product">Select product</option>').val('').change();
            }

            function toggleOpportunityClass(key) {
                var selectedPlanType = $(`.plan-type-dropdown[data-key="${key}"]`).val();
                var selectedCarrier = $(`.carrier-dropdown[data-key="${key}"]`).val();
                var selectedProduct = $(`.product-dropdown[data-key="${key}"]`).val();

                if (selectedPlanType && selectedCarrier && selectedProduct) {
                    $(`.new-opportunity-${key}`).removeClass('d-none');
                } else {
                    $(`.new-opportunity-${key}`).addClass('d-none');
                }
            }















            $(document).on('click', '.view-replpy-button', function() {
                // Hide the view email offcanvas
                var viewEmailOffcanvas = new bootstrap.Offcanvas(document.getElementById(
                    'offcanvasRightViewEmail'));
                viewEmailOffcanvas.hide();

                // Get the data attributes from the clicked button
                const fromEmail = $(this).data('from-email');
                const toEmail = $(this).data('to-email');
                const subject = $(this).data('subject');
                const body = $(this).data('body');

                // Populate the send email offcanvas fields
                $('#from_email').val(fromEmail);
                $('#to_email').val(toEmail);
                $('#subject').val(`Re: ${subject}`); // Prefix subject with 'Re:'
                $('.send-message').summernote('code', body); // Set body to Summernote editor

                // Show the send email offcanvas
                var sendEmailOffcanvas = new bootstrap.Offcanvas(document.getElementById(
                    'offcanvasRightSendEmail'));
                sendEmailOffcanvas.show();
            });


            // jQuery event for the reply button
            $(document).on('click', '.btn-reply', function() {
                // Reset the form first
                resetForm();

                // Get the data attributes from the clicked button
                const fromEmail = $(this).data('from-email');
                const toEmail = $(this).data('to-email');
                const subject = $(this).data('subject');
                const body = $(this).data('body');

                // Populate the modal fields with new data
                $('#from_email').val(fromEmail);
                $('#to_email').val(toEmail);

                // Populate subject if necessary
                if (subject) {
                    $('.subject-field').show();
                    $('#subject').val('Re: ' + subject);
                }

                // Set Summernote content dynamically for the message body (without the quoted message)
                $('.send-message').summernote('code', "<br><br>"); // Start with a clean slate

                // $('#emailBody').summernote('code', body);

                // Display quoted message below the editor (non-editable)
                $('#quotedMessage').html(body.replace(/\n/g,
                    '<br>')); // Show quoted message (but don't include it in the body)
            });

            // $(document).on('click', '.btn-view', function() {
            //     // Reset the form first
            //     resetForm();

            //     // Get the data attributes from the clicked button
            //     const fromEmail = $(this).data('from-email');
            //     const toEmail = $(this).data('to-email');
            //     const subject = $(this).data('subject');
            //     const body = $(this).data('body');
            //     const viewBody = $(this).data('view_body');
            //     const id = $(this).data('id');

            //     console.log(viewBody)

            //     const formattedBody = wrapQuotedSections(viewBody);

            //     // Populate the modal fields with new data
            //     $('#view-from_email').val(fromEmail);
            //     $('#view-to_email').val(toEmail);

            //     // Populate subject if necessary
            //     if (subject) {
            //         $('.view-subject-field').show();
            //         $('#view-subject').val(subject);
            //     }

            //     $('#view-emailBody').summernote('code', viewBody); // Use the correct class for your editor

            //     // Show the view email offcanvas
            //     $('.view-replay-button').attr({
            //         'data-bs-target': '#offcanvasRightSendEmail',
            //         'data-bs-toggle': 'offcanvas',
            //         'data-from-email': fromEmail,
            //         'data-to-email': toEmail,
            //         'data-subject': subject,
            //         'data-body': body,
            //         'data-id': id
            //     })

            //     $('#quotedMessage').html(body.replace(/\n/g, '<br>'));
            // });

            $(document).on('click', '.btn-view', function() {
                // Reset the form first
                resetForm();

                // Get the data attributes from the clicked button
                const fromEmail = $(this).data('from-email');
                const toEmail = $(this).data('to-email');
                const subject = $(this).data('subject');
                const body = $(this).data('body'); // Original plain text email message (not encoded)
                const viewBody = $(this).data('view_body');
                const id = $(this).data('id');

                // Apply formatting
                const formattedBody = wrapQuotedSections(viewBody);

                console.log(formattedBody);

                if (subject) {
                    $('.view-subject-field').show();
                    $('#view-subject').val(subject);
                }

                // Populate the Summernote editor with the formatted content
                $('#view-emailBody').summernote('code', formattedBody);

                // Configure the replay button with relevant data
                $('.view-replay-button').attr({
                    'data-bs-target': '#offcanvasRightSendEmail',
                    'data-bs-toggle': 'offcanvas',
                    'data-from-email': fromEmail,
                    'data-to-email': toEmail,
                    'data-subject': subject,
                    'data-body': body,
                    'data-id': id
                });

                // Optionally display the formatted message somewhere in the modal
                $('#quotedMessage').html(formattedBody);
            });

            function wrapQuotedSections(content) {
                if (typeof content !== 'string') {
                    console.warn('Content is undefined or not a string:', content);
                    return content;
                }

                const quotedPattern =
                    /(On\s[A-Za-z]{3,},\s[A-Za-z]{3,}\s\d{1,2},\s\d{4}\sat\s\d{1,2}:\d{2}\s(?:AM|PM)\s.*?)/g;
                const parts = content.split(quotedPattern);

                let formattedContent = '';
                let isQuote = false;

                parts.forEach(part => {
                    part = part.replace(/wrote:/g, 'wrote:<br><br>');

                    if (quotedPattern.test(part)) {
                        formattedContent += '<br>'; // Add a line break between parts
                        if (isQuote) {
                            formattedContent += '</blockquote>';
                        }
                        formattedContent +=
                            `<br><blockquote style="border-left: 2px solid #ccc; padding-left: 10px; margin-top: 10px; color: #555; background-color: #f9f9f9;">`;
                        isQuote = true;
                    }
                    formattedContent += part.replace(/\n/g, '<br>');
                });

                if (isQuote) {
                    formattedContent += '</blockquote>';
                }

                return formattedContent;
            }


            $(document).on('click', '.view-replay-button', function() {

                // Get the data attributes from the clicked button
                const fromEmail = $(this).data('from-email');
                const toEmail = $(this).data('to-email');
                const subject = $(this).data('subject');
                const body = $(this).data('body');
                const id = $(this).data('id');

                // Populate the modal fields with new data
                $('#from_email').val(fromEmail);
                $('#to_email').val(toEmail);
                $('#reply_id').val(id);

                // Populate subject if necessary
                if (subject) {
                    $('.subject-field').show();
                    $('#subject').val('Re: ' + subject);
                }

                // Set Summernote content dynamically for the message body (without the quoted message)
                $('.send-message').summernote('code', "<br><br>"); // Start with a clean slate

                // Display quoted message below the editor (non-editable)
                $('#quotedMessage').html(body.replace(/\n/g,
                    '<br>')); // Show quoted message (but don't include it in the body)
            });

            // Reset the form before opening for a new reply
            function resetForm() {
                // $('#from_email').val('');
                $('#email_template').val('');
                // $('#to_email').val('');
                $('#view-emailBody').val('');
                $('#subject').val('');
                $('.subject-field').hide(); // Hide subject field by default
                $('.send-message').summernote('code', ''); // Clear Summernote content
                $('#quotedMessage').html(''); // Clear the quoted message
                $('#reply_id').val('');
            }

            // Optionally, reset the form when the modal is closed
            $('#offcanvasRightSendEmail').on('hidden.bs.offcanvas', function() {
                resetForm();
            });

            init_summernote();
        });


        function init_summernote() {
            $('.send-message').summernote({
                height: 150,
                height: 300, // Set editor height
                toolbar: [
                    ['style', ['style']],
                    ['font', ['bold', 'italic', 'underline', 'clear']],
                    ['fontname', ['fontname']],
                    ['fontsize', ['fontsize']],
                    ['color', ['color']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['table', ['table']],
                    ['insert', ['link', 'picture', 'video']],
                    ['view', ['fullscreen']],
                    ['mybutton', ['selectOptions']] // Add the custom select button
                ],
            });

            const MAX_CHAR_LIMIT = 160; // Maximum characters allowed

            // Initialize Summernote editor
            $('.sms-content').summernote({
                height: 150, // Set the editor height
                toolbar: [],
                callbacks: {
                    // Trigger when the content of the Summernote editor changes
                    onChange: function(contents, $editable) {
                        updateCharCount(); // Update character count on content change
                    }
                }
            });

            // Update character count dynamically
            function updateCharCount() {
                const content = $('.sms-content').summernote('code'); // Get the HTML content of the editor
                const text = $(content).text(); // Strip HTML tags and get plain text
                const remainingChars = MAX_CHAR_LIMIT - text.length; // Calculate remaining characters

                const totalTypedChars = text.length; // Get the total typed characters

                // Update the remaining characters count on the page
                // $('#char-count').text(remainingChars + ' characters remaining');
                $('#char-count').text(`${totalTypedChars}/${MAX_CHAR_LIMIT}` + ' characters');

                // Optionally, change the color of the counter text when the limit is exceeded
                if (totalTypedChars > MAX_CHAR_LIMIT) {
                    // Prevent further input by listening to input events
                    $('.send-sms-btn').prop('disabled', true);
                    $('#char-count').css('color', 'red');
                } else {
                    // Allow typing if remaining characters are available
                    $('.send-sms-btn').prop('disabled', false);
                    $('#char-count').css('color', 'black');
                }
            }
        }



        // Email template data
        const leadData = {
            customer_name: "{!! $lead->fullName !!}",
            latest_policy_name: "{!! $lead->latestPolicyName !!}",
            latest_policy_carrier: "{!! $lead->latestPolicyCarrier !!}",
            product_name: "{!! $lead->latestPolicyProductName !!}",
            latest_policy_monthly_premium: "{!! $lead->latestPolicyMonthlyPremium !!}",
            latest_policy_annualized_premium: "{!! $lead->latestPolicyAnnualizedPremium !!}",
            policy_number: "{!! $lead->latestPolicyNumber !!}",
            phone_number: "{!! $settings['telnyx_sms_number'] ?? '' !!}",
            latest_policy_carrier_website: "{!! $lead->latestPolicyCarrierWebsite !!}",
            company_phone_number: "{!! $settings['contact_phone'] !!}",
            business_hours: "{!! $settings['business_hours'] ?? '' !!}",
            latest_policy_effective_date: "{!! $lead->latestPolicyEffectiveDate !!}",
            latest_policy_premium_due: "{!! $lead->latestPolicyPremiumDue !!}",
            assigned_agent_name: "{!! $lead->assignedTo->name ?? 'N/A' !!}",
            assigned_policy_agent_name: "{!! $lead->assignedTo->name ?? 'N/A' !!}",
        };

        // Function to replace placeholders with actual values
        function replacePlaceholders(template) {
            return template.replace(/@\{(\w+)\}/g, (match, key) => leadData[key] || match);
        }

        // Event listener for email template selection
        $('#email_template').on('change', function() {
            var selectedOption = $(this).find('option:selected');
            var subjectOption = selectedOption.data('subject');

            // Populate the subject and body if a template is selected
            if (selectedOption.val()) {
                $('#subject').val(replacePlaceholders(subjectOption));

                // Get the template body with placeholders
                let templateBody = selectedOption.data('body');

                // Replace placeholders in the body with actual values
                let populatedBody = replacePlaceholders(templateBody);

                // Update the Summernote editor with the new content
                $('.send-message').summernote('code', populatedBody);
            } else {
                // Clear the fields if no template is selected
                $('#subject').val('');
                $('.send-message').summernote('code', '');
            }
        });

        $('#sms_template').on('change', function() {
            var selectedOption = $(this).find('option:selected');

            if (selectedOption.val()) {
                let templateBody = selectedOption.data('content');
                let populatedBody = replacePlaceholders(templateBody);

                $('.sms-content').summernote('code', populatedBody);
            } else {
                $('.sms-content').summernote('code', '');
            }
        });
    </script>
@endsection