@extends('includes.layout') <!-- Extend the layout -->

@section('content')

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/css/lightbox.min.css'>
<!-- Define the content section -->
<div class="bg-main-body">
    <div class="container-lg">
        <div class="row  py-5 ">
            <div class="col-md-6">
                <div class="bg-white p-3 rounded ">
                    <div class="row gx-0">
                        <div class="col-md-6 col-xl-4">
                            <div class="card border-0 h-100 pt-4 px-3">
                                <div class="position-relative">
                                    <div class="images-card">
                                        <img src="{{ $artist->profile_photo_path ? asset('saloon_profile/' . $artist->profile_photo_path) : asset('saloon_profile/user.png') }}" class="card-img-top" alt="...">

                                    </div>
                                    <div class="bg-dark position-absolute bottom-0 end-0 p-1">
                                        <div class="d-flex">
                                            <!-- <h1 class="text-theme mb-0 lh-34">20</h1>
                                                <p class="rotate text-white tx-9 mb-0">YEARS</p> -->
                                        </div>
                                        <p class="text-white mb-0 tx-9">
                                            @if($artist->type == 1)
                                                    Saloon
                                                @elseif($artist->type == 2)
                                                    Artist
                                                @else
                                                    Unknown Type
                                                @endif
                                        </p>
                                    </div>
                                </div>
                                <div class="card-body text-center">
                                    <h6 class="card-title mb-0 text-theme" >{{ ucwords($artist->name) }}</h6>
                                    <p class="text-theme tx-12 text-theme">{{-- ucwords($artist->name) --}}</p>

                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-xl-8">
                            <div class="card border-0 h-100">
                                <div class="card-body">

                                    @if (isset($artist->bio) && !empty($artist->bio))
                                    <div>
                                        <p>Bio</p>
                                        <p class="text-dim tx-12">{{ $artist->bio }}</p>
                                    </div>
                                    @endif

                                    <p>Skill</p>
                                    <div class="button-section">
                                        <div class="button-section">
                                            @foreach ($artist->artist_services->unique('service_id') as $key => $service)
                                            <a href="#" class="btn btn{{ $key + 1 }} tx-11 rounded-2 mb-1 p-1">{{ $service->services->name }}</a>
                                            @endforeach
                                        </div>
                                    </div>
                                    <!-- happy clinik section start here -->
                                    <div class="row mt-4">
                                        <div class="col-xl-6 col-lg-6 mb-1">
                                            <div class="pink  px-3 bg-light rounded d-flex">
                                                <a class="mt-3">
                                                    <img src="{{ asset('assets/images/happy.png') }}" alt="" class="img-fluid  w-75">
                                                </a>
                                                <div class="ptag">
                                                    <h6 class="card-title mb-0 mt-3">{{$happyClients}}+</h6>
                                                    <p class="text-dim tx-10">Happy Clients</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-xl-6 col-lg-6 mb-1">
                                            <div class=" d-flex bg-light  rounded px-3">
                                                <a class="mt-3">
                                                    <img src="{{ asset('assets/images/review.png') }}" class="img-fluid w-75">
                                                </a>
                                                <div class="ptag">
                                                    @php
                                                    $averageRating = 0; // Initialize average rating to 0
                                                    if ($reviews->count() > 0) {
                                                    $averageRating = $reviews->avg('rating');
                                                    }
                                                    $averageRating = round($averageRating);
                                                    @endphp
                                                    <h6 class="card-title mb-0  mt-3">{{$averageRating}}</h6>
                                                    <p class="text-dim tx-10">({{$reviews->count()}} Reviews)</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <!-- blanck section start here -->
                                        <div class="slider cutsom_slide mt-5">
                                            <div class="slide-track">

                                                <div class="slide">
                                                    <img src="{{ asset('assets/images/glam.png') }}" class="img-fluid">
                                                </div>
                                                <div class="slide">
                                                    <img src="{{ asset('assets/images/mansoon.png') }}" class="img-fluid">
                                                </div>
                                                <div class="slide">
                                                    <img src="{{ asset('assets/images/cut-style.png') }}" class="img-fluid">
                                                </div>
                                                <div class="slide">
                                                    <img src="{{ asset('assets/images/glam.png') }}" class="img-fluid">
                                                </div>
                                                <div class="slide">
                                                    <img src="{{ asset('assets/images/mansoon.png') }}" class="img-fluid">
                                                </div>
                                                <div class="slide">
                                                    <img src="{{ asset('assets/images/cut-style.png') }}" class="img-fluid">
                                                </div>
                                                <div class="slide">
                                                    <img src="{{ asset('assets/images/glam.png') }}" class="img-fluid">
                                                </div>
                                                <div class="slide">
                                                    <img src="{{ asset('assets/images/mansoon.png') }}" class="img-fluid">
                                                </div>
                                                <div class="slide">
                                                    <img src="{{ asset('assets/images/cut-style.png') }}" class="img-fluid">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 mt-3">
                    <div class="bg-white rounded p-3">
                        <div class=" row ">
                            <div class="col-xl-12 col-md-12 border-end">
                                <div class="accordion accordion-flush " id="accordionFlushExample">
                                    <div class="accordion-item bg-light mb-1">
                                        @foreach ($artist->artist_services->unique('service_id') as $key => $service)
                                        @php
                                        $childs = App\Models\ArtistsServices::with('subservices')
                                        ->where('service_id', $service->service_id)
                                        ->where('user_id', $service->user_id)
                                        ->where('status', 1)
                                        ->get();
                                        @endphp

                                        @if (count($childs) > 0)
                                        <div class="accordion-button bg-light collapsed dashed-dot" data-bs-toggle="collapse" data-bs-target="#flush{{ $key + 1 }}" aria-expanded="false" aria-controls="flush-collapseOne">
                                            <span class="col-md-7 fw-bold tx-13">{{ ucwords($service->services->name) }}</span>
                                        </div>

                                        <div id="flush{{ $key + 1 }}" class="accordion-collapse collapse @if ($key == 0) show @endif" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">

                                            <div class="accordion-body py-0 px-3">
                                                <div class="mt-2">
                                                    <ul class="list-group list-group-flush mt-2">
                                                        @foreach ($childs as $child)
                                                        @php
                                                        $user = Auth::user();
                                                        $cartService = null;

                                                        if (!empty($user)) {
                                                        $cartService = App\Models\CartServices::with('cart')
                                                        ->whereHas('cart', function ($query) use ($user, $artist) {
                                                        $query->where('user_id', $user->id)->where('vender_id', $artist->id);
                                                        })
                                                        ->where('subservice_id', $child->subservice_id)
                                                        ->first();
                                                        }

                                                        $cartService = App\Models\CartServices::with('cart')
                                                        ->where('subservice_id', $child->subservice_id)
                                                        ->first();
                                                        @endphp

                                                        <li class="d-flex justify-content-between align-items-center dashed-dot">
                                                            <div class="form-check d-inline-block p-0">
                                                                <p class="tx-12 mb-0">
                                                                    {{ ucwords($child->subservices->name) ?? 'No Service' }}
                                                                </p>
                                                                <p class="tx-14 text-theme fw-bold">
                                                                    ₹{{ $service->price }}
                                                                    <br> Duration: {{ $child->duration }}
                                                                    <br>
                                                                    @if($child->gender == 'M') Male @else Female @endif
                                                                </p>
                                                            </div>
                                                            @if (Auth::check() && (Auth::user()->type == 1 || Auth::user()->type == 2))

                                                            @else
                                                            <div class="qty-container quant">
                                                                <button class="qty-btn-minus text-dark" service-data="{{ $service->service_id }}" subservice-data="{{ $child->subservices->id }}" price-data="{{ $service->price }}" type="button" inc-data="{{ $child->id }}" aria-label="Decrease"><i class="fa fa-minus"></i></button>
                                                                <input type="hidden" name="vender_id" value="{{ $artist->id }}">
                                                                <input type="text" name="qty" value="{{ $cartService->quantity ?? 0 }}" class="input-qty{{ $child->id }} input-box" />

                                                                <button class="qty-btn-plus text-dark" type="button" inc-data="{{ $child->id }}" service-data="{{ $service->service_id }}" subservice-data="{{ $child->subservices->id }}" price-data="{{ $service->price }}" aria-label="Increase"><i class="fa fa-plus"></i></button>
                                                            </div>
                                                            @endif
                                                        </li>
                                                        @endforeach
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                        @endif
                                        @endforeach
                                    </div>


                                    <!-- collapse -->
                                </div>
                            </div>
                            <!-- 6 -->

                            <!-- 6 -->
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="bg-white rounded p-3 border-bottom">
                    <div class="row gx-2">
                        <p>Photos</p>

                        @foreach ($artist->gallery as $key => $item)
                        @if($item->file_type == 'image')
                        <div class="col-md-3 mb-2">
                            <a class="example-image-link" href="{{ asset('Saloon_photos/' . $item->image_file) }}" data-lightbox="example-set" data-title="Click the right half of the image to move forward."><img class="example-image img-fluid hifix" src="{{ asset('Saloon_photos/' . $item->image_file) }}" alt=""></a>
                        </div>
                        @endif
                        @endforeach

                    </div>
                </div>
                <div class="bg-white rounded p-3">
                    <div class="row gx-2">
                        <p>Videos</p>


                        @foreach ($artist->gallery as $key => $item)
                        @if($item->file_type == 'video')
                        <div class="col-md-4 mb-2">
                            
                                <video width="100%" controls="" muted="" height="150px" class="bg-dark">
                                    <source src="{{ asset('saloonvideos/' . $item->image_file) }}" type="video/mp4">
                                </video>
                        </div>
                        @endif
                        @endforeach

                    </div>
                </div>
                <!-- collapse -->
                <div class="bg-white rounded p-3 mt-3">
                    <div class="col-md-12 ">
                        <div class="card border-0 ">
                            <div class="card-body ">
                            @php
                                $userType = auth()->user()->type ?? null; // Assuming the user is authenticated
                                @endphp

                                @if ($userType !== "1" && $userType !== "2")
                                <a type="button" class="text-decoration-none float-end tx-13 mb-2" data-bs-toggle="modal" data-bs-target="#review">
                                    Write Review
                                </a>
                                @endif
                                <div>
                                <h5>Review</h5>
                                <div class="stars">
                                    <form action="">
                                        @php
                                        $averageRating = 0; // Initialize average rating to 0
                                        if ($reviews->count() > 0) {
                                        $averageRating = $reviews->avg('rating');
                                        }
                                        $averageRating = round($averageRating);
                                        @endphp
                                        @for ($i = 5; $i > 0; $i--)
                                        @php $checked=($i==(int)$averageRating)?'checked':''; @endphp
                                        <input class="star star-{{ $i }}" id="star-{{ $i }}-{{ $artist->id }}" type="radio" name="star" {{ $checked }} disabled />
                                        <label class="star star-{{ $i }} tx-15" for="star-{{ $i }}-{{ $artist->id }}"></label>
                                        @endfor

                                        <div class="">
                                            <p class="py-2 mb-0 text-dim">{{ $averageRating }} out of 5</p>
                                        </div>

                                    </form>
                                </div>


                                <div class="row mt-3">
                                    @foreach ($artist->reviews as $review)
                                    <div class="col-md-6 mt-1">
                                        <h6 class="card-title mb-1">{{ ucwords($review->user->name) }}</h6>

                                        <div class="">
                                            <div class="stars me-2 d-flex gap-3 align-items-center">
                                                <form action="" class="">
                                                    @for ($i = 5; $i > 0; $i--)
                                                    @php $checked=($i==(int)$averageRating)?'checked':''; @endphp
                                                    <input class="star star-{{$i}}" id="star-{{$i}}-{{$artist->id}}" type="radio" name="star" {{$checked}} disabled />
                                                    <label class="star star-{{$i}} tx-15" for="star-{{$i}}-{{$artist->id}}"></label>

                                                    @endfor
                                                </form>
                                                <div class="">
                                                    <p class="tx-12 mb-0">{{ $review->rating }}</p>
                                                </div>
                                            </div>
                                        </div>
                                        <p class="text-dim tx-13">{{ $review->comment }}</p>
                                    </div>
                                    @endforeach
                                </div>
                            </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- row / end -->
    </div>
