@extends('admin.layout.base')
@section('title', 'App Trip Payout | ')
@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.at_payout')</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.at_payout')</li>
        </ol>
      </div>
    </div>
    <div class="box box-block bg-white">
      <table class="table table-striped table-bordered dataTable" id="tripPayOutTable">
        <thead>
          <tr>
            <th>#</th>
            <th>@lang('admin.payout.company')</th>
            <th>@lang('admin.payout.name')</th>
            <th>@lang('admin.payout.total')</th>
            <th>@lang('admin.payout.commission')</th>
            <th>@lang('admin.payout.cab_payout')</th>
            <th>@lang('admin.payout.list_details')</th>
          </tr>
        </thead>
      </table>
    </div>
  </div>
</div>
@endsection
@section('scripts')
<script>
  
  $(document).on("submit", "#driverPayOutForm", function(e) {
    e.preventDefault();
    Swal.fire({
      title: "Are you sure want to do this payout?",
      type: "warning",
      showCancelButton: true,
      confirmButtonColor: "rgba(216, 165, 32, 1)",
      cancelButtonColor: "rgb(26, 48, 43)",
      confirmButtonText: "OK",
      cancelButtonText: "Cancel"
    }).then(result => {
      if (result.value) {
        var formData = new FormData(this);
        $.ajax({
          type: "POST",
          headers: { "X-CSRF-TOKEN": "{{csrf_token()}}" },
          url: "{{ route('admin.trip-cab-payout') }}",
          data: formData,
          cache: false,
          contentType: false,
          processData: false,
          beforeSend: function() {
            $(".payOutBtn").attr("disabled", true);
            $(".preloader").show();
          },
          success: function(res) {
            $(".preloader").hide();
            swalAlert("Payout Done Successfully !!!", "success", "5000");
            updateTable();
          }
        });
      }
    });
  });
  $(document).on("click", ".appTripPayOutCheckBox", function() {
    $(".payOutBtn").attr("disabled", !$("input[type='checkbox']").is(":checked"));
    var total = $("#totalPayment").val();
    var percent = $("#totalPercent").val();
    var payout = $("#totalPayout").val();
    if ($(this).is(":checked")) {
      $(this).val($(this).attr("data-provider"));
      total = parseFloat(total) + parseFloat($(this).attr("data-total"));
      percent = parseFloat(percent) + parseFloat($(this).attr("data-percent"));
      payout = parseFloat(payout) + parseFloat($(this).attr("data-payout"));
    } else {
      $(this).val("");
      total = parseFloat(total) - parseFloat($(this).attr("data-total"));
      percent = parseFloat(percent) - parseFloat($(this).attr("data-percent"));
      payout = parseFloat(payout) - parseFloat($(this).attr("data-payout"));
    }
    total = total.toFixed(2);
    percent = percent.toFixed(2);
    payout = payout.toFixed(2);
    $("#totalPayment").val(total);
    $("#totalPercent").val(percent);
    $("#totalPayout").val(payout);
    $(".totalDiv").text(total);
    $(".totalPercent").text(percent);
    $(".totalPayout").text(payout);
  });
  $(document).ready(function() {
    $(document).on("click", ".companyDetails > span", function() {
      var fleetId = $(this).attr('data-check');
      if ($(this).hasClass("active")) {
        $('.moreDetailsTr'+fleetId).slideUp(300);
        $(this).removeClass("active");
        $(this)
          .siblings(".content")
          .slideUp(200);
        $(this)
          .find("i")
          .removeClass("fa-minus")
          .addClass("fa-plus");
        $('.moreDetailsTr'+fleetId).remove();
      } else {
        $('.fa-minus').click();
        $('.openCompanyDetails'+fleetId).after('<tr class="moreDetailsTr'+fleetId+'"><td colspan="7"><div class="text-center moreDetails'+fleetId+'"></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.trip-company-cab-list') }}",
          data: {
            fleetId: fleetId,
          },
          beforeSend: function() {
            $('.moreDetails'+fleetId).css({"text-align" : "center", "min-height": "35px"});
            $('.moreDetails'+fleetId).html('<i class="fa fa-circle-o-notch fa-spin" style="font-size:24px;color:#a377b1;"></i>');
          },
          success: function(res) {
            $('.moreDetails'+fleetId).css("text-align", '');
            $('.moreDetails'+fleetId).html(res);
          }
        });
      }
    });
    //More App Trip Details Start
    $(document).on("click", ".appTripDetails > span", function() {
      var providerId = $(this).attr('data-check');
      if ($(this).hasClass("active")) {
        $('.moreAppTripDetailsTr'+providerId).slideUp(300);
        $(this).removeClass("active");
        $(this)
          .siblings(".content")
          .slideUp(200);
        $(this)
          .find("i")
          .removeClass("fa-minus fa-minus-apptrip-more")
          .addClass("fa-plus");
        $('.moreAppTripDetailsTr'+providerId).remove();
      } else {
        $('.fa-minus-apptrip-more').click();
        $('.appTripRow'+providerId).after('<tr class="moreAppTripDetailsTr'+providerId+'"><td colspan="8"><div class="text-center moreAppTripDetails'+providerId+'"></div></td></tr>')
        $(this).addClass("active");
        $(this)
          .find("i")
          .removeClass("fa-plus")
          .addClass("fa-minus fa-minus-apptrip-more");
        $.ajax({
          type: "POST",
          headers: {'X-CSRF-TOKEN': "{{csrf_token()}}"},
          url: "{{ route('admin.app-trip-details-by-provider') }}",
          data: {
            providerId: providerId,
          },
          beforeSend: function() {
            $('.moreAppTripDetails'+providerId).css({"text-align" : "center", "min-height": "35px"});
            $('.moreAppTripDetails'+providerId).html('<i class="fa fa-circle-o-notch fa-spin" style="font-size:24px;color:#a377b1;"></i>');
          },
          success: function(res) {
            $('.moreAppTripDetails'+providerId).css("text-align", '');
            $('.moreAppTripDetails'+providerId).html(res);
          }
        });
      }
    });
    //More App Trip Details End
    //More Cab Charge Details Start
    $(document).on("click", ".cabChargeDetails > span", function() {
      var driverId = $(this).attr('data-check');
      if ($(this).hasClass("active")) {
        $('.moreCabChargeDetailsTr'+driverId).slideUp(300);
        $(this).removeClass("active");
        $(this)
          .siblings(".content")
          .slideUp(200);
        $(this)
          .find("i")
          .removeClass("fa-minus fa-minus-cabcharge-more")
          .addClass("fa-plus");
        $('.moreCabChargeDetailsTr'+driverId).remove();
      } else {
        $('.fa-minus-cabcharge-more').click();
        $('.cabChargeRow'+driverId).after('<tr class="moreCabChargeDetailsTr'+driverId+'"><td colspan="8"><div class="text-center moreCabChargeDetails'+driverId+'"></div></td></tr>')
        $(this).addClass("active");
        $(this)
          .find("i")
          .removeClass("fa-plus")
          .addClass("fa-minus fa-minus-apptrip-more");
        $.ajax({
          type: "POST",
          headers: {'X-CSRF-TOKEN': "{{csrf_token()}}"},
          url: "{{ route('admin.cab-charge-details-by-provider') }}",
          data: {
            driverId: driverId,
          },
          beforeSend: function() {
            $('.moreCabChargeDetails'+driverId).css({"text-align" : "center", "min-height": "35px"});
            $('.moreCabChargeDetails'+driverId).html('<i class="fa fa-circle-o-notch fa-spin" style="font-size:24px;color:#a377b1;"></i>');
          },
          success: function(res) {
            $('.moreCabChargeDetails'+driverId).css("text-align", '');
            $('.moreCabChargeDetails'+driverId).html(res);
          }
        });
      }
    });
    //More Cab Charge Details End
  });
  $(window).load(function(){
    updateTable();
  });
  function updateTable(){
    $('#tripPayOutTable').DataTable({
      "searching": true,
      "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.trip-company-list') }}",
        "headers": {'X-CSRF-TOKEN': "{{csrf_token()}}"},
        "dataType": "json",
        "type": "POST",
      },
      "columns": [
          { "data": "id" },
          { "data": "company" },
          { "data": "fleetName" },
          { "data": "total" },
          { "data": "fleetPercentage" },
          { "data": "payout" },
          { "data": "details" },
      ],    
      "createdRow": function (row, data, dataIndex) {
        $(row).addClass("openCompanyDetails"+data.fleetId);
      }
    });
  }
</script>
@endsection