@extends('front.layouts.app')
@section('content')


    <section class="aboutSec pt-0">
        <div class="container">
            <div class="row justify-content-between align-items-center">
                <div class="col-md-5">
                    <div class="swiper listingSlider">
                        <div class="swiper-wrapper">
                            @foreach($data->getMedia('product_image') as $image)
                                <div class="swiper-slide">
                                    <figure>
                                        <img src="{{ $image->getUrl() }}" class="img-fluid" alt="image">
                                    </figure>
                                </div>
                            @endforeach
                        </div>
                        <div class="swiper-pagination"></div>
                        <div class="swiper-button-next"></div>
                        <div class="swiper-button-prev"></div>
                    </div>

                </div>
                <div class="col-md-6">
                    <div class="aboutContent">
                        <h2 class="secHeading" data-aos="fade-up">{{ $data->name }}</h2>
                        <p data-aos="fade-up">{!! $data->detail !!}</p>
                    </div>
                    <ul>
                        <li><span href="#"><i class="fas fa-bed"></i>{{ $data->bed }} Bed</span></li>
                        <li><span href="#"><i class="fas fa-bath"></i>{{ $data->bath }} Bath</span></li>
                        <li><span href="#"><i class="fas fa-h-square"></i>{{ $data->guest }} guests</span></li>
                    </ul>
                    <div class="btn-group">
                        @foreach($data->features as $key => $feature)
                            @if($key < 3)
                                <span href="#">{{ $feature->name }}</span>
                            @else
                                @break
                            @endif
                        @endforeach
                    </div>
                    <div class="aboutContent p-3">
                        <a href="#">
                            <button  onclick="openSaleModal()" type="button" class="themeBtn btn">Contact now</button>
                        </a>
                    </div>
                </div>

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

    {{--    @include('front.includes.contact')--}}

    <div class="modal" id="saleModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Contact</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;
                    </button>
                </div>
                <div class="modal-body">
                    <form action="{{ route('front.sale.contact') }}"
                          method="post">
                        @csrf
                        <input type="hidden" value="{{$data->id }}" name="product_id">
                        <div class="card-body">
                            <input type="text" name="name" class="form-control" placeholder="Your name *" required>
                            <input type="email" name="email" class="form-control" placeholder="Your email *" required>
                            <input type="number" name="contact" class="form-control" placeholder="Your contact *" required>
                            <textarea name="message" class="form-control" id="editor" cols="30" rows="10" placeholder="Your message *"  required></textarea>
                        </div>
                        <div class="card-footer">
                            <button type="submit" class="btn btn-primary">Submit
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

@endsection

@push('scripts')
    <script>
        function openSaleModal() {
            $('#saleModal').modal('show');
        }
    </script>
@endpush