@extends('layouts.store')
@section('body')
    <!-- ========================= SECTION PAGETOP ========================= -->
    <section class="section-pagetop bg-gray">
        <div class="container">
            <h2 class="title-page">My account</h2>
        </div> <!-- container //  -->
    </section>
    <!-- ========================= SECTION PAGETOP END// ========================= -->

    <!-- ========================= SECTION CONTENT ========================= -->
    <section class="section-content padding-y">
        <div class="container">

            <div class="row">
                @include("partials.store.profile-menu")
                <main class="col-md-9">

                    <article class="card mb-3">
                        <div class="card-body">

                            <figure class="icontext">
                                <div class="icon">
                                    <img class="rounded-circle img-sm border" src="https://i.pravatar.cc/100">
                                </div>
                                <div class="text">
                                    <strong>{{ Auth::user()->name }}</strong> <br>
                                    <p class="mb-2">{{ Auth::user()->email }}</p>
                                    <a href="{{ route('frontend.store.profile.setting') }}"
                                        class="btn btn-light btn-sm">Edit</a>
                                </div>
                            </figure>
                            <hr>
                            <p>
                                Saldo : Rp {{ $balance }}
                                <br>
                                <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#modalTopup">Top
                                    Up</button>
                            </p>



                            <article class="card-group card-stat">
                                <figure class="card bg">
                                    <div class="p-3">
                                        <h4 class="title">{{ $orders['total'] }}</h4>
                                        <span>Orders</span>
                                    </div>
                                </figure>
                                <figure class="card bg">
                                    <div class="p-3">
                                        <h4 class="title">{{ $orders['open'] }}</h4>
                                        <span>Open</span>
                                    </div>
                                </figure>
                                <figure class="card bg">
                                    <div class="p-3">
                                        <h4 class="title">{{ $orders['close'] }}</h4>
                                        <span>Close</span>
                                    </div>
                                </figure>
                            </article>


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

                </main> <!-- col.// -->
            </div>

        </div> <!-- container .//  -->
    </section>
    <!-- ========================= SECTION CONTENT END// ========================= -->

    <!-- Modal Topup-->
    <div class="modal fade" id="modalTopup" tabindex="-1" role="dialog" aria-labelledby="modalTopup" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalTopup">Topup Saldo</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="input-group mb-2">
                        <div class="input-group-prepend">
                            <div class="input-group-text">Rp</div>
                        </div>
                        <input type="number" class="form-control" id="amount" placeholder="0">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" id="pay" class="btn btn-primary">Pay</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script type="text/javascript">
        let amount;
        $(document).ready(){
            $("#pay").on('click', function(){
                alert('tes');
            });
        }
        function getPaymentList() {
            var valid = validation();
            if (valid) {
                $('#exampleModal').modal('toggle');
                $('#exampleModal').modal('show');
                amount = $('#amount').val();
                console.log(amount);
                var jsonBody = {
                    "merchant_code": "kotakinfakid"
                };
                var html = '<div class="list-group" id="paylist"><div class="mb-2">Total Bayar : <strong>' + formatRupiah(amount, 'Rp. ') + ',-</strong></div></div>'
                $.ajax({
                    url: 'https://payment.fusi.id/api/list',
                    type: 'post',
                    dataType: 'json',
                    headers: {
                        "Authorization": 'Bearer 2|KNcyEHAIXO5xp3Nyr4wH9KlDm2FtJuUjSOfizw9f',
                        "Content-Type": "application/json"
                    },
                    contentType: 'application/json',
                    success: function(data) {
                        setTimeout(function() {
                            $("#modal-body").empty();
                            $("#modal-body").append(html);
                            data.list.forEach(function(item) {
                                if (parseInt(amount) < 10000) {
                                    if (item.type == "va") {
                                        $("#paylist").append('<button type="button" disabled onclick="setMethod(\'' + item.channel + '\')" class="list-group-item list-group-item-action"><img src="' + item.image_url + '" width=30%/><s>' + item.name + '</s>  Min. Rp 10.000</button> ');
                                    } else {
                                        $("#paylist").append('<button type="button" onclick="setMethod(\'' + item.channel + '\')" class="list-group-item list-group-item-action"><img src="' + item.image_url + '" width=30%/>' + item.name + '</button> ');
                                    }
                                } else {
                                    $("#paylist").append('<button type="button" onclick="setMethod(\'' + item.channel + '\')" class="list-group-item list-group-item-action"><img src="' + item.image_url + '" width=30%/>' + item.name + '</button> ');
                                }
                            });
                            console.log(JSON.stringify(data));
                        }, 3000);
                    },
                    data: JSON.stringify(jsonBody)
                });
            } else {
                alert('Something wrong !');
            }

        }
    </script>
@endsection