@extends('admin.master_layout')

@section('contant')
@push('scripts')
<link rel="stylesheet" href="{{asset('admin_assets/dist/css/popup_form.css')}}">
<!-- DataTables -->
<link rel="stylesheet" href="{{asset('admin_assets/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css')}}">
<link rel="stylesheet" href="{{asset('admin_assets/plugins/datatables-responsive/css/responsive.bootstrap4.min.css')}}">
<link rel="stylesheet" href="{{asset('admin_assets/plugins/datatables-buttons/css/buttons.bootstrap4.min.css')}}">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.8/css/fixedHeader.dataTables.min.css">
<link rel="stylesheet" href="{{asset('admin_assets/data_table_custom_style.css')}}">
  <style>

  </style>
@endpush
<!-- Main content -->
<section class="content">
<div class="container-fluid">
<div class="row">

  <div class="col-12" style="margin-top:20px; text-align:center;">
            <div style="padding: 0 0 10px 0;">
            <table style="width:100%;">
              <tr>
                <td style="width:20%;">
                <div style="font-size:20px; color:#138496;"><b>All Balance Request</b></div>
                <div style="font-size:14px;">Total Balance Request: {{$balances->count();}}</div>
                </td>
                <td  style="text-align:right; width: 80%;">
                  <!-- Ensure that the parent `td` doesn't collapse -->
                  <div style="min-width: 100%; overflow: hidden;">
                  <form class="" action="" method="post">
                  @csrf
                    <table style="float:right;">
                      <tr>
                      <td>
                        <input type="text" name="driver_name" class="form-control" value=""  placeholder="Customer Id">
                      </td>
                      <td>
                        <input type="text" name="contact" class="form-control" value="" placeholder="Customer Contact">
                      </td>
                      <td>
                 
                      </td>

                      <td>
                        <button type="submit" class="btn btn-success"><i class="fa fa-search"></i>&nbsp;&nbsp;Search</button>
                      </td>

                      <td>
                        <a onclick="openBalanceAddForm()" class="btn btn-info"><i class="fa fa-plus"></i>&nbsp;ADD Balance</a>&nbsp;&nbsp;&nbsp;
                      </td>
                      </tr>
                    </table>
                  </div>
                </td>
              </tr>
            </table>
      </form>
      </div>
      </div>


      <div class="col-12" style="margin-top:10px;">

        <div class="" style="padding-bottom:50px;">
          <div class="">
          <table class="table table-hover table-striped table-bordered" id="example1">

              <thead>
                <tr>
                  <th>SL</th>
                  <th>Date</th>
                  <th>Customer ID</th>
                  <th>Customer Name </th>
                  <th>Contact </th>
                  <th>TrxId </th>
                  <th>Pay Type </th>
                  <th style="text-align:right">Amount (AUD)</th>
                  <th style="text-align:right">Status</th>
                  <th style="text-align:right">Action</th>
                </tr>
              </thead>
              <tbody>
                @php 
               @endphp
                @foreach($balances as $balance)

                @php
                        try {
                          $cid = $balance->customer_id;
                          $customer = App\Http\Controllers\TransactionsController::getCustomer($cid);
                          $customerName = $customer->name;
                          $customerContact = $customer->contact;
                        }catch (exception $e) {
                          $customerName = "";
                          $customerContact = "";
                        }

                 @endphp      
                  <tr>
                    <td>{{$loop->iteration}}</td>
                    <td>{{$balance->cdate}}</td>
                    
                    <td style="color:#002D3E";>
                      <a href="" style="color:#002D3E";>
                      <b>{{$balance->customer_id}}</b>
                    </a>
                    </td>
                    <td>{{$customerName}}</td>
                    <td>{{$customerContact}}</td>
                    <td>{{$balance->trx_id}}</td>
                    <td>
                      
                      <div class="row">
                        <div class="col-6">{{$balance->pay_type}}</div>
                        <div class="col-6">
                          @if($balance->doc_image !=null)
                              <a href="{{asset('images/user_doc_img/'. $balance->doc_image)}}" target="blank"><i class="fa fa-paperclip"></i></a>
                          @endif
                        </div>
                      </div>
                    </td>
                    <td style="text-align:right"><b>{{number_format($balance->amount)}}</b></td>
                    <td style="text-align:right"> 
                      @if($balance->status == "Pending")
                      <a class="btn btn-danger btn-sm">Pending</a>
                      @else 
                      <a class="btn btn-success btn-sm">Complete</a>
                      @endif
                    </td>

                    <td style="text-align:right"> 
                     
                     @if($balance->status == "Pending")
                     <a onClick="openBalanceConfirmForm('{{$balance->trx_id}}', {{$balance->amount}})" class="btn btn-success btn-sm">
                        <i class="fa fa-plus"></i>&nbsp;Add
                    </a>
                      {{--<a href="{{route('add-balance-request', [$balance->id, $balance->customer_id])}}" onClick="return add_confirmation()" class="btn btn-success btn-sm"><i class="fa fa-plus"></i>&nbsp;Add</a>--}}
                      <a href="{{route('cancel-balance-request', [$balance->id, $balance->customer_id])}}" class="btn btn-danger btn-sm" onClick="return cancel_confirmation()">Cancel</a>
                    @endif
                    </td>

                  </tr>

                  @endforeach

              </tbody>
            </table>

          </div>
          <!-- /.card-body -->

        </div>
        <!-- /.card -->
      </div>
