@extends('layouts.layout')

@section('content')


<!-- Bootstrap 3.3.7 -->
<link rel="stylesheet" href="{{ URL::asset('css/popup.css') }}">
<style type="text/css">
    .badge-danger {
        background-color:red;
    }
    .increaseme{
        width:100px;
    }
    .swal2-popup {
        font-size: 1.6rem !important;
    }
</style>
<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>
        {{ ucwords(str_replace('_', ' ', $url)) }} 
        <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('_', ' ', $url)) }}</li>-->
    </ol>
</section>


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

    <div class="btn-group">
        <!--<a href="{{ route('form.url', ['url' => $url]) }}"><button type="button" class="btn bg-maroon btn-flat margin">Add</button></a>
        <a href=""><button type="button" class="btn bg-purple btn-flat margin">Export</button></a>-->
        <!--     <button type="button" class="btn bg-navy btn-flat margin">.btn.bg-navy.btn-flat</button>
                <button type="button" class="btn bg-orange btn-flat margin">.btn.bg-orange.btn-flat</button>
                <button type="button" class="btn bg-olive btn-flat margin">.btn.bg-olive.btn-flat</button> -->
    </div>
    <!-- /.row -->



       <div class="row">
            <div class="col-xs-12">
                <div class="box" style="padding:10px">

                    <!-- /.box-header -->
                    <div class="box-body table-responsive no-padding">

                        <div class="container">
                        <div class="pull-right">
                            <small> Reservation ID :                             &nbsp;&nbsp;&nbsp;&nbsp;
                                                        </small>
                        </div>
                        <div style="clear:both"></div>
                        </div>
                        
                        <div class="container">
                            <div class="stepwizard">
                                <div class="stepwizard-row setup-panel">
                                    <div class="stepwizard-step col-xs-6"> 
                                        <a href="#step-1" type="button" class="btn btn-default  btn-circle" 
                                           accesskey="disabled='disabled'">1</a>
                                        <p><small>Reservation</small></p>
                                      
                                    </div>

                                    <div class="stepwizard-step col-xs-6"> 
                                        <a href="#step-2" type="button" class="btn btn-default  btn-circle"  
                                           disabled='disabled'  >2</a>
                                        <p><small>Trips</small></p>
                                    </div>
                                    <!--<div class="stepwizard-step col-xs-3"> 
                                        <a href="#step-3" type="button" class="btn btn-default btn-circle" disabled="disabled">3</a>
                                        <p><small>Schedule</small></p>
                                    </div>
                                    <div class="stepwizard-step col-xs-3"> 
                                        <a href="#step-4" type="button" class="btn btn-default btn-circle" disabled="disabled">4</a>
                                        <p><small>Cargo</small></p>
                                    </div>-->
                                </div>
                            </div>

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

                              
                           
                              
<!-- ////////////////////////////////////////RESERVATION ///////////////////////////////////////////////////-->                              
                                <div class="panel panel-primary setup-content" id="step-1">
                                    <div class="panel-heading">
                                        <h3 class="panel-title">Client Reservation</h3>
                                    </div>
                                    <div class="panel-body">
                                        
                                      <div class="col-sm-3">
                                                <div class="form-group">
                                                    <label for="exampleInputEmail1">Client Type</label>
                                                     <select required="required"  class="form-control" id="client_type" name="client_type" >
                                                            <option value=''>Select</option>                                                           
                                                            <option value="individual">Individual</option>
                                                            <option value="company">Company</option>
                                                        </select>
                                                    
                                                    

                                                </div>
                                            </div>

                                            <div class="col-sm-3">
                                                <div class="form-group">
                                                    <label for="exampleInputEmail1">Credit Type</label>
                                                    <select required  class="form-control" id="credit_type" name="credit_type" >
                                                        <option value=''>Select</option>                                                            <option value="credit">Credit Client</option>
                                                            <option value="non_credit">Non Credit Client</option>
                                                        </select>

                                                </div>
                                            </div>
                                        
                                        
                                                                                     
                                            <div class="col-sm-3"  id="client_in_name">
                                                <div class="form-group">
                                                    <label for="exampleInputEmail1">Client Name</label>
                                                    <select class="form-control" required  id="client_name" name="client_name">
                                                          <option value=''>Select</option>                                                            <option value="">Select</option>
                                                                                                                    </select>
                                                    
                                                </div>
                                            </div>
                                        
                                         <div class="col-sm-3" id="walk_in_client_name" style="display:none">
                                                <div class="form-group">
                                                    <label for="exampleInputEmail1">Client Name</label>
                                                    <input type="text" value="" class="form-control" id="client_name_bd" name="client_name_bd"/>
                                                   
                                                </div>
                                         </div>
                                        
                                        
                                         <div class="col-sm-3" id="contact_name_person">
                                                <div class="form-group">
                                                    <label for="exampleInputEmail1">Contact Name</label>
                                                    <select class="form-control mySelect" id="contact_name_id" name="contact_name_id">
                                                        <option value=''>Select</option>                                                           
                                                    </select>
                                                  
                                                </div>
                                        </div>
                                        
                                        
                                        <div class="col-sm-3" id="contact_person">
                                                <div class="form-group">
                                                    <label for="exampleInputEmail1">&nbsp;</label>
                                                    <input value=""  placeholder="contact name" type="text" class="form-control" id="contact_fullname" name="contact_fullname" placeholder="">

                                                </div>
                                        </div>
                                        
                                         <div class="col-sm-3" id="contact_person_bd" style="display:none">
                                                <div class="form-group">
                                                    <label for="exampleInputEmail1">Contact Person</label>
                                                    <input  value="" placeholder="contact name" type="text" class="form-control" id="contact_fullname_bd" name="contact_fullname_bd" placeholder="">

                                                </div>
                                         </div>
                                        
                                        
                                        <div class="col-sm-3">
                                                <div class="form-group">
                                                    <label for="exampleInputEmail1">Email</label>
                                                    <input multiple value="" type="text" class="form-control" id="contact_email" name="contact_email" placeholder="">

                                                </div>
                                            </div>

                                        <div class="col-sm-3">
                                                <div class="form-group">
                                                    <label for="exampleInputEmail1">Phone</label>
                                                    <input required="required"  value="" type="text" class="form-control" id="contact_phone" name="contact_phone" placeholder="">

                                                </div>
                                        </div>
                                        
                                        
                                       <!--<div class="col-sm-3">
                                                <div class="form-group">
                                                    <label for="exampleInputEmail1">Number of Trips</label>
                                                    <input  type="number" value=""  class="form-control" id="no_of_passenger" name="no_of_passenger" placeholder="">

                                                </div>
                                            </div>-->
                                            
                                            
                                        <div class="col-sm-3">
                                                <div class="form-group">
                                                    <label for="exampleInputEmail1">Comment</label>
                                                    <textarea class="form-control" name="comment" id="comment"></textarea>

                                                </div>
                                        </div>
                                            
                                       
                                        <div class="col-sm-3">
                                                <div class="form-group">
                                                    <label for="exampleInputEmail1">Status</label>
                                                    <select class="form-control" id="dStatus" name="dStatus">
                                                        <option value="submitted">submitted</option>
                                                    </select>
                                                </div>
                                            </div>
                                        
                                        
                                        
                                        <div class="col-sm-12">
                                           <input type="hidden" name="contact_name" id="contact_name" value="">
                                          <button class="btn btn-primary nextBtn pull-left" type="button">Next</button>
                                        </div>
                                        
                                    </div>
                                </div>

                                                      

