@extends('partials.main')

@section('title')
Service Provider {{ $client->first_name }}
@endsection

@section('content')


<style>
    .iti-flag {
        background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/10.0.2/img/flags.png");
    }

    .review-list ul li .left span {
        width: 32px;
        height: 32px;
        display: inline-block;
    }
    .review-list ul li .left {
        flex: none;
        max-width: none;
        margin: 0 10px 0 0;
    }
    .review-list ul li .left span img {
        border-radius: 50%;
    }
    .review-list ul li .right h4 {
        font-size: 16px;
        margin: 0;
        display: flex;
    }
    .review-list ul li .right h4 .gig-rating {
        display: flex;
        align-items: center;
        margin-left: 10px;
        color: #ffbf00;
    }
    .review-list ul li .right h4 .gig-rating svg {
        margin: 0 4px 0 0px;
    }
    .country .country-flag {
        width: 16px;
        height: 16px;
        vertical-align: text-bottom;
        margin: 0 7px 0 0px;
        border: 1px solid #fff;
        border-radius: 50px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    }
    .country .country-name {
        color: #95979d;
        font-size: 13px;
        font-weight: 600;
    }
    .review-list ul li {
        border-bottom: 1px solid #dadbdd;
        padding: 0 0 30px;
        margin: 0 0 30px;
    }
    .review-list ul li .right {
        flex: auto;
    }
    .review-list ul li .review-description {
        margin: 20px 0 0;
    }
    .review-list ul li .review-description p {
        font-size: 14px;
        margin: 0;
    }
    .review-list ul li .publish {
        font-size: 13px;
        color: #95979d;
    }

    .review-section h4 {
        font-size: 20px;
        color: #222325;
        font-weight: 700;
    }
    .review-section .stars-counters tr .stars-filter.fit-button {
        padding: 6px;
        border: none;
        color: #4a73e8;
        text-align: left;
    }
    .review-section .fit-progressbar-bar .fit-progressbar-background {
        position: relative;
        height: 8px;
        background: #efeff0;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
        background-color: #ffffff;
        ;
        border-radius: 999px;
    }
    .review-section .stars-counters tr .star-progress-bar .progress-fill {
        background-color: #ffb33e;
    }
    .review-section .fit-progressbar-bar .progress-fill {
        background: #2cdd9b;
        background-color: rgb(29, 191, 115);
        height: 100%;
        position: absolute;
        left: 0;
        z-index: 1;
        border-radius: 999px;
    }
    .review-section .fit-progressbar-bar {
        display: flex;
        align-items: center;
    }
    .review-section .stars-counters td {
        white-space: nowrap;
    }
    .review-section .stars-counters tr .progress-bar-container {
        width: 100%;
        padding: 0 10px 0 6px;
        margin: auto;
    }
    .ranking h6 {
        font-weight: 600;
        padding-bottom: 16px;
    }
    .ranking li {
        display: flex;
        justify-content: space-between;
        color: #95979d;
        padding-bottom: 8px;
    }
    .review-section .stars-counters td.star-num {
        color: #4a73e8;
    }
    .ranking li>span {
        color: #62646a;
        white-space: nowrap;
        margin-left: 12px;
    }
    .review-section {
        border-bottom: 1px solid #dadbdd;
        padding-bottom: 24px;
        margin-bottom: 34px;
        /* padding-top: 64px; */
    }
    .review-section select, .review-section .select2-container {
        width: 188px !important;
        border-radius: 3px;
    }
    ul, ul li {
        list-style: none;
        margin: 0px;
    }
    .helpful-thumbs, .helpful-thumb {
        display: flex;
        align-items: center;
        font-weight: 700;
    }
</style>


<div class="breadcrumb-header justify-content-between">

    <nav class="breadcrumb-4">

        <ol class="breadcrumb breadcrumb-style1">

            <li class="breadcrumb-item">

                <a href="{{ route('client-dashboard') }}">Dashboard</a>

            </li>

            <li class="breadcrumb-item">

                <a href="{{ url('service-provider') }}">Service Provider</a>

            </li>

            <li class="breadcrumb-item active">Service Provider ({{ $client->first_name }})</li>

        </ol>

    </nav>

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

