@extends('layouts.app')
@section('title', 'Home')
@section('styles')
    <link rel="stylesheet" type="text/css" href="{{ asset('') }}assets/css/style.min.css">
@endsection
@section('content')
    <main class="main">

        <div class="shop-default-banner shop-boxed-banner banner d-flex align-items-center mb-6"
            style="background-image: url(assets/images/star1.png);background-size:contain;background-color: #fbfbfd;height: 170px;">
            <div class="container banner-content">
                <h4 class="banner-subtitle text-center" style="
    font-size: 34px;
">ADVERTISEMENT</h4>


            </div>
        </div>

        <!-- Start of Breadcrumb -->
        <nav class="breadcrumb-nav">
            <div class="container-fluid">
                <ul class="breadcrumb bb-no">
                    <li><a href="{{ route('home') }}">Home</a></li>
                    <li><a href="#">Advertisement</a></li>
                </ul>
            </div>
        </nav>

        <!-- Start of Page Content -->
        <div class="page-content mt-2">
            <div class="container-fluid">

                <!-- Start of Shop Content -->
                <div class="shop-content row gutter-lg mb-10">
                    <!-- Start of Sidebar, Shop Sidebar -->
                    <aside class="sidebar shop-sidebar sticky-sidebar-wrapper sidebar-fixed">
                        <!-- Start of Sidebar Content -->
                        <div class="sidebar-content scrollable">
                            <!-- Start of Sticky Sidebar -->
                            <div class="sticky-sidebar">
                                <!-- Start of Collapsible widget -->
                                @foreach ($ads1 as $ads1)
                                    <img src="{{ asset("storage/$ads1->image") }}" class="mt-2" alt="Product" />
                                @endforeach
                                <!-- End of Collapsible Widget -->

                                <!-- Start of Collapsible Widget -->
                                @foreach ($ads2 as $ads2)
                                    <img src="{{ asset("storage/$ads2->image") }}" class="mt-2" alt="Product" />
                                @endforeach
                                <!-- End of Collapsible Widget -->

                                <!-- Start of Collapsible Widget -->
                                @foreach ($ads3 as $ads3)
                                    <img src="{{ asset("storage/$ads3->image") }}" class="mt-2" alt="Product" />
                                @endforeach
                                <!-- End of Collapsible Widget -->

                                <!-- Start of Collapsible Widget -->
                                @foreach ($ads4 as $ads4)
                                    <img src="{{ asset("storage/$ads4->image") }}" class="mt-2" alt="Product" />
                                @endforeach

                                @foreach ($ads5 as $ads5)
                                    <img src="{{ asset("storage/$ads5->image") }}" class="mt-2" alt="Product" />
                                @endforeach
                                <!-- End of Collapsible Widget -->
                            </div>
                            <!-- End of Sidebar Content -->
                        </div>
                        <!-- End of Sidebar Content -->
                    </aside>
                    <!-- End of Shop Sidebar -->

                    <!-- Start of Shop Main Content -->
                    <div class="main-content">

                        <div class="product-wrapper row cols-md-1 cols-xs-2 cols-1">

                            @foreach ($stores as $stores)
                                <div class="product product-list product-select">
                                    <figure class="product-media">
                                        <a href="#">
                                            <img src="{{ asset("storage/$stores->image") }}" alt="Product" width="330"
                                                height="338" />
                                        </a>
                                    </figure>
                                    <div class="product-details">

                                        <h4 class="product-name">
                                            <a href="#">{{ $stores->title }}</a>
                                        </h4>
                                        <p><span class="w-icon-map-marker"></span>{{ $stores->address }}</p>
                                        <p><span class="w-icon-phone"></span>{{ $stores->phone }}</p>
                                        <p><span class="w-icon-envelop2"></span>{{ $stores->email }}</p>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                    </div>
                    <!-- End of Shop Main Content -->
                    <aside class="sidebar shop-sidebar sticky-sidebar-wrapper sidebar-fixed">
                        <!-- Start of Sidebar Content -->
                        <div class="sidebar-content scrollable">
                            <!-- Start of Sticky Sidebar -->
                            <div class="sticky-sidebar">
                                <!-- Start of Collapsible widget -->
                                @foreach ($ads6 as $ads6)
                                    <img src="{{ asset("storage/$ads6->image") }}" class="mt-2" alt="Product" />
                                @endforeach
                                <!-- End of Collapsible Widget -->

                                <!-- Start of Collapsible Widget -->
                                @foreach ($ads7 as $ads7)
                                    <img src="{{ asset("storage/$ads7->image") }}" class="mt-2" alt="Product" />
                                @endforeach
                                <!-- End of Collapsible Widget -->

                                <!-- Start of Collapsible Widget -->
                                @foreach ($ads8 as $ads8)
                                    <img src="{{ asset("storage/$ads8->image") }}" class="mt-2" alt="Product" />
                                @endforeach
                                <!-- End of Collapsible Widget -->

                                <!-- Start of Collapsible Widget -->
                                @foreach ($ads9 as $ads9)
                                    <img src="{{ asset("storage/$ads9->image") }}" class="mt-2" alt="Product" />
                                @endforeach


                                @foreach ($ads10 as $ads10)
                                    <img src="{{ asset("storage/$ads10->image") }}" class="mt-2" alt="Product" />
                                @endforeach
                                <!-- End of Collapsible Widget -->
                            </div>
                            <!-- End of Sidebar Content -->
                        </div>
                        <!-- End of Sidebar Content -->
                    </aside>
                </div>
                <!-- End of Shop Content -->
            </div>
        </div>
        <!-- End of Page Content -->
    </main>
