@extends('layout.master')
@section('content')
<section class="content pb-5">
   <div class="container-fluid">
      <meta name="csrf-token" content="{!! csrf_token() !!}">
      <div class="row py-4">
         <div class="col-md-12">
            <div class="title-section">
               <p>Booking</p>
            </div>
         </div>
      </div>
      <div class="row">
         <div class="col-md-12">
            <div class="title-section">
               <p>Individual Booking</p>
            </div>
            <div class="zone-box">
               <form  id="add_individual_booking" method="post" autocomplete="off" novalidate>
                  @csrf
                  <div class="row">
                     <div class="col-md-6">
                        <div class="form-group custom-form-group">
                           <label class="form-label" for="customer">To Address</label>
                           <input name="to_address" class="form-control" placeholder="" type="text" value="{{old('to_address')}}">
                           <span id="to_address" style="display: none; color: red;"> </span>
                        </div>
                     </div>
                     <div class="col-md-3">
                        <div class="form-group custom-form-group">
                           <label class="form-label" for="customer">To Pincode</label>
                           <input name="to_pincode" class="form-control" placeholder="" type="text" value="{{old('to_pincode')}}">
                           <span id="to_pincode" style="display: none; color: red;"> </span> 
                        </div>
                     </div>
                     <div class="col-md-3">
                        <div class="form-group custom-form-group">
                           <label class="form-label" for="customer">To Contact Number</label>
                           <input name="to_contact" class="form-control" placeholder="" type="text" value="{{old('to_contact')}}">
                           <span id="to_contact" style="display: none; color: red;"> </span> 
                        </div>
                     </div>
                     <div class="col-md-6">
                        <div class="form-group custom-form-group">
                           <label class="form-label" for="customer">From Address</label>
                           <input name="from_address" class="form-control" placeholder="" type="text" value="{{old('from_address')}}">
                           <span id="from_address" style="display: none; color: red;"> </span>
                        </div>
                     </div>
                     <div class="col-md-3">
                        <div class="form-group custom-form-group">
                           <label class="form-label" for="customer">From Pincode</label>
                           <input name="from_pincode" class="form-control" placeholder="" type="text" value="{{old('from_pincode')}}">
                           <span id="from_pincode" style="display: none; color: red;"> </span>
                        </div>
                     </div>
                     <div class="col-md-3">
                        <div class="form-group custom-form-group">
                           <label class="form-label" for="customer">From Contact Number</label>
                           <input name="from_contact" class="form-control" placeholder="" type="text" value="{{old('from_contact')}}">
                           <span id="from_contact" style="display: none; color: red;"> </span>
                        </div>
                     </div>
                     <div class="col-md-2">
                        <div class="form-group custom-form-group">
                           <label class="form-label" for="customer">Weight</label>
                           <input name="weight" class="form-control" placeholder="" type="text" value="{{old('weight')}}">
                           <span id="weight" style="display: none; color: red;"> </span>
                        </div>
                     </div>
                     <div class="col-md-1">
                        <div class="form-group custom-form-group mt-2">
                           <label class="form-label" for="customer"></label>
                           <select class="form-control">
                              <option value="">Kg</option>
                           </select>
                        </div>
                     </div>
                     <div class="col-md-3">
                        <div class="form-group custom-form-group">
                           <label class="form-label" for="customer">Pick up schedule</label>
                           <input name="pickup_shedule" class="form-control" placeholder="" type="date" value="{{old('pickup_shedule')}}">
                           <span id="pickup_shedule" style="display: none; color: red;"> </span>
                        </div>
                     </div>
                     <div class="col-md-3">
                        <div class="form-group custom-form-group">
                           <label class="form-label" for="customer">Declare Value in INR</label>
                           <input name="declared_value" class="form-control" placeholder="" type="text" value="{{old('declared_value')}}">
                           <span id="declared_value" style="display: none; color: red;"> </span> 
                        </div>
                     </div>
                     <div class="col-md-4">
                        <div class="form-group custom-form-group mt-2">
                           <button type="submit" class="btn btn-danger">Save</button>
                           <a href="/eolac/public/bookings" type="button" class="btn btn-danger">Cancel</a>
                        </div>
                     </div>
               </form>
               </div>
            </div>
         </div>
      </div>
      <div class="row py-4 py-sm-5">
         <div class="col-md-12">
            <div class="title-section">
               <p>Bulk Booking</p>
            </div>
            <form id="upload_bulk_booking" enctype="multipart/form-data">
               <div class="card">
                  <div class="card-header">
                     <input class="filled-in" name="group1" type="checkbox" id="active" checked>
                     <label for="active"> <img src="{{asset('assets/images/excelsheet.svg')}}" height="20px" alt=""><a href="" class="heading text-underline"> <u> UPLOAD BY EXCEL </u></a></label>
                     <div class="row">
                        <div class="col-md-3">
                           <div class="upload-btn-wrapper">
                              <a href="{{URL::asset('/sample/Bulk_booking.xlsx')}}" class="btn btn-danger text-white mr-3 mt-sm-0 mt-3">Download Sample <i class='fa fa-download fa-download--icon' aria-hidden='true'></i></a>
                           </div>
                        </div>
                        <!-- <div class="col-md-3">
                           <div class="upload-btn-wrapper">
                           	<span class="font-weight-normal pt-3"> CHOOSE FILE</span>
                           	<input type="file" name="booking_bulk_upload"> 
                           </div>
                           </div> -->
                        <div class="mb-3">
                           <input class="custom-input" type="file" id="formFile" name="booking_bulk_upload">
                        </div>
                        <div class="col-md-2">
                           <div class="upload-btn-wrapper">
                              <button type="submit" class="btn btn-danger">Upload</button>
                           </div>
                        </div>
            </form>
            </div>
            </div>
            <!-- <div class="card-body">
               <div class="row">
               	<div class="col-md-6">
               		<div class="form-group custom-form-group">
               			<label class="form-label" for="customer">To Address</label>
               			<input class="form-control" placeholder="" type="text" value=""> 
               		</div>
               	</div>
               
               	<div class="col-md-3">
               		<div class="form-group custom-form-group">
               			<label class="form-label" for="customer">From Pincode</label>
               			<input class="form-control" placeholder="" type="text" value=""> 
               		</div>
               	</div>
               
               	<div class="col-md-3">
               		<div class="form-group custom-form-group">
               			<label class="form-label" for="customer">From Contact Number</label>
               			<input class="form-control" placeholder="" type="text" value=""> 
               		</div>
               	</div>
               
               	<div class="col-md-6">
               		<div class="form-group custom-form-group">
               			<label class="form-label" for="customer">From Address</label>
               			<input class="form-control" placeholder="" type="text" value=""> 
               		</div>
               	</div>
               
               	<div class="col-md-3">
               		<div class="form-group custom-form-group">
               			<label class="form-label" for="customer">To Pincode</label>
               			<input class="form-control" placeholder="" type="text" value=""> 
               		</div>
               	</div>
               
               	<div class="col-md-3">
               		<div class="form-group custom-form-group">
               			<label class="form-label" for="customer">To Contact Number</label>
               			<input class="form-control" placeholder="" type="text" value=""> 
               		</div>
               	</div>
               
               	<div class="col-md-2">
               		<div class="form-group custom-form-group">
               			<label class="form-label" for="customer">Weight</label>
               			<input class="form-control" placeholder="" type="text" value=""> 
               		</div>
               	</div>
               
               	<div class="col-md-1">
               		<div class="form-group custom-form-group mt-2">
               			<label class="form-label" for="customer"></label>
               			<select class="form-control">
               				<option value="">Kg</option>
               			</select>
               		</div>
               	</div>
               
               	<div class="col-md-3">
               		<div class="form-group custom-form-group">
               			<label class="form-label" for="customer">Docket No</label>
               			<input class="form-control" placeholder="" type="text" value=""> 
               		</div>
               	</div>
               
               	<div class="col-md-3">
               		<div class="form-group custom-form-group">
               			<label class="form-label" for="customer">Shipment Type</label>
               			<select class="form-control">
               				<option value=""></option>
               			</select> 
               		</div>
               	</div>
               
               	<div class="col-md-3">
               		<div class="form-group custom-form-group">
               			<label class="form-label" for="customer">Declare Value in INR</label>
               			<input class="form-control" placeholder="" type="text" value=""> 
               		</div>
               	</div>
               
               	<div class="col-md-3">
               		<div class="form-group custom-form-group mt-2">
               			<button type="button" class="btn btn-danger btn-block">calculate</button>
               		</div>
               	</div>
               </div>
               </div> -->
            <div class="row py-4 pt-sm-4 pb-sm-5">
            <div class="col-md-12">
            <div class="table-responsive">
            <table class="table table-striped" id="bookingList">
            <thead>
            <tr>
            <th scope="col"> Sr No. </th>
            <th scope="col"> To Address </th>
            <th scope="col"> From Address </th>
            <th scope="col"> To Pincode </th>
            <th scope="col"> From Pincode </th>
            <th scope="col"> To Contact Number </th>
            <th scope="col"> From Contact Number </th>
            <th scope="col"> Weight </th>
            <th scope="col"> Pick up schedule </th>
            <th scope="col"> Declare Value in INR </th>
            <th scope="col"> Docket Number </th>
            </tr>
            </thead>
            <tbody>
            </tbody>
            </table>
            </div>
            </div>
            </div>
            </div>
         </div>
      </div>
   </div>