<!-- ////////////////////////////////////////END OF RESERVATION ///////////////////////////////////////////////////-->                             
                              
                              
                              
                              
                              
                                <div class="panel panel-primary setup-content" id="step-2">
                                    <div class="panel-heading">
                                        <h3 class="panel-title">Trips(s)</h3>
                                    </div>
                                    <div class="panel-body">
                                        
                                        <div class="col-sm-3">
                                            <div class="form-group">
                                                <label for="exampleInputEmail1">Service Type</label>

                                                
                                                <div class="input-group">
                                                    <select required 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 required 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-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" required 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">Departure</label>

                                                <div class="input-group">
                                                    <select class="form-control select_depature" required  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>


                                                    <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" required 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" required 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" required 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" required 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" required 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" required 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">
                                                     <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">
                                                     <input type="hidden" name="office" id="office" value="" />
                                                     <input type="hidden" name="reservationID" id="reservationID" value=" ">
                                                     <div id="trip_id_div"></div>
                                                       <input type='hidden' value='adding..' name='statusBtn' id='statusBtn' /><button  type='submit' id='savetriptodom' class='btn btn-sm btn-primary'>save</button>                                                     
                                                </div>
                                            </div>
                                        </div>
                                        
                                        
                                        
                                        <div class="col-sm-12">                              
                                            <h5>Added Trips</h5>

                                            <div class="added_main_trips table">
                                                <table class="table TFtable table-responsive table-bordered">
                                                    <tr>
                                                        <th>S/n</th>
                                                        <th>Passenger Name</th>
                                                        <th>Pickup Date</th>
                                                        <th>End Date</th>
                                                        <th>Departure</th>
                                                        <th>Destination</th>
                                                        <th>Vehicle Type</th>
                                                        <th>Service Type</th>
                                                        <th>Amount</th>
                                                        <th>Status</th>
                                                        <th>Action</th>

                                                    </tr>
                                                    
                                                    @if($existingTrips)
                                                    
                                                     @foreach($existingTrips as $itrips)
                                                     
                                                                                                             
                                                      <tr  style="background-color:darkred; color:white">
                                                        <td>{{ $itrips->id }}</td>
                                                        <td>{{ $itrips->passenger_names }}</td>
                                                        <td>{{ $itrips->pick_up_date }}</td>
                                                        <td>{{ $itrips->end_date }}</td>
                                                        <td>{{ $itrips->pickup_street }}</td>
                                                        <td>{{ $itrips->actual_street }}</td>
                                                        <td>{{ $itrips->vehicle_type }}</td>
                                                        <td>{{ $itrips->service_type }}</td>
                                                        <td>{{ $itrips->total_cost + App\AdditionalServiceTrip::where("trip_id", $itrips->id)->value("total_cost") }}</td>
                                                         <td>{{ $itrips->trip_status }}</td>
                                                        <td><span style="cursor:pointer"><i id="{{ $itrips->id }}" title="Edit Trip" class="fa fa-edit editTrip_inside"></i></span> &nbsp;&nbsp; 
                                                            <span style="cursor:pointer"><i id="{{ $itrips->id }}" title="Delete Trip" class="fa fa-trash inside_deleteTrip"></i></span> &nbsp;&nbsp; 
                                                             <span onClick="toggle_visibility('popup-box')" style="cursor:pointer"><i id="{{ $itrips->id }}" title="Additional Service" class="fa fa-plus-circle additional_service"></i></span>
                                                        </td>
                                                        

                                                    </tr>
                                                    
                                                     @endforeach
                                                    
                                                    @else
                                                    
                                                     <tr>
                                                         <td colspan="9">No Trip(s) Added Yet</td>
                                                    </tr>
                                                    
                                                    @endif
                                                    
                                                    
                                                    
                                                    
                                                </table>
                                            </div>
                                        </div>
                                         <div class="added"></div>
                                        
                                    </div>
                                    
                       
                                    
                       
                                
                        </div>

                       

                    <div id="btnhideshow" style="display: none; margin:20px">
                            <div class="box-footer">
                                    <!--<input type="hidden" name="nurl" id="nurl" value="">
                                    <input type="hidden" name="reservation_id" id="reservation_id" value=" ">-->