@endsection

@section('modal')

    <div class="product product-single product-popup" id="booking-modal">
        <div class="row gutter-lg">
            <div class="col-md-6 mb-4 mb-md-0">
                <div class="product-gallery product-gallery-sticky">
                    <div class="swiper-container product-single-swiper swiper-theme nav-inner">
                        <div class="swiper-wrapper row cols-1 gutter-no">
                            <div class="swiper-slide">
                                <figure class="product-image">
                                    <img src="{{ asset('') }}assets/images/products/accordion/3-800x900.jpg"
                                        data-zoom-image="{{ asset('') }}assets/images/products/accordion/3-800x900.jpg"
                                        alt="Water Boil Black Utensil" width="800" height="900">
                                </figure>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 overflow-hidden p-relative">
                <div class="product-details scrollable pl-0">

                    <form class="form contact-us-form" action="{{ route('enquiry-store') }}" method="post" id="enq-form">
                        @csrf
                        <input type="hidden" name="store_id" id="store_id">
                        <div class="form-group">
                            <label for="username">Your Name</label>
                            <input type="text" id="name" name="name" class="form-control">
                        </div>
                        <div class="form-group">
                            <label for="email">Your Email</label>
                            <input type="email" id="email" name="email" class="form-control">
                        </div>
                        <div class="form-group">
                            <label for="Phone">Your Phone</label>
                            <input type="tel" id="phone" name="phone" class="form-control">
                        </div>
                        <div class="form-group">
                            <label for="message">Your Message</label>
                            <textarea id="message" name="message" cols="30" rows="2" class="form-control"></textarea>
                        </div>
                        <button type="submit" class="btn btn-dark btn-rounded" id="submit-enquiry">Submit</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        $(document).ready(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $(document).on('click', '.enqstore', function(e) {
                e.preventDefault();

                $('#store_id').val($(this).data("id"));
            });

            $(document).on('click', '#submit-enquiry', function(e) {
                alert(55)
                e.preventDefault();


                var formData = new FormData($('#enq-form')[0]);

                $.ajax({
                    type: 'POST',
                    url: "{{ route('enquiry-store') }}",
                    data: formData,
                    contentType: false,
                    cache: false,
                    processData: false,
                    success: function(data) {
                        console.log(data)
                        Swal.fire(
                                alert(99)
                                'Success!', data.message, 'success'
                            )
                            .then((result) => {
                                $('#booking-modal').modal('hide');
                                location.reload();
                            })
                    }
                });
            });
        });
    </script>
@endsection