@extends('admin.layouts.contentLayoutMaster')

@section('title', $title)

@section('vendor-style')
  {{-- vendor css files --}}
  <link rel="stylesheet" href="{{ asset(mix('admin/vendors/css/tables/datatable/datatables.min.css')) }}">
@endsection

@section('content')
    <section>
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <h5><span class="badge badge-warning text-white" style="text-transform: capitalize">Pending</span><span> => Admin is waiting for Member to upload their Payment Proof</span></h5>
                        <h5><span class="badge badge-warning text-white" style="text-transform: capitalize">Waiting For Confirmation</span><span> => Member is waiting for Admin to approve the order</span></h5>
                        <h5><span class="badge badge-success text-white" style="text-transform: capitalize">Approved</span><span> => Uploaded Payment Proof is valid and the order has been approved by Admin</span></h5>
                        <h5><span class="badge badge-danger" style="text-transform: capitalize">Rejected</span><span> => Order has been rejected by Admin</span></h5>
                        <h5><span class="badge badge-danger" style="text-transform: capitalize">Cancelled</span><span> => Approved Order that has been cancelled by Admin or the system automatically cancelled the Order when the Member didn't do any payment in 5 Minutes</span></h5>
                    </div>
                </div>
            </div>
        </div>
    </section>
  <section class="users-list-wrapper">
    <!-- Ag Grid users list section start -->
    <div id="basic-examples">
      <div class="card">
          <div class="card-body">
              @include('admin.layouts.error-message')
            <div class="table-responsive">
              <table class="table zero-configuration" id="table">
                <thead>
                <tr>
                    <th class="text-center"></th>
                    <th class="text-center">Action</th>
                    <th class="text-center">Status</th>
                    <th class="text-center">Order ID</th>
                    <th class="text-center">Order Date</th>
{{--                    <th class="text-center">Notes</th>--}}
{{--                    <th class="text-center">Contact Number</th>--}}
                    <th class="text-center">Payment Method</th>
                    <th class="text-center">Total</th>
                    <th class="text-center">Admin Note</th>
                </tr>
                </thead>
              </table>
            </div>
          </div>
      </div>
    </div>
    <!-- Ag Grid users list section end -->
  </section>

  <div id="modalApprove" class="modal fade">
      <div class="modal-dialog modal-md">
          <div class="modal-content" >
              <div class="modal-header">
                  <h5 class="font-weight-bold">Update Status</h5>
              </div>
              <form action="{{ URL('admin/order/status-approve/') }}" data-url="{{ URL('admin/order/status-approve/') }}" method="post" id="approveForm">
                  @csrf
                  <div class="modal-body" >
                      <h5 style="margin-bottom: 20px;">This order status will be change into Approve </h5>

                      <div class="row">
                          <div class="col-sm-1"></div>
                          <label class="col-sm-3"><b>{{ __('Order ID') }}</b></label>
                          <div id="approve-order-id"></div>
                      </div>
                      <div class="row">
                          <div class="col-sm-1"></div>
                          <label class="col-sm-3"><b>{{ __('Fullname') }}</b></label>
                          <div id="approve-fullname"></div>
                      </div>
                      <div class="row">
                          <div class="col-sm-1"></div>
                          <label class="col-sm-3"><b>{{ __('Unique Code') }}</b></label>
                          <div id="approve-unique-code"></div>
                      </div>
                      <div class="row">
                          <div class="col-sm-1"></div>
                          <label class="col-sm-3"><b>{{ __('Total') }}</b></label>
                          <div id="approve-total"></div>
                      </div>

                  </div>

                  <div class="modal-footer justify-content-right" >
                      <button type="button" class="btn btn-danger btn-md" data-dismiss="modal" >
                          <i class="fa fa-remove"></i> Cancel</button>
                      <button type="submit" class="btn btn-success btn-md">
                          <i class="fa fa-refresh"></i> Update</button>
                  </div>
              </form>
          </div>
      </div>
  </div>

  <!-- Modal Reject -->
  <div id="modalReject" class="modal fade">
      <div class="modal-dialog modal-md">
          <div class="modal-content" >
              <div class="modal-header">
                  <h5 class="font-weight-bold">Update Status</h5>
              </div>
              <form action="{{ URL('admin/order/status-reject/') }}" data-url="{{ URL('admin/order/status-reject/') }}" method="post" id="rejectForm">
                  @csrf
                  <div class="modal-body" >
                      <h5 style="margin-bottom: 20px;">This order status will be change into Reject </h5>

                      <div class="row">
                          <div class="col-sm-1"></div>
                          <label class="col-sm-3"><b>{{ __('Order ID') }}</b></label>
                          <div id="reject-order-id"></div>
                      </div>
                      <div class="row">
                          <div class="col-sm-1"></div>
                          <label class="col-sm-3"><b>{{ __('Fullname') }}</b></label>
                          <div id="reject-fullname"></div>
                      </div>
                      <div class="row">
                          <div class="col-sm-1"></div>
                          <label class="col-sm-3"><b>{{ __('Unique Code') }}</b></label>
                          <div id="reject-unique-code"></div>
                      </div>
                      <div class="row">
                          <div class="col-sm-1"></div>
                          <label class="col-sm-3"><b>{{ __('Total') }}</b></label>
                          <div id="reject-total"></div>
                      </div>
                  </div>

                  <div class="modal-footer justify-content-right" >
                      <button type="button" class="btn btn-danger btn-md" data-dismiss="modal" >
                          <i class="fa fa-remove"></i> Cancel</button>
                      <button type="submit" class="btn btn-success btn-md">
                          <i class="fa fa-refresh"></i> Update</button>
                  </div>
              </form>
          </div>
      </div>
  </div>

  <!-- Modal Cancel -->
  <div id="modalCancel" class="modal fade">
      <div class="modal-dialog modal-md">
          <div class="modal-content" >
              <div class="modal-header">
                  <h5 class="font-weight-bold">Update Status</h5>
              </div>
              <form action="{{ URL('admin/order/status-cancel/') }}" data-url="{{ URL('admin/order/status-cancel/') }}" method="post" id="cancelForm">
                  @csrf
                  <div class="modal-body" >
                      <h5 style="margin-bottom: 20px;">This order status will be change into Cancel </h5>

                      <div class="row">
                          <div class="col-sm-1"></div>
                          <label class="col-sm-3"><b>{{ __('Order ID') }}</b></label>
                          <div id="cancel-order-id"></div>
                      </div>
                      <div class="row">
                          <div class="col-sm-1"></div>
                          <label class="col-sm-3"><b>{{ __('Fullname') }}</b></label>
                          <div id="cancel-fullname"></div>
                      </div>
                      <div class="row">
                          <div class="col-sm-1"></div>
                          <label class="col-sm-3"><b>{{ __('Unique Code') }}</b></label>
                          <div id="cancel-unique-code"></div>
                      </div>
                      <div class="row">
                          <div class="col-sm-1"></div>
                          <label class="col-sm-3"><b>{{ __('Total') }}</b></label>
                          <div id="cancel-total"></div>
                      </div>
                  </div>

                  <div class="modal-footer justify-content-right" >
                      <button type="button" class="btn btn-danger btn-md" data-dismiss="modal" >
                          <i class="fa fa-remove"></i> Cancel</button>
                      <button type="submit" class="btn btn-success btn-md">
                          <i class="fa fa-refresh"></i> Update</button>
                  </div>
              </form>
          </div>
      </div>
  </div>

  <div id="modalInvoice" class="modal fade">
      <div class="modal-dialog modal-md">
          <div class="modal-content" >
              <form action="{{ URL('admin/order/send-invoice') }}" data-url="{{ URL('admin/order/send-invoice/') }}" method="post" id="invoiceForm">
                  @csrf
                  <div class="modal-header" >
                      <h5 class="font-weight-bold">Send Invoice </h5>
                  </div>

                  <div class="modal-body" >
                      <div class="form-group">
                          <label for="email" class="col-form-label">{{ __('Send To') }}</label>
                          <input type="hidden" id="trans_id" name="trans_id" value="" >
                          <input type="text" class="form-control" name="email" placeholder="Recipient Email">
                      </div>
                  </div>

                  <div class="modal-footer justify-content-right" >
                      <button type="button" class="btn btn-danger btn-md" data-dismiss="modal" >
                          <i class="fa fa-remove"></i> Cancel</button>
                      <button type="submit" class="btn btn-success btn-md">
                          <i class="fa fa-envelope-o"></i> Send</button>
                  </div>
              </form>
          </div>
      </div>
  </div>

