@extends('user.layout.master')
@section('content')
    <style>
        .grid-view .brows-job-company-img {
            width: 65%;
            margin: 10px auto;
            height: 226px;
            display: flex;
            border: none;
            background: #fff;
            align-items: center;
            border-radius: 5%;
            line-height: 80px;
        }

        .grid-view .brows-job-company-img img {
            margin: 0 auto;
            vertical-align: middle;
            display: inline-block;
            max-width: 100%;
            line-height: 50px;
            object-fit: cover;
            border-radius: 5%;

        }

        .grid-view .brows-job-company-video {
            margin: 0 auto;
            vertical-align: middle;
            display: inline-block;
            max-width: 100%;
            line-height: 50px;
            object-fit: cover;
            border-radius: 5%;
        }

        .img-responsive {
            padding-bottom: 10px;
            width: 100%;
            height: 200px;
        }

        @media(min-width:600px) {
            .ur-detail-wrap.top-lay {
                width: 30%;
                margin: auto;
                display: flex;
                position: relative;
                justify-content: center;
                align-items: center;
                padding: 2.5em 2em;
                border-radius: 6px;
                -webkit-transform: translateY(-80px);
                -o-transform: translateY(-80px);
                transform: translateY(-80px);
                background: #fff;
                box-shadow: 0 0 10px 2px rgb(0 0 0 / 10%);
            }
        }

    </style>

    <!-- Title Header Start -->
    <section class="inner-header-title">
        <div class="container">
            <img src={{ asset('user/assets/img/DjLogo.png') }} style="object-fit: contain;height: 100px;margin-top: -38px"
                class="logo logo-scrolled" alt="">
            <h1>DJ Profile</h1>
        </div>
    </section>
    <div class="clearfix"></div>
    <!-- Title Header End -->

    <!-- Company Detail Start -->
    <section class="detail-desc">
        <div class="container">

            <div class="ur-detail-wrap top-lay">

                <div class="ur-detail-box">

                    <div class="ur-thumb">
                        @if (!empty($dj_details->entertainerDetail))
                            <img src="{{ asset('/uploads/dj/profile/' . $dj_details->image) }}" class="img-responsive"
                                alt="" />
                        @endif
                    </div>
                    <div class="ur-caption">
                        <h4 class="ur-title">{{ $dj_details->name }}</h4>
                        <span class="ur-designation">DJ</span>
                        <div class="rattings">
                            {{-- {{dd($dj_details->totalavgRating)}} --}}
                            @if ($dj_details->totalavgRating->isNotEmpty())
                                {{-- {{dd($dj_details->totalavgRating)}} --}}
                                @php
                                    $total = 5;
                                    $total_rat = round($dj_details->totalavgRating[0]['total_rating']);
                                @endphp
                                @for ($i = 1; $i <= $total_rat; $i++)
                                    <i class="fa fa-star fill"></i>
                                @endfor
                                {{-- <i class="fa fa-star-half fill"></i> --}}
                                @if ($total != $total_rat)
                                    @php
                                        $diff = $total - $total_rat;
                                        //dd($diff);
                                    @endphp
                                    @for ($i = 1; $i <= $diff; $i++)
                                        <i class="fa fa-star"></i>
                                    @endfor
                                    {{-- <i class="fa fa-star"></i> --}}
                                @endif
                            @else
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                            @endif
                            {{-- <i class="fa fa-star filled"></i>
                            <i class="fa fa-star filled"></i>
                            <i class="fa fa-star filled"></i>
                            <i class="fa fa-star filled"></i>
                            <i class="fa fa-star"></i> --}}
                        </div>
                    </div>

                </div>
                {{-- <div class="ur-detail-btn">
                    <a href="#" class="btn btn-warning mrg-bot-10 full-width">Follow Now</a><br>
                    <a href="#" class="btn btn-primary full-width">Get in Touch</a>
                </div> --}}

            </div>

        </div>
    </section>
    <!-- Company Detail End -->

    <!-- company full detail Start -->
    <section class="full-detail-description full-detail">
        <div class="container">
            <div class="row">
                <div class="col-lg-4 col-md-4">
                    <div class="full-sidebar-wrap">

                        <!-- Company overview -->
                        {{-- <div class="sidebar-widgets">

                            <div class="ur-detail-wrap">
                                <div class="ur-detail-wrap-header">
                                    <h4>DJ Overview</h4>
                                </div>
                                <div class="ur-detail-wrap-body">
                                    <ul class="ove-detail-list">

                                        <li>
                                            <i class="ti-ruler-pencil"></i>
                                            <h5>Register</h5>
                                            <span>July 10 2019</span>
                                        </li>



                                        <li>
                                            <i class="ti-face-smile"></i>
                                            <h5>Rating </h5>
                                            <span>Good</span>
                                        </li>

                                        <li>
                                            <i class="ti-email"></i>
                                            <h5>DJ Email</h5>
                                            <span>DJBookin@gmail.com</span>
                                        </li>

                                        <li>
                                            <i class="ti-mobile"></i>
                                            <h5>Call</h5>
                                            <span>+91 DJ Booking</span>
                                        </li>

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

                        </div> --}}
                        <!-- /Company overview -->
                        <!-- Follow Links -->
                        <div class="sidebar-widgets">

                            <div class="ur-detail-wrap">
                                <div class="ur-detail-wrap-header">
                                    <h4>Follow Links</h4>
                                </div>
                                <div class="ur-detail-wrap-body">
                                    <ul class="follow-links">
                                        @if (!empty($dj_details->entertainerDetail))
                                            <li><a href="#"><i class="fa fa-paypal"></i>Email:
                                                    {{ $dj_details->email }}</a></li>
                                            <li><a href="#"><i class="fa fa-paypal"></i>Paypal Email:
                                                    {{ $dj_details->entertainerDetail->paypal_email }}</a></li>
                                            <li><a href="#"><i class="ti-twitter-alt"></i>Website:
                                                    {{ $dj_details->entertainerDetail->website }}</a></li>
                                            <li><a href="#"><i class="ti-facebook"></i>Facebook:
                                                    {{ $dj_details->entertainerDetail->facebook }}</a></li>
                                            <li><a href="#"><i class="fa fa-tiktok"></i>Tiktok:
                                                    {{ $dj_details->entertainerDetail->tiktok }}</a></li>
                                            <li><a href="#"><i class="fa fa-phone"></i>Phone Number:
                                                    {{ $dj_details->entertainerDetail->phone_number }}</a></li>
                                            <li><a href="#"><i class=""></i>IG:
                                                    {{ $dj_details->entertainerDetail->ig }}</a></li>
                                            <li><a href="
                                                            #"><i class="far fa-calendar"></i>DOB:
                                                    {{ $dj_details->entertainerDetail->dob }}</a></li>
                                            <li><a href="#"><i class="far fa-calendar-alt"></i>Experience Start
                                                    Date:{{ $dj_details->entertainerDetail->experience_start_date }}</a>
                                            </li>
                                            <li><a href="#"><i class="fa fa-clock-o "></i>Rate Per Hour:
                                                    {{ $dj_details->entertainerDetail->rate_per_houur }}</a></li>

                                        @endif

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

                        </div>
                        <!-- Working Days -->
                        <div class="sidebar-widgets">

                            <div class="ur-detail-wrap">
                                <div class="ur-detail-wrap-header">
                                    <h4>DJ Ratting</h4>
                                </div>
                                <div class="ur-detail-wrap-body rattings">
                                    <ul class="working-days">

                                        @if ($dj_details->avgRating->isNotEmpty())
                                            @foreach ($dj_details->avgRating as $key => $avgRatingvalue)
                                                @php
                                                    $total = 5;
                                                    $total_rat = round($avgRatingvalue['total_rating']);
                                                    //dd($total_rat);
                                                @endphp
                                                <li>{{ $avgRatingvalue['name'] }}<span>
                                                        @for ($i = 1; $i <= $total_rat; $i++)
                                                            <i class="fa fa-star fill"></i>
                                                        @endfor
                                                        {{-- <i class="fa fa-star-half fill"></i> --}}
                                                        @if ($total != $total_rat)
                                                            @php
                                                                $diff = $total - $total_rat;
                                                                //dd($diff);
                                                            @endphp
                                                            @for ($i = 1; $i <= $diff; $i++)
                                                                <i class="fa fa-star"></i>
                                                            @endfor
                                                            {{-- <i class="fa fa-star"></i> --}}
                                                        @endif
                                                    </span></li>
                                            @endforeach
                                        @else
                                            @foreach ($review as $key => $reviewval)
                                                <li>{{ $reviewval->name }}<span>
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star"></i>
                                                        <i class="fa fa-star"></i>
                                                    </span></li>
                                            @endforeach
                                        @endif
                                    </ul>
                                </div>
                            </div>

                        </div>
                        <!-- /Working Days -->




                        <!-- Say Hello -->
                        {{-- <div class="sidebar-widgets">

                            <div class="ur-detail-wrap">
                                <div class="ur-detail-wrap-header">
                                    <h4>Get In Touch</h4>
                                </div>
                                <div class="ur-detail-wrap-body">
                                    <form action="#">
                                        <div class="form-group">
                                            <label>Name</label>
                                            <input type="email" class="form-control">
                                        </div>
                                        <div class="form-group">
                                            <label>Email</label>
                                            <input type="email" class="form-control">
                                        </div>
                                        <div class="form-group">
                                            <label>Message</label>
                                            <textarea class="form-control"></textarea>
                                        </div>
                                        <button type="submit" class="btn btn-primary">Submit</button>
                                    </form>
                                </div>
                            </div>

                        </div> --}}
                        <!-- /Say Hello -->

                    </div>
                </div>
                <div class="col-lg-8 col-md-8">
                    <div class="row-bottom">
                        <h2 class="detail-title">About DJ</h2>
                        <p>@if (!empty($dj_details->entertainerDetail)) {{ $dj_details->entertainerDetail->bio }} @endif</p>
                    </div>
                </div>
                <div class="col-lg-8 col-md-8">
                    <div class="row-bottom">
                        <h2 class="detail-title">Event Type</h2>
                        <p>
                            @if (!$dj_details->events->isEmpty())
                                @foreach ($dj_details->events as $key => $event_value)
                                    {{ $event_value->name . ' ' }}
                                @endforeach
                            @endif
                        </p>
                    </div>
                </div>
                <div class="col-lg-8 col-md-8">
                    <div class="row-bottom">
                        <h2 class="detail-title">Music Genres</h2>
                        <p>
                            @if (!$dj_details->music->isEmpty())
                                @foreach ($dj_details->music as $key => $music_value)
                                    {{ $music_value->name . ' ' }}
                                @endforeach
                            @endif
                        </p>
                    </div>
                </div>
                <div class="col-lg-8 col-md-8">

                    <div class="row-bottom">
                        <h2 class="detail-title">DJ Gallery</h2>
                        @if ($dj_details->galleries->isNotEmpty())
                            @foreach ($dj_details->galleries as $key => $galleriesvalue)
                                <div class="col-sm-4">
                                    <img class="img-responsive" src="{{ asset('imgfiles/' . $galleriesvalue->image) }}" />
                                </div>
                            @endforeach
                        @endif
                    </div>

                </div>
                <div class="col-lg-8 col-md-8">

                    <div class="row-bottom">
                        <h2 class="detail-title">Video</h2>
                         @if ($dj_details->galleries_video->isNotEmpty())
                            @foreach ($dj_details->galleries_video as $key => $galleries_video_value)
                                <div class="col-sm-4">
                                    <video autoplay="" loop="" controls="" width="200" height="200">
                                        <source type="video/mp4" src="{{URL::asset('/uploads/dj/video/'.$galleries_video_value['image'])}}">
                                        </video>
                                </div>
                          @endforeach
                        @endif
                    </div>

                </div>




            </div>

            <div class="row">

                <div class="col-lg-12 col-md-12">

                    {{-- <div class="row-bottom">
                        <h2 class="detail-title">About DJ</h2>
                        @if (!empty($dj_details->entertainerDetail))
                            <p>Paypal Email: {{ $dj_details->entertainerDetail->paypal_email }}</p>
                            <p>Website: {{ $dj_details->entertainerDetail->website }}</p>
                            <p>IG: {{ $dj_details->entertainerDetail->ig }}</p>
                            <p>Facebook: {{ $dj_details->entertainerDetail->facebook }}</p>
                            <p>Tiktok: {{ $dj_details->entertainerDetail->tiktok }}</p>
                            <p>Phone Number: {{ $dj_details->entertainerDetail->phone_number }}</p>
                            <p>DOB: {{ $dj_details->entertainerDetail->dob }}</p>
                            <p>Start Date: {{ $dj_details->entertainerDetail->experience_start_date }}</p>
                            <p>Rate Per Hour: {{ $dj_details->entertainerDetail->rate_per_houur }}</p>
                        @endif


                    </div> --}}

                    {{-- <div class="row-bottom">
                        <h2 class="detail-title">Gallary</h2>
                        
                        <div class="row extra-mrg">

                            <div class="col-md-4 col-sm-4">
                                <div class="grid-view brows-job-list">
                                    <div>
                                        <img src="user/assets/img/Sunset.jpg" class="brows-job-company-img" alt="" />
                                    </div>
                                    <div class="brows-job-position">
                                        <h3>Sunset</h3>
                                    </div>
                                </div>
                            </div>

                        </div>


                    </div>

                    <div class="row-bottom">
                        <h2 class="detail-title">Video</h2>

                        <div class="row extra-mrg">

                            <div class="col-md-4 col-sm-4">
                                <div class="grid-view brows-job-list">
                                    <div>
                                        <video class="brows-job-company-video" controls>
                                            <source src="user\assets\img\Sample.mp4" type="video/mp4">
                                            Your browser does not support the video tag.
                                        </video>

                                    </div>
                                    <div class="brows-job-position">
                                        <h3>BGM</h3>
                                    </div>

                                </div>
                            </div>

                            <div class="col-md-4 col-sm-4">
                                <div class="grid-view brows-job-list">
                                    <div>
                                        <video class="brows-job-company-video" controls>
                                            <source src="user\assets\img\EYmZPS.mp4" type="video/mp4">
                                            Your browser does not support the video tag.
                                        </video>

                                    </div>
                                    <div class="brows-job-position">
                                        <h3>BGM</h3>
                                    </div>

                                </div>
                            </div>


                        </div>


                    </div> --}}

                </div>



            </div>
        </div>
    </section>
    <!-- company full detail End -->


@endsection