@extends('main')

@section('css')
<link rel="stylesheet" href="{{ asset('plugins/datatables-bs4/css/dataTables.bootstrap4.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/datatables-responsive/css/responsive.bootstrap4.min.css') }}">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css">  
@endsection

@section('content')
<div class="content-wrapper">

    <!-- Main content -->
    <section class="content">
      <div class="row">
        <div class="col-12">
        @if(session('message'))
            <div class="form-group mt-3">
                <div class="alert alert-success" role="alert">
                    {{ session('message') }}
                </div>
            </div>
        @endif
          <div class="card mt-3">
            <!-- /.card-header -->
            <div class="card-body">
                <div class="table-responsive">
                    <table id="example2" class="table table-bordered table-hover">
                        <thead>
                            <tr>
                            <th>Request Date</th>
                            <th>Paid Date</th>
                            <th>Name</th>
                            <th>Amount</th>
                            <th>Status</th>
                            <th>Slip Payment</th>
                            <th>Option</th>
                            </tr>
                        </thead>
                        <tbody>
                        @if(!empty($withdraws))
                        @foreach($withdraws as $w)
                        <tr>
                            <td>{{ date('d-m-Y H:i:s', strtotime($w->created_at)) }}</td>
                            <td class="paid_at">{{ $w->paid_at ? date('d-m-Y H:i:s', strtotime($w->paid_at)) : '-' }}</td>
                            <td>{{ $w->agent->name }}</td>
                            <td>{{ number_format($w->amount, 0, ',', '.') }}</td>
                            <td class="withdraw_status">{!! $w->status == 'unpaid' ? '<span class="badge badge-danger">UNPAID</span>' : '<span class="badge badge-success">PAID</span>' !!}</td>
                            <td class="bukti_pembayaran">{!! $w->bukti_pembayaran ? '<a href="'. asset('withdraw/' . $w->bukti_pembayaran) .'" data-fancybox>See Slip</a>' : '-' !!}</td>
                            <td class="text-center">
                              @if($w->status == 'unpaid')
                                <button class="btn btn-success btn-sm btn-confirm" withdraw-id="{{ $w->id }}">Confirm</button>
                              @else
                              <span class="badge badge-success">PAID</span>
                              @endif
                            </td>
                        </tr>
                        @endforeach
                        @endif
                        </tbody>
                    </table>
                </div>
            </div>
            <!-- /.card-body -->
          </div>
          <!-- /.card -->
          <!-- /.card -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
    </section>
    <!-- /.content -->
  </div>
  <!-- Modal -->
<div class="modal fade modal-confirm" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Confirm Withdraw</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <form method="POST" id="form-confirm-withdraw">
            <input type="hidden" name="withdraw_id" required>
            <div class="modal-body">
                <div class="form-group">
                    <label for="slip_image">Slip Image</label>
                    <input type="file" name="slip_image" class="form-control" required>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary">Save</button>
            </div>
        </form>
      </div>
    </div>
  </div>
@endsection

@section('js')
<script src="{{ asset('plugins/datatables/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
<script src="{{ asset('plugins/datatables-responsive/js/dataTables.responsive.min.js') }}"></script>
<script src="{{ asset('plugins/datatables-responsive/js/responsive.bootstrap4.min.js') }}"></script>
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
<script>
$(document).ready(function() {
    $('#example2').DataTable({
        "order": [[ 0, "desc" ]]
    })

    $('.btn-confirm').on('click', function() {
        $('#form-confirm-withdraw')[0].reset()
        let withdraw_id = $(this).attr('withdraw-id');
        $('[name="withdraw_id"]').val(withdraw_id);
        $('.modal-confirm').modal('show');
    })

    $('#form-confirm-withdraw').on('submit', function(e) {
        e.preventDefault()

        let withdraw_id = $(this).find('[name="withdraw_id"]').val();
        let slip_image = $(this).find('[name="slip_image"]').prop('files')[0];

        let form_data = new FormData();
        form_data.append('withdraw_id', withdraw_id);
        form_data.append('slip_image', slip_image);
        form_data.append('_token', "{{ csrf_token() }}")
        
        $.ajax({
            type: 'POST',
            url: "{{ route('agent.confirm-withdraw') }}",
            data: form_data,
            contentType: false,
            processData: false,
            beforeSend() {
                let timerInterval;
                Swal.fire({
                    title: 'Mohon Menunggu',
                    html: 'Bukti Pembayaran Sedang Diupload',
                    timerProgressBar: true,
                    showCancelButton: false,
                    showConfirmButton: false,
                    onBeforeOpen: () => {
                        Swal.showLoading()
                    },
                    onClose: () => {
                        clearInterval(timerInterval)
                    }
                    }).then((result) => {
                    if (
                        /* Read more about handling dismissals below */
                        result.dismiss === Swal.DismissReason.timer
                    ) {
                        console.log('I was closed by the timer') // eslint-disable-line
                    }
                })
            },
            success(res){
              $('.modal-confirm').modal('hide')
              if(res.status == 'success') {
                incomeTrack({
                  link_image: res.link_image,
                  domain: res.domain,
                  amount: res.amount,
                  balance: res.balance,
                  withdraw_id,
                  paid_at: res.paid_at
                })
              } else {
                Swal.fire({
                    icon: 'error',
                    title: res.status,
                    text: res.message
                })
              }
            },
        });
    })
})

function incomeTrack(data) {
  $.ajax({
    type: 'POST',
    url: `https://${data.domain}/api/confirm-income`,
    data,
    success(res) {
      $('body').find('.btn-confirm[withdraw-id="'+withdraw_id+'"]').parent().parent().find('.paid_at').html(data.paid_at)
      $('body').find('.btn-confirm[withdraw-id="'+withdraw_id+'"]').parent().parent().find('.bukti_pembayaran').html(`<a href="${data.link_image}" data-fancybox>See Slip</a>`)
      $('body').find('.btn-confirm[withdraw-id="'+withdraw_id+'"]').parent().parent().find('.withdraw_status').html(`<span class="badge badge-success">PAID</span>`)
      $('body').find('.btn-confirm[withdraw-id="'+withdraw_id+'"]').parent().html(`<span class="badge badge-success">PAID</span>`)
      $('.mdoal-confirm').modal('hide')
      Swal.fire({
          position: 'center',
          icon: 'success',
          title: 'Withdraw Successfully Confirmed',
          showConfirmButton: false,
          timer: 1500
      });
    }
  })
}
</script>
@endsection