@extends('layouts.app')
@push('styles')
    <link rel="stylesheet" href="{{ asset('assets/css/category_products.css') }}">
@endpush
@section('contents')
    <div class="product-listing py-5">
        <div class="container">
            <div class="breadcrumbs" style="background: #f2f5fa;">
                <div class="container">
                    <div class="row pt-3 pb-3">
                        <div class="col">
                            <div class="pageStatus ">
                                <a  href="{{url('/')}}">Home</a>
                                <span>>>     Search  >></span>

                                {{$_GET['search']}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-9">
                    <!-- product images -->
                    <div id="product-listing">
                        <div class="row top-title mb-4">
                            <div class="col">

                            </div>
                        </div>
                        <div class="row product-list ">
                            @if(count($search_products) > 0)
                            @foreach ($search_products as $product)
                                {{-- {{dd($products['images'][0]->image)}} --}}
                                <div class="col-md-4 my-sm-4 mb-3">
                                    <div class="single-product">
                                        <div class="product-info">
                                            <h4>{{@$product['product_title']}}</h4>
                                            <p>
                                                {{@$product['meta_descriptions']}}
                                            </p>

                                            <a href="{{url($product->product_slug)}}" class="btn rounded-pill btn-product animate-btn">Get Started</a>
                                        </div>
                                        {{-- {{dd($products['images'][0]->image)}} --}}

                                        <div class="product-image-home">
                                            <a href="{{url($product->product_slug)}}"> <img src="{{ asset('assets/images/images_products')}}/{{!empty($product['images'][0])?$product['images'][0]->image:''}}" alt="" width="700px" height="700px" class="img-fluid product-home-product-image1" alt="product-title">
                                                <img src="{{ asset('assets/images/images_products')}}/{{!empty($product['images'][1])?$product['images'][1]->image:''}}" alt="" width="700px" height="700px" class="img-fluid product-home-product-image2" alt="product-title">
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                            @else
                            <div class="alert alert-warning">No Record Found</div>
                            @endif
                        </div>
                    </div>
                </div>
                <!-- Form Product Title Section -->

                <div class="col-md-3">
                    <div class="row product-title-short-desc w-100 m-0">
                        <div class="col p-3 mb-3">
                            <h3 class="product-detail-title w-100">Beat My Quote</h3>
                        </div>
                    </div>

                    <!-- Form -->
                    <div class="row-form-product-detail w-100 mt-4 p-3">
                        <form method="post" id="form-Product-detail" class="custom-form form-product-listing" action="{{route('submitOrder')}}">

                            @csrf
                            {{-- <input type="hidden" value="{{$product['id']}}" name="product_id" />
                           <input type="hidden" value="{{$product['product_name']}}" name="product_name" />
                           <input type="hidden" value="{{$product['category']['name']}}" name="product_category" /> --}}

                            <div class="row">
                                <div class="col-sm-6">
                                    <label for="height" class="hide-label">Length</label><br>
                                    <input type="text" id="height text-g" class="w-100 text-g" name="height" placeholder="Length" pattern="[0-9]+" maxlength="4" title="Please enter only numeric values">
                                </div>
                                <div class="col-sm-6">
                                    <label for="width" class="hide-label">Width</label><br>
                                    <input type="text" id="width text-g" class="w-100 text-g" name="width" placeholder="Width" pattern="[0-9]+" maxlength="4" title="Please enter only numeric values">
                                </div>

                            </div>

                            <div class="row">
                                <div class="col-sm-6">
                                    <label for="depth" class="hide-label">Depth</label><br>
                                    <input type="text" id="depth text-g" class="w-100 text-g" name="depth" placeholder="Depth" pattern="[0-9]+" maxlength="4" title="Please enter only numeric values">
                                </div>
                                <div class="col-sm-6 select-drop select ">
                                    <label for="inches" class="hide-label">Inches</label><br>
                                    <select id="inches" name="inches" class="w-100" required>
                                        <option value="inchess">Inches</option>
                                        <option value="cm">cm</option>
                                        <option value="mm">mm</option>
                                    </select>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col">

                                    <label for="product" class="hide-label">Product Name</label><br>
                                    <select id="product-name" name="product-name" class="w-100">

                                        @foreach ($search_products as $product)
                                            <option value="{{$product->product_title}}">{{$product->product_title}}</option>

                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6 printing select  border-blue">
                                    <label for="colors">Colors:</label><br>
                                    <select id="colors" name="colors" class="w-100">
                                        <option value="None">None</option>
                                        <option value="1 Color">1 Color</option>
                                        <option value="2 Color">2 Color</option>
                                        <option value="3 Color">3 Color</option>
                                        <option value="4 Color">4 Color</option>
                                        <option value="4/1 Color">4/1 Color</option>
                                        <option value="4/2 Color">4/2 Color</option>
                                        <option value="4/3 Color">4/3 Color</option>
                                        <option value="4/4 Color">4/4 Color</option>

                                    </select>
                                </div>
                                <div class="col-sm-6 stock select border-blue">
                                    <label for="quantity"><span class="required-symbol">*</span>Quantity:</label><br>
                                    <input type="text" id="quantity text-g" class="w-100 text-g" name="quantity" placeholder="0" required pattern="[0-9]+" required title="Please enter only numeric values">
                                </div>
                            </div>

                            <div class="row">
                                <div class="col">
                                    <label for="fname"><span class="required-symbol">*</span>Name:</label><br>
                                    <input type="text" id="fullname" class="text-g w-100" name="fname" required placeholder="">
                                </div>

                            </div>
                            <div class="row ">
                                <div class="col">
                                    <label for="email"><span class="required-symbol">*</span>Email:</label><br>
                                    <input type="email" id="email" class="email w-100 text-g" name="email" required placeholder="abc@domain.com">
                                </div>
                            </div>

                            <div class="row">
                                <div class="col border-orange">
                                    <label for="phone"><span class="required-symbol">*</span>Phone No.</label><br>
                                    <input type="tel" id="phone" class="phone w-100 text-g" name="phone" required placeholder="">
                                </div>
                            </div>

                            <div class="row">
                                <div class="col border-blue">
                                    <label for="message">Message</label><br>
                                    <textarea cols="50" rows="4" name="form" id="message" name="message" class="textarea w-100" placeholder=""></textarea>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col submit-final w-100 ">
                                    <input type="submit" class="btn submit-custom-quote rounded-pill animate-btn" value="Submit">
                                </div>
                            </div>
                        </form>
                    </div>

                </div>
                <!-- End FOrm -->
            </div>
        </div>
    </div>
@endsection