Current File : /home/tradevaly/demo.tradevaly.com.bd/resources/views/frontend/company-profile.blade.php
@extends('layouts.frontend')

    @section('content') 

 
      <div id="wrapper-content" class="wrapper-content explore-details explore-details-full-image bg-gray-06 pb-0 pt-0 ">
        <div class="image" style="background-image: url('{{ asset('storage/app/public/companies/cover_photo/'.$companyDetails->cover_photo) }}')"> </div>
        <div class="mb-8 z-indx-1 page-wrapper bg-white">
          <div class="container">
            <div class="page-title pt-7 pb-3 border-bottom">
              <div class="explore-details-top d-flex flex-wrap flex-lg-nowrap bg-white">
                <div class="media flex-wrap flex-md-nowrap store">
                  <div class="store-image mb-4 mb-md-0 mr-5"><img src="{{ asset('storage/app/public/companies/company_logo/'.$companyDetails->logo)}}" width="76" height="73" alt="Provider"></div>
                  <div class="media-body lh-14">
                    <div class="d-inline-flex flex-wrap">
                      <h2 class="mb-0">{{ !empty($companyDetails->company_name) ? $companyDetails->company_name : '' }}</h2>
                      @if( !empty($companyDetails->status == 2) )
                        <span class="check d-inline-block ml-2 font-weight-semibold"> <i class="fa fa-check-square" aria-hidden="true"></i> Verified </span> 
                      @endif
                    </div>
                    <!-- <div class="fw-500 font-size-lg pb-2 mb-2">Company Sub Title</div> -->
                    <ul class="list-inline store-meta d-flex flex-wrap align-items-center">
                      
                      @if( !empty($year->name) )
                        <li class="list-inline-item">
                          <span class="badge badge-success d-inline-block mr-1"><i class="fa fa-university" aria-hidden="true"></i></span>
                          <span>Established Year : {{$year->name}}</span>
                        </li>
                      @endif

                      @if( !empty($comcat) )
                        <li class="list-inline-item separate"></li>
                        <li class="list-inline-item">
                        <a href="#" class=" text-link text-decoration-none d-flex align-items-center">
                        <span class="d-inline-block mr-2 font-size-md"><i class="fa fa-tasks" aria-hidden="true"></i></span>
                        <span>Category : {{ implode(', ', $comcat); }}</span>
                        </a>
                        </li>  
                      @endif 

                    </ul>
                  </div>
                </div>
                <div class="ml-0 ml-lg-auto mt-4 mt-lg-0 d-flex flex-wrap flex-sm-nowrap">
                  <ul class="list-inline mb-0">
                    <li class="list-inline-item">
                      <a data-toggle="modal" data-target="#exampleModalCenter" href="#exampleModalCenter" class="btn do-um btn-white font-size-md mb-3 mb-sm-0 py-1 px-2 rounded-sm"> <span class="d-inline-block mr-1"> <i class="fal fa-exclamation-triangle"></i> </span> Report</a> </li>
                    <li class="list-inline-item"> <a href="#" class="btn btn-white font-size-md mb-3 mb-sm-0 py-1 px-3 rounded-sm"> <span class="d-inline-block mr-1"> <i class="fal fa-share-alt"></i> </span> Share</a> </li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="page-container row bg-white pt-3 pb-5">
			
              <div class="page-content col-xl-8 mb-8 mb-xl-0 pt-1">
                <div class="explore-details-container">
                  
                @if( !empty($companyDetails->about_company) )
                  <div class="mb-5">
                    <h5 class="tite font-size-lg text-uppercase mb-2">Company Details</h5>
                    <div class="mb-3" style="text-align: justify;">
                      
                      <p class="mb-6">{!! $companyDetails->about_company !!} </p>

                    </div>
                  </div>
                @endif

                  <div class="explore-details-container">
                    <div class="collapse-tabs">
                      <div class="my-tab border-bottom tabs bg-gray-06 mt-7 px-4 py-2 mb-0 d-none d-sm-block">
                        <ul class="nav nav-pills tab-style-01" role="tablist">
                         
                          <li class="bg-white nav-item"> <a class="nav-link active" id="description-tab" data-toggle="tab" href="#description" role="tab" aria-controls="description" aria-selected="true">Showroom</a> </li> 

                          <li class="bg-white nav-item"> <a class="nav-link" id="list-tab" data-toggle="tab" href="#listing" role="tab" aria-controls="list" aria-selected="false">List Product </a> </li>
                        </ul>
                      </div>
                      <div class="bg-gray-02 tab-content px-4 py-4">
                        <div id="collapse-tabs-accordion">
                          <div class="tab-pane fade active show" id="description" role="tabpanel" aria-labelledby="description-tab">
                            <div class="card bg-transparent mb-4 mb-sm-0">
                             
                              <div id="description-collapse" class="collapse collapsible show" aria-labelledby="headingDescription" data-parent="#collapse-tabs-accordion">
                                
                                    <div class="card-body p-sm-0 border-sm-0">
                                    <div class="tite">Showroom List</div><br/>
									
                                   
                                    <div id="data-wrapper">
                                        <!-- Results -->
                                    </div>

                                    <!-- Data Loader -->
                                    <div class="auto-load text-center">
                                        <svg version="1.1" id="L9" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                                            x="0px" y="0px" height="60" viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
                                            <path fill="#000"
                                                d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">
                                                <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s"
                                                    from="0 50 50" to="360 50 50" repeatCount="indefinite" />
                                            </path>
                                        </svg>
                                    </div>


                                    <div class="finished text-center"></div>
									
                                  

                                    

                                    <div class="pagination"> 
                                        <button  class="btn btn-lg text-white btn-animated btn-block font-size-h5 lh-18 load-more">
                                          More Results...<span class="count-show"></span>
                                        </button> 
                                      </div>

                                </div>

                                


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


                          <div class="tab-pane" id="listing" role="tabpanel" aria-labelledby="list-tab">
                            <div class="card bg-transparent mb-4 mb-sm-0">
                              
                              <div id="reviews-collapse" class="collapse collapsible" aria-labelledby="headingReview" data-parent="#collapse-tabs-accordion">
                                <div class="card-body p-sm-0 border-sm-0">
                                    
                                    <div class="store-listing-style store-listing-style-02">
                                       <div class="bg-white rounded shadow-sm py-2 col-md-12">
                                        <div class="row" id="data-wrapper-list-product">
                                            
                                            

                                           

                                      <!-- Data Loader -->
                                          <div class="auto-load-list-product text-center">
                                              <svg version="1.1" id="L9" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                                                  x="0px" y="0px" height="60" viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
                                                  <path fill="#000"
                                                      d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">
                                                      <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s"
                                                          from="0 50 50" to="360 50 50" repeatCount="indefinite" />
                                                  </path>
                                              </svg>
                                          </div>


                                          <div class="finished-list-product text-center"></div>

                                          
                                            
                                        </div>

                                        <br/>
                                        
                                        <div class="pagination"> 
                                        <button  class="btn btn-lg text-white btn-animated btn-block font-size-h5 lh-18 load-more-list-product">
                                          More Results...<span class="count-show"></span>
                                        </button> 
                                      </div>
                                       </div>                      
                                
                                    </div>
                                  
                                </div>
                              </div>
                            </div>
                          </div>

                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
			  
              <div class="sidebar col-12 col-xl-4 pt-1">
                <div class="widget map mb-6 position-relative mb-6 rounded-0">
                  <div id="" class="small-map" style="width:100%;height:240px;">
                      <iframe 
                        width="100%"
                        height="100%"
                        frameborder="0" 
                        style="border:0;"  allowfullscreen scrolling
                        src="https://maps.google.com/maps?q={{$companyDetails->latitude}},{{$companyDetails->longitude}}&hl=es&z=14&amp;output=embed"
                      >
                      </iframe>   
                    </div>
                  <div class="button-direction position-absolute"> <a href="#" class="btn btn-sm btn-icon-left"> <i class="fas fa-location-arrow"></i> Get Direction </a> </div>
                  <div class="card p-4 widget border-0 infomation pt-0 bg-gray-06">
                    <div class="card-body px-0 py-0">
                      <ul class="list-group list-group-flush">
                      @if( !empty($year->name) )
                        <li class="list-group-item bg-transparent d-flex text-dark px-0"> <span class="item-icon mr-3"><i class="fa fa-university"></i></span> <span class="card-text">Established Year :  {{ $year->name }}</span> </li>
                      @endif

                      @if( !empty($comcat) )
                        <li class="list-group-item bg-transparent d-flex text-dark px-0"> <span class="item-icon mr-3"><i class="fa fa-tasks"></i></span> <span class="card-text">Category : {{ implode(', ', $comcat); }}</span> </li>
                      @endif

                      @if( !empty($companyDetails->address) )
                        <li class="list-group-item bg-transparent d-flex text-dark px-0"> <span class="item-icon mr-3"><i class="fal fa-map-marker-alt"></i></span> <span class="card-text">{{ $companyDetails->address }}</span> </li>
                      @endif
                      
                      @if( !empty($companyDetails->mobile) )
                        <li class="list-group-item bg-transparent d-flex text-dark px-0"> <span class="item-icon mr-3"> <i class="fal fa-phone"></i> </span> <span class="card-text">{{ !empty($callingCodeList[$companyDetails->country_id]) ? $callingCodeList[$companyDetails->country_id] : ''}} {{ $companyDetails->mobile }}</span> </li>
                      @endif
                      
                      @if( !empty($companyDetails->email) )
                        <li class="list-group-item bg-transparent d-flex text-dark px-0"> <span class="item-icon mr-3"> <i class="fal fa-envelope"></i> </span> <span class="card-text">{{ $companyDetails->email }}</span> </li>
                      @endif
                      
                      @if( !empty($companyDetails->website) )
                        <li class="list-group-item bg-transparent d-flex text-dark px-0"> <span class="item-icon mr-3"><i class="fal fa-globe"></i></span> <span class="card-text"><a href="{{ $companyDetails->website }}" target="_blank">{{ $companyDetails->website }}</a></span> </li>
                      @endif
                        <li class="list-group-item bg-transparent d-flex text-dark px-0 pt-4">
                          <div class="social-icon origin-color si-square text-center">
                            <ul class="list-inline">

                            @if( !empty($companyDetails->facebook) )
                              <li class="list-inline-item si-facebook"> <a target="_blank" title="Facebook" href="{{ $companyDetails->facebook }}"> <i class="fab fa-facebook-f"> </i> <span>Facebook</span> </a> </li>
                            @endif
                            
                            @if( !empty($companyDetails->youtube) )
                              <li class="list-inline-item si-youtube"> <a target="_blank" title="Youtube" href="{{ $companyDetails->youtube }}" style="background:red"> <i class="fab fa-youtube"> </i> <span>Youtube</span> </a> </li>
                            @endif
                            
                            @if( !empty($companyDetails->twitter) )
                              <li class="list-inline-item si-twitter"> <a target="_blank" title="Twitter" href="{{ $companyDetails->twitter }}"> <i class="fab fa-twitter"> </i> <span>Twitter</span> </a> </li>
                            @endif
                            </ul>
                          </div>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
                <div class="card p-4 widget border-0 contact bg-gray-06 rounded-0 mb-6">
                  <div class="card-body pt-0 px-0 pb-3">
                    <div class="pb-2 border-bottom card-title text-uppercase text-dark font-weight-semibold font-size-md"> <span class="text-secondary d-inline-block mr-2"><i class="fas fa-envelope"></i></span> <span>Send Query</span> </div>
                    <div class="contact-form">
                      <form>
                        <div class="form-group mb-2">
                          <label class="sr-only" for="name">Name</label>
                          <input type="text" id="name" class="form-control form-control-sm border-0 bg-white" placeholder="Name:">
                        </div>
                        <div class="form-group mb-2">
                          <label class="sr-only" for="email">Email</label>
                          <input type="text" id="email" class="form-control form-control-sm border-0 bg-white" placeholder="Email Address:">
                        </div>
                        <div class="form-group mb-2">
                          <label class="sr-only" for="message">Message</label>
                          <textarea class="form-control border-0" id="message" placeholder="Message..."></textarea>
                        </div>
                        <button type="submit" class="btn btn-primary btn-block btn-sm">Submit</button>
                      </form>
                    </div>
                  </div>
                </div>
                
               
                
                <div class="card p-4 widget border-0 gallery bg-gray-06 rounded-0 mb-6">
                    <div class="card-title d-flex mb-0 font-size-md font-weight-semibold text-dark text-uppercase border-bottom pb-2 lh-1"> 
                      <span class="text-secondary mr-2"> <i class="far fa-video"></i> </span> <span> Corporate Video</span> 
                    </div>
                    <div class="card-body px-0 pt-6 pb-3">
                         
                      <div class="photo-gallery d-flex flex-wrap justify-content-between">
                                            <iframe width="100%" height="200" src="https://www.youtube.com/embed/{{ $companyDetails->corporate_video }}?autoplay=1&mute=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                                   </div>

                    </div>
               </div>

                @if( !empty($galleries) )
                  <div class="card p-4 widget border-0 gallery bg-gray-06 rounded-0 mb-6">
                    <div class="card-title d-flex mb-0 font-size-md font-weight-semibold text-dark text-uppercase border-bottom pb-2 lh-1"> <span class="text-secondary mr-2"> <i class="far fa-images"></i> </span> <span> photo gallery</span> </div>
                    <div class="card-body px-0 pt-6 pb-3">
                      <div class="photo-gallery d-flex flex-wrap justify-content-between"> 
                          
                          @php $count = 1; @endphp
                          @foreach( $galleries as $gal )

                            <a href="{{ asset('storage/app/public/companies/company_gallery/'.$gal)}}" class="photo-item" data-gtf-mfp="true" data-gallery-id="{{$count++}}"> 
                              <img src="{{ asset('storage/app/public/companies/company_gallery/'.$gal)}}" alt="Gallery {{$count++}}"> 
                            </a> 
                          @endforeach

                        </div>
                    </div>
                  </div>
                @endif
                
              </div>
            </div>
          </div>
        </div>

              <div class="recent-view bg-white pt-7 pb-7">
                <div class="container">
                  <div class="mb-6">
                    <h5 style="color:#3d97d8;border-color: #3d97d8;" class="tite mb-0">Related Company</h5>
                  </div>
                  <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
                    <div class="carousel-inner">
                      <div class="carousel-item active">
                            <div class="row">
                              <div class="col-lg-3 mb-4 mb-lg-0">
                                <div class="card mb-0">
                                  <img src="{{ asset('public/frontend/images/shop/hotels-shop-1.jpg') }}" class="card-img-top" alt="...">
                                  <div class="card-body">
                                    <h5 class="tite card-title font-size-md">Company name</h5>
                                     <p>This is a wider card with supporting text below...</p>
                                    <p class="mb-0"><small class="text-muted"><a class="btn btn-light btn-sm px-5" href="#">Details</a></small></p>
                                  </div>
                                </div>
                              </div>
                              <div class="col-lg-3 mb-4 mb-lg-0">
                                <div class="card mb-0">
                                  <img src="{{ asset('public/frontend/images/shop/hotels-shop-2.jpg') }}" class="card-img-top" alt="...">
                                  <div class="card-body">
                                    <h5 class="tite card-title font-size-md">Company name</h5>
                                     <p>This is a wider card with supporting text below...</p>
                                    <p class="mb-0"><small class="text-muted"><a class="btn btn-light btn-sm px-5" href="#">Details</a></small></p>
                                  </div>
                                </div>
                              </div>
                              <div class="col-lg-3 mb-4 mb-lg-0">
                                <div class="card mb-0">
                                  <img src="{{ asset('public/frontend/images/shop/hotels-shop-3.jpg') }}" class="card-img-top" alt="...">
                                  <div class="card-body">
                                    <h5 class="tite card-title font-size-md">Company name</h5>
                                     <p>This is a wider card with supporting text below...</p>
                                    <p class="mb-0"><small class="text-muted"><a class="btn btn-light btn-sm px-5" href="#">Details</a></small></p>
                                  </div>
                                </div>
                              </div>
                              <div class="col-lg-3 mb-4 mb-lg-0">
                                <div class="card mb-0">
                                  <img src="{{ asset('public/frontend/images/shop/hotels-shop-1.jpg') }}" class="card-img-top" alt="...">
                                  <div class="card-body">
                                    <h5 class="tite card-title font-size-md">Company name</h5>
                                     <p>This is a wider card with supporting text below...</p>
                                    <p class="mb-0"><small class="text-muted"><a class="btn btn-light btn-sm px-5" href="#">Details</a></small></p>
                                  </div>
                                </div>
                              </div>
                            </div>
                      </div>
                      <div class="carousel-item">
                              <div class="row">
                              <div class="col-lg-3 mb-4 mb-lg-0">
                                <div class="card mb-0">
                                  <img src="{{ asset('public/frontend/images/shop/hotels-shop-1.jpg') }}" class="card-img-top" alt="...">
                                  <div class="card-body">
                                    <h5 class="tite card-title font-size-md">Company name</h5>
                                     <p>This is a wider card with supporting text below...</p>
                                    <p class="mb-0"><small class="text-muted"><a class="btn btn-light btn-sm px-5" href="#">Details</a></small></p>
                                  </div>
                                </div>
                              </div>
                              <div class="col-lg-3 mb-4 mb-lg-0">
                                <div class="card mb-0">
                                  <img src="{{ asset('public/frontend/images/shop/hotels-shop-2.jpg') }}" class="card-img-top" alt="...">
                                  <div class="card-body">
                                    <h5 class="tite card-title font-size-md">Company name</h5>
                                     <p>This is a wider card with supporting text below...</p>
                                    <p class="mb-0"><small class="text-muted"><a class="btn btn-light btn-sm px-5" href="#">Details</a></small></p>
                                  </div>
                                </div>
                              </div>
                              <div class="col-lg-3 mb-4 mb-lg-0">
                                <div class="card mb-0">
                                  <img src="{{ asset('public/frontend/images/shop/hotels-shop-3.jpg') }}" class="card-img-top" alt="...">
                                  <div class="card-body">
                                    <h5 class="tite card-title font-size-md">Company name</h5>
                                     <p>This is a wider card with supporting text below...</p>
                                    <p class="mb-0"><small class="text-muted"><a class="btn btn-light btn-sm px-5" href="#">Details</a></small></p>
                                  </div>
                                </div>
                              </div>
                              <div class="col-lg-3 mb-4 mb-lg-0">
                                <div class="card mb-0">
                                  <img src="{{ asset('public/frontend/images/shop/hotels-shop-1.jpg') }}" class="card-img-top" alt="...">
                                  <div class="card-body">
                                    <h5 class="tite card-title font-size-md">Company name</h5>
                                     <p>This is a wider card with supporting text below...</p>
                                    <p class="mb-0"><small class="text-muted"><a class="btn btn-light btn-sm px-5" href="#">Details</a></small></p>
                                  </div>
                                </div>
                              </div>
                            </div>
                      </div>
                      
                    </div>
                      <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                      </a>
                      <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                      </a>
                  </div>

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


    <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
          <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
              <div class="py-2 modal-header">
                <h6 class="modal-title" id="exampleModalLongTitle">Modal title</h6>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="pt-0 modal-body">
                  <form>
                    <div class="form-row">
                      
                      <div class="mb-0 form-group col-md-6">
                        <label class="col-form-label col-form-label-sm" for="">Full Name</label>
                        <div class="input-group mb-1">
                          <div class="input-group-sm input-group-prepend">
                            <div class="py-0 input-group-text"><i class="fa fa-address-card" aria-hidden="true"></i></div>
                          </div>
                          <input type="text" class="form-control-sm form-control" id="" placeholder="First & Last Name">
                        </div>
                      </div><!-- form-group col-md-6 -->
                      <div class="mb-0 form-group col-md-6">
                        <label class="col-form-label col-form-label-sm" for="">Company</label>
                        <div class="input-group mb-1">
                          <div class="input-group-sm input-group-prepend">
                            <div class="py-0 input-group-text"><i class="fa fa-building" aria-hidden="true"></i></div>
                          </div>
                          <input type="text" class="form-control-sm form-control" id="" placeholder="Company Name">
                        </div>
                      </div><!-- form-group col-md-6 -->
                      
                    </div><!-- form-row -->

                    <div class="form-row">
                      
                      <div class="mb-0 form-group col-md-6">
                        <label class="col-form-label col-form-label-sm" for="">Phone / Mobile</label>
                        <div class="input-group mb-1">
                          <div class="input-group-sm input-group-prepend">
                            <div class="py-0 input-group-text"><i class="icon__flag iti__bd" id=""></i></div>
                          </div>
                          <input type="text" class="form-control-sm form-control" id="" placeholder="+880">
                        </div>
                      </div><!-- form-group col-md-6 -->
                      <div class="mb-0 form-group col-md-6">
                        <label class="col-form-label col-form-label-sm" for="">Email</label>
                        <div class="input-group mb-1">
                          <div class="input-group-sm input-group-prepend">
                            <div class="py-0 input-group-text"><i class="far fa-envelope-open" aria-hidden="true"></i></div>
                          </div>
                          <input type="text" class="form-control-sm form-control" id="" placeholder="name@company.com">
                        </div>
                      </div><!-- form-group col-md-6 -->
                      
                    </div><!-- form-row -->


                    <div class="form-row">
                      
                      <div class="mb-0 form-group col-md-6">
                        <label class="col-form-label col-form-label-sm" for="">Interested in Premium Membership?</label>
                        <div class="input-group mb-1">
                          <div class="input-group-sm input-group-prepend">
                            <div class="py-0 input-group-text"><i class="fas fa-store" aria-hidden="true"></i></div>
                          </div>
                          <select class="custom-select form-control-sm form-control valid" name="">
                            <option selected="selected" value="">Choose a package</option>
                            <option value="6">Elite</option>
                            <option value="2">Gold</option>
                            <option value="3">Platinum</option>
                            <option value="4">Platinum +</option>
                            <option value="5">Exclusive</option>
                          </select>
                        </div>
                      </div><!-- form-group col-md-6 -->
                      <div class="mb-0 form-group col-md-6">
                        <label class="col-form-label col-form-label-sm" for="">Are you a Decision Maker?</label>
                        <div class="input-group mb-1">
                          <div class="input-group-sm input-group-prepend">
                            <div class="py-0 input-group-text"><i class="fas fa-check" aria-hidden="true"></i></div>
                          </div>
                          <select class="custom-select form-control-sm form-control valid" name="">
                            <option selected="selected" value="">Pick a status</option>
                            <option value="1">Yes</option>
                            <option value="0">No</option>
                          </select>
                        </div>
                      </div><!-- form-group col-md-6 -->
                      
                    </div><!-- form-row -->

                    <div class="form-row">
                      
                      <div class="mb-0 form-group col-md-12">
                        <label class="col-form-label col-form-label-sm" for="">Comments</label>
                        <div class="input-group mb-1">
                          <div class="input-group-sm input-group-prepend">
                            <div class="py-0 input-group-text"><i class="far fa-comments" aria-hidden="true"></i></div>
                          </div>
                          <textarea name="comments" placeholder="Your Message or Query" class="form-control-sm form-control valid" title="Please enter your comments here" rows="3" required="" aria-required="true"></textarea>
                        </div>
                      </div>
                      
                    </div><!-- form-row -->
                    
                    
                  </form>
              </div>
              <div class="modal-footer justify-content-md-center">
                <button type="submit" class="btn btn-sm px-7 text-white btn-animated">GET VERIFIED BUYERS</button>
                
              </div>
            </div>
          </div>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    
    <script>
        var ENDPOINT = "{{ url('/') }}";
        var page = 1;
        var pageList = 1;
        //alert(keyword);

        infinteLoadMore(page);

       
        $('.load-more').click(function () {
          //alert('pp');
            //if ($(window).scrollTop() + $(window).height() >= $(document).height()) {
                page++;
                
                infinteLoadMore(page);
           // }
        });

        infinteLoadMoreListProduct(pageList);

        $('.load-more-list-product').click(function () {
          //alert('pp');
            //if ($(window).scrollTop() + $(window).height() >= $(document).height()) {
              pageList++;
                
                infinteLoadMoreListProduct(pageList);
           // }
        });

        function infinteLoadMore(page) {
          	
        	//alert(alphabet);

        	var comID  = '<?= $comId ?>';
        	var paginateRange  = '<?= $paginateRange ?>';

          //alert('Response');
            $.ajax({
                    url: ENDPOINT + "/shoroom-list/"+comID+"?page=" + page,
                    datatype: "html",
                    type: "get",
                    beforeSend: function () {
                        $('.auto-load').show();
                    }
                })
                .done(function (response) {

                	//if (response.length == 0) {
                    if ( paginateRange > response.total ) {
                    	$('.auto-load').hide();

                    	// if( page > 1){
                    		
                    	// 	$('.finished').html("We don't have more data to display :(");
                    	// }
                        $('.load-more').hide();
                        //return;
                    }
                    
                    var totalCount = response.grand_total;

                    if( response.grand_total > paginateRange ){

                    	totalCount = (response.grand_total-1)+'+';
                    }
                    $(".total-found").html(totalCount)

                    $('.auto-load').hide();

                  

                    $("#data-wrapper").append(response.data);

                    if ( response.grand_total == 0 ) {
                    	
                    	$('.finished').html("Data not found :(");
                    
                    }

                })
                .fail(function (jqXHR, ajaxOptions, thrownError) {
                    console.log('Server error occured');
                });
        }


        
        function infinteLoadMoreListProduct(page) {
          	
            //alert(alphabet);
  
            var comID  = '<?= $comId ?>';
            var paginateRange  = '<?= $paginateRange ?>';
  
            //alert('Response');
              $.ajax({
                      url: ENDPOINT + "/list-product/"+comID+"?page=" + page,
                      datatype: "html",
                      type: "get",
                      beforeSend: function () {
                          $('.auto-load-list-product').show();
                      }
                  })
                  .done(function (response) {
  
                    //if (response.length == 0) {
                      if ( paginateRange > response.total ) {
                        $('.auto-load-list-product').hide();
  
                        // if( page > 1){
                          
                        //   $('.finished-list-product').html("We don't have more data to display :(");
                        // }
                          $('.load-more-list-product').hide();
                          //return;
                      }
                      
                      var totalCount = response.grand_total;
  
                      if( response.grand_total > paginateRange ){
  
                        totalCount = (response.grand_total-1)+'+';
                      }
                      $(".total-found-list-product").html(totalCount)
  
                      $('.auto-load-list-product').hide();
  
                    
  
                      $("#data-wrapper-list-product").append(response.data);
  
                      if ( response.grand_total == 0 ) {
                        
                        $('.finished-list-product').html("Data not found :(");
                      
                      }
  
                  })
                  .fail(function (jqXHR, ajaxOptions, thrownError) {
                      console.log('Server error occured');
                  });
          }
       
    </script>
    @endsection