@extends('user.layout.default')

@section('styles')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.15/css/intlTelInput.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.15/js/intlTelInput.min.js"></script>

@endsection

@section('content')

<!-- // Navbar Top start // -->
<div class="navabar1">
    <nav class="navbar navbar-expand-lg">
        <div class="container-fluid">
            <h6 class="dashbod_title">My Contact</h6>
            @include('user.inc.navbar')

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


<!-- // Section-one-Dashboard // -->
<div class="stucture">
    <section class="Section-one-Dashboard Section-one-mycontact ">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12 ">
                    <!-- boxes-dashboard start -->
                    <div class="boxes-dashboard">
                        <!-- box-1 -->
                        <div class="leftside-mycontact">
                            <div class="col-12">
                                <div class="serch-container">
                                    <input class="form-control global-search contact_serch" type="search" id="searchContact" placeholder="Search Contacts" aria-label="Search">
                                    <img src="{{asset('assets/images/icons/search.svg')}}" alt="" class="search-icon">
                                </div>

                                <div class="btns">
                                    <button class="outerborder-btn-1 upload-contactlist-btn">
                                        <img src="{{asset('assets/images/icons/upload.svg')}}" alt="upload">
                                        Upload Contact List</button>

                                    <button class="outerborder-btn-1 add-contact" data-bs-toggle="modal" data-bs-target="#add-contact">
                                        <img src="{{asset('assets/images/icons/group_add.svg')}}" alt="add contact">
                                        Add Contact</button>

                                </div>
                            </div>

                            <div class="col-12">
                                <div class="all-contacts-btn">
                                    <li class="dropdown bx_filter">
                                        <a class="all-contact-btn dropdown-toggle" href="#" data-bs-toggle="dropdown" data-bs-auto-close="outside">All
                                            Contact</a>
                                        <ul class="dropdown-menu shadow">
                                            @if(isset($contact_type) && !empty($contact_type))
                                            @foreach ($contact_type as $contactTypeData)
                                            <li class="dropdow">
                                                <a href="#" class="dropdown-item dropdown-toggle" data-bs-toggle="dropdown">
                                                    <div class="d-flex justify-content-between align-items-center w-100">
                                                        <p> <img src="{{asset('assets/images/icons/p-1.svg')}}" alt="{{$contactTypeData->name}}" class="me-2">{{$contactTypeData->name}} </p>
                                                        <span><img src="{{asset('assets/images/icons/charm_menu.svg')}}" alt="charm menu"></span>
                                                    </div>
                                                </a>
                                                <ul class="dropdown-menu shadow rename-box">
                                                    <li>
                                                        <a class="dropdown-item rename-contact-type" data-bs-toggle="modal" data-bs-target="#rename_contact_type" data-contact-type-id="{{$contactTypeData->id}}" data-contact-type="{{$contactTypeData->name}}">
                                                            <p>
                                                                <img src="{{asset('assets/images/icons/ediT.svg')}}" alt="Prospects" class="me-2">Rename
                                                            </p>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a class="dropdown-item delete-contact-type" data-bs-toggle="modal" data-bs-target="#delete_contact_type" data-contact-id="{{$contactTypeData->id}}">
                                                            <p>
                                                                <img src="{{asset('assets/images/icons/d-box.svg')}}" alt="Prospects" class="me-2"> Delete
                                                            </p>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </li>
                                            @endforeach
                                            @endif
                                            <li class="dropdow">
                                                <a href="#" class="dropdown-item dropdown-toggle" data-bs-toggle="dropdown">
                                                    <div class="d-flex justify-content-between align-items-center w-100">
                                                        <p> <img src="{{asset('assets/images/icons/p-4.svg')}}" alt="Prospects" class="me-2">Add Custom</p>
                                                        <span><img src="{{asset('assets/images/icons/plus-black.svg')}}" alt="charm menu"></span>
                                                    </div>
                                                </a>
                                                <ul class="dropdown-menu shadow rename-box">
                                                    <li>
                                                        <div class="dropdown-item" style="display: flex; flex-direction:column;">

                                                            <form id="addContactType" method="POST" action="{{route('addContactType')}}">
                                                                @csrf
                                                                <div class="meet-fild mb-2">
                                                                    <input type="text" placeholder="Contact Type" class="input-fild" name="contact_type" id="contact_type">
                                                                </div>
                                                                <span class="error mt-0 mb-2" id="contact_type_error"></span>
                                                                <div class="color-picker-box">
                                                                    <input type="text" id="demo" name="color" value="#336699" />
                                                                </div>
                                                                <input type="submit" class="btn-add-new-task w-100 mt-3" value="Save" />
                                                            </form>
                                                        </div>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>

                                </div>

                                <div class="levelbtns">
                                    <button>Level 1</button>
                                    <button>Level 2</button>
                                    <button>Level 3</button>
                                    <button>All Levels</button>
                                </div>
                            </div>

                            <div class="recconect-page">
                                <div class="row">
                                    <div class="col-12 p-0">
                                        <!-- Boxes-container-1 -->
                                        @if(!empty($data) && isset($data))
                                        @foreach ($data as $contactData)
                                        <div class="Boxes-container-1 contact-search">
                                            <div class="box-1-workflow  search-list show-contact-details" data-contact-id="{{$contactData->id}}">
                                                <div class="left-side">
                                                    <div class="img-1">
                                                        <img src="{{asset('assets/images/dashboard/img-1-workflow.svg')}}" alt="">
                                                    </div>

                                                    <div class="name-workflow">
                                                        <p>{{$contactData->firstname}} {{$contactData->lastname}}</p>
                                                    </div>

                                                    <div class="level-workflow">
                                                        <img src="{{asset('assets/images/dashboard/level.svg')}}" alt="" class="level">
                                                        <span class="text-red1"> Level 3</span>
                                                    </div>

                                                    <p class="date1">
                                                        <img src="{{asset('assets/images/dashboard/date_range.svg')}}" alt="">
                                                        <span>09/11/22</span>
                                                    </p>

                                                    <div class="badge-workflow badge-workflow-gold">
                                                        <span class="badge rounded-pill" style="background-color: #F46D20;">{{$contactData->type}}</span>
                                                    </div>
                                                </div>

                                                <div class="right-side">
                                                    <div class="mark-completed" data-bs-toggle="modal" data-bs-target="#mark-completed-Reconnect">
                                                        <img src="{{asset('assets/images/dashboard/check-1.svg')}}" alt="">
                                                        <button>Mark completed</button>
                                                    </div>

                                                    <div class="delete" data-bs-toggle="modal" data-bs-target="#delete-popup_new-contact" data-contact-id="{{$contactData->id}}">
                                                        <img src="{{asset('assets/images/dashboard/delete.svg')}}" alt="">
                                                    </div>


                                                    <div class="angle-right">
                                                        <img src="{{asset('/assets/images/dashboard/angle-right.svg')}}" alt="">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        @endforeach
                                        @else
                                        <div class="no-data-container" style="border-radius: 6px;border: 0.5px solid rgba(0, 0, 0, 0.3);margin-bottom: 8px;">
                                            <div class="no-data-message" style="width: 100%;height: 50px;padding: 7px 10px 7px 10px;display: flex;justify-content: center;align-items:center">
                                                <p class="mt-1">Oops! It looks like there are no Contact records at the moment.</p>
                                            </div>
                                        </div>
                                        @endif
                                    </div>


                                </div>
                            </div>
                        </div>
                        <!-- End -->

                        <!-- box-2 -->
                        <div class="rightside-mycontact">
                            <ul class="nav nav-underline  mb-3" id="pills-tab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Recents</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">High Frequent</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Low Frequent</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="pills-Reconnects-tab" data-bs-toggle="pill" data-bs-target="#pills-Reconnects" type="button" role="tab" aria-controls="pills-Reconnects" aria-selected="false"> Reconnects
                                    </button>
                                </li>
                            </ul>
                            <div class="tab-content" id="pills-tabContent">
                                <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabindex="0">
                                    <div class="Boxes-container-1">
                                        <div class="box-1-workflow">
                                            <div class="left-side">
                                                <div class="img-1">
                                                    <img src="./assets/images/dashboard/img-1-workflow.svg" alt="">
                                                </div>
                                                <div>
                                                    <div class="name-workflow">
                                                        <p>Mark Edwards</p>
                                                    </div>
                                                    <div class="level-workflow">
                                                        <img src="./assets/images/dashboard/level.svg" alt="" class="level">
                                                        <span> Level 1</span>
                                                        <span class="date1"><img src="./assets/images/dashboard/date_range.svg" alt="">
                                                            <span>09/11/22</span></span>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="Boxes-container-1">
                                        <div class="box-1-workflow active">
                                            <div class="left-side">
                                                <div class="img-1">
                                                    <img src="./assets/images/dashboard/img-1-workflow.svg" alt="">
                                                </div>
                                                <div>
                                                    <div class="name-workflow">
                                                        <p>Mark Edwards</p>
                                                    </div>
                                                    <div class="level-workflow">
                                                        <img src="./assets/images/dashboard/level.svg" alt="" class="level">
                                                        <span> Level 1</span>
                                                        <span class="date1"><img src="./assets/images/dashboard/date_range.svg" alt="">
                                                            <span>09/11/22</span></span>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="Boxes-container-1">
                                        <div class="box-1-workflow">
                                            <div class="left-side">
                                                <div class="img-1">
                                                    <img src="./assets/images/dashboard/img-1-workflow.svg" alt="">
                                                </div>
                                                <div>
                                                    <div class="name-workflow">
                                                        <p>Mark Edwards</p>
                                                    </div>
                                                    <div class="level-workflow">
                                                        <img src="./assets/images/dashboard/level.svg" alt="" class="level">
                                                        <span> Level 1</span>
                                                        <span class="date1"><img src="./assets/images/dashboard/date_range.svg" alt="">
                                                            <span>09/11/22</span></span>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="Boxes-container-1">
                                        <div class="box-1-workflow">
                                            <div class="left-side">
                                                <div class="img-1">
                                                    <img src="./assets/images/dashboard/img-1-workflow.svg" alt="">
                                                </div>
                                                <div>
                                                    <div class="name-workflow">
                                                        <p>Mark Edwards</p>
                                                    </div>
                                                    <div class="level-workflow">
                                                        <img src="./assets/images/dashboard/level.svg" alt="" class="level">
                                                        <span> Level 1</span>
                                                        <span class="date1"><img src="./assets/images/dashboard/date_range.svg" alt="">
                                                            <span>09/11/22</span></span>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="Boxes-container-1">
                                        <div class="box-1-workflow">
                                            <div class="left-side">
                                                <div class="img-1">
                                                    <img src="./assets/images/dashboard/img-1-workflow.svg" alt="">
                                                </div>
                                                <div>
                                                    <div class="name-workflow">
                                                        <p>Mark Edwards</p>
                                                    </div>
                                                    <div class="level-workflow">
                                                        <img src="./assets/images/dashboard/level.svg" alt="" class="level">
                                                        <span> Level 1</span>
                                                        <span class="date1"><img src="./assets/images/dashboard/date_range.svg" alt="">
                                                            <span>09/11/22</span></span>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="Boxes-container-1">
                                        <div class="box-1-workflow">
                                            <div class="left-side">
                                                <div class="img-1">
                                                    <img src="./assets/images/dashboard/img-1-workflow.svg" alt="">
                                                </div>
                                                <div>
                                                    <div class="name-workflow">
                                                        <p>Mark Edwards</p>
                                                    </div>
                                                    <div class="level-workflow">
                                                        <img src="./assets/images/dashboard/level.svg" alt="" class="level">
                                                        <span> Level 1</span>
                                                        <span class="date1"><img src="./assets/images/dashboard/date_range.svg" alt="">
                                                            <span>09/11/22</span></span>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="Boxes-container-1">
                                        <div class="box-1-workflow">
                                            <div class="left-side">
                                                <div class="img-1">
                                                    <img src="./assets/images/dashboard/img-1-workflow.svg" alt="">
                                                </div>
                                                <div>
                                                    <div class="name-workflow">
                                                        <p>Mark Edwards</p>
                                                    </div>
                                                    <div class="level-workflow">
                                                        <img src="./assets/images/dashboard/level.svg" alt="" class="level">
                                                        <span> Level 1</span>
                                                        <span class="date1"><img src="./assets/images/dashboard/date_range.svg" alt="">
                                                            <span>09/11/22</span></span>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="Boxes-container-1">
                                        <div class="box-1-workflow">
                                            <div class="left-side">
                                                <div class="img-1">
                                                    <img src="./assets/images/dashboard/img-1-workflow.svg" alt="">
                                                </div>
                                                <div>
                                                    <div class="name-workflow">
                                                        <p>Mark Edwards</p>
                                                    </div>
                                                    <div class="level-workflow">
                                                        <img src="./assets/images/dashboard/level.svg" alt="" class="level">
                                                        <span> Level 1</span>
                                                        <span class="date1"><img src="./assets/images/dashboard/date_range.svg" alt="">
                                                            <span>09/11/22</span></span>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="Boxes-container-1">
                                        <div class="box-1-workflow">
                                            <div class="left-side">
                                                <div class="img-1">
                                                    <img src="./assets/images/dashboard/img-1-workflow.svg" alt="">
                                                </div>
                                                <div>
                                                    <div class="name-workflow">
                                                        <p>Mark Edwards</p>
                                                    </div>
                                                    <div class="level-workflow">
                                                        <img src="./assets/images/dashboard/level.svg" alt="" class="level">
                                                        <span> Level 1</span>
                                                        <span class="date1"><img src="./assets/images/dashboard/date_range.svg" alt="">
                                                            <span>09/11/22</span></span>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">
                                    <div class="Boxes-container-1">
                                        <div class="box-1-workflow">
                                            <div class="left-side">
                                                <div class="img-1">
                                                    <img src="./assets/images/dashboard/img-1-workflow.svg" alt="">
                                                </div>
                                                <div>
                                                    <div class="name-workflow">
                                                        <p>Mark Edwards</p>
                                                    </div>
                                                    <div class="level-workflow">
                                                        <img src="./assets/images/dashboard/level.svg" alt="" class="level">
                                                        <span> Level 1</span>
                                                        <span class="date1"><img src="./assets/images/dashboard/date_range.svg" alt="">
                                                            <span>09/11/22</span></span>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="Boxes-container-1">
                                        <div class="box-1-workflow active">
                                            <div class="left-side">
                                                <div class="img-1">
                                                    <img src="./assets/images/dashboard/img-1-workflow.svg" alt="">
                                                </div>
                                                <div>
                                                    <div class="name-workflow">
                                                        <p>Mark Edwards</p>
                                                    </div>
                                                    <div class="level-workflow">
                                                        <img src="./assets/images/dashboard/level.svg" alt="" class="level">
                                                        <span> Level 1</span>
                                                        <span class="date1"><img src="./assets/images/dashboard/date_range.svg" alt="">
                                                            <span>09/11/22</span></span>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="Boxes-container-1">
                                        <div class="box-1-workflow">
                                            <div class="left-side">
                                                <div class="img-1">
                                                    <img src="./assets/images/dashboard/img-1-workflow.svg" alt="">
                                                </div>
                                                <div>
                                                    <div class="name-workflow">
                                                        <p>Mark Edwards</p>
                                                    </div>
                                                    <div class="level-workflow">
                                                        <img src="./assets/images/dashboard/level.svg" alt="" class="level">
                                                        <span> Level 1</span>
                                                        <span class="date1"><img src="./assets/images/dashboard/date_range.svg" alt="">
                                                            <span>09/11/22</span></span>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="Boxes-container-1">
                                        <div class="box-1-workflow">
                                            <div class="left-side">
                                                <div class="img-1">
                                                    <img src="./assets/images/dashboard/img-1-workflow.svg" alt="">
                                                </div>
                                                <div>
                                                    <div class="name-workflow">
                                                        <p>Mark Edwards</p>
                                                    </div>
                                                    <div class="level-workflow">
                                                        <img src="./assets/images/dashboard/level.svg" alt="" class="level">
                                                        <span> Level 1</span>
                                                        <span class="date1"><img src="./assets/images/dashboard/date_range.svg" alt="">
                                                            <span>09/11/22</span></span>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="Boxes-container-1">
                                        <div class="box-1-workflow">
                                            <div class="left-side">
                                                <div class="img-1">
                                                    <img src="./assets/images/dashboard/img-1-workflow.svg" alt="">
                                                </div>
                                                <div>
                                                    <div class="name-workflow">
                                                        <p>Mark Edwards</p>
                                                    </div>
                                                    <div class="level-workflow">
                                                        <img src="./assets/images/dashboard/level.svg" alt="" class="level">
                                                        <span> Level 1</span>
                                                        <span class="date1"><img src="./assets/images/dashboard/date_range.svg" alt="">
                                                            <span>09/11/22</span></span>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="Boxes-container-1">
                                        <div class="box-1-workflow">
                                            <div class="left-side">
                                                <div class="img-1">
                                                    <img src="./assets/images/dashboard/img-1-workflow.svg" alt="">
                                                </div>
                                                <div>
                                                    <div class="name-workflow">
                                                        <p>Mark Edwards</p>
                                                    </div>
                                                    <div class="level-workflow">
                                                        <img src="./assets/images/dashboard/level.svg" alt="" class="level">
                                                        <span> Level 1</span>
                                                        <span class="date1"><img src="./assets/images/dashboard/date_range.svg" alt="">
                                                            <span>09/11/22</span></span>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="Boxes-container-1">
                                        <div class="box-1-workflow">
                                            <div class="left-side">
                                                <div class="img-1">
                                                    <img src="./assets/images/dashboard/img-1-workflow.svg" alt="">
                                                </div>
                                                <div>
                                                    <div class="name-workflow">
                                                        <p>Mark Edwards</p>
                                                    </div>
                                                    <div class="level-workflow">
                                                        <img src="./assets/images/dashboard/level.svg" alt="" class="level">
                                                        <span> Level 1</span>
                                                        <span class="date1"><img src="./assets/images/dashboard/date_range.svg" alt="">
                                                            <span>09/11/22</span></span>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="Boxes-container-1">
                                        <div class="box-1-workflow">
                                            <div class="left-side">
                                                <div class="img-1">
                                                    <img src="./assets/images/dashboard/img-1-workflow.svg" alt="">
                                                </div>
                                                <div>
                                                    <div class="name-workflow">
                                                        <p>Mark Edwards</p>
                                                    </div>
                                                    <div class="level-workflow">
                                                        <img src="./assets/images/dashboard/level.svg" alt="" class="level">
                                                        <span> Level 1</span>
                                                        <span class="date1"><img src="./assets/images/dashboard/date_range.svg" alt="">
                                                            <span>09/11/22</span></span>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="Boxes-container-1">
                                        <div class="box-1-workflow">
                                            <div class="left-side">
                                                <div class="img-1">
                                                    <img src="./assets/images/dashboard/img-1-workflow.svg" alt="">
                                                </div>
                                                <div>
                                                    <div class="name-workflow">
                                                        <p>Mark Edwards</p>
                                                    </div>
                                                    <div class="level-workflow">
                                                        <img src="./assets/images/dashboard/level.svg" alt="" class="level">
                                                        <span> Level 1</span>
                                                        <span class="date1"><img src="./assets/images/dashboard/date_range.svg" alt="">
                                                            <span>09/11/22</span></span>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">
                                    <div class="Boxes-container-1">
                                        <div class="box-1-workflow">
                                            <div class="left-side">
                                                <div class="img-1">
                                                    <img src="./assets/images/dashboard/img-1-workflow.svg" alt="">
                                                </div>
                                                <div>
                                                    <div class="name-workflow">
                                                        <p>Mark Edwards</p>
                                                    </div>
                                                    <div class="level-workflow">
                                                        <img src="./assets/images/dashboard/level.svg" alt="" class="level">
                                                        <span> Level 1</span>
                                                        <span class="date1"><img src="./assets/images/dashboard/date_range.svg" alt="">
                                                            <span>09/11/22</span></span>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="Boxes-container-1">
                                        <div class="box-1-workflow active">
                                            <div class="left-side">
                                                <div class="img-1">
                                                    <img src="./assets/images/dashboard/img-1-workflow.svg" alt="">
                                                </div>
                                                <div>
                                                    <div class="name-workflow">
                                                        <p>Mark Edwards</p>
                                                    </div>
                                                    <div class="level-workflow">
                                                        <img src="./assets/images/dashboard/level.svg" alt="" class="level">
                                                        <span> Level 1</span>
                                                        <span class="date1"><img src="./assets/images/dashboard/date_range.svg" alt="">
                                                            <span>09/11/22</span></span>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="Boxes-container-1">
                                        <div class="box-1-workflow">
                                            <div class="left-side">
                                                <div class="img-1">
                                                    <img src="./assets/images/dashboard/img-1-workflow.svg" alt="">
                                                </div>
                                                <div>
                                                    <div class="name-workflow">
                                                        <p>Mark Edwards</p>
                                                    </div>
                                                    <div class="level-workflow">
                                                        <img src="./assets/images/dashboard/level.svg" alt="" class="level">
                                                        <span> Level 1</span>
                                                        <span class="date1"><img src="./assets/images/dashboard/date_range.svg" alt="">
                                                            <span>09/11/22</span></span>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="Boxes-container-1">
                                        <div class="box-1-workflow">
                                            <div class="left-side">
                                                <div class="img-1">
                                                    <img src="./assets/images/dashboard/img-1-workflow.svg" alt="">
                                                </div>
                                                <div>
                                                    <div class="name-workflow">
                                                        <p>Mark Edwards</p>
                                                    </div>
                                                    <div class="level-workflow">
                                                        <img src="./assets/images/dashboard/level.svg" alt="" class="level">
                                                        <span> Level 1</span>
                                                        <span class="date1"><img src="./assets/images/dashboard/date_range.svg" alt="">
                                                            <span>09/11/22</span></span>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="Boxes-container-1">
                                        <div class="box-1-workflow">
                                            <div class="left-side">
                                                <div class="img-1">
                                                    <img src="./assets/images/dashboard/img-1-workflow.svg" alt="">
                                                </div>
                                                <div>
                                                    <div class="name-workflow">
                                                        <p>Mark Edwards</p>
                                                    </div>
                                                    <div class="level-workflow">
                                                        <img src="./assets/images/dashboard/level.svg" alt="" class="level">
                                                        <span> Level 1</span>
                                                        <span class="date1"><img src="./assets/images/dashboard/date_range.svg" alt="">
                                                            <span>09/11/22</span></span>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="Boxes-container-1">
                                        <div class="box-1-workflow">
                                            <div class="left-side">
                                                <div class="img-1">
                                                    <img src="./assets/images/dashboard/img-1-workflow.svg" alt="">
                                                </div>
                                                <div>
                                                    <div class="name-workflow">
                                                        <p>Mark Edwards</p>
                                                    </div>
                                                    <div class="level-workflow">
                                                        <img src="./assets/images/dashboard/level.svg" alt="" class="level">
                                                        <span> Level 1</span>
                                                        <span class="date1"><img src="./assets/images/dashboard/date_range.svg" alt="">
                                                            <span>09/11/22</span></span>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="Boxes-container-1">
                                        <div class="box-1-workflow">
                                            <div class="left-side">
                                                <div class="img-1">
                                                    <img src="./assets/images/dashboard/img-1-workflow.svg" alt="">
                                                </div>
                                                <div>
                                                    <div class="name-workflow">
                                                        <p>Mark Edwards</p>
                                                    </div>
                                                    <div class="level-workflow">
                                                        <img src="./assets/images/dashboard/level.svg" alt="" class="level">
                                                        <span> Level 1</span>
                                                        <span class="date1"><img src="./assets/images/dashboard/date_range.svg" alt="">
                                                            <span>09/11/22</span></span>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="Boxes-container-1">
                                        <div class="box-1-workflow">
                                            <div class="left-side">
                                                <div class="img-1">
                                                    <img src="./assets/images/dashboard/img-1-workflow.svg" alt="">
                                                </div>
                                                <div>
                                                    <div class="name-workflow">
                                                        <p>Mark Edwards</p>
                                                    </div>
                                                    <div class="level-workflow">
                                                        <img src="./assets/images/dashboard/level.svg" alt="" class="level">
                                                        <span> Level 1</span>
                                                        <span class="date1"><img src="./assets/images/dashboard/date_range.svg" alt="">
                                                            <span>09/11/22</span></span>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="Boxes-container-1">
                                        <div class="box-1-workflow">
                                            <div class="left-side">
                                                <div class="img-1">
                                                    <img src="./assets/images/dashboard/img-1-workflow.svg" alt="">
                                                </div>
                                                <div>
                                                    <div class="name-workflow">
                                                        <p>Mark Edwards</p>
                                                    </div>
                                                    <div class="level-workflow">
                                                        <img src="./assets/images/dashboard/level.svg" alt="" class="level">
                                                        <span> Level 1</span>
                                                        <span class="date1"><img src="./assets/images/dashboard/date_range.svg" alt="">
                                                            <span>09/11/22</span></span>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="pills-Reconnects" role="tabpanel" aria-labelledby="pills-Reconnects-tab" tabindex="0">
                                    <div class="Boxes-container-1">
                                        <div class="box-1-workflow">
                                            <div class="left-side">
                                                <div class="img-1">
                                                    <img src="./assets/images/dashboard/img-1-workflow.svg" alt="">
                                                </div>
                                                <div>
                                                    <div class="name-workflow">
                                                        <p>Mark Edwards</p>
                                                    </div>
                                                    <div class="level-workflow">
                                                        <img src="./assets/images/dashboard/level.svg" alt="" class="level">
                                                        <span> Level 1</span>
                                                        <span class="date1"><img src="./assets/images/dashboard/date_range.svg" alt="">
                                                            <span>09/11/22</span></span>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="Boxes-container-1">
                                        <div class="box-1-workflow active">
                                            <div class="left-side">
                                                <div class="img-1">
                                                    <img src="./assets/images/dashboard/img-1-workflow.svg" alt="">
                                                </div>
                                                <div>
                                                    <div class="name-workflow">
                                                        <p>Mark Edwards</p>
                                                    </div>
                                                    <div class="level-workflow">
                                                        <img src="./assets/images/dashboard/level.svg" alt="" class="level">
                                                        <span> Level 1</span>
                                                        <span class="date1"><img src="./assets/images/dashboard/date_range.svg" alt="">
                                                            <span>09/11/22</span></span>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="Boxes-container-1">
                                        <div class="box-1-workflow">
                                            <div class="left-side">
                                                <div class="img-1">
                                                    <img src="./assets/images/dashboard/img-1-workflow.svg" alt="">
                                                </div>
                                                <div>
                                                    <div class="name-workflow">
                                                        <p>Mark Edwards</p>
                                                    </div>
                                                    <div class="level-workflow">
                                                        <img src="./assets/images/dashboard/level.svg" alt="" class="level">
                                                        <span> Level 1</span>
                                                        <span class="date1"><img src="./assets/images/dashboard/date_range.svg" alt="">
                                                            <span>09/11/22</span></span>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="Boxes-container-1">
                                        <div class="box-1-workflow">
                                            <div class="left-side">
                                                <div class="img-1">
                                                    <img src="./assets/images/dashboard/img-1-workflow.svg" alt="">
                                                </div>
                                                <div>
                                                    <div class="name-workflow">
                                                        <p>Mark Edwards</p>
                                                    </div>
                                                    <div class="level-workflow">
                                                        <img src="./assets/images/dashboard/level.svg" alt="" class="level">
                                                        <span> Level 1</span>
                                                        <span class="date1"><img src="./assets/images/dashboard/date_range.svg" alt="">
                                                            <span>09/11/22</span></span>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="Boxes-container-1">
                                        <div class="box-1-workflow">
                                            <div class="left-side">
                                                <div class="img-1">
                                                    <img src="./assets/images/dashboard/img-1-workflow.svg" alt="">
                                                </div>
                                                <div>
                                                    <div class="name-workflow">
                                                        <p>Mark Edwards</p>
                                                    </div>
                                                    <div class="level-workflow">
                                                        <img src="./assets/images/dashboard/level.svg" alt="" class="level">
                                                        <span> Level 1</span>
                                                        <span class="date1"><img src="./assets/images/dashboard/date_range.svg" alt="">
                                                            <span>09/11/22</span></span>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="Boxes-container-1">
                                        <div class="box-1-workflow">
                                            <div class="left-side">
                                                <div class="img-1">
                                                    <img src="./assets/images/dashboard/img-1-workflow.svg" alt="">
                                                </div>
                                                <div>
                                                    <div class="name-workflow">
                                                        <p>Mark Edwards</p>
                                                    </div>
                                                    <div class="level-workflow">
                                                        <img src="./assets/images/dashboard/level.svg" alt="" class="level">
                                                        <span> Level 1</span>
                                                        <span class="date1"><img src="./assets/images/dashboard/date_range.svg" alt="">
                                                            <span>09/11/22</span></span>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="Boxes-container-1">
                                        <div class="box-1-workflow">
                                            <div class="left-side">
                                                <div class="img-1">
                                                    <img src="./assets/images/dashboard/img-1-workflow.svg" alt="">
                                                </div>
                                                <div>
                                                    <div class="name-workflow">
                                                        <p>Mark Edwards</p>
                                                    </div>
                                                    <div class="level-workflow">
                                                        <img src="./assets/images/dashboard/level.svg" alt="" class="level">
                                                        <span> Level 1</span>
                                                        <span class="date1"><img src="./assets/images/dashboard/date_range.svg" alt="">
                                                            <span>09/11/22</span></span>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="Boxes-container-1">
                                        <div class="box-1-workflow">
                                            <div class="left-side">
                                                <div class="img-1">
                                                    <img src="./assets/images/dashboard/img-1-workflow.svg" alt="">
                                                </div>
                                                <div>
                                                    <div class="name-workflow">
                                                        <p>Mark Edwards</p>
                                                    </div>
                                                    <div class="level-workflow">
                                                        <img src="./assets/images/dashboard/level.svg" alt="" class="level">
                                                        <span> Level 1</span>
                                                        <span class="date1"><img src="./assets/images/dashboard/date_range.svg" alt="">
                                                            <span>09/11/22</span></span>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="Boxes-container-1">
                                        <div class="box-1-workflow">
                                            <div class="left-side">
                                                <div class="img-1">
                                                    <img src="./assets/images/dashboard/img-1-workflow.svg" alt="">
                                                </div>
                                                <div>
                                                    <div class="name-workflow">
                                                        <p>Mark Edwards</p>
                                                    </div>
                                                    <div class="level-workflow">
                                                        <img src="./assets/images/dashboard/level.svg" alt="" class="level">
                                                        <span> Level 1</span>
                                                        <span class="date1"><img src="./assets/images/dashboard/date_range.svg" alt="">
                                                            <span>09/11/22</span></span>

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

                            </div>
                        </div>
                        <!-- End -->
                    </div>
                    <!-- boxes-dashboard End -->
                </div>
            </div>
        </div>
    </section>