</div>
<div class="modal fade" id="review" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">

                <h5 class="modal-title" id="exampleModalLabel">Write Review</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form action="#" id="writeReview" method="POST">
                    @csrf
                    <h6 class="mb-1">Rate This Artist</h6>
                    <div class="stars">
                        <input type="hidden" name="saloon_id" value="{{ $artist->id }}" />
                        <input type="hidden" name="user_id" value="{{ auth()->id() }}" />
                        <input class="star star-a" id="star-a" type="radio" name="star" value="5" />
                        <label class="star star-a" for="star-a"></label>
                        <input class="star star-b" id="star-b" type="radio" name="star" value="4" />
                        <label class="star star-b" for="star-b"></label>
                        <input class="star star-c" id="star-c" type="radio" name="star" value="3" />
                        <label class="star star-c" for="star-c"></label>
                        <input class="star star-d" id="star-d" type="radio" name="star" value="2" />
                        <label class="star star-d" for="star-d"></label>
                        <input class="star star-e" id="star-e" type="radio" name="star" value="1" />
                        <label class="star star-e" for="star-e"></label>

                    </div>

                    <textarea class="form-control" rows="4" placeholder="Leave a comment here" name="comments" id="floatingTextarea"></textarea>

            </div>

            <div class="modal-footer">
                <!-- <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary">Save Review</button> -->
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="submitReview">Save Review</button>
                </form>
            </div>

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

