@extends('web.layouts.app')
@section('title') The Best Widex Hearing Center  @endsection
@section('meta_description')
  <meta property="og:title" content="{{@$seo->title}}">
    @if(@$seo->og_image)
     <meta property="og:image" content="{{asset('images/seos')}}/{{@$seo->og_image}}">
    @else
        <meta property="og:image" content="{{asset('public/web/images/Image-Edit-Expert.png')}}">
    @endif
     <meta name="description" content="{{@$seo->meta_desc}}">
     <meta name="og:url" content="{{@$seo->og_url}}">
@endsection

@section('css')
@endsection

@section('content')

    <!--=============== Blog Section ============-->
    <section class="py-5">
        <div class="container">
            @if ($message = Session::get('order_success'))
                <div class="row" id="hideThis">
                    <div class="alert alert-success alert-dismissible" style="position: absolute;top:135px;right: 22px;">
                        <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                      <strong>Thanks!</strong> {{$message}}
                    </div>
                </div>
            @endif
            <div class="row">
               @foreach($products as $key => $product)
                    <div class="col-md-6 col-lg-4 mb-4">
                    <div class="blog-item border">
                        <div class="p-3">
                            <div class="clearfix"></div>
                           
                            <a href="{{url('product_details/'.$product->slug)}}" class="d-block text-success mb-2 text-bold">{{str_limit($product->title, 80)}}</a>
                             
                            
                            
                        </div>
                        <a href="{{url('product_details/'.$product->slug)}}" class="box-ratio ratio-16x9">
                            <img src="{{asset('public/images/products')}}/{{$product->thumbnail}}"  class="ratio-img">
                        </a>
                      
                        <div class="p-3">
                            <div class="clearfix"></div>
                            <span class="text-bold text-info">Price : ৳{{$product->price}}</span>
                            <p class="text-muted text-13">{!! str_limit($product->long_desc, 220)  !!}</p>
                            <a  href=" {{url('product_details/'.$product->slug)}}" class="btn btn-info btn-md" >Details</a>
                        </div>


                    </div>
                </div>

                    <!-- Modal -->
                    <div id="product{{$product->id}}" class="modal fade" role="dialog">
                      <div class="modal-dialog modal-lg">

                        <!-- Modal content-->
                        <div class="modal-content">
                          <div class="modal-header">
                            <h4 class="modal-title">{{str_limit($product->title, 200)}}</h4>
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            
                          </div>
                          <div class="modal-body">
                           <form action="{{route('client_order_submit')}}" method="post">
                            @csrf
                            <input type="hidden" name="product_name" value="{{$product->title}}">
                                <div class="contact-form">
                                    <h3 class="text-center">Order Form</h3>
                                    <div class="mb-3">
                                        <input type="text" placeholder="Write Your Name" class="form-control form-control-lg" name="client_name" required>
                                    </div>
                                    <div class="mb-3">
                                        <input type="hidden" placeholder="Write your Email Address" class="form-control form-control-lg" name="client_email" required>
                                    </div>
                                    <div class="mb-3">
                                        <input type="text" placeholder="Write your Phone" class="form-control form-control-lg" maxlength="14" name="client_phone" required>
                                    </div>
                                    <div class="mb-3">
                                        <input type="number" placeholder="Quantity" class="form-control form-control-lg" name="order_qty" value="1">
                                    </div>
                                    <div class="mb-3">
                                        <input type="hidden" placeholder="Date" class="form-control form-control-lg" name="delivery_date" value="2025-08-22">
                                    </div>
                                    <div class="mb-3">
                                        <textarea rows="1" placeholder="Delivery Address" class="form-control form-control-lg" name="client_address" required minlength="10"></textarea>
                                    </div>
                                    <div class="mb-3">
                                        <p>Product Price: Price : ৳ {{$product->price}} </p>
                                        <p><input type="radio" name="cod" value="Cash On Delivery" checked="checked">&nbsp; Cash On Delivery</p>
                                    </div>
                                    <div class="text-right">
                                        <button type="button" class="btn btn-md btn-danger mr-2" data-dismiss="modal">Cancel</button>
                                        <button type="submit" class="btn btn-md btn-crusta">Place Order</button>
                                    </div>
                                </div>

                            </form>
                          </div>
                          
                        </div>

                      </div>
                    </div>
                @endforeach 

            </div>



        </div>
    </section>
    <!--============ End Blog Section =============-->

@endsection

@section('js')
<script type="text/javascript">
    setTimeout(function() {
    $('#hideThis').fadeOut('fast');
}, 5000);
</script>
@endsection