@extends('frontend.header')
@section('content')

         <!-- #page -->
         <div id="page" class="site">
            <!-- #content -->
            <div id="content" class="site-content">
               <div id="primary" class="content-area">
                  <main id="main" class="site-main">

                     <div class="container page-container">
                        <article id="post-7860" class="post-7860 page type-page status-publish hentry">
                           <!-- .entry-header -->
                           <div class="entry-content">           
                              <div class="vc_row-full-width vc_clearfix"></div>
                              <section data-vc-full-width="true" data-vc-full-width-init="false" class="vc_section background-position-left-top overflow-visible vc_custom_1538392730938 vc_section-has-fill">
                                 
                                 <div class="vc_row wpb_row vc_row-fluid vc_custom_1538546565237 p-15">
                                    <div class="wpb_column vc_column_container vc_col-sm-12">
                                    <div class="vc_column-inner vc_custom_1538549488391">
                                       <div class="wpb_wrapper">
                                          <h2  style="text-align: center"  class="vc_custom_heading font-weight-bold letter-spacing-0 vc_custom_1558524877124" >Customer <span>Support</span> </h2>
                                          <p>Please complete the form below to tell us about your problem, valid Booking Ref and Email address is required.</p>
                                          
                                       </div>
                                    </div>
                                 </div>
                                 <!-- <div class="col-md-offset-3 col-md-6"> -->
                                 <div class="container">
                                  <div class="row">
                                      <div class="col-md-12">
                                          <form name="registration" id="registration" action="#" method="post">
                                      <div class="row jumbotron">
                                          <div class="col-sm-6 form-group">
                                              <label>Booking Reference *</label>
                                              <input type="text" class="form-control" name="book_ref" id="book_ref" placeholder="">
                                          </div>
                                          <div class="col-sm-6 form-group">
                                              <label>Full Name *</label>
                                              <input type="text" class="form-control" name="fname" id="fnama" placeholder="">
                                          </div>
                                          <div class="col-sm-6 form-group">
                                              <label>Mobile Number *</label>
                                              <input type="text" class="form-control" name="mobile" id="mobile" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" maxlength="10" minlength="10" placeholder="">
                                          </div>
                                          <div class="col-sm-6 form-group">
                                              <label>Email Address *</label>
                                              <input type="email" class="form-control" name="email" id="email" placeholder="">
                                          </div>
                                         
                                          <div class="col-sm-6 form-group">
                                              <label>Select Department *</label>
                                                <select name="department" id="department" class="form-control custom-select browser-default">
                                                  <option value="">Support Department</option>
                                                  <option value="Booking">Booking</option>
                                                  <option value="Amendment">Amendment</option>
                                                  <option value="Cancellation">Cancellation</option>
                                                </select>
                                          </div>
                                          <div class="col-sm-6 form-group">
                                              <label>Subject *</label>
                                              <input type="text" name="sub" class="form-control" id="sub" placeholder="">
                                          </div>
                                          <div class="col-sm-6 form-group">
                                              <label>Gender *</label>
                                                <select name="gender" id="gender" class="form-control custom-select browser-default">
                                                  <option value="">-- Select --</option>
                                                  <option value="male">Male</option>
                                                  <option value="female">Female</option>
                                                </select>
                                          </div>
                                          <div class="col-sm-6 form-group">
                                              <label>Upload File</label>
                                              <input type="file" name="file_upload" class="form-control" id="file_upload" placeholder="" accept="application/pdf,application/docx,application/doc">

                                               <p id="error1" style="display:none; color:#FF0000;font-size: 14px;">Invalid File! File Format Must Be pdf, doc, docx.</p>
                                                <p id="error2" style="display:none; color:#FF0000;font-size: 14px;">Maximum File Size Limit is 3MB.
                                            </p>
                                          </div>
                                          <div class="col-sm-12 form-group">
                                              <label>Message</label>
                                              <textarea name="message" id="message" class="form-control" rows="4"></textarea>
                                          </div>
                                          
                                          <div class="col-sm-12 flex-mobile">
                                              <input type="checkbox" class="form-check d-inline" id="chb"><label for="chb" class="form-check-label">&nbsp;I agree to Compare Your Parking <a href="#" data-toggle="modal" style="color: #0196d8;" data-target="#myModal">Support Policy</a>
                                              </label>

                                          <div class="row">
                                              <div class="col-md-12">
                                                  <div class="modal-box">
                                                      <!-- Modal -->
                                                      <div class="modal fade" id="myModal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                                                          <div class="modal-dialog" role="document">
                                                              <div class="modal-content">
                                                                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                                      <span aria-hidden="true">×</span>
                                                                  </button>
                                                                  <div class="modal-header">
                                                                  <h5 class="modal-title">Customer Support Policy</h5>
                                                                  
                                                                </div>
                                                                  <div class="modal-body">
                                                                      <p class="description">We take customer support as an opportunity to learn and improve for the future, as well as a chance to put things right for the person or organization that has requested support.</p>
                                                                      <p class="description"><strong>Our Policy is:</strong></p>

                                                                      <ul>
                                                                        <li>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.</li>
                                                                        <li> If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text</li>
                                                                        <li>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary</li>
                                                                        <li>It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures</li>
                                                                      </ul>
                                                                  </div>
                                                              </div>
                                                          </div>
                                                      </div>
                                                  </div>
                                              </div>
                                          </div>

                                          </div>

                                          <div class="col-sm-12 form-group mb-0">
                                             <button class="btn btn-primary ticket">Submit Ticket</button>
                                          </div>
                                          
                                      </div>
                                      </form>
                                      </div>
                                  </div>
                              </div>
                                 </div>
                                 <div class="vc_row-full-width vc_clearfix"></div>
                              </section>
                              
                              <div class="vc_row-full-width vc_clearfix"></div>
                             
                           </div>
                           <!-- .entry-content -->
                        </article>
                        <!-- #post-7860 -->    			
                     </div>
                  </main>
                  <!-- #main -->
               </div>
               <!-- #primary -->
            </div>
            <!-- #content -->
         </div>
         <!-- #page -->
         <!-- wraper_footer -->

<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

@endsection