@extends('admin.layout.base')
@section('title', 'Cab Charge | ')
@section('content')
<div class="content-area py-1">
  <div class="container-fluid">
    <div class="row bg-title">
      <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
        <h4 class="page-title">@lang('admin.payout.cc_pd')</h4>
      </div>
      <div class="col-lg-6 col-sm-6 col-md-6 col-xs-12">
        <ol class="breadcrumb">
          <li><a href="{{ route('admin.dashboard') }}">@lang('admin.dashboard')</a></li>
          <li class="active">@lang('admin.payout.cc')</li>
        </ol>
      </div>
    </div>
    <div class="box box-block bg-white">
      <table class="table table-striped table-bordered dataTable" id="cc-pd">
        <thead>
          <tr>
            <th>#</th>
            <th>@lang('admin.payout.list_date')</th>
            <th>@lang('admin.payout.list_pay_perod')</th>
            <th>@lang('admin.payout.list_taxi_total')</th>
            <th>@lang('admin.payout.list_shift_total')</th>
            <th>@lang('admin.payout.list_charge')</th>
            <th>@lang('admin.payout.list_total')</th>
            <th>@lang('admin.payout.list_eftpos')</th>
            <th>@lang('admin.payout.list_details')</th>
          </tr>
        </thead>
      </table>
    </div>
  </div>
</div>
@endsection
@section('scripts')
<script>
$(document).ready(function() {
  $(document).on("click", ".cabDetails > span", function() {
    var summaryId = $(this).attr('data-check');
    if ($(this).hasClass("active")) {
      $('.moreDetailsTr'+summaryId).slideUp(300);
      $(this).removeClass("active");
      $(this)
        .siblings(".content")
        .slideUp(200);
      $(this)
        .find("i")
        .removeClass("fa-minus")
        .addClass("fa-plus");
      $('.moreDetailsTr'+summaryId).remove();
    } else {
      $('.fa-minus').click();
      $('.openCabDetails'+summaryId).after('<tr class="moreDetailsTr'+summaryId+'"><td colspan="12"><div class="text-center moreDetails'+summaryId+'">Loading ...</div></td></tr>')
      $(this).addClass("active");
      $(this)
        .find("i")
        .removeClass("fa-plus")
        .addClass("fa-minus");
      $.ajax({
        type: "POST",
        headers: {'X-CSRF-TOKEN': "{{csrf_token()}}"},
        url: "{{ route('admin.more-cab-charge-list-details') }}",
        data: {
          summaryId: summaryId,
          cabCharge: "payout",
        },
        beforeSend: function() {
          $('.moreDetails'+summaryId).css({"text-align" : "center", "min-height": "35px"});
          $('.moreDetails'+summaryId).html('<i class="fa fa-circle-o-notch fa-spin" style="font-size:24px;color:#a377b1;"></i>');
        },
        success: function(res) {
          $('.moreDetails'+summaryId).css("text-align", '');
          $('.moreDetails'+summaryId).html(res);
        }
      });
    }
  });
  $(document).on("click", ".cabDriverDetails > span", function() {
    var taxi = $(this).attr('data-taxi');
    var summaryId = $(this).attr('data-summary-id');
    if ($(this).hasClass("active")) {
      $('.moreTaxiDetailsTr'+taxi).slideUp(300);
      $(this).removeClass("active");
      $(this)
        .siblings(".content")
        .slideUp(200);
      $(this)
        .find("i")
        .removeClass("fa-minus fa-minus-more")
        .addClass("fa-plus");
      $('.moreTaxiDetailsTr'+taxi).remove();
    } else {
      $('.fa-minus-more').click();
      $('.taxiDetails'+taxi).after('<tr class="moreTaxiDetailsTr'+taxi+'"><td colspan="9"><div class="text-center moreTaxiDetails'+taxi+'"></div></td></tr>')
      $(this).addClass("active");
      $(this)
        .find("i")
        .removeClass("fa-plus")
        .addClass("fa-minus fa-minus-more");
      $.ajax({
        type: "POST",
        headers: {'X-CSRF-TOKEN': "{{csrf_token()}}"},
        url: "{{ route('admin.more-taxi-details') }}",
        data: {
          taxi: taxi,
          summaryId: summaryId,
        },
        beforeSend: function() {
          $('.moreTaxiDetails'+taxi).css({"text-align" : "center", "min-height": "35px"});
          $('.moreTaxiDetails'+taxi).html('<i class="fa fa-circle-o-notch fa-spin" style="font-size:24px;color:#a377b1;"></i>');
        },
        success: function(res) {
          $('.moreTaxiDetails'+taxi).css("text-align", '');
          $('.moreTaxiDetails'+taxi).html(res);
        }
      });
    }
  });
});
$(window).load(function(){
  updateTable();
});
function updateTable(){
    $('#cc-pd').DataTable({
      "destroy": true,
      "responsive": true,
      "dom": 'Bfrtip',
      "buttons": [
        /*'copyHtml5',*/
        'excelHtml5',
        'csvHtml5',
        'pdfHtml5'
      ],
      "oLanguage": {
          'sProcessing': '<i class="fa fa-circle-o-notch fa-spin" style="font-size:24px;color:#a377b1;"></i>'
      },
      "processing": true,
      "serverSide": true,
      "ajax":{
        "url": "{{ route('admin.cab-charge-list-details') }}",
        "headers": {'X-CSRF-TOKEN': "{{csrf_token()}}"},
        "dataType": "json",
        "type": "POST",
      },
      "columns": [
          { "data": "id" },
          { "data": "process_date" },
          { "data": "pay_period" },
          { "data": "taxi_total" },
          { "data": "shift_total" },
          { "data": "charge" },
          { "data": "payment_total" },
          { "data": "eftpos" },
          { "data": "details" },
      ],    
      "createdRow": function (row, data, dataIndex) {
        $(row).addClass("openCabDetails"+data.ride_id);
      }
    });
  }

  // $(document).on("submit", "#fullPayOutForm", function(e) {
  //   e.preventDefault();
  //   var formData = new FormData(this);
  //   //formData.append("_token", "{{csrf_token()}}");
  //   $.ajax({
  //     type: "POST",
  //     headers: {'X-CSRF-TOKEN': "{{csrf_token()}}"},
  //     url: "{{ route('admin.cab-charge-payout') }}",
  //     data: formData,
  //     cache: false,
  //     contentType: false,
  //     processData: false,
  //     beforeSend: function() {
  //       $('.payOutBtn').attr("disabled", true);
  //       $(".preloader").show();
  //     },
  //     success: function(res) {
  //       $(".preloader").hide();
  //       if(res == 'ok'){
  //         alert("Payout Done Successfully !!!");
  //         updateTable();
  //       }else{
  //         $('.payOutBtn').attr("disabled", !$("input[type='checkbox']").is(":checked"));
  //         alert("Select At Least One Row !!!");
  //       }
  //     }
  //   });
  // });
  // $(document).on("click", ".payOutCheckBox", function() {
  //   $(".payOutBtn").attr("disabled", !$("input[type='checkbox']").is(":checked"));
  //   if($(this).is(":checked")){
  //     $(this).val($(this).attr('data-summary')+'~'+$(this).attr('data-taxi'));
  //   }else{
  //     $(this).val('');
  //   }
  // });
</script>
@endsection