@extends('frontend.layouts.app')

@section('content')
    @php
        $breadCrump2 = 'Service Detail';
    @endphp
<style>



    @media (max-width: 1440px) {
        .main-wrapper {
            width: 100vw;
        }
    }

    .back-text {
        position: relative;
        z-index: -2000;
    }


    .reviews {
        overflow: hidden;
        padding-bottom: 5px
    }

    .reviews-title {
        text-align: center;
        margin-bottom: 7rem;
    }

    .reviews-title p {
        font-family: 'Playfair Display', serif;
        font-size: 5rem;
        color: white;
    }

    .reviews-card {
        display: grid;
        grid-template-columns: 1fr 300px;
        /* width: 781px; */
    }

    @media (max-width: 425px) {
        .reviews-card {
            grid-template-columns: 1fr;
            width: fit-content;
        }
    }

    .card-img {
        max-width: 120px;
        width: fit-content;
        height: fit-content;
    }

    .card-text {
        background-color: white;
        padding: 0rem 1rem 1rem 1rem;
        /* height: 359px; */
        overflow: hidden;
    }

    @media (max-width: 425px) {
        .card-text {
            padding: 1rem 2rem;
            width: 70vw;
            height: fit-content;
        }
    }

    .card-title p {
        font-weight: 800;
        font-size: 2rem;
        line-height: 105.52%;
    }

    .card-para {
        margin-top: 1rem;
        margin-bottom: 0.8rem;
    }

    .card-author {
        display: flex;
        align-items: center;
        gap: 0.3rem;
    }


    .reviews-row {
        display: flex;
        gap: 2rem;
    }

    @media (max-width: 425px) {
        .card-title p {
            font-weight: 700;
            font-size: 1rem;
        }

        .card-para p {
            font-size: 0.7rem;
        }

        .card-author p {
            font-size: 0.7rem;
        }

        .reviews-row {
            flex-direction: column;
            margin: 0 auto;
            width: fit-content;
        }

        .reviews img {
            width: 70vw;
        }
    }

    .row-first,
    .row-third {
        animation: move-first 20s linear infinite;
        margin-bottom: 2rem;
    }

    .row-second {
        transform: translateX(-1000px);
        animation: move-second 20s linear infinite;
        margin-bottom: 2rem;
    }


    @media (max-width: 425px) {

        .row-second,
        .row-third {
            display: none;
        }

        .row-first {
            animation: none;
        }
    }

    @keyframes move-first {
        50% {
            transform: translateX(-1000px);
        }

        100% {
            transform: translateX(0);
        }
    }

    @keyframes move-second {
        50% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(-1000px);
        }
    }


    .rating_and_reviews h5 {
font-size: 16px;
color: #0e0d39;
border-bottom: 1px solid #ccc;
padding-bottom: 13px;
margin-bottom: 15px;
font-weight: 600;
}
</style>
    <!--Job listing start -->
    <div class="wrapper-inner">
        <div class="job-details">
            <div class="container">
                <div class="row">
                    <div class="col-lg-9">
                        <div class="detail-bx">
                            @if ($service->files && count($service->files) > 0)
                                <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
                                    <div class="carousel-inner">

                                        @foreach ($service->files as $key => $file)
                                        <div class="carousel-item {{ $key == 0 ? 'active' : '' }}">
                                            @if (in_array(pathinfo($file->file, PATHINFO_EXTENSION), ['mp4', 'mov', 'avi', 'webm']))
                                                <!-- Video Element -->
                                                <video style="height: 400px; width: 100%;" class="d-block" controls>
                                                    <source src="{{ asset('frontend/serviceProvider/service/' . $file->file) }}" type="video/{{ pathinfo($file->file, PATHINFO_EXTENSION) }}">
                                                    Your browser does not support the video tag.
                                                </video>
                                            @elseif (in_array(pathinfo($file->file, PATHINFO_EXTENSION), ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'svg']))
                                                <!-- Image Element -->
                                                <img style="height: 400px" class="d-block w-100" src="{{ asset('frontend/serviceProvider/service/' . $file->file) }}" alt="Media File">
                                            @else
                                                <!-- Unsupported File Type -->
                                                <p>Unsupported file type.</p>
                                            @endif
                                        </div>
                                    @endforeach
                                    </div>
                                    <a class="carousel-control-prev" href="#carouselExampleControls" role="button"
                                        data-slide="prev">
                                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                        <span class="sr-only">Previous</span>
                                    </a>
                                    <a class="carousel-control-next" href="#carouselExampleControls" role="button"
                                        data-slide="next">
                                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                        <span class="sr-only">Next</span>
                                    </a>
                                </div>
                            @else
                            @if($service->category?->image)
                            <img src="{{asset('backend/category/'.$service->category?->image)}}" alt="recent-img01">
                            @else
                            <img src="{{ asset('frontend/images/recent-img04.jpg') }}" alt="recent-img01">

                            @endif
                            @endif

                            <div class="detail-info">
                                <div class="detail-info-title d-flex align-items-center justify-content-between">
                                    <div class="info-title-lt">
                                        <span>Service Title</span>
                                        <h5>{{ $service->title }}</h5>
                                    </div>
                                    <div class="info-title-rt">
                                        @if(auth()->guard('employer')->check())
                                        <a href="{{route('employer.service.book',$service->id)}}" class="btn-custom"> Book Now</a>
                                          @elseif(!auth()->guard('employer')->check())
                                          @else
                                          <a href="{{ route('users.login').'?serviceid='.$service->id }}" class="btn-custom">Book Now</a>
                                          @endif

                                    </div>
                                </div>

                                <div class="underline"></div>


                                @if ($service->faqs?->count() > 0)
                                    <div id="faqs">

                                        <h4>Service FAQs</h4>
                                        <div id="accordion" class="faq-bx">

                                            @foreach ($service->faqs as $key => $faq)
                                                <div class="card">
                                                    <div class="card-header" id="headingOne">
                                                        <a href="javascript:void(0);" class="btn btn-link"
                                                            data-toggle="collapse" data-target="#collapseOne"
                                                            aria-expanded="true" aria-controls="collapseOne">
                                                            {{ $faq->question }}
                                                        </a>
                                                    </div>

                                                    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
                                                        data-parent="#accordion">
                                                        <div class="card-body">
                                                            <p>{{ $faq->answer }}</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach



                                        </div>
                                    </div>
                                @endif

                                <div class="underline"></div>
                                <div class="detail-info-list">
                                    <span>Service Description</span>
                                    <p class="mb-3 mb-lg-4">{!! $service->description !!}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="detail-bx job-detail">
                          <h5>Service Details</h5>
                           <ul>
                            <li>
                              <div class="job-title">Service Category & Subcategory</div>
                              <div class="job-detail-info">{{$service->category?->title}}</div>
                           </li>
                            <li>
                              <div class="job-title">Pricing </div>
                              <div class="job-detail-info">                    @if(floatval($service->discounted_amount==0))
                                <strong> ${{$service->pricing}}</strong>
                                @else
                                <strong> <del>${{$service->pricing}}</del> ${{$service->discounted_amount}}</strong>
                                @endif</div>
                           </li>
                           
                            <li>
                               <div class="job-title">Pricing Options</div>
                               <div class="job-detail-info">{{$service->pricing_option}}</div>
                            </li>
                            <li>
                              <div class="job-title">Location </div>
                              <div class="job-detail-info">{{ $service->city?->name . ',' . $service->state?->name . ',' . $service->country?->name }}</div>
                           </li>

                         


                 <li>
                  <div class="job-title">Available Dates & Times</div>
                  <div class="job-detail-info">{{$service->start_datetime? \Carbon\Carbon::parse($service->start_datetime)->format(config('GET.front_date_time_format', 'd-m-Y'))
                    : 'N/A';}}</span> / <span>{{$service->end_datetime? \Carbon\Carbon::parse($service->end_datetime)->format(config('GET.front_date_time_format', 'd-m-Y'))
                        : 'N/A';}}
                    <div class="date-txt">
                        @if($service->availableDays?->count()>0)
                        {{implode(', ',$service->availableDays?->pluck('day')->toArray()),$service->id}}
                        @endif
                     </div>
                  </div>
                </li>
                           </ul>
                        </div>
                      </div>
                </div>
            </div>
        </div>
    </div>
    @if(count($reviews)>0)
    <div class="container pb-5">
        <div class="row">
            <div class="col-md-12">
                <div class="detail-bx rating_and_reviews">
                  <h5>Rating & Reviews</h5>
                    <section class="reviews">
                        <div>
                            <div class="reviews-row row-first">
                                @forelse ($reviews as $item)
                                    <div class="reviews-card">
                                        @if ($item->reviewer?->profile_image)
                                            <img class="card-img img-thumbnail"
                                                src="{{ asset('frontend/employer/profile_images/' . $item->reviewer?->profile_image) }}"
                                                alt="">
                                        @else
                                            <img class="card-img img-thumbnail" src="{{ asset('frontend/images/profile-img.png') }}"
                                                alt="">
                                        @endif

                                        <div class="card-text">
                                            <div class="rating">
                                             @for ($i = 1; $i <= 5; $i++)
                                                                    @if ($i <= $item->rating)
                                                                        <!-- Orange Star -->
                                                                        <i class="fas fa-star" style="color: #ffc107;"></i>
                                                                    @else
                                                                        <!-- Grey Star -->
                                                                        <i class="fas fa-star" style="color: #e4e5e9;"></i>
                                                                    @endif
                                                                @endfor
                                            </div>
                                            <div class="card-para">
                                                {{ \Illuminate\Support\Str::limit($item->reviews ?: '-', 100)}}
                                            </div>

                                            <div class="card-author">
                                                <svg width="9" height="2" viewBox="0 0 9 2" fill="none"
                                                    xmlns="http://www.w3.org/2000/svg">
                                                    <path d="M0.526123 1.13867H8.25949" stroke="black"
                                                        stroke-width="0.822209" />
                                                </svg>
                                                <p>{{$item->reviewer?->full_name}}</p>
                                            </div>
                                        </div>
                                    </div>
                                @empty
                                @endforelse

                            </div>

                        </div>
                    </section>

                </div>
            </div>

        </div>
    </div>
    @endif
    <!-- Job listing start -->
    <!-- Job listing start -->
@endsection
@push('front-script')
@endpush