<script>    
    function searchServices() {
        var input, filter;
        input = document.getElementById('serviceSearchInput');
        filter = input.value.toUpperCase();
        var saloonId = window.location.pathname.split('/').pop(); // Extract saloonId from the URL

        $.ajax({
            url: "{{ route('saloon-view', ['saloonId' => '__saloonId__']) }}".replace('__saloonId__', saloonId),
            method: 'GET',
            data: {
                search: input.value
            }, // Send the input value
            success: function(data) {
                console.log('Data fetched successfully:', data);

                // Update the accordion with the received data
                updateAccordion(data);
            },
            error: function(error) {
                console.error('Error fetching data:', error);
            }
        });
    }


    function updateAccordion(data) {

        var accordionContainer = $('#accordionFlushExample');
        accordionContainer.empty(); // Clear existing content

        // Check if "saloon" section and "artist_services" array exist
        if (data.saloon && data.saloon.artist_services && data.saloon.artist_services.length > 0) {
            // Iterate over the received data and update the accordion
            $.each(data.saloon.artist_services, function(key, service) {
                if (service.subservices && service.services && service.services.name) { // Check if service.services is not null
                    var accordionButton = $(
                        '<div class="accordion-button bg-light collapsed dashed-dot" data-bs-toggle="collapse" data-bs-target="#flush' +
                        (key + 1) +
                        '" aria-expanded="false" aria-controls="flush-collapseOne"><span class="col-md-7 fw-bold tx-13">' +
                        service.services.name +
                        '</span></div>'
                    );
                    accordionContainer.append(accordionButton);

                    var accordionCollapse = $(
                        '<div id="flush' + (key + 1) + '" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample"></div>'
                    );
                    var accordionBody = $('<div class="accordion-body py-0 px-3"></div>');
                    var serviceList = $('<ul class="list-group list-group-flush mt-2"></ul>');

                    // Single sub-service
                    var child = service.subservices;
                    console.log(child);
                    var listItem = $(
                        '<li class="d-flex justify-content-between align-items-center dashed-dot">' + '<div class="form-check d-inline-block p-0">' + '<p class="tx-12 mb-0">' + (child.name ? child.name : 'No Service') + '</p>' + '<p class="tx-14 text-theme fw-bold">' + service.price + '</p>' + '</div>' + '<div class="qty-container quantity">' +
                        '<button class="qty-btn-minus text-dark" service-data="' + service.service_id + '" subservice-data="' +
                        child.id + '" price-data="' + service.price + '" type="button" inc-data="' + child.id + '" aria-label="Decrease"><i class="fa fa-minus"></i></button>' + '<input type="text" name="qty" value="0" class="input-qty' + child.id +
                        ' input-box" readonly />' + '<button class="qty-btn-plus text-dark" type="button" inc-data="' + child.id +
                        '" service-data="' + service.service_id + '" subservice-data="' + child.id + '" price-data="' + service.price +
                        '" aria-label="Increase"><i class="fa fa-plus"></i></button>' + '</div>' + '</li>');

                    serviceList.append(listItem);
                    accordionBody.append(serviceList);
                    accordionCollapse.append(accordionBody);
                    accordionContainer.append(accordionCollapse);
                }
            });
        } else {
            // If "saloon" or "artist_services" is empty or null, you can handle it here (e.g., show a message)
            accordionContainer.html('<p>No services found.</p>');
        }
    }
</script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/js/lightbox.min.js'></script>
@endsection