@extends('layouts.front-layout')
@section('title')
    Detail
@endsection
@section('content')
    <section class="inner-banner p-0">
        <video class="mainbanner__video" autoplay muted loop playsinline>
            <source src="{{ $setting->settingImage('home_top_banner_video') ?? '' }}" type="video/mp4">
        </video>
        <div class="container">
            <div class="inner-banner__content">
                <h1>Product Details</h1>
            </div>
        </div>
        <figure class="inner-banner__bottom">
            <img src="{{ asset('upload/images/banner-shape.png') }}" alt="image" class="img-fluid">
        </figure>
    </section>

    <section class="product-details">
        <div class="product-details__title text-center">
            <h2 class="mainHead">View <span>Details</span></h2>
        </div>
        <div class="container">
            <form action="{{ route('cart.add', ['id' => $findProduct->id]) }}" method="POST">
                @csrf
                <div class="row">
                    <div class="col-lg-4 text-center">
                        <figure class="product-details__img">
                            <img src="{{ $findProduct->productImage('product_image') }}" alt="image" class="img-fluid">
                        </figure>
                        <p style="margin-top: 10px; font-size: 16px; color: #333; font-weight: 500;">
                            {{ $findProduct->approximately ?? ''}}
                        </p>
                    </div>

                    <div class="col-lg-4">
                        <div class="product-details__content">
                            <h5>Its Amazeing</h5>
                            <h4>{{ $findProduct->product_name }}</h4>
                            <ul>
                                {{-- <li><span>$3136.08</span></li> --}}
                                <li>
                                    @if (request()->query('type') == 'BUY')
                                        <input type="hidden" name="price_id" value="{{ $prices[0]['id'] }}">
                                        <span>{{ '$' . number_format($prices[0]['price']) }}</span>
                                    @endif
                                </li>
                            </ul>
                            @if (request()->query('type') == 'RENT')
                                <select name="price_id" id="price" class="form-control mb-3" required>
                                    <option value="">Select Rent</option>
                                    @foreach ($prices as $price)
                                        <option value="{{ $price->id }}" data-description="{{ $price->description }}"
                                            data-price="{{ number_format($price->price) }}">{{ $price->days }}</option>
                                    @endforeach
                                </select>
                            @endif
                            {{-- <h6>Size</h6>
                        <h4>Large</h4> --}}
                            @if (request()->query('type') == 'RENT')
                                <ul id="price-container" class="mb-3">

                                </ul>
                            @endif
                            <div>

                            </div>
{{--                            @if (!Auth::check())--}}
{{--                                <p>--}}
{{--                                    To place an order online, you'll need to <a--}}
{{--                                        href="{{ route('user.login') }}">login</a> or create an account.--}}
{{--                                </p>--}}
{{--                            @endif--}}
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="product-details__content product-details__total">


{{--   @dd(session()->get('cart', []))--}}

                            <div id="accordion">
                                <div class="card">
                                    <div id="headingOne ">
                                        <h5 class="mb-0 ">
                                            <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne"
                                                aria-expanded="true" aria-controls="collapseOne">
                                                <span>Product</span> Details
                                                <i class="fas fa-angle-up"></i>
                                            </button>
                                        </h5>
                                    </div>
                                    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
                                        data-parent="#accordion">
                                        <div class="card-body">

                                            @if (request()->query('type') == 'BUY')
                                                <p>
                                                    {!! $prices[0]['description'] !!}
                                                </p>
                                            @endif

                                            @if (request()->query('type') == 'RENT')
                                                <div id="description-container">
                                                    <p>Select a price to see the description.</p>
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
{{--                            @if (Auth::check() && Auth::user()->hasRole('user'))--}}
                                <button type="submit" class="themeBtn mt-4">ADD TO CART</button>
{{--                            @else--}}
{{--                                <button class="themeBtn mt-4" disabled>ADD TO CART</button>--}}
{{--                            @endif--}}
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </section>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Get the select element
            const priceSelect = document.getElementById('price');

            priceSelect.addEventListener('change', function() {
                const selectedOption = priceSelect.options[priceSelect.selectedIndex];
                const description = selectedOption.getAttribute('data-description');
                const price = selectedOption.getAttribute('data-price');

                const descriptionContainer = document.getElementById('description-container');
                const priceContainer = document.getElementById('price-container');

                if (description && price) {
                    descriptionContainer.innerHTML = `<p>${description}</p>`;
                    priceContainer.innerHTML = `<li><span>$ ${price}</span></li>`;
                } else {
                    descriptionContainer.innerHTML = '';
                }
            });
        });
    </script>
@endsection