@extends('layouts.layout')
@section('body_class', 'nav-md')
@section('body_content')
<div class="container body">
    <div class="main_container">
        @include('includes.sidebar')
        <div class="right_col" role="main">
            <div class="page-title">
                <div class="title_left">
                    <h3>Tarik Tunai Fail List</h3>
                </div>
                <div class="clearfix"></div>
            </div>

            <div class="row">
                <div class="col-xs-12">
                    <ol class="breadcrumb">
                        <li><a href="{{ route('dashboard') }}">Home</a></li>
                        <li class="active">List</li>
                    </ol>
                </div>

                <div class="col-xs-12">
                    <div class="x_panel">
                        <div class="x_content">
                            <table id="table_subscriber" class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <th class="text-center">Nama Customer</th>
                                        <th class="text-center">Email</th>
                                        <th class="text-center">Kode Transaksi</th>
                                        <th class="text-center">Jumlah</th>
                                        <th class="text-center">Keterangan</th>
                                        <th class="text-center">Tanggal Transaksi</th>
                                        <th class="text-center">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($fail_list as $item)
                                        <tr>
                                            <td class="text-center">{{ $item->wallet_transaction->wallet->customer->name }}</td>
                                            <td class="text-center">{{ $item->wallet_transaction->wallet->customer->email }}</td>
                                            <td class="text-center">{{ $item->wallet_transaction->code }}</td>
                                            <td class="text-center">{{ $item->wallet_transaction->total }}</td>
                                            <td class="text-center">{{ $item->remark }}</td>
                                            <td class="text-center">{{ $item->wallet_transaction->created_at }}</td>
                                            <td class="text-center">
                                                @if($item->status == 0)
                                                <button onclick="showPINForm('{{ Crypt::encryptString($item->id_wallet_transaction) }}','1')"
                                                    class="btn btn-sm btn-success"><i
                                                        class="fa fa-handshake-o"></i>&nbsp;&nbsp;Approve</button>
                                                <button onclick="showPINForm('{{ Crypt::encryptString($item->id_wallet_transaction) }}','2')"
                                                    class="btn btn-sm btn-danger"><i
                                                        class="fa fa-times"></i>&nbsp;&nbsp;Reject</button>
                                                @else
                                                -
                                                @endif                                            
                                            </td>
                                        </tr>
                                    @endforeach
                                    @if(count($fail_list) == 0)
                                        <tr>
                                            <td colspan="15" class="text-center">No data found</td>
                                        </tr>
                                    @endif
                                </tbody>
                            </table>
                            <div style="text-align:center">{{ $fail_list->links() }}</div>                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @include('includes.footer')
    </div>
</div>


<div id="passwordAdmin" class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Masukan PIN Anda</h5>
            </div>
            <div class="modal-body">
                <input type="password" id="pinUser" name="pinUser" class="form-control" placeholder="PIN">
                <div class="alert-msg" style="display: none;"></div>
            </div>
            <div class="modal-footer">
                <input type="hidden" id="paramInput">
                <input type="hidden" id="paramStatus">
                <button type="button" class="btn btn-primary" onclick="checkPin()">Konfirmasi</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script type="text/javascript">
  function showPINForm(param,status) {
            $('#paramInput').val(param);
            $('#paramStatus').val(status);
            $('#passwordAdmin').modal('show');
            setTimeout(function(){ 
                document.getElementById("pinUser").focus();
            }, 500);
        }

        function checkPin() {
            $('#cover-spin').fadeIn();
            let param = $('#paramInput').val();
            let status = $('#paramStatus').val();
            let pin = $('#pinUser').val();
            if(pin.length == 0) {
                $('.alert-msg').html('PIN tidak boleh kosong');
                $('.alert-msg').fadeIn();
                document.getElementById("pinUser").focus();
                return false;
            }
            else if(pin.length < 6) {
                $('.alert-msg').html('PIN minimal 6 karakter');
                $('.alert-msg').fadeIn();
                document.getElementById("pinUser").focus();
                return false;
            }
            $('.alert-msg').hide();
            $.ajax({
                url: '/check/pin',
                method: "POST",
                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                data: {
                    "pin" : $("#pinUser").val()
                },
                error: function(response) {
                    var data = response.responseJSON;
                    alert(data.error);
                },
                success: function(response) {
                    if(response.success == 0) {
                        $('.alert-msg').html('Maaf, PIN Anda salah');
                        $('.alert-msg').fadeIn();
                        $("#pinUser").val('');
                        document.getElementById("pinUser").focus();
                        return false;
                    }
                    $('.alert-msg').hide();
                    if(status=='1'){
                        window.location = '{{ url('tarik_tunai/approve') }}/' + param;
                    }else if(status=='2'){
                        window.location = "{{ url('tarik_tunai/reject') }}/" + param; 
                    }
                }
            });
        }
    </script>
    @endsection