@extends('website.layouts.app')
@section('title','Product Detail')
@section('content')

<style>
    #product_carousel.new_p .owl-prev, #product_carousel.new_p .owl-next{
        display: none !important;
    }
    @media only screen and (max-width: 600px) {
 .breadcrum {
   
    position: relative;
    padding-top: 0px !important;
    width: 322px;
  }
}


    .top-breadcrumb, .breadcrumb-items{
        list-style-type: none;
        margin-bottom: 0;
        padding: 10px;
    }
    .breadcrumb-items{
        float: right;
    }
    @media only screen and (max-width: 600px) {
        .top-breadcrumb li {
            list-style: none;
            position: relative;
            left: 0 !important;
        }
        .top-breadcrumb{
            display: flex !important;
            justify-content: center;
            padding-bottom: 0;
        }
        .breadcrumb-items{
            display: flex !important;
            justify-content: center;
            padding-top: 4px;
            float: initial !important;
        }
       /*  .breadcrum {
           
            position: relative;
            padding-top: 0px !important;
            width: 322px;
          }
        }


        @media (max-width: 600px) {
        .breadcrumb-items li{
         width: 114px;
        margin: -24px 0 0 -30px;
        padding-bottom: 10px;
        display: flex;
        justify-content: flex-start;
        flex-direction: row;
       
      }*/
    }

    .strice{
        color: red !important;
    }

</style>

 <!-- start inner-banner -->
  <section class="" style="background-color: #0d2147;;">
    <div class="container" >
        <div class="row">
            <div class="col-md-6">
                  <ol class=" top-breadcrumb d-flex ">
                    <li class="breadcrumb-item text-white "><a href="{{action('WebsiteController\WebsiteController@service')}}">{{ $subCategories->name ?? '' }}</a></li>
                  </ol>
              
            </div>
            <div class="col-md-6">
                
                  <ol class="d-flex breadcrumb-items">
                    <li class="breadcrumb-item text-white"><a href="{{ action('WebsiteController\HomeController@home') }}"><i class="fa fa-home mr-1"></i></i>Home</a></li>
                
                    <li class="breadcrumb-item active text-white" aria-current="page"><a href="">{{ $subCategories->name ?? '' }}</a></li>
                  </ol>
                
            </div>
        </div>
    </div>
    </section> 
    <!-- end inner-banner -->
    <!-- start blog -->
    <section class="p-md-5 mt-3">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                   <div class="row">
                  <div class="col-md-4">
                    <div class="owl-carousel new_p" id="product_carousel">
                        <div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="Service_box">
                                        <img src="{{ asset($subCategories->image_path ?? '') }}" style="width: 100%;" alt="">
                                    </div>
                                </div>
                            </div>
                        </div>
                                          
                        
                    
                    </div>
                       </div>
                       <div class="col-md-8">
                           <h2 class="color-blue pb-0 main-heading">{{ $subCategories->name ?? '' }}</h2>
                           <h4 class="grey-font p-0">Description</h4>
                          <div  class="grey-font">
                               <p>{!! $subCategories->description ?? '' !!}
                           </p>
                          </div>
                           
                    <div class="row">
                           

                     @if(count($subCategories->ourNetworks) > 0)

               <!-- <div class="col-md-12">
                 <h3 class="color-blue pb-0 main-heading">Our Network</h3>
                 <div class="row network">
                  @foreach($subCategories->ourNetworks as $ourNetworks)

                   <div class="col-md-3 col-sm-6 mt-3">
                     <h6>{{ $ourNetworks->networks_location ?? '' }}</h6>
                    @php 
                       $networkArray = explode(',',$ourNetworks->networks); 
                    @endphp
                     <ul>
                       @foreach($networkArray as $network)

                       <li>{{ $network }}</li>
                       @endforeach
                        
                     </ul>
                   </div>
                  @endforeach

                   </div>
            </div> -->
               @endif
   
                         <div class="mt-3 text-left ml-3 mb-3">



                           <button class="btn btn-main request_btn"  data-toggle="modal" data-target="#exampleModalCenter" data-href="{{action('WebsiteController\WebsiteController@requestQuote')}}">Request for Quote</button>

                     

                         </div>
                       </div>
                   </div>
                  </div>
            </div>
        </div>
    </section>
    <!-- end blog -->

     <section class="p-md-5 network">
        <div class="container">
           <!--  <div class="row">
               <div class="col-md-12">
                 <h1 class="color-blue pb-0 main-heading">Our Network</h1>
                 <div class="row">
                   <div class="col-md-3 col-sm-6">
                     <h4>DELHI / NCR</h4>
                     <ul>
                       <li>IGI Airport</li>
                        <li>ICD – Loni</li>
                        <li>ICD – Dadri</li>
                        <li>ICD – Gurgaon</li>
                        <li>ICD – Patparganj</li>
                        <li>ICD – Ballabhgarh</li>
                        <li>ICD – Tughlakabad</li>
                     </ul>
                   </div>
                   <div class="col-md-3 col-sm-6">
                     <h4>MAHARASHTRA</h4>
                     <ul>
                       <li>JNPT Port</li>
                        <li>CSI Airport</li>
                        <li>Mumbai Port</li>
                        <li>Nhava Sheva Port</li>
                     </ul>
                   </div>
                   <div class="col-md-3 col-sm-6">
                     <h4>RAJASTHAN</h4>
                     <ul>
                       <li>ICD – Jaipur</li>
                        <li>ICD – Bhiwadi</li>
                     </ul>
                   </div>
                   <div class="col-md-3 col-sm-6">
                     <h4>WEST BENGAL</h4>
                     <ul>
                       <li>Kolkata Port</li>
                        <li>Petrapole Port</li>
                     </ul>
                   </div>
                   <div class="col-md-3 col-sm-6">
                     <h4>GUJARAT</h4>
                     <ul>
                       <li>Ahmedabad</li>
                        <li>Mundra Port</li>
                     </ul>
                   </div>
                   <div class="col-md-3 col-sm-6">
                     <h4>PUNJAB</h4>
                     <ul>
                       <li>ICD – Ludhiana</li>
                     </ul>
                   </div>
                 </div>
                 
               </div>
            </div> -->
        </div>
    </section>
    