@endsection
@section('vendor-script')
  {{-- vendor files --}}
  <script src="{{ asset(mix('admin/vendors/js/tables/datatable/pdfmake.min.js')) }}"></script>
  <script src="{{ asset(mix('admin/vendors/js/tables/datatable/vfs_fonts.js')) }}"></script>
  <script src="{{ asset(mix('admin/vendors/js/tables/datatable/datatables.min.js')) }}"></script>
  <script src="{{ asset(mix('admin/vendors/js/tables/datatable/datatables.buttons.min.js')) }}"></script>
  <script src="{{ asset(mix('admin/vendors/js/tables/datatable/buttons.html5.min.js')) }}"></script>
  <script src="{{ asset(mix('admin/vendors/js/tables/datatable/buttons.print.min.js')) }}"></script>
  <script src="{{ asset(mix('admin/vendors/js/tables/datatable/buttons.bootstrap.min.js')) }}"></script>
  <script src="{{ asset(mix('admin/vendors/js/tables/datatable/datatables.bootstrap4.min.js')) }}"></script>
@endsection
@section('page-script')
  <script src="{{ asset(mix('admin/js/scripts/datatables/datatable.js')) }}"></script>
  <script>
      const modalForm = $('#modalform');

      var table = $('#table').DataTable({
          dom: `@include('admin.components.common.datatables.dom')`,
          buttons: [],
          serverSide: true,
          ajax: {
              url:"{{route('admin.transaction.index')}}"
          },
          columns : [
              {
                  "className":      'details-control',
                  "orderable":      false,
                  "data":           null,
                  "defaultContent": '<button class="btn btn-circle text-white detail-dropdown" data-toggle="tooltip" title="Click for more Transaction detail">+</button>',
              },
              {
                  render: function (data, type, row) {
                      var approveBtn = '<a href="#" class="btn btn-success btn-sm" data-id="'+ row.id +'" data-orderid="'+row.order_id+'" data-full-name="'+row.full_name+'" data-total="'+row.converted_total+'" data-uniquecode="'+row.unique_code+'" data-toggle="modal" data-target="#modalApprove" data-backdrop="static" data-keyboard="false" style="margin-bottom: 3px; width: 130px;"> <i class="fa fa-check"></i> Approve</a>';
                      var rejectBtn = '<a href="#" class="btn btn-danger btn-sm" data-id="'+ row.id +'" data-orderid="'+row.order_id+'" data-full-name="'+row.full_name+'" data-total="'+row.converted_total+'" data-uniquecode="'+row.unique_code+'" data-toggle="modal" data-target="#modalReject" data-backdrop="static" data-keyboard="false" style="margin-bottom: 3px; width: 130px;"> <i class="fa fa-times"></i> Reject</a>';
                      // var cancelBtn = '<a href="#" class="btn btn-danger btn-sm" data-id="'+ row.id +'" data-orderid="'+row.order_id+'" data-full-name="'+row.full_name+'" data-total="'+row.converted_total+'" data-uniquecode="'+row.unique_code+'" data-toggle="modal" data-target="#modalCancel" data-backdrop="static" data-keyboard="false" style="margin-bottom: 3px; width: 130px;"> <i class="fa fa-remove"></i> Cancel</a>';
                      var cancelBtn = '';
                      var showDetailBtn = '<a href="{{ url('admin/order/show') }}/' + row.id + '" class="btn btn-secondary btn-sm" style="margin-bottom: 3px; width: 130px;"><i class="fa fa-pencil-square-o"></i> View Details</a>';
                      var showInvoiceBtn = '<a href="{{ url('admin/order/view-pdf') }}/' + row.order_id + '" class="btn btn-info btn-sm" target="_blank"  style="margin-bottom: 3px; width: 130px;"><i class="fa fa-file-pdf-o"></i> View Invoice</a>';
                      var sendInvoiceBtn = '<a href="#" class="btn btn-info btn-sm" data-id="'+ row.id +'" data-toggle="modal" data-target="#modalInvoice" data-backdrop="static" data-keyboard="false" style="margin-bottom: 3px; width: 130px;"><i class="fa fa-envelope-o"></i> Send Invoice</a>';

                      if (row.payment_method !== "{{ PaymentMethodEnum::getString(PaymentMethodEnum::BANK_TRANSFER) }}") {
                          approveBtn = '';
                          rejectBtn = '';
                      }

                      if (row.status == "{{ TransactionStatusEnum::getString(TransactionStatusEnum::PENDING)}}" || row.status == "{{ TransactionStatusEnum::getString(TransactionStatusEnum::WAITING_FOR_CONFIRMATION)}}") {
                          return approveBtn + rejectBtn + showDetailBtn + showInvoiceBtn + sendInvoiceBtn;
                      } else if (row.status == "{{ TransactionStatusEnum::getString(TransactionStatusEnum::APPROVED) }}") {
                          return cancelBtn + showDetailBtn + showInvoiceBtn + sendInvoiceBtn;
                      } else if (row.status == "{{ TransactionStatusEnum::getString(TransactionStatusEnum::REJECTED) }}") {
                          return showDetailBtn + showInvoiceBtn + sendInvoiceBtn;
                      } else if (row.status == "{{ TransactionStatusEnum::getString(TransactionStatusEnum::CANCELLED) }}") {
                          return showDetailBtn + showInvoiceBtn + sendInvoiceBtn;
                      }
                  }
              },
              {
                  render: function (data, type, row) {

                      var approve = '<h5><span class="badge badge-success" style="text-transform: capitalize;">' + row.status + '</span></h5>';
                      var replacestr = row.status.replace(/-/g, " ");
                      var waitingConfirmation = '<h5><span class="badge badge-warning text-white" style="text-transform: capitalize">' + replacestr + '</span></h5>';
                      var pending = '<h5><span class="badge badge-warning text-white" style="text-transform: capitalize">' + row.status + '</span></h5>';
                      var cancel = '<h5><span class="badge badge-danger" style="text-transform: capitalize">' + row.status + '</span></h5>';
                      var reject = '<h5><span class="badge badge-danger" style="text-transform: capitalize">' + row.status + '</span></h5>';

                      if (row.status == "{{ TransactionStatusEnum::getString(TransactionStatusEnum::PENDING) }}") {
                          return pending;
                      } else if (row.status == "{{ TransactionStatusEnum::getString(TransactionStatusEnum::WAITING_FOR_CONFIRMATION) }}") {
                          return waitingConfirmation;
                      } else if (row.status == "{{ TransactionStatusEnum::getString(TransactionStatusEnum::APPROVED) }}") {
                          return approve;
                      } else if (row.status == "{{ TransactionStatusEnum::getString(TransactionStatusEnum::REJECTED) }}") {
                          return reject;
                      } else if (row.status == "{{ TransactionStatusEnum::getString(TransactionStatusEnum::CANCELLED) }}") {
                          return cancel;
                      }
                  }
              },
              { data : 'order_id', orderable: true, searchable: true },
              {
                  render: function (data, type, row) {
                      return row.converted_transaction_date;
                  }
              },
              // {
              //     render: function (data, type, row) {
              //         return row.notes != null ? row.notes : "-";
              //     }
              // },
              // { data : 'contact_number', orderable: true, searchable: true },
              {
                  render: function (data, type, row) {
                      var method = '<p style="text-transform: capitalize">' + row.payment_method +'</p>';
                      return method.replace("_", " ");
                  }
              },
              {
                  render: function (data, type, row) {
                      return row.converted_total;
                  }
              },
              {
                  render: function (data, type, row) {
                      var updateAdminNote = '<form action="{{ url('admin/order/update-admin-note') }}/' + row.id + '" method="POST">\n' +
                          '                                                    @csrf\n' +
                          '                                                    <input id="admin_note" type="text"  name="admin_notes" value="' + row.admin_notes + '">\n' +
                          '                                                    <button type="submit" style="margin-top: 5px; width: 100%;" class="btn btn-sm btn-primary">\n' +
                          '                                                        <i class="fa fa-refresh"></i> Update Admin Note</button>\n' +
                          '                                                </form>';
                      var noteNullValue = '<form action="{{ url('admin/order/update-admin-note') }}/' + row.id + '" method="POST">\n' +
                          '                                                    @csrf\n' +
                          '                                                    <input id="admin_note" type="text"  name="admin_notes">\n' +
                          '                                                    <button type="submit" style="margin-top: 5px; width: 100%;" class="btn btn-sm btn-primary">\n' +
                          '                                                        <i class="fa fa-refresh"></i> Update Admin Note</button>\n' +
                          '                                                </form>';
                      if (row.admin_notes == null) {
                          return noteNullValue;
                      } else {
                          return updateAdminNote;
                      }
                  }
              },
          ]
      });

      function reloadTable() {
        table.ajax.url("{{route('admin.transaction.index')}}").load();
      }

      function format ( data ) {
          var senderName = '-';
          var bankCode = '-';

          if (data.sender_name !== null) {
              senderName = data.sender_name;
          }

          if (data.bank_code !== null) {
              bankCode = data.bank_code;
          }

          return '<table width="500px" cellpadding="5" cellspacing="0" border="0" style="padding-left:100px;">'+
              '<tr>'+
              '<td><strong>Full Name:</strong></td>'+
              '<td>' + data.full_name + '</td>'+
              '</tr>'+
              '<tr>'+
              '<td><strong>Unique Code:</strong></td>'+
              '<td>' + data.unique_code + '</td>'+
              '</tr>'+
              '<tr>'+
              '<td><strong>Bank Code:</strong></td>'+
              '<td>' + bankCode + '</td>'+
              '</tr>'+
              '<tr>'+
              '<td><strong>Transfer From:</strong></td>'+
              '<td>' + senderName + '</td>'+
              '</tr>'+
              '</table>';
      }

      // Array to track the ids of the details displayed rows
      var detailRows = [];

      $('.table tbody').on( 'click', '.detail-dropdown', function () {
          var tr = $(this).closest('tr');
          var row = table.row( tr );
          var idx = $.inArray( tr.attr('id'), detailRows );

          if ( row.child.isShown() ) {
              tr.removeClass( 'details' );
              row.child.hide();

              // Remove from the 'open' array
              detailRows.splice( idx, 1 );
          }
          else {
              tr.addClass( 'details' );
              row.child( format( row.data() ) ).show();

              // Add to the 'open' array
              if ( idx === -1 ) {
                  detailRows.push( tr.attr('id') );
              }
          }
      } );

      // On each draw, loop over the `detailRows` array and show any child rows
      table.on( 'draw', function () {
          $.each( detailRows, function ( i, id ) {
              $('#'+id+' td.details-control').trigger( 'click' );
          } );
      } );


      $( document ).ready(function() {
          $('#modalApprove').on('shown.bs.modal', function (event) {
              var $button = $(event.relatedTarget);
              var id = $($button).data('id');
              var orderID = $($button).data('orderid');
              var fullname = $($button).data('full-name');
              var total = $($button).data('total');
              var uniqueCode = $($button).data('uniquecode');
              var url = $('#approveForm').data('url');

              $('#approveForm').attr('action', url + '/' + id);
              $('#approve-order-id').text(orderID);
              $('#approve-fullname').text(fullname);
              $('#approve-total').text(total);
              $('#approve-unique-code').text(uniqueCode);
          });

          $('#modalReject').on('shown.bs.modal', function (event) {
              var $button = $(event.relatedTarget);
              var id = $($button).data('id');
              var orderID = $($button).data('orderid');
              var fullname = $($button).data('full-name');
              var total = $($button).data('total');
              var uniqueCode = $($button).data('uniquecode');
              var url = $('#rejectForm').data('url');

              $('#rejectForm').attr('action', url + '/' + id);
              $('#reject-order-id').text(orderID);
              $('#reject-fullname').text(fullname);
              $('#reject-total').text(total);
              $('#reject-unique-code').text(uniqueCode);
          });

          $('#modalCancel').on('shown.bs.modal', function (event) {
              var $button = $(event.relatedTarget);
              var id = $($button).data('id');
              var orderID = $($button).data('orderid');
              var fullname = $($button).data('full-name');
              var total = $($button).data('total');
              var uniqueCode = $($button).data('uniquecode');
              var url = $('#cancelForm').data('url');

              $('#cancelForm').attr('action', url + '/' + id);
              $('#cancel-order-id').text(orderID);
              $('#cancel-fullname').text(fullname);
              $('#cancel-total').text(total);
              $('#cancel-unique-code').text(uniqueCode);
          });

          $('#modalInvoice').on('shown.bs.modal', function(event) {
              var $button = $(event.relatedTarget);
              var id = $($button).data('id');
              var url = $('#invoiceForm').data('url');

              $('#invoiceForm').attr('action',url + '/' + id);
              $('#trans_id').attr('value', + id);
          });
      });
  </script>
@endsection