@extends('frontend.layouts.main')

@section('main-container')
    <section class="section bg-gray-dark pt-5 pb-5">
        <div class="modal fade" id="enquiryModal" tabindex="-1" aria-labelledby="enquiryModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="enquiryModalLabel">Enquiry Now</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body py-4">
                        <form action="{{ route('frontend.product-detail.store', $product->slug, $product->id) }}"
                            method="POST" enctype="multipart/form-data">
                            @csrf
                            <div class="row">
                                <input type="hidden" id="product_id" name="product_id" value="{{ $product->id }}" />
                                <div class="col-md-6">
                                    <div class="mb-4">
                                        <label for="user_name" class="mb-2">Your Name</label>
                                        <input type="text" id="user_name" name="user_name" class="form-control"
                                            required="required" placeholder="Your Name" />

                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-4">
                                        <label for="phone_number" class="mb-2">Phone Number</label>
                                        <input type="number" maxlength="10" id="phone_number" name="phone_number"
                                            required="required" class="form-control" placeholder="Phone Number" />

                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="mb-4">
                                        <label for="message" class="mb-2">Message</label>
                                        <textarea class="form-control" id="message" name="message" required="required" rows="4" placeholder="Message"></textarea>

                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="pt-3 btn-lg">
                                        <button type="submit" class="btn btn-primary btn-lg">Send
                                            Message</button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        @if (!empty($product->video_url))
            <div class="modal fade" id="videoModal" tabindex="-1" aria-labelledby="videoModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title fs-5" id="videoModalLabel">Product Video</h1>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body py-4">
                            <iframe width="100%" height="440" src="{{ $product->video_url }}"
                                title="{{ $product->product_name }}"></iframe>
                        </div>
                    </div>
                </div>
            </div>
        @endif
        <div class="container">
            <div class="product-block">
                <div class="row">
                    <div class="col-md-4">
                        <div class="product-image-block">
                            <div class="tab-content" id="pills-tabContent">
                                                                @foreach ($product->ProductImagesByID as $image)
                                    <div class="tab-pane show active" id="tab_{{ $image->id }}" role="tabpanel"
                                        aria-labelledby="tab_{{ $image->id }}_label" tabindex="0">
                                        <div class="product-image">
                                            <img src="{{ asset($image->thumnail) }}" alt="" />
                                        </div>
                                    </div>
                                                                    @endforeach
                                @if (!empty($product->video_url))
                                    <button data-bs-toggle="modal" data-bs-target="#videoModal"
                                        class="btn btn-outline-danger btn-sm product-block-video"><i
                                            class="bi bi-youtube"></i> Product Video</button>
                                @else
                                @endif
                                @if (!empty($product->document))
                                    <a href="{{ asset('storage/' . $product->document) }}"
                                        class="btn btn-outline-secondary btn-sm product-block-document" target="_blank"><i
                                            class="bi bi-file-earmark-pdf-fill"></i>
                                        Product
                                        Document</a>
                                @else
                                @endif


                            </div>
                            <ul class="nav nav-pills" id="pills-tab" role="tablist">
                                                                @foreach ($product->ProductImagesByID as $image)
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link active" id="tab_{{ $image->id }}_label"
                                            data-bs-toggle="pill" data-bs-target="#tab_{{ $image->id }}"
                                            type="button" role="tab" aria-controls="tab_{{ $image->id }}"
                                            aria-selected="true"><img src="{{ asset($image->thumnail) }}"
                                                alt="" /></button>
                                    </li>
                                                                    @endforeach
                                {{-- <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill"
                                        data-bs-target="#pills-home" type="button" role="tab"
                                        aria-controls="pills-home" aria-selected="true"><img
                                            src="{{ asset('frontend/assets/images/1.png') }}" alt="" /></button>
                                </li> --}}



                            </ul>
                        </div>
                    </div>
                    <div class="col-md-8">
                        <div class="product-info-block">
                            <h1 class="product-info-block-title mb-3">{{ $product->product_name }}
                            </h1>
                            <p class="mb-2">
                                {{ $product->short_description }}
                            </p>
                            <div>
                                <a href="#more_detail_section" class="text-primary">View More
                                    Details</a>
                            </div>
                            <div class="mt-5">
                                <button class="btn btn-primary btn-large" data-bs-toggle="modal"
                                    data-bs-target="#enquiryModal" type="button">Contact to
                                    Supplier<br>
                                    <small class="fw-normal">Get call back</small>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="section-label" id="more_detail_section">
                            <h3 class="m-0">More Details</h3>
                        </div>
                        <div class="product-more-content">
                            {!! $product->description !!}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
        </div>
    </section>
    @if ($products->count() > 0)
        <section class="section">
            <div class="container">
                <div class="row mb-5 align-items-center">
                    <div class="col-md-8">
                        <h2>More products</h2>
                    </div>
                    <div class="col-md-4 text-end">
                        <a href="{{ route('frontend.products-list.index') }}" class="text-primary btn-link">View All
                            Products</a>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="owl-carousel owl-theme product-owl">
                            @foreach ($products as $product)
                                <div class="item">
                                    <div class="card-product">
                                        <div class="card-product-img">
                                            @foreach ($product->ProductImagesByID as $image)
                                                <img src="{{ asset($image->thumnail) }}"
                                                    alt="{{ $product->product_name }}">
                                            @break
                                        @endforeach
                                    </div>
                                    <div class="card-product-body">
                                        <h3 class="card-product-title">{{ $product->product_name }}</h3>
                                    </div>
                                    <div class="card-product-footer">
                                        <a href="{{ route('frontend.product-detail.index', $product->slug) }}"
                                            class="btn btn-primary w-100 btn-sm">View Details</a>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>

                </div>
            </div>
        </div>
    </section>
@endif
@endsection