@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 -->



                <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 style="background-color:#00193A; color:whitesmoke" href="#step-1" type="button" class="btn btn-primary btn-circle" disabled="disabled">1</a>
                                        <h5>&nbsp;Passenger's Details <span class="fa fa-users"></span></h5>
                                    </div>

                                    <div class="stepwizard-step">
                                        <a  style="background-color:#00193A; color:whitesmoke" href="#step-2" type="button" class="btn btn-default btn-circle" disabled="disabled">2</a>
                                        <h5>&nbsp;Trip Details <span class="fa fa-car"></span></h5>
                                    </div>

                                    <div class="stepwizard-step">
                                        <a  style="background-color:#00193A; color:whitesmoke" href="#step-3" type="button" class="btn btn-default btn-circle" disabled="disabled">3</a>
                                        <h5>&nbsp;Additional Services <span class="fa fa-plus"></span></h5>
                                    </div>

                                    <div class="stepwizard-step">
                                        <a href="#step-4" type="button" class="btn btn-default btn-circle">4</a>
                                        <h5>&nbsp;Add Resources<span class="fa fa-cab"></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/>

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

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

                                                </div>
                                            </div>



                                            <div class="col-sm-4">
                                                <div class="form-group">
                                                    <label for="exampleInputEmail1">Passenger's Name</label>
                                                    <div class="input-group">
                                                        <input type="text" disabled value="" 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" disabled value="" 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-4">
                                                <div class="form-group">
                                                    <label for="exampleInputEmail1">Passenger's Email</label>
                                                    <div class="input-group">
                                                        <input type="text" disabled value="" 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-4">
                                                <div class="form-group">
                                                    <label for="exampleInputEmail1">Passenger's Phone</label>
                                                    <div class="input-group">
                                                        <input type="text" disabled value="" 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-4">
                                                <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 disabled 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">
                                                        <select class="form-control" disabled 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" disabled 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">Pick up Date</label>
                                                    <div class="input-group">
                                                        <input type="text" disabled value="" 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="text" disabled value="" 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" disabled value="" 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="text" disabled value="" class="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">Drop Off Location</label>
                                                    <div class="input-group">
                                                        <input type="text" disabled value="" 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</label>
                                                    <div class="input-group">
                                                        <input type="number" disabled value="" class="form-control" id="additional_cost" name="additional_cost">

                                                        <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">Additional Cost</label>
                                                    <div class="input-group">
                                                        <input type="number" disabled value="" class="form-control" id="additional_cost" name="additional_cost">

                                                        <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">Cost</label>
                                                    <div class="input-group">
                                                        <input type="number" disabled value="" class="form-control" id="additional_cost" name="additional_cost">

                                                        <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">&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>

                                <!--/////////////////////////////////////////////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>Total</th>

                                                </tr>

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

                                                                                                                    </select>
                                                    </td>

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

                                                    </td>

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

                                                    </td>

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

                                                    </td>
                                                </tr>


                                            </table>


                                            <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>
                                            <!-- /.box-body -->


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


                                <!--/////////////////////////////////////////////END OF STEP 4  //////////////////////////////////--> 


                                <!--////////////////////////////////////////// BEGINNIN GOF NEW STEP 4 ///////////////////////////-->
                                
                                <form id="add_resources" name="add_resources" class="add_resources"  action="" method="POST" role="form" enctype="multipart/form-data" onsubmit="return false;">
                                    <div class="setup-content" id="step-4">
                                        <div class="row">
                                            <div class="col-md-12">
                                                
                                                                                                 <div class="col-md-4">
                                                    <div class="form-group">
                                                        <label for="exampleInputEmail1">Drivers</label>
                                                        <div class="input-group">
                                                           
                                                            <select class="form-control select2" id="driver" name="driver">
                                                            <option value="">Select</option>
                                                                                                                            </select>
                                                            <div class="input-group-addon">
                                                                <i class="fa fa-user"></i>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                
                                                
                                                                                                 <div class="col-md-4">
                                                    <div class="form-group">
                                                        <label for="exampleInputEmail1">Drivers</label>
                                                        <div class="input-group">
                                                         
                                                            <select class="form-control select2" id="vehicles" name="vehicles">
                                                            <option value="">Select</option>
                                                                                                                            </select>
                                                            <div class="input-group-addon">
                                                                <i class="fa fa-cab"></i>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                
                                                
                                                
                                                
                                                
                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                         <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">
                                                                <input type="hidden" name="reservation_id" id="reservation_id" value="">
                                                                <input type="hidden" name="trip_id" id="trip_id" value="">
                                                                <button  type="submit" id="push_resources" class="btn btn-primary">SAVE</button>
                                                            
                                                    </div>
                                                </div>
                                                
                                                
                                            </div>
                                            
                                        </div> <!-- End of Rowan -->
                                             
                                    </div><!-- End of Step 4 -->
                                    
                                </form>
                                
                                 <div class="col-md-12 col-sm-12"><hr/></div>

                                                <div class="col-md-12 col-sm-12">
                                                    <div class="form-group resources_table">

                                                        <table class="table table-bordered table-responsive table-hovered">
                                                            <tr>
                                                                <th>Driver</th>
                                                                <th>Vehicle</th>
                                                                <th>Millage</th>
                                                                <th>Action</th>
                                                            </tr>
                                                            <tr>
                                                                <td></td>
                                                                <td></td>
                                                                <td></td>
                                                                <td></td>
                                                            </tr>
                                                        </table>

                                                    </div>

                                                </div>          
                                <!--/////////////////////////////////////////END OF NEW STEP 4///////////////////////////////////-->
                                
                                            <div class="col-md-12">
                                                <!--<div class="col-sm-3">
                                                       <div class="form-group">
                                                           <label for="exampleInputEmail1">Type</label>
                                                           <div class="input-group">
       
                                                               <select class="form-control" id="d_type" name="d_type">
                                                                   <option value="">Select</option>
                                                                  <option value="vehicle">Vehicle</option>
                                                                  <option value="personnel">Personnel</option>
                                                               </select>
       
                                                               <div class="input-group-addon">
                                                                   <i class="fa fa-user-plus"></i>
                                                               </div>
                                                           </div>
                                                       </div>
                                                   </div>
                                                       
                                                       
                                               <div class="col-sm-3">
                                                       <div class="form-group">
                                                           <label for="exampleInputEmail1">Add Resources(Driver/Vehicle)</label>
                                                           <div class="input-group">
                                                               
                                                               <select class="form-control mySelect" id="get_drivers" name="get_drivers">
                                                                  
                                                               </select>
       
                                                               <div class="input-group-addon">
                                                                   <i class="fa fa-map-signs"></i>
                                                               </div>
                                                           </div>
                                                       </div>
                                                   </div>
                                                       
                                                     
                                              
                                                    <div class="allVehiclesList"></div>-->
                                            </div>






                            </div>

                        </div>                                     

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



                </div>




            </div>
            </section>


            <script src="{{ URL::asset('js/global.js') }}"></script>
            <script src="{{ URL::asset('js/formstep.js') }}"></script>
            <!--<script src="{{ URL::asset('js/addresources.js') }}"></script>-->
            <script src="{{ URL::asset('js/addresourcesjusted.js') }}"></script>



            @endsection