<!-- row -->
<div class="row row-sm">
    <!-- Col -->
    <div class="col-lg-4">

        <div class="card mg-b-20">

            <div class="card-body">

                <div class="ps-0">

                    <div class="main-profile-overview">

                        <div class="main-img-user profile-user">
                            <img alt="" src="{{ $client->images != NULL ? asset('images/product/'.$client->images) : asset('assets/img/faces/2.jpg')}}">

                        </div>

                        <div class="d-flex justify-content-between mg-b-20">

                            <div>

                                <h5 class="main-profile-name">{{$client->first_name}} {{$client->last_name}}</h5>

                            </div>

                        </div>

                        <div class="mg-b-20">

                            {{$client->roles[0]->name}}

                        </div>

                        <div class="mg-b-20">

                            <a href="javascript:void(0)" class="btn btn-primary">Hire Me</a>

                        </div>

                        <h6>Bio</h6>

                        <div class="main-profile-bio">

                            {{$client->bio}}

                        </div>


                        <!-- main-profile-bio -->

                        {{-- <hr class="mg-y-30">

                        <label class="main-content-label tx-13 mg-b-20">Social</label>

                        <div class="main-profile-social-list">

                            <div class="media">

                                <div class="media-icon bg-primary-transparent text-primary">

                                    <i class="icon ion-logo-facebook"></i>

                                </div>

                                <div class="media-body text-truncate">

                                    <span>Facebook</span> <a href="{{$client->facebook}}">{{$client->facebook}}</a>

                                </div>

                            </div>

                            <div class="media">

                                <div class="media-icon bg-info-transparent text-info">

                                    <i class="icon ion-logo-twitter"></i>

                                </div>

                                <div class="media-body">

                                    <span>Twitter</span> <a href="{{$client->twitter}}">{{$client->twitter}}</a>

                                </div>

                            </div>

                            <div class="media">

                                <div class="media-icon bg-danger-transparent text-danger">

                                    <i class="icon ion-logo-instagram"></i>

                                </div>

                                <div class="media-body">

                                    <span>Instagram</span> <a href="{{$client->instagram}}">{{$client->instagram}}</a>

                                </div>

                            </div>

                            <div class="media">

                                <div class="media-icon bg-primary-transparent text-primary">

                                    <i class="icon ion-logo-linkedin"></i>

                                </div>

                                <div class="media-body">

                                    <span>Linkedin</span> <a href="{{$client->linkedin}}">{{$client->linkedin}}</a>

                                </div>

                            </div>

                            <div class="media">

                                <div class="media-icon bg-danger-transparent text-danger">

                                    <i class="icon ion-logo-youtube"></i>

                                </div>

                                <div class="media-body">

                                    <span>Youtube</span> <a href="{{$client->youtube}}">{{$client->youtube}}</a>

                                </div>

                            </div>

                            <div class="media" >

                                <div class="media-icon bg-info-transparent" style="color:#292BB8; background:#6C82CE;">

                                <i class="fab fa-flickr"></i>

                                </div>

                                <div class="media-body">

                                    <span>Flicker</span> <a href="{{$client->flicker}}">{{$client->flicker}}</a>

                                </div>

                            </div>

                        </div> --}}

                    </div>
                    <!-- main-profile-overview -->

                </div>

            </div>

        </div>

        {{-- <div class="card mg-b-20">

            <div class="card-body">

                <div class="main-content-label tx-13 mg-b-25">

                    Contact

                </div>

                <div class="main-profile-contact-list">

                    <div class="media">

                        <div class="media-icon bg-primary-transparent text-primary">

                            <i class="icon ion-md-phone-portrait"></i>

                        </div>

                        <div class="media-body">

                            <span>Mobile</span>

                            <div>

                                {{$client->phone}}

                            </div>

                        </div>

                    </div>

                    <div class="media">

                        <div class="media-icon bg-info-transparent text-info">

                            <i class="icon ion-md-locate"></i>

                        </div>

                        <div class="media-body">

                            <span>Current Address</span>

                            <div>

                                {{$client->address}}

                            </div>

                        </div>

                    </div>

                </div><!-- main-profile-contact-list -->

            </div>

        </div> --}}

    </div>
    <!-- Col -->
    <div class="col-lg-8 panel panel-primary tabs-style-2">

         <div class=" tab-menu-heading">
            <div class="tabs-menu1">
                <!-- Tabs -->
                <ul class="nav panel-tabs main-nav-line">
                    {{-- <li><a href="#profile" class="nav-link active bg-white" data-bs-toggle="tab"> Personal Information</a></li> --}}
                    <li><a href="#reviews" class="nav-link active bg-white" data-bs-toggle="tab"> Reviews</a></li>
                </ul>
            </div>
        </div>

        <div class="card">
            <div class="card-body">
                <div class="panel-body tabs-menu-body bg-white main-content-body-right">
                    <div class="tab-content">
                        {{-- <div class="tab-pane active" id="profile">

                                <div class="mb-4 main-content-label">Name</div>

                                <div class="form-group">

                                    <div class="row">

                                        <div class="col-md-3">

                                            <label class="form-label">First Name</label>

                                        </div>

                                        <div class="col-md-9">

                                            {{$client->first_name}}

                                        </div>

                                    </div>

                                </div>

                                <div class="form-group ">

                                    <div class="row">

                                        <div class="col-md-3">

                                            <label class="form-label">last Name</label>

                                        </div>

                                        <div class="col-md-9">

                                            {{$client->last_name}}

                                        </div>

                                    </div>

                                </div>

                                <div class="form-group ">

                                    <div class="row">

                                        <div class="col-md-3">

                                            <label class="form-label">Date of Birth</label>

                                        </div>

                                        <div class="col-md-9">

                                            {{$date_o_birth }}

                                        </div>

                                    </div>

                                </div>

                                <div class="mb-4 main-content-label">Contact Info</div>

                                <div class="form-group ">

                                    <div class="row">

                                        <div class="col-md-3">

                                            <label class="form-label">Email<i>(required)</i></label>

                                        </div>

                                        <div class="col-md-9">

                                            {{$client->email}}

                                        </div>

                                    </div>

                                </div>

                                <div class="form-group ">

                                    <div class="row">

                                        <div class="col-md-3">

                                            <label class="form-label">Phone Number</label>

                                        </div>

                                        <div class="col-md-9">

                                            {{$client->phone}}

                                        </div>

                                    </div>

                                </div>

                                <div class="form-group ">

                                    <div class="row">

                                        <div class="col-md-3">

                                            <label class="form-label">Address</label>

                                        </div>

                                        <div class="col-md-9">

                                            {{$client->address}}

                                        </div>

                                    </div>

                                </div>

                                <div class="form-group ">

                                    <div class="row">

                                        <div class="col-md-3">

                                            <label class="form-label">Country</label>

                                        </div>

                                        <div class="col-md-9">

                                             Canada

                                        </div>

                                    </div>

                                </div>

                                <div class="form-group ">
                                    <div class="row">
                                        <div class="col-md-3">
                                            <label class="form-label">State</label>
                                        </div>
                                        <div class="col-md-9">
                                            {{ isset($client->state->name) ? $client->state->name : 'N/A' }}
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group ">
                                    <div class="row">
                                        <div class="col-md-3">
                                            <label class="form-label">Position</label>
                                        </div>
                                        <div class="col-md-9">
                                            {{ isset($client->position->position_name) ? $client->position->position_name : 'N/A' }}
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group ">
                                    <div class="row">
                                        <div class="col-md-3">
                                            <label class="form-label">Magic number</label>
                                        </div>
                                        <div class="col-md-9">
                                           {{ $client->magic_number != null ? $client->magic_number : 'N/A' }}
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group ">
                                    <div class="row">
                                        <div class="col-md-3">
                                            <label class="form-label">City</label>
                                        </div>
                                        <div class="col-md-9">
                                           {{ $client->city != null ? $client->city : 'N/A'}}
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group ">
                                    <div class="row">
                                        <div class="col-md-3">
                                            <label class="form-label">Postal Code</label>
                                        </div>
                                        <div class="col-md-9">
                                            {{ $client->postal_code != null ? $client->postal_code : 'N/A' }}
                                        </div>
                                    </div>
                                </div>

                                <div class="mb-4 main-content-label">Social Info</div>

                                <div class="form-group ">

                                    <div class="row">

                                        <div class="col-md-3">

                                            <label class="form-label">Facebook</label>

                                        </div>

                                        <div class="col-md-9">

                                            {{ $client->facebook != null ? $client->facebook : 'N/A' }}

                                        </div>

                                    </div>

                                </div>

                                <div class="form-group ">

                                    <div class="row">

                                        <div class="col-md-3">

                                            <label class="form-label">Twitter</label>

                                        </div>

                                        <div class="col-md-9">

                                            {{ $client->twitter != null ? $client->twitter : 'N/A' }}

                                        </div>

                                    </div>

                                </div>

                                <div class="form-group ">

                                    <div class="row">

                                        <div class="col-md-3">

                                            <label class="form-label">Instagram</label>

                                        </div>

                                        <div class="col-md-9">

                                            {{ $client->instagram != null ? $client->instagram : 'N/A' }}

                                        </div>

                                    </div>

                                </div>

                                <div class="form-group ">

                                    <div class="row">

                                        <div class="col-md-3">

                                            <label class="form-label">Linkedin</label>

                                        </div>

                                        <div class="col-md-9">

                                            {{ $client->linkedin != null ? $client->linkedin : 'N/A' }}

                                        </div>

                                    </div>

                                </div>

                                <div class="form-group ">

                                    <div class="row">

                                        <div class="col-md-3">

                                            <label class="form-label">Youtube</label>

                                        </div>

                                        <div class="col-md-9">

                                            {{ $client->youtube != null ? $client->youtube : 'N/A' }}

                                        </div>

                                    </div>

                                </div>

                                <div class="form-group ">

                                    <div class="row">

                                        <div class="col-md-3">

                                            <label class="form-label">Flicker</label>

                                        </div>

                                        <div class="col-md-9">

                                            <input type="text" name="flicker" class="form-control"

                                            placeholder="https://www.flicker.com/campaign" value="{{$client->flicker}}">

                                        </div>

                                    </div>

                                </div>

                                <div class="mb-4 main-content-label">About {{ $client->roles[0]->name }}</div>

                                <div class="form-group ">

                                    <div class="row">

                                        <div class="col-md-3">

                                            <label class="form-label">Biographical Info</label>

                                        </div>

                                        <div class="col-md-9">

                                            {{ $client->bio != null ? $client->bio : 'N/A' }}

                                        </div>

                                    </div>

                                </div>


                        </div> --}}

                        <div class="tab-pane active" id="reviews">
                            {{-- review new code start  --}}
                            <div class="container">
                                <div id="reviews" class="review-section">
                                    <div class="d-flex align-items-center justify-content-between mb-4">
                                        <h4 class="m-0">37 Reviews</h4>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <table class="stars-counters">
                                                <tbody>
                                                    <tr class="">
                                                        <td>
                                                            <span>
                                                                <button class="fit-button fit-button-color-blue fit-button-fill-ghost fit-button-size-medium stars-filter">5 Stars</button>
                                                            </span>
                                                        </td>
                                                        <td class="progress-bar-container">
                                                            <div class="fit-progressbar fit-progressbar-bar star-progress-bar">
                                                                <div class="fit-progressbar-background">
                                                                    <span class="progress-fill" style="width: 97.2973%;"></span>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td class="star-num">(36)</td>
                                                    </tr>
                                                    <tr class="">
                                                        <td>
                                                            <span>
                                                                <button class="fit-button fit-button-color-blue fit-button-fill-ghost fit-button-size-medium stars-filter">4 Stars</button>
                                                            </span>
                                                        </td>
                                                        <td class="progress-bar-container">
                                                            <div class="fit-progressbar fit-progressbar-bar star-progress-bar">
                                                                <div class="fit-progressbar-background">
                                                                    <span class="progress-fill" style="width: 2.2973%;"></span>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td class="star-num">(2)</td>
                                                    </tr>
                                                    <tr class="">
                                                        <td>
                                                            <span>
                                                                <button class="fit-button fit-button-color-blue fit-button-fill-ghost fit-button-size-medium stars-filter">3 Stars</button>
                                                            </span>
                                                        </td>
                                                        <td class="progress-bar-container">
                                                            <div class="fit-progressbar fit-progressbar-bar star-progress-bar">
                                                                <div class="fit-progressbar-background">
                                                                    <span class="progress-fill" style="width: 0;"></span>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td class="star-num">(0)</td>
                                                    </tr>
                                                    <tr class="">
                                                        <td>
                                                            <span>
                                                                <button class="fit-button fit-button-color-blue fit-button-fill-ghost fit-button-size-medium stars-filter">2 Stars</button>
                                                            </span>
                                                        </td>
                                                        <td class="progress-bar-container">
                                                            <div class="fit-progressbar fit-progressbar-bar star-progress-bar">
                                                                <div class="fit-progressbar-background">
                                                                    <span class="progress-fill" style="width: 0;"></span>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td class="star-num">(0)</td>
                                                    </tr>
                                                    <tr class="">
                                                        <td>
                                                            <span>
                                                                <button class="fit-button fit-button-color-blue fit-button-fill-ghost fit-button-size-medium stars-filter">1 Stars</button>
                                                            </span>
                                                        </td>
                                                        <td class="progress-bar-container">
                                                            <div class="fit-progressbar fit-progressbar-bar star-progress-bar">
                                                                <div class="fit-progressbar-background">
                                                                    <span class="progress-fill" style="width: 0;"></span>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td class="star-num">(0)</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>

                                <div class="review-list">
                                    <ul>
                                        <li>
                                            <div class="d-flex">
                                                <div class="left">
                                                    <span>
                                                        <img src="https://bootdey.com/img/Content/avatar/avatar1.png" class="profile-pict-img img-fluid" alt="" />
                                                    </span>
                                                </div>
                                                <div class="right">
                                                    <h4>
                                                        Askbootstrap
                                                        <span class="gig-rating text-body-2">
                                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1792 1792" width="15" height="15">
                                                                <path
                                                                    fill="currentColor"
                                                                    d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z"
                                                                ></path>
                                                            </svg>
                                                            5.0
                                                        </span>
                                                    </h4>
                                                    <div class="country d-flex align-items-center">
                                                        <span>
                                                            <img class="country-flag img-fluid" src="https://bootdey.com/img/Content/avatar/avatar6.png" />
                                                        </span>
                                                        <div class="country-name font-accent">Canada</div>
                                                    </div>
                                                    <div class="review-description">
                                                        <p>
                                                            The process was smooth, after providing the required info, Pragyesh sent me an outstanding packet of wireframes. Thank you a lot!
                                                        </p>
                                                    </div>
                                                    <span class="publish py-3 d-inline-block w-100">Published 4 weeks ago</span>


                                                </div>
                                            </div>
                                        </li>
                                    </ul>




                                    <ul>
                                        <li>
                                            <div class="d-flex">
                                                <div class="left">
                                                    <span>
                                                        <img src="https://bootdey.com/img/Content/avatar/avatar1.png" class="profile-pict-img img-fluid" alt="" />
                                                    </span>
                                                </div>
                                                <div class="right">
                                                    <h4>
                                                        Askbootstrap
                                                        <span class="gig-rating text-body-2">
                                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1792 1792" width="15" height="15">
                                                                <path
                                                                    fill="currentColor"
                                                                    d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z"
                                                                ></path>
                                                            </svg>
                                                            5.0
                                                        </span>
                                                    </h4>
                                                    <div class="country d-flex align-items-center">
                                                        <span>
                                                            <img class="country-flag img-fluid" src="https://bootdey.com/img/Content/avatar/avatar6.png" />
                                                        </span>
                                                        <div class="country-name font-accent">Canada</div>
                                                    </div>
                                                    <div class="review-description">
                                                        <p>
                                                            The process was smooth, after providing the required info, Pragyesh sent me an outstanding packet of wireframes. Thank you a lot!
                                                        </p>
                                                    </div>
                                                    <span class="publish py-3 d-inline-block w-100">Published 4 weeks ago</span>


                                                </div>
                                            </div>
                                        </li>
                                    </ul>


                                    <ul>
                                        <li>
                                            <div class="d-flex">
                                                <div class="left">
                                                    <span>
                                                        <img src="https://bootdey.com/img/Content/avatar/avatar1.png" class="profile-pict-img img-fluid" alt="" />
                                                    </span>
                                                </div>
                                                <div class="right">
                                                    <h4>
                                                        Askbootstrap
                                                        <span class="gig-rating text-body-2">
                                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1792 1792" width="15" height="15">
                                                                <path
                                                                    fill="currentColor"
                                                                    d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z"
                                                                ></path>
                                                            </svg>
                                                            5.0
                                                        </span>
                                                    </h4>
                                                    <div class="country d-flex align-items-center">
                                                        <span>
                                                            <img class="country-flag img-fluid" src="https://bootdey.com/img/Content/avatar/avatar6.png" />
                                                        </span>
                                                        <div class="country-name font-accent">Canada</div>
                                                    </div>
                                                    <div class="review-description">
                                                        <p>
                                                            The process was smooth, after providing the required info, Pragyesh sent me an outstanding packet of wireframes. Thank you a lot!
                                                        </p>
                                                    </div>
                                                    <span class="publish py-3 d-inline-block w-100">Published 4 weeks ago</span>


                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            {{-- review new code end  --}}
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<div class="modal" id="imgmodal">

    <div class="modal-dialog modal-dialog-centered" role="document">

        <div class="modal-content modal-content-demo">

            <div class="modal-body pd-20 pd-sm-40">

                <button type="button" class="close pos-absolute t-15 r-20 tx-26" data-bs-dismiss="modal"

                    aria-label="Close">

                    <span aria-hidden="true">&times;</span>

                </button>

                <div class="mb-4 main-content-label">Change Image</div>

                <hr >

                <!-- Change Image -->
                <form id="photo_upload">

                    @csrf

                       @if($client->images==NULL)

                       <div class="col-lg-12 text-center">

                        <img id="user_photo_selected" src="{{asset('assets/img/faces/3.jpg')}}" width="130" height="130" class="img-fluid rounded-circle"

                            style="width:130px;height:130px;object-fit:cover;" alt="user image">

                    </div>

                    @else

                    <div class="col-lg-12 text-center">

                        <img id="user_photo_selected" src="{{asset('images/product/'.$client->images)}}" width="130" height="130" class="img-fluid rounded-circle"

                            style="width:130px;height:130px;object-fit:cover;" alt="user image">

                    </div>

                    @endif

                    <div id="photo-error" class="text-muted small mt-1">

                        Allowed JPG, GIF or PNG. Max size of 2MB

                    </div>

                    <div class="row mt-3">

                        <div class="col-md-12"><label class="labels">Image*:</label>

                            <input type="file" accept="image/*" class="form-control" value="" id="photo" name='images'

                                required>

                        </div>

                    </div>

                    <div class="text-center p-2"><button class="btn modalb profile-button"

                            style="background:#00A5C5;color:white;" type="submit" id="btnSubmitUpload"><i

                                class="fa fa-spinner fa-spin  imageSpin" style="display:none;"></i> Save

                            Image</button>

                    </div>

                </form>

            </div>

        </div>
        <!-- modal-body -->

    </div>

</div>

<script src="https://cdn.ckeditor.com/ckeditor5/23.0.0/classic/ckeditor.js"></script>

<script>
    $( document ).ready(function() {
        $(".mobile_number").intlTelInput();
        $(".phone_number").intlTelInput();
    });
</script>

@endsection