</div>


<!-- Modal client-Dashboard -->
<div class="client-info">
    <div class="modal fade" id="client-1" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-12">
                            <div class="client-info-box1">
                                <div class="img-information-container">
                                    <img src="./assets/images/dashboard/client-info.svg" alt="">
                                </div>

                                <p class="client-name">Bessie Cooper</p>
                            </div>

                            <div class="client-pages">
                                <ul class="nav nav-pills" id="pills-tab" role="tablist">
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#info-client-1" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Information</button>
                                    </li>

                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#client-connected" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Connected</button>
                                    </li>

                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#followup-client" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Follow
                                            Up</button>
                                    </li>

                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#meeting-client" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Meeting</button>
                                    </li>

                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#contact-log-client" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact
                                            Log</button>
                                    </li>

                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#notes-client" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Notes</button>
                                    </li>
                                </ul>

                                <div class="tab-content" id="pills-tabContent">
                                    <div class="tab-pane fade show active" id="info-client-1" role="tabpanel" aria-labelledby="pills-home-tab" tabindex="0">
                                        <!-- Client Page -->
                                        <div class="form client-data-1">
                                            <div class="row">
                                                <div class="col-sm-6 col-12">
                                                    <label for="html">First Name</label><br>
                                                    <input type="text" value="" placeholder="Bessie">
                                                </div>

                                                <div class="col-sm-6 col-12">
                                                    <label for="html">Last Name</label><br>
                                                    <input type="text" value="" placeholder="Cooper">
                                                </div>

                                                <div class="col-sm-6 col-12">
                                                    <label for="html">Company Name</label><br>
                                                    <input type="text" value="" placeholder="Sed pellentesque">
                                                </div>

                                                <div class="col-sm-6 col-12">
                                                    <label for="html">Contact Type</label><br>
                                                    <input type="text" value="" placeholder="Client">
                                                </div>

                                                <div class="col-sm-6 col-12">
                                                    <label for="html">Email Address</label><br>
                                                    <input type="text" value="" placeholder="bessiecopper@gmail.com">
                                                </div>

                                                <div class="col-sm-6 col-12">
                                                    <label for="html">Alternate Email
                                                        Address</label><br>
                                                    <input type="text" value="" placeholder="bessiecopper@gmail.com">
                                                </div>

                                                <div class="col-12">
                                                    <label for="html">Physical Address</label><br>
                                                    <input type="text" value="" placeholder="3517 W. Gray St. Utica, Pennsylvania 57867">
                                                </div>

                                                <div class="col-sm-6 col-12">
                                                    <label for="html">Phone Number</label><br>
                                                    <input type="text" value="" placeholder="+97 2689563655">
                                                </div>

                                                <div class="col-sm-6 col-12">
                                                    <label for="html">Additional Phone
                                                        Number</label><br>
                                                    <input type="text" value="" placeholder="+97 2689563655">
                                                </div>

                                                <div class="col-sm-6 col-12">
                                                    <label for="html">Preferred Contact
                                                        Method</label><br>
                                                    <input type="text" value="" placeholder="bessiecopper@gmail.com">
                                                </div>

                                                <div class="col-sm-6 col-12">
                                                    <label for="html">Social Links</label><br>

                                                    <div class="social-links1">
                                                        <div class="social-link-imgs-fb">
                                                            <a href="">
                                                                <img src="./assets/images/dashboard/fb-icon.svg" alt="">
                                                            </a>
                                                        </div>

                                                        <div class="social-link-imgs-fb">
                                                            <a href="">
                                                                <img src="./assets/images/dashboard/fb-icon.svg" alt="">
                                                            </a>
                                                        </div>

                                                        <div class="social-link-imgs-fb">
                                                            <a href="">
                                                                <img src="./assets/images/dashboard/fb-icon.svg" alt="">
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-6">
                                                    <label for="html">Language</label><br>
                                                    <input type="text" value="" placeholder="US">
                                                </div>

                                                <div class="col-6">
                                                    <label for="html">Time Zone</label><br>
                                                    <input type="text" value="" placeholder="Every Months ">
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-12">
                                                    <div class="btn-information-footer">
                                                        <button type="button" class="btn btn-secondary edit-btn" data-bs-dismiss="modal">
                                                            <img src="./assets/images/dashboard/edit.svg" alt="" class="edit-img">
                                                            Edit</button>
                                                        <button type="button" class="btn btn-primary save-contact">Save
                                                            Contact</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="tab-pane fade" id="client-connected" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">
                                        <!-- Connected Page -->
                                        <div class="connected-page">
                                            <div class="row">
                                                <div class="col-12">
                                                    <div class="connect-plateform">
                                                        <p>Connect platforms</p>
                                                        <img src="./assets/images/dashboard/tootip-2.svg" alt="" class="tootip-2">
                                                    </div>
                                                </div>

                                                <div class="col-12">
                                                    <div class="social-links-1">
                                                        <div class="button outlinebtn">
                                                            <img src="./assets/images/dashboard/messanger.svg" alt="" class="messanger">
                                                            Messager
                                                        </div>

                                                        <div class="button outlinebtn">
                                                            <img src="./assets/images/dashboard/insta.svg" alt="" class="insta">
                                                            Messager
                                                        </div>

                                                        <div class="button outlinebtn">
                                                            <img src="./assets/images/dashboard/add.svg" alt="" class="add">
                                                            Messager
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-sm-6 col-12">
                                                    <label for="html">Contact Since
                                                        <img src="./assets/images/dashboard/tootip-2.svg" alt="">
                                                    </label>
                                                    <div class="client-data-1 contact-since">
                                                        <input type="text" value="" placeholder="How long the user has had them in your database" disabled>
                                                    </div>
                                                </div>

                                                <div class="col-sm-6 col-12">
                                                    <label for="html">Time since last update 
                                                        <img src="./assets/images/dashboard/tootip-2.svg" alt="">
                                                    </label>
                                                    <div class="client-data-1 contact-since">
                                                        <input type="text" value="" placeholder="25/May/2023" disabled>
                                                    </div>
                                                </div>

                                                <div class="col-12">
                                                    <label for="html">Set Status Level 
                                                        <img src="./assets/images/dashboard/tootip-2.svg" alt="">
                                                    </label>
                                                </div>

                                                <div class="col-12">
                                                    <div class="set-status-box">
                                                        <div class="set-status-level">
                                                            <div class="set-level-img">
                                                                <img src="./assets/images/dashboard/Set-Status-Level.png" alt="" class="img-fluid">
                                                            </div>
                                                        </div>

                                                        <div class="set-status-content">
                                                            <div>
                                                                <img src="./assets/images/dashboard/green-box.svg" alt=""> <span>Low Interest</span>
                                                            </div>

                                                            <div>
                                                                <img src="./assets/images/dashboard/yellow-box.svg" alt=""> <span>Medium Interest</span>
                                                            </div>

                                                            <div>
                                                                <img src="./assets/images/dashboard/blue-box.svg" alt=""> <span>High Interest</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-12">
                                                    <div class="hashtag">
                                                        <label for="html">Set Status Level 
                                                            <img src="./assets/images/dashboard/tootip-2.svg" alt="">
                                                        </label>
                                                    </div>
                                                </div>

                                                <div class="col-12">
                                                    <div class="client-data-1 contact-since">
                                                        <input type="text" value="" placeholder="" style="height: 95px;">
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>

                                    <div class="tab-pane fade" id="followup-client" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">
                                        <!-- Follow Up Page -->
                                        <div class="follow-up-conatiner">
                                            <div class="box-follow-up">
                                                <div class="left-side">
                                                    <div class="img1-followup">
                                                        <img src="./assets/images/dashboard/img1-followup.svg" alt="">
                                                    </div>

                                                    <div class="name-followup">
                                                        <span class="name">Floyed Miles</span>

                                                        <div class="date-followup">
                                                            <p>Date <span>9 Aug 2023</span></p>
                                                            <p>Time <span>3:30PM</span></p>
                                                        </div>

                                                        <button class="btn-follow-up">Upcoming</button>
                                                    </div>
                                                </div>

                                                <div class="right-side">
                                                    <div class="notes" data-bs-toggle="modal" data-bs-target="#note-1">
                                                        <img src="./assets/images/dashboard/note-icon.svg" alt="">
                                                    </div>

                                                    <div class="copy1-icon">
                                                        <img src="./assets/images/dashboard/copy-icon.svg" alt="">
                                                    </div>

                                                    <div class="mark-completed">
                                                        <img src="./assets/images/dashboard/check-1.svg" alt="">
                                                        <button>Mark completed</button>
                                                    </div>

                                                    <div class="btn-attached">
                                                        <button>+ Attach File</button>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="box-follow-up">
                                                <div class="left-side">
                                                    <div class="img1-followup">
                                                        <img src="./assets/images/dashboard/img1-followup.svg" alt="">
                                                    </div>

                                                    <div class="name-followup">
                                                        <span class="name">Floyed Miles</span>

                                                        <div class="date-followup">
                                                            <p>Date <span>9 Aug 2023</span></p>
                                                            <p>Time <span>3:30PM</span></p>
                                                        </div>

                                                        <button class="btn-follow-up">Upcoming</button>
                                                    </div>
                                                </div>

                                                <div class="right-side">
                                                    <div class="notes" data-bs-toggle="modal" data-bs-target="#note-1">
                                                        <img src="./assets/images/dashboard/note-icon.svg" alt="">
                                                    </div>

                                                    <div class="copy1-icon">
                                                        <img src="./assets/images/dashboard/copy-icon.svg" alt="">
                                                    </div>

                                                    <div class="mark-completed">
                                                        <img src="./assets/images/dashboard/check-1.svg" alt="">
                                                        <button>Mark completed</button>
                                                    </div>

                                                    <div class="btn-attached">
                                                        <button>+ Attach File</button>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="box-follow-up">
                                                <div class="left-side">
                                                    <div class="img1-followup">
                                                        <img src="./assets/images/dashboard/img1-followup.svg" alt="">
                                                    </div>

                                                    <div class="name-followup">
                                                        <span class="name">Floyed Miles</span>

                                                        <div class="date-followup">
                                                            <p>Date <span>9 Aug 2023</span></p>
                                                            <p>Time <span>3:30PM</span></p>
                                                        </div>

                                                        <button class="btn-follow-up">Upcoming</button>
                                                    </div>
                                                </div>

                                                <div class="right-side">
                                                    <div class="notes" data-bs-toggle="modal" data-bs-target="#note-1">
                                                        <img src="./assets/images/dashboard/note-icon.svg" alt="">
                                                    </div>

                                                    <div class="copy1-icon">
                                                        <img src="./assets/images/dashboard/copy-icon.svg" alt="">
                                                    </div>

                                                    <div class="mark-completed">
                                                        <img src="./assets/images/dashboard/check-1.svg" alt="">
                                                        <button>Mark completed</button>
                                                    </div>

                                                    <div class="btn-attached">
                                                        <button>+ Attach File</button>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="box-follow-up">
                                                <div class="left-side">
                                                    <div class="img1-followup">
                                                        <img src="./assets/images/dashboard/img1-followup.svg" alt="">
                                                    </div>

                                                    <div class="name-followup">
                                                        <span class="name">Floyed Miles</span>

                                                        <div class="date-followup">
                                                            <p>Date <span>9 Aug 2023</span></p>
                                                            <p>Time <span>3:30PM</span></p>
                                                        </div>

                                                        <button class="btn-follow-up">Upcoming</button>
                                                    </div>
                                                </div>

                                                <div class="right-side">
                                                    <div class="notes" data-bs-toggle="modal" data-bs-target="#note-1">
                                                        <img src="./assets/images/dashboard/note-icon.svg" alt="">
                                                    </div>

                                                    <div class="copy1-icon">
                                                        <img src="./assets/images/dashboard/copy-icon.svg" alt="">
                                                    </div>

                                                    <div class="mark-completed">
                                                        <img src="./assets/images/dashboard/check-1.svg" alt="">
                                                        <button>Mark completed</button>
                                                    </div>

                                                    <div class="btn-attached">
                                                        <button>+ Attach File</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-12">
                                            <div class="btn-save-contact">
                                                <button type="button" class="btn btn-primary save-contact">Create a
                                                    Follow Up</button>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Meeting Page -->
                                    <div class="tab-pane fade" id="meeting-client" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">
                                        <div class="meeting-page">
                                            <div class="follow-up-conatiner">
                                                <div class="box-follow-up">
                                                    <div class="left-side">
                                                        <div class="img1-followup">
                                                            <img src="./assets/images/dashboard/img1-followup.svg" alt="">
                                                        </div>

                                                        <div class="name-followup">
                                                            <span class="name">I contacted them on
                                                                facebook...</span>

                                                            <div class="date-followup">
                                                                <p>Date <span>9 Aug 2023</span></p>
                                                                <p>Time <span>3:30PM</span></p>
                                                            </div>

                                                            <button class="btn-follow-up">Upcoming</button>
                                                        </div>
                                                    </div>

                                                    <div class="right-side">
                                                        <div class="notes" data-bs-toggle="modal" data-bs-target="#note-1">
                                                            <img src="./assets/images/dashboard/note-icon.svg" alt="">
                                                        </div>

                                                        <div class="copy1-icon">
                                                            <img src="./assets/images/dashboard/copy-icon.svg" alt="">
                                                        </div>

                                                        <div class="mark-completed">
                                                            <img src="./assets/images/dashboard/check-1.svg" alt="">
                                                            <button>Mark completed</button>
                                                        </div>

                                                        <div class="btn-attached">
                                                            <button>+ Attach File</button>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="box-follow-up">
                                                    <div class="left-side">
                                                        <div class="img1-followup">
                                                            <img src="./assets/images/dashboard/img1-followup.svg" alt="">
                                                        </div>

                                                        <div class="name-followup">
                                                            <span class="name">I contacted them on
                                                                facebook...</span>

                                                            <div class="date-followup">
                                                                <p>Date <span>9 Aug 2023</span></p>
                                                                <p>Time <span>3:30PM</span></p>
                                                            </div>

                                                            <button class="btn-follow-up">Upcoming</button>
                                                        </div>
                                                    </div>

                                                    <div class="right-side">
                                                        <div class="notes" data-bs-toggle="modal" data-bs-target="#note-1">
                                                            <img src="./assets/images/dashboard/note-icon.svg" alt="">
                                                        </div>

                                                        <div class="copy1-icon">
                                                            <img src="./assets/images/dashboard/copy-icon.svg" alt="">
                                                        </div>

                                                        <div class="mark-completed">
                                                            <img src="./assets/images/dashboard/check-1.svg" alt="">
                                                            <button>Mark completed</button>
                                                        </div>

                                                        <div class="btn-attached">
                                                            <button>+ Attach File</button>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="box-follow-up">
                                                    <div class="left-side">
                                                        <div class="img1-followup">
                                                            <img src="./assets/images/dashboard/img1-followup.svg" alt="">
                                                        </div>

                                                        <div class="name-followup">
                                                            <span class="name">I contacted them on
                                                                facebook...</span>

                                                            <div class="date-followup">
                                                                <p>Date <span>9 Aug 2023</span></p>
                                                                <p>Time <span>3:30PM</span></p>
                                                            </div>

                                                            <button class="btn-follow-up">Upcoming</button>
                                                        </div>
                                                    </div>

                                                    <div class="right-side">
                                                        <div class="notes" data-bs-toggle="modal" data-bs-target="#note-1">
                                                            <img src="./assets/images/dashboard/note-icon.svg" alt="">
                                                        </div>

                                                        <div class="copy1-icon">
                                                            <img src="./assets/images/dashboard/copy-icon.svg" alt="">
                                                        </div>

                                                        <div class="mark-completed">
                                                            <img src="./assets/images/dashboard/check-1.svg" alt="">
                                                            <button>Mark completed</button>
                                                        </div>

                                                        <div class="btn-attached">
                                                            <button>+ Attach File</button>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="box-follow-up">
                                                    <div class="left-side">
                                                        <div class="img1-followup">
                                                            <img src="./assets/images/dashboard/img1-followup.svg" alt="">
                                                        </div>

                                                        <div class="name-followup">
                                                            <span class="name">I contacted them on
                                                                facebook...</span>

                                                            <div class="date-followup">
                                                                <p>Date <span>9 Aug 2023</span></p>
                                                                <p>Time <span>3:30PM</span></p>
                                                            </div>

                                                            <button class="btn-follow-up">Upcoming</button>
                                                        </div>
                                                    </div>

                                                    <div class="right-side">
                                                        <div class="notes" data-bs-toggle="modal" data-bs-target="#note-1">
                                                            <img src="./assets/images/dashboard/note-icon.svg" alt="">
                                                        </div>

                                                        <div class="copy1-icon">
                                                            <img src="./assets/images/dashboard/copy-icon.svg" alt="">
                                                        </div>

                                                        <div class="mark-completed">
                                                            <img src="./assets/images/dashboard/check-1.svg" alt="">
                                                            <button>Mark completed</button>
                                                        </div>

                                                        <div class="btn-attached">
                                                            <button>+ Attach File</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-12">
                                                <div class="btn-save-contact">
                                                    <button type="button" class="btn btn-primary save-contact">
                                                        Create a Meeting
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Contact Log Page -->
                                    <div class="tab-pane fade" id="contact-log-client" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">
                                        <!-- Contact Log Pages tab -->
                                        <div class="row">
                                            <div class="col-12">
                                                <div class="contact-log-tabs">
                                                    <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                                                        <li class="nav-item" role="presentation">
                                                            <button class="nav-link active btn-Follow-Ups-01" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#Follow-Ups-01" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Follow
                                                                Ups</button>
                                                        </li>

                                                        <li class="nav-item" role="presentation">
                                                            <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#Meeting-01" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Meeting</button>
                                                        </li>

                                                        <li class="nav-item" role="presentation">
                                                            <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#Chat-Logs-01" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Chat Logs</button>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="tab-content" id="pills-tabContent">
                                            <div class="tab-pane fade show active" id="Follow-Ups-01" role="tabpanel" aria-labelledby="pills-home-tab" tabindex="0">

                                                <!-- Contact Log page/ Followp page -->
                                                <div class="Contact-Log_Followp-page">
                                                    <div class="meeting-page">
                                                        <div class="follow-up-conatiner">
                                                            <div class="box-follow-up">
                                                                <div class="left-side">
                                                                    <div class="name-followup">
                                                                        <div class="date-followup">
                                                                            <p>Date <span>9 Aug
                                                                                    2023</span></p>
                                                                            <p>Time <span>3:30PM</span>
                                                                            </p>
                                                                        </div>

                                                                        <span class="name">I contacted
                                                                            them on
                                                                            facebook messenger regarding
                                                                            their
                                                                            order status.</span>
                                                                    </div>
                                                                </div>

                                                                <div class="right-side">
                                                                    <div class="notes" data-bs-toggle="modal" data-bs-target="#note-1">
                                                                        <img src="./assets/images/dashboard/note-icon.svg" alt="">
                                                                    </div>

                                                                    <div class="btn-attached">
                                                                        <button>+ Attach File</button>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                            <div class="box-follow-up">
                                                                <div class="left-side">
                                                                    <div class="name-followup">
                                                                        <div class="date-followup">
                                                                            <p>Date <span>9 Aug
                                                                                    2023</span></p>
                                                                            <p>Time <span>3:30PM</span>
                                                                            </p>
                                                                        </div>

                                                                        <span class="name">I contacted
                                                                            them on
                                                                            facebook messenger regarding
                                                                            their
                                                                            order status.</span>
                                                                    </div>
                                                                </div>

                                                                <div class="right-side">
                                                                    <div class="notes" data-bs-toggle="modal" data-bs-target="#note-1">
                                                                        <img src="./assets/images/dashboard/note-icon.svg" alt="">
                                                                    </div>

                                                                    <div class="btn-attached">
                                                                        <button>+ Attach File</button>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                            <div class="box-follow-up">
                                                                <div class="left-side">
                                                                    <div class="name-followup">
                                                                        <div class="date-followup">
                                                                            <p>Date <span>9 Aug
                                                                                    2023</span></p>
                                                                            <p>Time <span>3:30PM</span>
                                                                            </p>
                                                                        </div>

                                                                        <span class="name">I contacted
                                                                            them on
                                                                            facebook messenger regarding
                                                                            their
                                                                            order status.</span>
                                                                    </div>
                                                                </div>

                                                                <div class="right-side">
                                                                    <div class="notes" data-bs-toggle="modal" data-bs-target="#note-1">
                                                                        <img src="./assets/images/dashboard/note-icon.svg" alt="">
                                                                    </div>

                                                                    <div class="btn-attached">
                                                                        <button>+ Attach File</button>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                            <div class="box-follow-up">
                                                                <div class="left-side">
                                                                    <div class="name-followup">
                                                                        <div class="date-followup">
                                                                            <p>Date <span>9 Aug
                                                                                    2023</span></p>
                                                                            <p>Time <span>3:30PM</span>
                                                                            </p>
                                                                        </div>

                                                                        <span class="name">I contacted
                                                                            them on
                                                                            facebook messenger regarding
                                                                            their
                                                                            order status.</span>
                                                                    </div>
                                                                </div>

                                                                <div class="right-side">
                                                                    <div class="notes" data-bs-toggle="modal" data-bs-target="#note-1">
                                                                        <img src="./assets/images/dashboard/note-icon.svg" alt="">
                                                                    </div>

                                                                    <div class="btn-attached">
                                                                        <button>+ Attach File</button>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="tab-pane fade" id="Meeting-01" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">
                                        <!-- Contact Log page/ Meeting page -->
                                        <div class="Contact-Meeting-page">
                                            <div class="Contact-Log_Followp-page">
                                                <div class="meeting-page">
                                                    <div class="follow-up-conatiner">
                                                        <div class="box-follow-up">
                                                            <div class="left-side order-2">
                                                                <div class="name-followup">
                                                                    <div class="notes-2 date-followup">
                                                                        <p>Date</p>
                                                                        <p>9 Aug 2023</p>
                                                                    </div>

                                                                    <div class="notes-2 date-followup">
                                                                        <p>Time</p>
                                                                        <p>3:30PM</p>
                                                                    </div>

                                                                    <div class="notes-2 date-followup">
                                                                        <p>Notes</p>
                                                                        <p>Sed quisque elit odio
                                                                            scelerisque. Habitasse
                                                                            tortor a
                                                                            quisque gravida diam id. Mi
                                                                            sit
                                                                            id dui fringilla.</p>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                            <div class="right-side order-1">
                                                                <p class="fs-14">Meeting</p>

                                                                <div class="btn-attached">
                                                                    <button>+ Attach File</button>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <div class="box-follow-up">
                                                            <div class="left-side order-2">
                                                                <div class="name-followup">
                                                                    <div class="notes-2 date-followup">
                                                                        <p>Date</p>
                                                                        <p>9 Aug 2023</p>
                                                                    </div>

                                                                    <div class="notes-2 date-followup">
                                                                        <p>Time</p>
                                                                        <p>3:30PM</p>
                                                                    </div>

                                                                    <div class="notes-2 date-followup">
                                                                        <p>Notes</p>
                                                                        <p>Sed quisque elit odio
                                                                            scelerisque. Habitasse
                                                                            tortor a
                                                                            quisque gravida diam id. Mi
                                                                            sit
                                                                            id dui fringilla.</p>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                            <div class="right-side order-1">
                                                                <p class="fs-14">Meeting</p>

                                                                <div class="btn-attached">
                                                                    <button>+ Attach File</button>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <div class="box-follow-up">
                                                            <div class="left-side order-2">
                                                                <div class="name-followup">
                                                                    <div class="notes-2 date-followup">
                                                                        <p>Date</p>
                                                                        <p>9 Aug 2023</p>
                                                                    </div>

                                                                    <div class="notes-2 date-followup">
                                                                        <p>Time</p>
                                                                        <p>3:30PM</p>
                                                                    </div>

                                                                    <div class="notes-2 date-followup">
                                                                        <p>Notes</p>
                                                                        <p>Sed quisque elit odio
                                                                            scelerisque. Habitasse
                                                                            tortor a
                                                                            quisque gravida diam id. Mi
                                                                            sit
                                                                            id dui fringilla.</p>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                            <div class="right-side order-1">
                                                                <p class="fs-14">Meeting</p>

                                                                <div class="btn-attached">
                                                                    <button>+ Attach File</button>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="tab-pane fade" id="Chat-Logs-01" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">
                                        <!-- Contact Log page/ Chat Log page -->
                                        <div class="contact-chatlog-page">

                                        </div>
                                    </div>
                                    <!-- </div> -->
                                </div>

                                <div class="tab-pane fade" id="notes-client" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">6th page</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- ADD CONTACT MODAL -->
