@extends('layouts.layout')

@section('content')


<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>
        {{ ucwords(str_replace('_', ' ', 'New Trip')) }}
        <small>Version 2.0</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> SysManager</a></li>
        <li class="active">{{ ucwords(str_replace('_', ' ', 'New Trip')) }}</li>
    </ol>
</section>

<!-- ADD FORM -->

<!-- Main content -->
<section class="content">
    <div class="row">


        <!-- left column -->
        <div class="col-md-12">
            <!-- general form elements -->
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">{{ ucwords(str_replace('_', ' ', 'CLIENT NAME:  ')) }}
                        <b></b></h3>
                     <div class="cost" style="font-size: 13px" ></div>
                    
                </div>
                <!-- /.box-header -->
                <!-- form start -->

                <form id="trip_information" name="trip_information" class="trip_information"  action="" method="POST" role="form" enctype="multipart/form-data" onsubmit="return false;">

                    <div class="box-body">

                        <div class="col-sm-12">

                            <div class="content">         
                                <div class="stepwizard">
                                    <div class="stepwizard-row setup-panel">

                                        <div class="stepwizard-step">
                                            <a href="#step-1" type="button" class="btn btn-primary btn-circle">1</a>
                                            <h5>Passenger's Details <span class="fa fa-users"></span></h5>

                                        </div>

                                        <div class="stepwizard-step">
                                            <a href="#step-2" type="button" class="btn btn-default btn-circle" disabled="disabled">2</a>
                                            <h5>Trip Details <span class="fa fa-car"></span></h5>
                                        </div>
                                        <div class="stepwizard-step">
                                            <a href="#step-3" type="button" class="btn btn-default btn-circle" disabled="disabled">3</a>
                                            <h5>Additional Services <span class="fa fa-plus"></span></h5>

                                        </div>



                                    </div>
                                </div>



                                <div class="regular-search">

                                    <div class="setup-content" id="step-1">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <hr/>
                                                
        <!-- ///////////////////////////////////////////////// ALL HIDDEN FIELDS //////////////////////////////////-->
                            
                         <input type="hidden" id="pushPrice" class="pushPrice" name="pushPrice"/>
                         <input type="hidden" id="number_of_days" class="number_of_days" name="number_of_days"/>
                         <input type="hidden" id="price_per_day" class="price_per_day" name="price_per_day"/>
                         <input type="hidden" id="total_cost" class="total_cost" name="total_cost"/>
                         <input type="hidden" value="" id="client_id" class="client_id" name="client_id"/>
                    
                   
        <!-- ///////////////////////////////////////////////// ALL HIDDEN FIELDS //////////////////////////////////-->
           
                                                
                                                <div class="col-sm-3">
                                                    <div class="form-group">
                                                        <label for="exampleInputEmail1">Office</label>

                                                        
                                                        <div class="input-group">
                                                            <select class="form-control" name="office" id="office">
                                                                <option value="">Select Office</option>
                                                                                                                            </select>
                                                            <div class="input-group-addon">
                                                                <i class="fa fa-arrow-down"></i>
                                                            </div>
                                                        </div>

                                                    </div>
                                                </div>
                                                
                                                <div class="col-sm-3">
                                                    <div class="form-group">
                                                        <label for="exampleInputEmail1">Service Type</label>

                                                        
                                                        <div class="input-group">
                                                            <select class="form-control" name="service_type" id="service_type">
                                                                <option value="">Select</option>
                                                                                                                            </select>
                                                            <div class="input-group-addon">
                                                                <i class="fa fa-arrow-down"></i>
                                                            </div>
                                                        </div>

                                                    </div>
                                                </div>



                                                <div class="col-sm-3">
                                                    <div class="form-group">
                                                        <label for="exampleInputEmail1">Passenger's Name</label>
                                                        <div class="input-group">
                                                            <input type="text" class="form-control" id="passengerName" name="passengerName">

                                                            <div class="input-group-addon">
                                                                <i class="fa fa-navicon"></i>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <!--<div class="col-sm-4">
                                                    <div class="form-group">
                                                        <label for="exampleInputEmail1">No of Passengers</label>
                                                        <div class="input-group">
                                                            <input type="text" class="form-control" id="nof_passenger" name="nof_passenger">

                                                            <div class="input-group-addon">
                                                                <i class="fa fa-users"></i>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>-->

                                                <div class="col-sm-3">
                                                    <div class="form-group">
                                                        <label for="exampleInputEmail1">Passenger's Email</label>
                                                        <div class="input-group">
                                                            <input type="text" class="form-control" id="passengers_email" name="passengers_email">

                                                            <div class="input-group-addon">
                                                                <i class="fa fa-mail-forward"></i>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-sm-3">
                                                    <div class="form-group">
                                                        <label for="exampleInputEmail1">Passenger's Phone</label>
                                                        <div class="input-group">
                                                            <input type="text" class="form-control" id="passengers_phone" name="passengers_phone">

                                                            <div class="input-group-addon">
                                                                <i class="fa fa-phone"></i>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                
                                                
                                                <div class="col-sm-3">
                                                    <div class="form-group">
                                                        <label for="exampleInputEmail1">&nbsp;</label>
                                                        <div class="input-group">
                                                           <center><button class="button nextBtn btn-sm newbtncl btn btn-primary" type="button" >Continue</button>
                                                        </div>
                                                    </div>
                                                </div>
                                                
                                                
                                                 


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

                                    
                                    
    
 <!--/////////////////////////////////////////////BEGINNING OF STEP 2  //////////////////////////////////-->                                   
                        <hr/>           
                         <div class="setup-content" id="step-2">
                                        <div class="row">
                                            <div class="col-md-12">
                                                
                                                 <div class="col-sm-3">
                                                <div class="form-group">
                                                    <label for="exampleInputEmail1">Departure</label>
                                                    
                                                    <div class="input-group">
                                                        <select class="form-control select_depature"  id="depature" name="depature">
                                                           <option value="">Select</option>
                                                        </select>

                                                        <div class="input-group-addon">
                                                            <i class="fa fa-map"></i>
                                                        </div>
                                                    </div>
                                                    
                                                    <!--<div class="input-group">
                                                        <select class="form-control"  id="depature" name="depature">
                                                            <option value="">Select</option>
                                                                                                                    </select>

                                                        <div class="input-group-addon">
                                                            <i class="fa fa-map"></i>
                                                        </div>
                                                    </div>-->
                                                </div>
                                            </div>

                                               
                                                                                        
                                                
                                            <div class="col-sm-3">
                                                <div class="form-group">
                                                    <label for="exampleInputEmail1">Destination</label>

                                                    <div class="input-group">
                                                        
                                                        <div class="select_destination"></div>
                                                        <!-- <select class="form-control"  id="destination" name="destination">
                                                           <option value="">Select</option>
                                                        </select>-->
                                                        
                                                        <!--<select class="form-control"  id="destination" name="destination">
                                                            <option value="">Select</option>
                                                                                                                    </select>-->

                                                        <div class="input-group-addon">
                                                            <i class="fa fa-map-signs"></i>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                                
                                                
                                                
                                                
                                           <div class="col-sm-3">
                                                <div class="form-group">
                                                    <label for="exampleInputEmail1">Vehicle Category</label>
                                                    <div class="input-group">

                                                                                                                <select class="form-control"  id="vehicle_type" name="vehicle_type">
                                                            <option value="">Select</option>
                                                                                                                    </select>

                                                        <div class="input-group-addon">
                                                            <i class="fa fa-car"></i>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                                
                                                
                                                
                                                <div class="col-sm-3">
                                                <div class="form-group">
                                                    <label for="exampleInputEmail1">Vehicle Make</label>
                                                    <div class="input-group">

                                                      
                                                        <select class="form-control vehicle_category"  id="vehicle_make" name="vehicle_make">
                                                            <option value="">Select</option>
                                                        </select>

                                                        <div class="input-group-addon">
                                                            <i class="fa fa-car"></i>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                                
                                                
                                 <div class="col-sm-3">
                                                <div class="form-group">
                                                    <label for="exampleInputEmail1">Pick up Date</label>
                                                    <div class="input-group">
                                                        <input type="text" class="form-control datepicker" id="pick_up_date"  name="pick_up_date">

                                                        <div class="input-group-addon">
                                                            <i class="fa fa-calendar-plus-o"></i>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>


                                            <div class="col-sm-3">
                                                <div class="form-group">
                                                    <label for="exampleInputEmail1">Pick up Time</label>
                                                    <div class="input-group">
                                                        <input type="time" class="form-control timepicker" id="pick_up_time"  name="pick_up_time">

                                                        <div class="input-group-addon">
                                                            <i class="fa fa-clock-o"></i>
                                                        </div>
                                                    </div>

                                                </div>
                                            </div>
                                                
                                                
                                         
                                            <div class="col-sm-3">
                                                <div class="form-group">
                                                    <label for="exampleInputEmail1">End Date</label>
                                                    <div class="input-group">
                                                        <input type="text" class="form-control datepicker" id="end_date" name="end_date">

                                                        <div class="input-group-addon">
                                                            <i class="fa fa-calendar-plus-o"></i>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-sm-3">
                                                <div class="form-group">
                                                    <label for="exampleInputEmail1">End Date Time</label>
                                                    <div class="input-group">
                                                        <input type="time" class="form-control form-control timepicker" id="end_date_time" name="end_date_time">

                                                        <div class="input-group-addon">
                                                            <i class="fa fa-clock-o"></i>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>


                                           
                                                
                                                
                                             <div class="col-sm-3">
                                                <div class="form-group">
                                                    <label for="exampleInputEmail1">Pick Up Address</label>
                                                    <div class="input-group">
                                                        <input type="text" class="form-control" id="pick_up_location" name="pick_up_location">

                                                        <div class="input-group-addon">
                                                            <i class="fa fa-map"></i>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                                
                                                
                                            <div class="col-sm-3">
                                                <div class="form-group">
                                                    <label for="exampleInputEmail1">Drop Off Location</label>
                                                    <div class="input-group">
                                                        <input type="text" class="form-control" id="actual_street" name="actual_street">

                                                        <div class="input-group-addon">
                                                            <i class="fa fa-map"></i>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                                
                                                
                                            <div class="col-sm-3">
                                                <div class="form-group">
                                                    <label for="exampleInputEmail1">Price Per Day</label>
                                                    <div class="input-group">
                                                        <input type="number" value="0" class="form-control costoftrip" id="costoftrip" name="costoftrip">

                                                        <div class="input-group-addon">
                                                            <i class="fa fa-clock-o"></i>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                                
                                                
                                          <div class="col-sm-3">
                                                <div class="form-group">
                                                    <label for="exampleInputEmail1">Total Cost</label>
                                                    <div class="input-group">
                                                        <input type="number" readonly value="0" class="form-control itotalCost" id="itotalCost" name="itotalCost">

                                                        <div class="input-group-addon">
                                                            <i class="fa fa-clock-o"></i>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                                
                                                
                                                <div class="col-sm-12">
                                                    <div class="rental_conditions"></div>
                                                </div> 
                                                
                                                
                                                 <div class="col-sm-3">
                                                    <div class="form-group">
                                                        <label for="exampleInputEmail1">&nbsp;</label>
                                                        <div class="input-group">
                                                           <center><button class="button nextBtn btn-sm newbtncl btn btn-primary" id="calculateContinueBtn" type="button" >Continue</button>
                                                        </div>
                                                    </div>
                                                </div>
                                                
                                                
                                                
                                            </div>
                                        </div>
                                    </div>

 <!--/////////////////////////////////////////////END OF STEP 2  //////////////////////////////////--> 
 
 
 
                                  <div class="setup-content" id="step-3">
                                        <div class="row">
                                            <div class="col-md-12">
                                                
                                                                                    
                                                <table class="table table-bordered table-responsive table-condensed table-hover"  id="item_table">
                                                        <tr>
                                                            <th>Service Type</th>
                                                            <th>Quantity</th>
                                                             <th>Cost</th>
                                                            <th>
                                                            <!--<button title="Add More" type="button" name="add" class="btn-sm btn-default add"><span class="fa fa-plus"></span></button>-->
                                                                <button title="Add More" type="button" name="add" class="btn-xs btn-danger add" id="add"><span class="fa fa-plus"></span></button>

                                                            </th>
                                                        </tr>

                                                        <tr>
                                                            <td>
                                                                <select class="form-control additional_service" id="additional_service" name="additional_service[]">
                                                                    <option value="">select</option>
                                                                                                                                    </select>
                                                            </td>

                                                            <td>
                                                                <input type="text" class="form-control" id="quantity" name="quantity[]" placeholder="Quantity">

                                                            </td>
                                                            
                                                            <td>
                                                                <input type="text" class="form-control add_cost" id="add_cost" name="add_cost[]" placeholder="Cost">

                                                            </td>

                                                            <td>
                                                                <button type="type" title="Remove" name="remove" class="btn-danger btn-xs remove"><i class="fa fa-remove"></i></button>
                                                                <!--<button class="btn btn-sm btn-secondary add_new_service" id="add_new_service">Add</button> -->
                                                            </td>
                                                        </tr>


                                                    </table>
                                   
                                              <!-- /.box-body -->
                            <div class="box-footer">
                                <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">
                               <input type="hidden" name="nurl" id="nurl" value="">
                                <input type="hidden" name="reservation_id" id="reservation_id" value=" ">
                                <button  type="submit" id="add_trips" class="btn btn-danger">SUBMIT</button> &nbsp;&nbsp;
                                <!--<button  type="submit" id="add_trips" class="btn btn-danger pull-right">FINISH</button>-->

                            </div>
                                              
                                              
                                              <div class="pricedetails"></div>
                                             <!-- <div class="col-sm-3">
                                                <div class="form-group">
                                                    <label for="exampleInputEmail1">No of Day</label>
                                                    <div class="input-group">
                                                        <input type="number" class="form-control" id="no_of_days" name="no_of_days" class="no_of_days">

                                                        <div class="input-group-addon">
                                                            <i class="fa fa-dashcube"></i>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>


                                            <div class="col-sm-3">
                                                <div class="form-group">
                                                    <label for="exampleInputEmail1">Price Per Day</label>
                                                    <div class="input-group">
                                                        <input type="number" class="form-control" id="price_per_day" name="price_per_day" class="price_per_day">

                                                        <div class="input-group-addon">
                                                            <i class="fa fa-money"></i>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>-->
                                                
                                                
                                            </div>
                                        </div>
                                    </div>

                                </div>

                            </div>                                     





                          

                            <div class="col-sm-12">
                                <h3>Added Trips</h3>

                                

                                <table style="font-size:13px" class="table table-responsive table-bordered table-condensed table-hover">
                                    <tr>
                                        <th>ID</th>
                                         <th>Task ID</th>
                                        <th>Name</th>
                                         <th>Email</th>
                                          <th>Phone</th>
                                        <th>Pickup Date</th>
                                        <th>End Date</th>
                                        <th>Departure</th>
                                        <th>Destination</th>
                                        <th>Vehicle Type</th>
                                       
                                        <th>Total Amount</th>
                                        <!--<th>Resources</th>-->
                                        <th>Action</th>
                                    </tr>

                                    <tbody id="contract_list">

                                        
                                        <tr><td colspan='6'>No Trip</td></tr>                                        <tr><td colspan='12'>Total Amount : 0.00</td></tr>

                                    </tbody>
                                </table>

                            </div>
                            </form>
                        </div>
                        <!-- /.box -->



                    </div>




            </div>
            </section>


            <script src="{{ URL::asset('js/global.js') }}"></script>
            <script src="{{ URL::asset('js/trips.js') }}"></script>
            <script src="{{ URL::asset('js/twowaybinding.js') }}"></script>
            <script src="{{ URL::asset('js/formstep.js') }}"></script>



            <script type="text/javascript">
                                                    $(document).ready(function () {
                                                        $(document).on('click', '.add', function () {
                                                            var html = "";
                                                            html += "<tr>";

                                                            html += "<td><select name='additional_service[]' required id='additional_service'  class='form-control additional_service'><option value=''>select</option></select></td>";
                                                            html += "<td><input type='text' required name='quantity[]' id='quantity' placeholder='Quantity' class='form-control quantity' /></td>";
                                                            html += "<td><input type='text' required name='add_cost[]' id='add_cost' placeholder='Cost' class='form-control add_cost' /></td>";
                                                            html += "<td><button type='type' name='remove' class='btn btn-danger btn-xs remove'><i class='fa fa-remove'></i></button></td></tr>";
                                                            $('#item_table').append(html);
                                                        });


                                                        $(document).on('click', '.remove', function () {
                                                            var r = confirm("Please make sure this particular row you want to remove all details, eg. Payment details, amount, select code and date is empty before your remove");
                                                            if (r == true) {
                                                                $(this).closest('tr').remove();
                                                            }
                                                        });

                                                        $(document).on('click', '.newdatelog', function () {
                                                            $(this).datepicker({
                                                                //dateFormat: 'yy-mm-d',
                                                                format: 'yyyy-mm-dd',
                                                                weekStart: 1,
                                                                color: 'red'
                                                            });
                                                        });



                                                    });
            </script>

            <script type="text/javascript">
                function toggleContent() {
                    // Get the DOM reference
                    var contentId = document.getElementById("collapse_table");
                    // Toggle 
                    contentId.style.display == "block" ? contentId.style.display = "none" :
                            contentId.style.display = "block";
                }
            </script>

            <!--<script src="https://cdn.jsdelivr.net/npm/places.js@1.16.4"></script>
<script>
(function() {
  var placesAutocomplete = places({
    appId: 'plDWT03TPP6K',
    apiKey: '565e0deca1610067085f7e36a4a8505e',
    container: document.querySelector('#pick_up_location')
   // container: document.querySelector('#actual_street')
  });

  var $address = document.querySelector('#address-value')
  placesAutocomplete.on('change', function(e) {
    $address.textContent = e.suggestion.value
  });

  placesAutocomplete.on('clear', function() {
    $address.textContent = 'none';
  });

})();
</script>-->

            @endsection