@extends('front.include.app')
@section('content')
<style>
    html {
        scroll-behavior: smooth;
    }

    #studio-packages {
        scroll-margin-top: 80px;
    }

    .scroll-to-packages {
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .scroll-to-packages:hover {
        transform: translateY(-2px);
    }
</style>
</style>
    <section class="you-creative">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <div class="creativewraps">
                        <h3 class="subHead">{{ $studio->name ?? 'Studio' }} Studio</h3>
                        <h2>{{ $studio->description ?? 'No description available' }}</h2>
                        <p>{{ $studio->amenities ?? 'No amenities information available' }}</p>
                        <div class="studio-details mb-4">
                            <p><strong>Price:</strong>
                                @if(isset($studio->price) && isset($studio->booking_type))
                                    ${{ number_format($studio->price, 2) }} {{ str_replace('_', ' ', $studio->booking_type) }}
                                @else
                                    Price not specified
                                @endif
                            </p>
                            <p><strong>Max Guests:</strong> {{ $studio->no_guest ?? 'Not specified' }}</p>
                            <p><strong>Status:</strong> {{ isset($studio->is_available) ? ($studio->is_available ? 'Available' : 'Not Available') : 'Status unknown' }}</p>
                        </div>
                        {{-- <a href="{{ route('front.index') }}?studio={{ $studio->id }}#studio-booking" class="themeBtn">Book Now</a> --}}
                        <a href="#studio-packages" class="themeBtn scroll-to-packages">View Packages</a>
                    </div>
                </div>
                <div class="col-md-6">
                    <figure>
                        @if($studio->getFirstMediaUrl('studio_images'))
                            <img src="{{ $studio->getFirstMediaUrl('studio_images') }}" class="img-fluid" alt="{{ $studio->name ?? 'Studio Image' }}">
                        @else
                            <img src="{{ asset('front/images/pasimg1.png') }}" class="img-fluid" alt="Default Studio Image">
                            <div class="text-muted mt-2">No studio image available</div>
                        @endif
                    </figure>
                </div>
            </div>
        </div>
    </section>

    @if($studio->getFirstMediaUrl('amenities_image') || !empty($studio->features))
    <section class="amefeasec">
        <div class="container">
            <h2 class="mainHead mb-5">Amenities & Features</h2>
            <div class="row align-items-center">
                @if($studio->getFirstMediaUrl('amenities_image'))
                <div class="col-md-6">
                    <figure>
                        <img src="{{ $studio->getFirstMediaUrl('amenities_image') }}" class="img-fluid" alt="Amenities Image">
                    </figure>
                </div>
                @else
                <div class="col-md-6">
                    <div class="text-center text-muted py-5">
                        <i class="fas fa-image fa-3x mb-3"></i>
                        <p>No amenities image available</p>
                    </div>
                </div>
                @endif

                <div class="col-md-6">
                    @if(!empty($studio->features) && is_array($studio->features))
                    <ul>
                        @foreach($studio->features as $feature)
                            @if(!empty(trim($feature)))
                                <li>{{ $feature }}</li>
                            @endif
                        @endforeach
                    </ul>
                    @else
                    <div class="text-muted">
                        <p>No features listed for this studio</p>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </section>
    @endif

    @if($studio->getFirstMediaUrl('studio_video'))
    <section class="videolos-sec">
        <div class="container">
            <h2 class="mainHead mb-4">Walkthrough Video</h2>
            <div class="row align-items-center">
                <div class="col-md-12">
                    <figure class="vidofig">
                        <video controls autoplay muted loop class="img-fluid" style="width: 100%; height: auto;">
                            <source src="{{ $studio->getFirstMediaUrl('studio_video') }}" type="video/mp4">
                            Your browser does not support the video tag.
                        </video>
                    </figure>
                </div>
            </div>
        </div>
    </section>
    @else
    <section class="videolos-sec">
        <div class="container">
            <h2 class="mainHead mb-4">Walkthrough Video</h2>
            <div class="row align-items-center">
                <div class="col-md-12">
                    <div class="text-center text-muted py-5">
                        <i class="fas fa-video fa-3x mb-3"></i>
                        <p>No walkthrough video available for this studio</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    @endif

    @if($studio->getMedia('gallery_images')->count() > 0)
    <section class="virtual-tour">
        <div class="container">
            <h2 class="mainHead mb-5">Gallery Images</h2>
            <div class="row align-items-center">
                @foreach($studio->getMedia('gallery_images') as $image)
                <div class="col-md-4 mb-4">
                    <figure>
                        <img src="{{ $image->getUrl() }}" class="img-fluid" alt="Gallery Image {{ $loop->iteration }}" style="height: 200px; object-fit: cover; width: 100%;">
                    </figure>
                </div>
                @endforeach
            </div>
        </div>
    </section>
    @else
    <section class="virtual-tour">
        <div class="container">
            <h2 class="mainHead mb-5">Gallery Images</h2>
            <div class="row align-items-center">
                <div class="col-md-12">
                    <div class="text-center text-muted py-5">
                        <i class="fas fa-images fa-3x mb-3"></i>
                        <p>No gallery images available for this studio</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    @endif

    {{-- @if(in_array($studio->booking_type, ['per_hour', 'per_day']))
    <section class="availability-sec">
        <div class="container">
            <h2 class="mainHead mb-5">Availability</h2>
            <div class="row">
                <div class="col-md-12">
                    <div class="availability-table">
                        @php
                            $availability = [];
                            if (!empty($studio->availability)) {
                                if (is_string($studio->availability)) {
                                    $availability = json_decode($studio->availability, true) ?? [];
                                } else if (is_array($studio->availability)) {
                                    $availability = $studio->availability;
                                }
                            }
                            $days = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'];
                        @endphp

                        @foreach($days as $day)
                        <div class="availability-day mb-3 p-3 border rounded">
                            <h5 class="text-capitalize">{{ ucfirst($day) }}</h5>
                            @if(isset($availability[$day]['full_day']) && $availability[$day]['full_day'])
                                <p class="mb-0">Available: Full Day</p>
                            @elseif(isset($availability[$day]['from']) && isset($availability[$day]['to']))
                                @php
                                    $fromTime = \Carbon\Carbon::createFromFormat('H:i', $availability[$day]['from']);
                                    $toTime = \Carbon\Carbon::createFromFormat('H:i', $availability[$day]['to']);
                                @endphp
                                <p class="mb-0">Available: {{ $fromTime->format('g:i A') }} - {{ $toTime->format('g:i A') }}</p>
                            @else
                                <p class="mb-0 text-muted">Not available</p>
                            @endif
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>
    @endif --}}

    @if($studio->packages->count() > 0)
        <section class="member pb-5" id="studio-packages">
            <div class="container">
                <h2 class="mainHead">Available Packages</h2>
                <div class="row">
                    @foreach($studio->packages as $package)
                    <div class="col-md-4 mb-4">
                        <div class="member_box h-100">
                            <div class="price">
                                <h4>{{ $package->name }}</h4>
                                <h2>${{ number_format($package->price, 2) }}</h2>
                                <p>Package</p>
                            </div>

                            @if(!empty($package->features) && is_array($package->features))
                            <ul>
                                @foreach($package->features as $feature)
                                    @if(!empty(trim($feature)))
                                        <li><i class="fal fa-check"></i> {{ $feature }}</li>
                                    @endif
                                @endforeach
                            </ul>
                            @else
                            <div class="text-muted p-3">
                                <p>No features listed for this package</p>
                            </div>
                            @endif

                            <a href="{{ route('subscription.checkout',['studio' => $package->id ]) }}">
                                Book This Package <i class="far fa-long-arrow-right"></i>
                            </a>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </section>
        @else
        <section class="member pb-5" id="studio-packages">
            <div class="container">
                <h2 class="mainHead">Pricing Information</h2>
                <div class="row">
                    <div class="col-md-12">
                        <div class="text-center text-muted py-5">
                            <i class="fas fa-box-open fa-3x mb-3"></i>
                            <p>No packages available for this studio yet</p>
                            <p class="mt-3">
                                {{-- <strong>Standard Rate:</strong>
                                @if(isset($studio->price) && isset($studio->booking_type))
                                    ${{ number_format($studio->price, 2) }} {{ str_replace('_', ' ', $studio->booking_type) }}
                                @else
                                    Contact for pricing
                                @endif --}}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        @endif

    <section class="location-seciton">
        <div class="container">
            <h2 class="mainHead mb-5">Location & Directions</h2>
            <div class="row">
                <div class="col-md-12">
                    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d318015.0829670227!2d-118.57688063859628!3d34.02036857883058!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80c2c75ddc27da13%3A0xe22fdf6f254608f4!2sLos%20Angeles%2C%20CA%2C%20USA!5e1!3m2!1sen!2s!4v1755781506735!5m2!1sen!2s" width="100%" height="585px" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                </div>
            </div>

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


    <section class="testimonialSec">
        <div class="container-fluid p-0">
            <h2 class="mainHead pb-5" data-aos="fade-up">Testimonials</h2>
            <div class="row">
                <div class="col-md-12">
                    <div class="swiper testimonialSlider">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <div class="testimonialBox">
                                    <div class="testimon-flex">
                                        <figure class="testimon-sub">
                                            <img src="{{ asset('front/images/testimg.png') }}" class="img-fluid" alt="">
                                        </figure>
                                        <ul class="testimonials-stars">
                                            <li><a href=""><i class="fas fa-star"></i></a></li>
                                            <li><a href=""><i class="fas fa-star"></i></a></li>
                                            <li><a href=""><i class="fas fa-star"></i></a></li>
                                            <li><a href=""><i class="fas fa-star"></i></a></li>
                                            <li><a href=""><i class="fas fa-star"></i></a></li>
                                        </ul>
                                    </div>
                                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.  </p>
                                    <div>
                                        <figure>
                                            <img src="{{ asset('front/images/testimg1.png') }}" class="img-fluid" alt="">
                                            <h4>JULIA PETTROV</h4>
                                        </figure>
                                        <img src="images/quote.png" class="img-fluid" alt="">
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="testimonialBox">
                                    <div class="testimon-flex">
                                        <figure class="testimon-sub">
                                            <img src="{{ asset('front/images/testimg.png') }}" class="img-fluid" alt="">
                                        </figure>
                                        <ul class="testimonials-stars">
                                            <li><a href=""><i class="fas fa-star"></i></a></li>
                                            <li><a href=""><i class="fas fa-star"></i></a></li>
                                            <li><a href=""><i class="fas fa-star"></i></a></li>
                                            <li><a href=""><i class="fas fa-star"></i></a></li>
                                            <li><a href=""><i class="fas fa-star"></i></a></li>
                                        </ul>
                                    </div>
                                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.  </p>
                                    <div>
                                        <figure>
                                            <img src="{{ asset('front/images/testimg1.png') }}" class="img-fluid" alt="">
                                            <h4>JULIA PETTROV</h4>
                                        </figure>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="testimonialBox">
                                    <div class="testimon-flex">
                                        <figure class="testimon-sub">
                                            <img src="{{ asset('front') }}" class="img-fluid" alt="">
                                        </figure>
                                        <ul class="testimonials-stars">
                                            <li><a href=""><i class="fas fa-star"></i></a></li>
                                            <li><a href=""><i class="fas fa-star"></i></a></li>
                                            <li><a href=""><i class="fas fa-star"></i></a></li>
                                            <li><a href=""><i class="fas fa-star"></i></a></li>
                                            <li><a href=""><i class="fas fa-star"></i></a></li>
                                        </ul>
                                    </div>
                                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.  </p>
                                    <div>
                                        <figure>
                                            <img src="images/testimg2.png" class="img-fluid" alt="">
                                            <h4>JULIA PETTROV</h4>
                                        </figure>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-pagination"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>



    <section class="insta-sec">
        <div class="container">
            <div class="row justify-content-center text-center">
                <div class="col-md-5">
                    <div class="insta-content" data-aos="fade-up" data-duration="4000">
                        <a href="">follow on instagram<i class="fab fa-instagram"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
@push('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        console.log('jQuery loaded - scroll functionality initialized');

        $('.scroll-to-packages').on('click', function(e) {
            e.preventDefault();
            console.log('Scroll link clicked');

            const targetId = $(this).attr('href');
            const targetElement = $(targetId);

            if (targetElement.length) {
                console.log('Scrolling to:', targetId);

                const offset = 80;
                const targetPosition = targetElement.offset().top - offset;

                $('html, body').animate({
                    scrollTop: targetPosition
                }, 800);
            } else {
                console.error('Target element not found:', targetId);
            }
        });

        const urlParams = new URLSearchParams(window.location.search);
        const packageId = urlParams.get('package');

        if (packageId) {
            console.log('Package ID found in URL:', packageId);
            const bookingSection = $('#studio-booking');
            if (bookingSection.length) {
                console.log('Scrolling to booking section');
                setTimeout(() => {
                    const offset = 80;
                    const targetPosition = bookingSection.offset().top - offset;

                    $('html, body').animate({
                        scrollTop: targetPosition
                    }, 800);
                }, 500);
            } else {
                console.error('Booking section not found');
            }
        }
    });
</script>
@endpush