@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') }}">
@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">
            <div class="card-header">
                <h4 class="float-left">Sum: Rp {{ number_format($agents->sum('deposit'), 0, ',', '.') }}</h4>
                <a href="{{ route('agent.create') }}" class="btn btn-primary btn-add-agent float-right">Add Agent</a>
            </div>
            <!-- /.card-header -->
            <div class="card-body">
                <div class="table-responsive">
                    <table id="example2" class="table table-bordered table-hover">
                        <thead>
                            <tr>
                            <th>Name</th>
                            <th>Email</th>
                            <th>Phone</th>
                            <th>Domain</th>
                            <th>Type</th>
                            <th>Deposit</th>
                            <th>Option</th>
                            </tr>
                        </thead>
                        <tbody>
                        @if(!empty($agents))
                        @foreach($agents as $a)
                        <tr>
                            <td>{{ $a->name }}</td>
                            <td>{{ $a->email }}</td>
                            <td>{{ $a->phone }}</td>
                            <td>{{ $a->domain }}</td>
                            <td>{{ $a->type_id ? $a->type->type : '-' }}</td>
                            <td class="deposit-amount">Rp {{ number_format($a->deposit, 0, ',', '.') }}</td>
                            <td class="text-center">
                                <button class="btn btn-success btn-sm btn-edit-deposit" agent-id="{{ $a->id }}"><i class="fas fa-dollar-sign" title="edit deposit"></i></button>
                            <a href="{{ route('agent.edit', ['id' => $a->id]) }}" class="btn btn-warning btn-sm"  title="edit agent"><i class="fas fa-edit"></i></a>
                                <button class="btn btn-danger btn-sm btn-delete-agent" agent-id="{{ $a->id }}" title="delete agent"><i class="fas fa-trash"></i></button>
                            </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-deposit" 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">Edit Deposit</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <form id="form-edit-deposit" method="POST">
            <input type="hidden" name="agent_id">
            <div class="modal-body">
                <div class="form-group">
                    <label for="action">Action</label>
                    <select name="action" class="form-control" required>
                        <option value="" selected disabled>--Choose Action--</option>
                        <option value="increase">Increase</option>
                        <option value="decrease">Decrease</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="amount">Amount</label>
                    <input type="text" name="amount" class="form-control price" required>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</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/npm/sweetalert2@9"></script>
<script>
$(document).ready(function() {
    $('#example2').DataTable()

    numberOnly()
    priceFormat()

    $('body').on('click', '.btn-delete-agent', function() {
        let agent_id = $(this).attr('agent-id')
        Swal.fire({
            title: 'Do you want to delete this agent ?',
            text: "",
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Ya'
        }).then((result) => {
            if (result.value) {
                $.ajax({
                    type: "POST",
                    url: "{{ route('agent.delete') }}",
                    data: {
                        _token: "{{ csrf_token() }}",
                        agent_id
                    },
                    beforeSend: function() {
                        let timerInterval;
                        Swal.fire({
                            title: 'Please Wait',
                            html: 'We Deleting the Agent',
                            timerProgressBar: true,
                            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: function(response) {
                        $('body').find('.btn-delete-agent[agent-id="' + agent_id + '"]').parent().parent().remove()
                        Swal.fire({
                            position: 'center',
                            icon: 'success',
                            title: 'Agent Successfully Deleted',
                            showConfirmButton: false,
                            timer: 1500
                        });
                    }
                });
            }
        });
    })

    $('body').on('click', '.btn-edit-deposit', function() {
      let agent_id = $(this).attr('agent-id')
      $('body').find('#form-edit-deposit')[0].reset()
      $('body').find('.modal-deposit').find('[name="agent_id"]').val(agent_id)
      $('body').find('.modal-deposit').modal('show')
    });

    $('body').on('submit', '#form-edit-deposit', function(e) {
        e.preventDefault()
        let agent_id = $('body').find('#form-edit-deposit').find('[name="agent_id"]').val()
        let action = $('body').find('#form-edit-deposit').find('[name="action"]').val()
        let amount = $('body').find('#form-edit-deposit').find('[name="amount"]').val()

        $.ajax({
            type: 'POST',
            url: "{{ route('agent.change-deposit') }}",
            data: {
                _token: "{{ csrf_token() }}",
                agent_id,
                action,
                amount
            },
            beforeSend() {
                let timerInterval;
                Swal.fire({
                    title: 'Please Wait',
                    html: 'We Changing the Deposit',
                    timerProgressBar: true,
                    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) {
                depositTrackAgent({
                    agent_id,
                    action,
                    amount: res.amount,
                    domain: res.domain,
                    saldo: res.deposit
                })
            }
        })
    })

})

function depositTrackAgent(data) {
    $.ajax({
        type: 'POST',
        url: `https://${data.domain}/api/increasedecreasedeposit`,
        data: {
            action: data.action,
            amount: data.amount,
            saldo: data.saldo
        },
        success(res) {
            $('body').find('.btn-edit-deposit[agent-id="'+data.agent_id+'"]').parent().parent().find('.deposit-amount').html(`
               Rp ${new Intl.NumberFormat(['ban', 'id']).format(parseFloat(data.saldo))}
            `)
            $('body').find('.modal-deposit').modal('hide');
            Swal.fire({
                position: 'center',
                icon: 'success',
                title: 'Deposit Successfully Updated',
                showConfirmButton: false,
                timer: 1500
            });
        }
    })
}

function numberOnly() {
    var input = document.querySelector('.price');
    input.addEventListener('input', function() {
        this.value = this.value.replace(/[^0-9 \,]/, '');
    });
}

function priceFormat() {
    $('.price').on('keyup', function() {
        var nilai = $(this).val();
        $(this).val(formatRupiah(nilai));
    })
}

const formatRupiah = angka => {
    var number_string = angka.replace(/[^,\d]/g, '').toString(),
    split   		= number_string.split(','),
    sisa     		= split[0].length % 3,
    rupiah     		= split[0].substr(0, sisa),
    ribuan     		= split[0].substr(sisa).match(/\d{3}/gi);

    // tambahkan titik jika yang di input sudah menjadi angka ribuan
    if(ribuan){
        separator = sisa ? '.' : '';
        rupiah += separator + ribuan.join('.');
    }

    rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah;
    return rupiah;
}
</script>
@endsection