<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"data-backdrop="static" data-keyboard="false" aria-hidden="true" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Request For Quote</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

                <form class="Request_form needs-validation" id="add_form"  method="post" action="{{ action('WebsiteController\WebsiteController@sendRequestQuote') }}">

            @csrf
                                        

                           <input type="hidden" name="service_id" value="{{$subCategories->id}}">

          

                            <div class="form-row">
                                <div class="form-group col-md-12">
                                    <label for="exampleInputName">Full Name<i class="strice">*</i></label>
                                   
                            <input type="text" class="form-control" id="inputEmail4" placeholder="Name" name="name" required onkeypress="return alphanumeric(event)"> 
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label for="exampleInputEmail1">Email<i class="strice">*</i></label>
                                    <input name="email" class="form-control" id="exampleInputEmail1" placeholder="Enter Email" onkeydown="validate(this.value);" pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,5}$" type="email" required>
                                   
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="exampleInputNumber">Phone Number<i class="strice">*</i></label>
                                    <input name="phone" class="form-control" id="exampleInputNumber"placeholder="Enter Phone Number" type="tel" pattern="[0-9]+" inputmode="numeric" maxlength="10"onkeypress="return numbersonly(event)" required>
                                </div>
                            </div>

                            <div class="form-row">
                                
                                <div class="form-group col-md-6">
                                    <label for="exampleInputSubject">Subject<i class="strice">*</i></label>
                                    <input name="subject" class="form-control" id="exampleInputSubject" placeholder="Enter Subject" type="text" required>
                                </div>
                               
                           
                                
                                <div class="form-group col-md-6">
                                    <label for="exampleInputSubject">Sub Services<i class="strice">*</i></label>
                                    <input name="product" class="form-control" id="exampleInputSubject" placeholder="Enter Subject" type="text" value="{{$subCategories->name}}"readonly required>
                                </div>
                               
                            </div>


                            <div class="form-group">
                                <label for="exampleInputMessage">Message<i class="strice">*</i></label>
                                <textarea name="message" class="form-control" id="exampleInputMessage" placeholder="Message" required></textarea>
                            </div>
                            <!-- <div class="text-center"><button class="btn btn-main" type="submit">Submit</button></div> -->
                            <div class=""><button id="send" class="btn btn-main" type="submit"><img src="{{asset('website')}}/images/loader/ajax-loader.gif" alt="loader1" style="display:none; height:30px; width:auto;" id="loaderImg">Submit</button></div>


                          <!-- button type="submit" name="submit" value="SUBMIT" onclick="submit()" class="btn btn-primary" class="reset" id="loderButton1"><i class="fa fa-circle-o-notch fa-spin" id="loderIcon1" style="display:none;"></i>Submit</button> -->

                            
                        </form>

                      </div>
                    
                    </div>
                  </div>
                </div>
                <!--Start modal page  -->









@endsection

<script>
$(document).on('submit', 'form#RequestQuote', function(e) {
      e.preventDefault();
      //alert('csjksbk');
      var data = new FormData(this);
       $('img').show();
       $('button').prop("disabled",true); 
      $.ajax({
          cache:false,
          contentType: false,
          processData: false,
          url:"{{action('WebsiteController\WebsiteController@sendRequestQuote')}}",
          method: $(this).attr("method"),
          dataType: "json",
          data: data,
          success: function(response) {
            $('img').show();     
            $('button').prop("disabled", false); 
            if (response.success == 200) {
                toastr.success(response.message); 
                location.reload(true);
                
            } else {
                toastr.error(response.message);
            }
          }
      }); 
});
</script>