<div class="add_contact">
    <div class="modal fade" id="add-contact" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Add a Contact</h5>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                <div class="modal-body">
                    <form class="custom_form mt-4" method="POST" action="{{ route('addContact') }}" id="addContactForm">
                        @csrf
                        <div class="form-group mb-4">
                            <select class="form-select" name="type" aria-label="Default select example">
                                <option selected disabled>Select Contact Type</option>
                                @foreach ($contact_type as $contactType)
                                <option value="{{$contactType->id}}">{{$contactType->name}}</option>
                                @endforeach
                            </select>

                        </div>
                        <div class="form-group mb-4">
                            <input type="text" class="form-control" name="first_name" placeholder="First name" value="">
                        </div>
                        <div class="form-group mb-4">
                            <input type="text" class="form-control" name="last_name" placeholder="Last name" value="">
                        </div>
                        <div class="form-group mb-4">
                            <input type="email" class="form-control" name="email" placeholder="Email Address" value="">
                        </div>
                        <div class="row">

                            <div class="form-group mb-4">
                                <!-- Hidden input field for mobile code -->
                                <input type="hidden" class="form-control" name="mobile_code" id="mobile_code" placeholder="Mobile Code" value="91">
                            </div>

                            <div class="form-group mb-4">
                                <!-- Input field for phone number -->
                                <input type="text" class="form-control" name="phone_number" id="phone_number" placeholder="Phone Number" value="" style="width:418px !important">
                            </div>
                        </div>
            



                <div class="button">
                    <a href="javascript:void(0)" class="d-block text-center btn-theme blue-bg text-white" data-dismiss="modal">
                        Save Contact
                        <svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M1.25 8.5L4.75 5L1.25 1.5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </a>

                </div>
                </form>
            </div>
            <div class="d-sm-flex align-items-center bg-yellow mdal_fter">
                <div class="mdal_fter_img mb-sm-0 mb-4 ">
                    <img src="{{asset('assets/images/mycontact/contact.png')}}" alt="add_cntc_foot">
                </div>
                <div class="mdal_fter_ctn ms-3">
                    <h3>Import Contacts in Bulk</h3>
                    <p>Import your distributors, customers, Facebook friends, or a .csv file in
                        bulk
                        by uploading them.</p>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
