@extends('dashboard.dashboard_layouts.dashboard_master')

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

@section('admin_dashboard_css')
    <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>
@endsection

@section('admin_dashboard_content')
    <div class="content dashboard-content h-100">
        <h1 class="dashboard-content-h1">Service Provider {{ $client->first_name }}</h1>
        <div class="content-wrap">

            <!-- breadcrumb -->
            <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>

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

                            </div>

                        </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="#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="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>

        </div>
    </div>
@endsection

@section('admin_dashboard_script')

@endsection