</section>
<style type="text/css">
   /*	.custom-input[type="file"] {
   color: #878787;  width: 100%;
   margin-top: 41px;
   }
   .custom-input[type="file"]::-webkit-file-upload-button {
   background: #FF0000;
   border-radius: 5px;
   border: #FF0000;
   padding: 8px 20px;
   font-weight: 600;
   font-size: 14px;
   height: 40px;
   text-transform: uppercase;
   color: #fff;
   }
   .custom-input[type="file"]::-webkit-file-upload-button:hover {
   background: #FFFFFF;
   border: 2px #FF0000 solid ;
   border-radius: 5px;
   padding: 8px 20;
   color: #FF0000;
   }*/
   .custom-select {
   -webkit-appearance: auto !important;
   appearance: auto !important; 
   }
</style>
<script src="{{asset('assets/plugins/datatables/jquery.dataTables.js')}}"></script>
<script src="{{asset('assets/plugins/datatables-bs4/js/dataTables.bootstrap4.js')}}"></script>
<script type="text/javascript">
   //DataTables Booking List
   
   
    $("#bookingList").DataTable({
          "language": {
              "zeroRecords": "No record(s) found."
          },
          processing: true,
          serverSide: true,
          lengthChange: true,
          order: [0,'asc'],
          searchable:true,
          bStateSave: false,
   
          ajax: {
              url: "{{url('bookings/table')}}",
              data: function (d) {
              }
          },
   
          columns: [
   
          { data: 'DT_RowIndex', name: 'DT_RowIndex', sortable: false},
   
          { data: 'to_address', name: 'to_address', searchable: true, orderable:true ,defaultContent: 'NA'},
          { data: 'from_address', name: 'from_address', searchable: true, orderable:true ,defaultContent: 'NA'},
          { data: 'to_pincode', name: 'to_pincode', searchable: true, orderable: true, defaultContent: 'NA'}, 
          { data: 'from_pincode', name: 'from_pincode', searchable: true, orderable: true, defaultContent: 'NA'},
          { data: 'to_contact', name: 'to_contact', searchable: true, orderable: true, defaultContent: 'NA'}, 
   
          { data: 'from_contact', name: 'from_contact', searchable: true, orderable:true ,defaultContent: 'NA'},
          { data: 'weight', name: 'weight', searchable: true, orderable:true ,defaultContent: 'NA'},
          { data: 'pickup_shedule', name: 'pickup_shedule', searchable: true, orderable:true ,defaultContent: 'NA'}, 
          { data: 'declared_value', name: 'declared_value', searchable: true, orderable:true ,defaultContent: 'NA'},
          { data: 'docket_number', name: 'docket_number', searchable: true, orderable:true ,defaultContent: 'NA'},
          ]
      });
   
   
   //Upload Individual Booking
   
   $("#add_individual_booking").on('submit',function(e)
   {
   	e.preventDefault();
   
   	var form = $(this);
   
   	$.ajax({
   		method:'POST',
   		url:"{{url('/bookings/individual-booking')}}",
   		headers: {
   			'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
   		}, 
   		data:form.serialize(),
   		success:function(data)
   		{  
   
   			if(data.success == true){
   
   				swal({
   					title: "Success",
   					text: data.message,
   					type: "success",
   
   					closeOnConfirm: false,
   					showLoaderOnConfirm: true,
   				},
   				function(){
   					window.location.href='{{url("/bookings")}}'
   				});
   
   			}
   
   		},
   		error: function(data){
   			var errors = $.parseJSON(data.responseText);
   
   			$.each(errors, function(index, value) {
   
   				if (value.from_address) {
   
   					$("#from_address").show();
   					$("#from_address").html(value.from_address.toString());
   
   				}else {
   
   					$("#from_address").hide();
   
   				}
   
   
   				if (value.to_address) {
   
   					$("#to_address").show();
   					$("#to_address").html(value.to_address.toString());
   
   				}else {
   
   					$("#to_address").hide();
   
   				}
   
   
   				if (value.from_pincode) {
   
   					$("#from_pincode").show();
   					$("#from_pincode").html(value.from_pincode.toString());
   
   				}else {
   
   					$("#from_pincode").hide();
   
   				}
   
   
   				if (value.to_pincode) {
   
   					$("#to_pincode").show();
   					$("#to_pincode").html(value.to_pincode.toString());
   
   				}else {
   
   					$("#to_pincode").hide();
   
   				}
   
   
   				if (value.from_contact) {
   
   					$("#from_contact").show();
   					$("#from_contact").html(value.from_contact.toString());
   
   				}else {
   
   					$("#from_contact").hide();
   
   				}
   
   
   				if (value.to_contact) {
   
   					$("#to_contact").show();
   					$("#to_contact").html(value.to_contact.toString());
   
   				}else {
   
   					$("#to_contact").hide();
   
   				}
   
   
   				if (value.weight) {
   
   					$("#weight").show();
   					$("#weight").html(value.weight.toString());
   
   				}else {
   
   					$("#weight").hide();
   
   				}
   
   
   				if (value.pickup_shedule) {
   
   					$("#pickup_shedule").show();
   					$("#pickup_shedule").html(value.pickup_shedule.toString());
   
   				}else {
   
   					$("#pickup_shedule").hide();
   
   				}
   
   
   				if (value.declared_value) {
   
   					$("#declared_value").show();
   					$("#declared_value").html(value.declared_value.toString());
   
   				}else {
   
   					$("#declared_value").hide();
   
   				}
   
   
   			});
   
   		}
   	});
   });
   
   
   //Upload Bulk Booking
   
   $('#upload_bulk_booking').on('submit',function(e){
      e.preventDefault();
   
      //alert('aya');
     
      $.ajax({
          method: 'POST',
          url:"{{url('/bookings/bulk-booking')}}",
          headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          },
          data: new FormData(this),
          dataType:'JSON',
              contentType: false, // The content type used when sending data to the server.
              cache: false, // To unable request pages to be cached
              processData: false,
              beforeSend: function () { // Before we send the request, remove the .hidden class from the spinner and default to inline-block.
                  $('#loader').removeClass('hidden');
                  $('body').addClass('no-scroll');
              },
              success: function (data) {
                  if(data.status == 'true'){
                      
                      swal({
                          title: "Success",
                          text: data.message,
                          type: "success",
   
                          closeOnConfirm: false,
                          showLoaderOnConfirm: true,
                      },
                      function(){
                          window.location.reload();
                      });
                      
                  }
                  else{
   
                      swal({
   
                        title: "oops!",
                        text: data.message,
                        type: "error",
                        closeOnConfirm: false,
                        showLoaderOnConfirm: true,
   
                    });
   
                  }
   
              },
              error: function () {
                    swal({
                        title: "oops!",
                        text: "Invalid Excel format",
                        type: "error",
                        closeOnConfirm: false,
                        showLoaderOnConfirm: true,
                    }); 
                console.log(`Failed`)
              },
              complete: function () { // Set our complete callback, adding the .hidden class and hiding the spinner.
                  $('#loader').addClass('hidden');
                  $('body').removeClass('no-scroll');
              },
   
        });
   })
   
   
</script>
@endsection