@endsection

@section('script')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>

<script>

$('.show-contact-details').click(function() {
        var contactId = $(this).data('contact-id');
        // alert(contactId);
        $.ajax({
            url: '{{route("viewContact")}}', // Your server-side script to fetch contact details
            type: 'POST',
            data: {
                _token: "{{ csrf_token() }}",
                contact_id: contactId
            },
            success: function(response) {
                // Assuming the server sends back HTML formatted response
                console.log(response);
                $('#client-1 .modal-body').html(response.content);
                $('#client-1').modal('show');
            },
            error: function(error) {
                console.log(error);
                alert('Error fetching data.');
            }
        });
    });







    $("#phone_number").intlTelInput({
        initialCountry: "in",
        separateDialCode: true,
        utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.15/js/utils.js"
    }).on('countrychange', function(e, countryData) {
        $("#mobile_code").val(($("#phone_number").intlTelInput("getSelectedCountryData").dialCode));
    });
</script>


<script>
    $("#addContactForm").validate({
        rules: {
            type: {
                required: true
            },
            first_name: {
                required: true
            },
            last_name: {
                required: true
            },
            email: {
                required: true,
                email: true
            },
            phone_number: {
                required: true,
                digits: true
            }
        },
        messages: {
            type: "Please select the contact type",
            first_name: "Please enter your first name",
            last_name: "Please enter your last name",
            email: "Please enter a valid email address",
            mobile_code: "Please enter a country code",
            phone_number: {
                required: "Please enter your phone number",
                digits: "Please enter only digits"
            }
        },

        submitHandler: function(form) {
            form.submit();
        }
    });

    // Handle click event for anchor tag within the form
    $(".button a").click(function(e) {
        e.preventDefault();
        var form = $("#addContactForm");
        if (form.valid()) { // Check if the form is valid
            form.submit(); // Manually submit the form
            // Reset form fields after submission
            form[0].reset();
        }
    });
</script>
@endsection