</div>
</div>
</section>


<!-- popup Processed Details-->
<div class="form-popup" id="BalanceAddForm">

<div style="background-color:#002D3E; padding: 10px;">
  <table style="width:100%; font-size:18px;">
    <tr>
      <td  style="color:#fff;"><b>Add Balance</b></td>
      <td style="text-align:right; padding-right:15px;"><a  onclick="closeBalanceAddForm()" style="color:#fff; cursor: pointer;"><i class="fa fa-times"></i></a></td>
    </tr>
  </table>
</div>

<div class="form-container" style="padding-top:15px;">
<form class="form-horizontal" action="{{route('add-balance')}}" method="post"  enctype="multipart/form-data">
@csrf

 <div class="row">
   <div class="col-md-12" style="padding:20px;">
     <div class="form-group row">
       <div class="col-sm-12" style="padding:0px 20px;">  

       </div>
       
     </div>

     <div>
        <h3>Customer ID: <b>{{$customer_id}}</b></h3>
        <div>Refill Amount (AUD)</div>
        <input type="hidden" name="customer_id" class="form-control" value="{{$customer_id}}">
        <input type="number" id="balance_amount" name="balance_amount" class="form-control" value="0">
        <div style="padding-top: 10px">Charge (AUD)</div>
        <input type="number" id="charge_amount" name="charge_amount" class="form-control" value="0">
        <div style="padding-top: 10px">Total Pay Amount (AUD)</div>
        <input type="number" id="total_pay_amount" name="total_pay_amount" class="form-control" value="0" readonly>
    </div>

    <div style="padding-top:20px;">
        <button type="submit" class="btn btn-warning"><i class="fa fa-upload"></i>&nbsp;&nbsp;Submit</button>
    </div>

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

</div>
</div>
<!-- popup Processed Details end-->

<!-- Popup Processed Confirm -->
<div class="form-popup" id="BalanceConfirmForm" style="display: none;">
    <div style="background-color:#002D3E; padding: 10px;">
        <table style="width:100%; font-size:18px;">
            <tr>
                <td style="color:#fff;"><b>Add Balance</b></td>
                <td style="text-align:right; padding-right:15px;">
                    <a onclick="closeBalanceConfirmForm()" style="color:#fff; cursor: pointer;">
                        <i class="fa fa-times"></i>
                    </a>
                </td>
            </tr>
        </table>
    </div>

    <div class="form-container" style="padding-top:15px;">
        <form class="form-horizontal" action="{{route('add-balance-request')}}" method="post" enctype="multipart/form-data">
            @csrf

            <div class="row">
                <div class="col-md-12" style="padding:20px;">
                    <div>
                        <h3>Customer ID: <b>{{$customer_id}}</b></h3>
                        <h3 id="amount_input">Request Amount: <b></b></h3>
                        <div style="padding-top: 10px">Charge (AUD)</div>
                        <input type="number" name="charge_amount" class="form-control" value="0">
                        <input type="hidden" id="trx_id_input" name="trx_id" class="form-control" value="">
                        <input type="hidden" name="customer_id" class="form-control" value="{{$customer_id}}">
                    </div>

                    <div style="padding-top:20px;">
                        <button type="submit" class="btn btn-warning">
                            <i class="fa fa-upload"></i>&nbsp;&nbsp;Submit
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<!-- Popup Processed Confirm End -->



@push('js_scripts')
<!-- DataTables  & Plugins -->
<script src="{{asset('admin_assets/plugins/datatables/jquery.dataTables.min.js')}}"></script>
<script src="{{asset('admin_assets/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js')}}"></script>
<script src="{{asset('admin_assets/plugins/datatables-responsive/js/dataTables.responsive.min.js')}}"></script>
<script src="{{asset('admin_assets/plugins/datatables-responsive/js/responsive.bootstrap4.min.js')}}"></script>
<script src="{{asset('admin_assets/plugins/datatables-buttons/js/dataTables.buttons.min.js')}}"></script>
<script src="{{asset('admin_assets/plugins/datatables-buttons/js/buttons.bootstrap4.min.js')}}"></script>
<script src="{{asset('admin_assets/plugins/jszip/jszip.min.js')}}"></script>
<script src="{{asset('admin_assets/plugins/pdfmake/pdfmake.min.js')}}"></script>
<script src="{{asset('admin_assets/plugins/pdfmake/vfs_fonts.js')}}"></script>
<script src="{{asset('admin_assets/plugins/datatables-buttons/js/buttons.html5.min.js')}}"></script>
<script src="{{asset('admin_assets/plugins/datatables-buttons/js/buttons.print.min.js')}}"></script>
<script src="{{asset('admin_assets/plugins/datatables-buttons/js/buttons.colVis.min.js')}}"></script>
<script src="https://cdn.datatables.net/fixedheader/3.1.2/js/dataTables.fixedHeader.min.js" type="text/javascript"></script>
<script src="{{asset('admin_assets/data_table_custom_script.js')}}"></script>

<script type="text/javascript">
      function add_confirmation() {
       return confirm('Are you sure you want to Add this balance?');
        }

        function cancel_confirmation() {
       return confirm('Are you sure you want to Cancel this?');
        }
 </script>

<script>
     function openBalanceAddForm(trxid) {
        document.getElementById("BalanceAddForm").style.display = "block";
        console.log('trxID:', trxid);

     }

     function closeBalanceAddForm() {
       document.getElementById("BalanceAddForm").style.display = "none";
     }

     function openBalanceConfirmForm(trxid, amount) {
        document.getElementById("BalanceConfirmForm").style.display = "block";
        document.getElementById("trx_id_input").value = trxid;
        document.getElementById("amount_input").innerHTML = `Request Amount: <b>${amount}</b> AUD`;

        console.log('trxID:', trxid);
        console.log('amount:', amount);
    }

    function closeBalanceConfirmForm() {
        document.getElementById("BalanceConfirmForm").style.display = "none";
    }

     </script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const balanceInput = document.getElementById('balance_amount');
        const chargeInput = document.getElementById('charge_amount');
        const totalPayInput = document.getElementById('total_pay_amount');

        function updateTotalPayAmount() {
            const balance = parseFloat(balanceInput.value) || 0;
            const charge = parseFloat(chargeInput.value) || 0;
            totalPayInput.value = (balance + charge).toFixed(2); // Ensure two decimal places
        }

        // Add event listeners to update the total when inputs change
        balanceInput.addEventListener('input', updateTotalPayAmount);
        chargeInput.addEventListener('input', updateTotalPayAmount);
    });
</script>



@endpush
@endsection