@extends('layouts.layout')
@section('css')
    <style type="text/css">
        .btn-balance {
            background: #ffca28; 
            padding:2px; 
            color: #fff; 
            margin-top: 3px; 
            border-radius: 3px; 
            cursor: pointer;
        }

        .btn-request {
            background: #42a5f5; 
            padding:2px; 
            color: #fff; 
            margin-top: 3px; 
            border-radius: 3px; 
            cursor: pointer;
        }

        .box-money {
            font-size: 25px; 
            font-weight: bold;
        }
    </style>
@endsection
@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>Butik Emas Store List</h3>
                </div>
                <div class="clearfix"></div>
            </div>

            <div class="row">               
                <div class="col-xs-12">
                    <div class="x_panel">

                        <table class="table table-striped table-bordered">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Store</th>
                                    <th>Payment Method</th>
                                    <th class="text-center" width="150">Cash Balance</th>
                                    <th class="text-center" width="150">Request Topup</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($store_lists as $key => $store)
                                    <tr>
                                        <td>{{ $key += 1 }}</td>
                                        <td>
                                            <b>{{ $store->nama }}</b>
                                            <div style="font-size: 12px; color: #888;">
                                                {!! $store->alamat !!}
                                            </div>
                                        </td>
                                        <td>
                                            <div><i class="fa fa-check"></i> Transfer</div>
                                            @if($store->store_balance)
                                                @if($store->store_balance->is_active)
                                                    <div><i class="fa fa-check"></i>  Cash</div>
                                                @endif
                                            @endif
                                        </td>
                                        <td align="center">
                                            @if($store->store_balance)
                                                @if($store->store_balance->is_active)
                                                    <b>Rp. {{ number_format($store->store_balance->balance) }}</b><br>
                                                    <div class="btn-balance text-center" onclick="showBalance('{{ $store }}')"><i class="fa fa-money"></i> detail balance</div>
                                                @endif
                                            @endif
                                        </td>
                                        <td align="center">
                                            @if($store->request_topup()->where('status', 'waiting')->count() > 0)
                                                <b>Rp. {{ number_format($store->request_topup()->where('status', 'waiting')->first()->request_nominal) }}</b><br>
                                                <div class="btn-request text-center"  onclick="showDetail('{{ $store }}', 
                                                '{{ $store->request_topup()->where('status', 'waiting')->first() }}')"><i class="fa fa-money"></i> detail request</div>
                                            @else
                                                NO
                                            @endif
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="5">No Data</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>

                        <hr>

                        <div>{{ $store_lists->appends($_GET)->links() }}</div>
                    </div>
                </div>                
            </div>
        </div>
    </div>
    <div class="modal fade" id="modalReqTopup" tabindex="-1" role="dialog" aria-labelledby="modalReqTopup" aria-hidden="true">
        <div class="modal-dialog modal-md" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="modal-title"><i class="fa fa-external-link"></i> Request Additional Balance for <b id="store_name"></b></h2>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <div class="row">
                            <div class="col-sm-6 col-md-6">
                                <label for="topup_nominal">Current Balance</label>
                                <div style="font-weight: bold; font-size: 20px;">
                                    Rp. <span id="current_balance"></span>
                                </div>
                            </div>
                            <div class="col-sm-6 col-md-6">
                                <label for="request_topup_nominal">Request Topup Nominal</label>
                                <div style="font-weight: bold; font-size: 20px;">
                                    Rp. <span id="request_topup_nominal"></span>
                                    <input type="hidden" id="request_topup_nominal_value">
                                </div>
                            </div>
                            <div class="col-sm-12 col-md-12">
                                <hr style="border-top:1px dashed #aaa;">
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="total_topup">Total</label>
                        <div style="font-weight: bold; font-size: 40px;">
                            Rp. <span id="total_topup">0</span> <i id="match_nominal" class="fa fa-check" style="color: #8bc34a; display: none;"></i>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="row">
                            <div class="col-sm-3 col-md-3">
                                <label><i class="fa fa-money"></i> Rp. 100.000</label>
                                <div style="font-weight: bold; font-size: 20px;">
                                    <input type="number" id="n_100000" name="n_100000" class="form-control" value="0" onkeyup="calculation_topup_request()">
                                </div>
                            </div>
                            <div class="col-sm-3 col-md-3">
                                <label><i class="fa fa-money"></i> Rp. 50.000</label>
                                <div style="font-weight: bold; font-size: 20px;">
                                    <input type="number" id="n_50000" name="n_50000" class="form-control" value="0" onkeyup="calculation_topup_request()">
                                </div>
                            </div>
                            <div class="col-sm-3 col-md-3">
                                <label><i class="fa fa-money"></i> Rp. 20.000</label>
                                <div style="font-weight: bold; font-size: 20px;">
                                    <input type="number" id="n_20000" name="n_20000" class="form-control" value="0" onkeyup="calculation_topup_request()">
                                </div>
                            </div>
                            <div class="col-sm-3 col-md-3">
                                <label><i class="fa fa-money"></i> Rp. 10.000</label>
                                <div style="font-weight: bold; font-size: 20px;">
                                    <input type="number" id="n_10000" name="n_10000" class="form-control" value="0" onkeyup="calculation_topup_request()">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group" style="margin-top: 20px;">
                        <label for="request_topup_nominal">PIN</label>
                        <div>
                            <input type="password" class="form-control" id="pin" name="pin" placeholder="your PIN">
                        </div>
                    </div>
                    <input type="hidden" id="id_request">
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-primary btn_approval" onclick="approveRequest(1)" disabled>Approve</button>
                    <button type="button" class="btn btn-warning btn_approval" onclick="approveRequest(0)" disabled>Reject</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="modalDetailBalance" tabindex="-1" role="dialog" aria-labelledby="modalDetailBalance" aria-hidden="true">
        <div class="modal-dialog modal-md" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="modal-title"><i class="fa fa-external-link"></i> Detail Balance for <b id="balance_store_name"></b></h2>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <div class="row">
                            <div class="col-sm-6 col-md-6">
                                <label for="topup_nominal"><b>Balance</b></label>
                                <div style="font-weight: bold; font-size: 40px;">
                                    Rp. <span id="store_balance"></span>
                                </div>
                            </div>
                            <div class="col-sm-12 col-md-12" style="padding-top: 20px;">
                                <div class="row">
                                    <div class="col-sm-4 col-md-3 text-center" style="border: 1px dashed #bbb;">
                                        <i class="fa fa-money"></i> Rp. 100.000
                                        <div class="box-money box-money-100rb"></div>
                                    </div>
                                    <div class="col-sm-4 col-md-3 text-center" style="border: 1px dashed #bbb;">
                                        <i class="fa fa-money"></i> Rp. 50.000
                                        <div class="box-money box-money-50rb"></div>
                                    </div>
                                    <div class="col-sm-4 col-md-3 text-center" style="border: 1px dashed #bbb;">
                                        <i class="fa fa-money"></i> Rp. 20.000
                                        <div class="box-money box-money-20rb"></div>
                                    </div>
                                    <div class="col-sm-4 col-md-3 text-center" style="border: 1px dashed #bbb;">
                                        <i class="fa fa-money"></i> Rp. 10.000
                                        <div class="box-money box-money-10rb"></div>
                                    </div>
                                    <div class="col-sm-4 col-md-3 text-center" style="border: 1px dashed #bbb;">
                                        <i class="fa fa-money"></i> Rp. 5.000
                                        <div class="box-money box-money-5rb"></div>
                                    </div>
                                    <div class="col-sm-4 col-md-3 text-center" style="border: 1px dashed #bbb;">
                                        <i class="fa fa-money"></i> Rp. 2.000
                                        <div class="box-money box-money-2rb"></div>
                                    </div>
                                    <div class="col-sm-4 col-md-3 text-center" style="border: 1px dashed #bbb;">
                                        <i class="fa fa-money"></i> Rp. 1.000
                                        <div class="box-money box-money-1rb"></div>
                                    </div>
                                    <div class="col-sm-4 col-md-3 text-center" style="border: 1px dashed #bbb;">
                                        <i class="fa fa-money"></i> Rp. 500
                                        <div class="box-money box-money-500"></div>
                                    </div>
                                    <div class="col-sm-4 col-md-3 text-center" style="border: 1px dashed #bbb;">
                                        <i class="fa fa-money"></i> Rp. 200
                                        <div class="box-money box-money-200"></div>
                                    </div>
                                    <div class="col-sm-4 col-md-3 text-center" style="border: 1px dashed #bbb;">
                                        <i class="fa fa-money"></i> Rp. 100
                                        <div class="box-money box-money-100"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <input type="hidden" id="id_request">
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    @include('includes.footer')
</div>
</div>
@endsection
@section('scripts')
    <script type="text/javascript">
        function calculation_topup_request() {
            let n_100000 = parseInt($('#n_100000').val() ? $('#n_100000').val() : 0) * 100000;
            let n_50000 = parseInt($('#n_50000').val() ? $('#n_50000').val() : 0) * 50000;
            let n_20000 = parseInt($('#n_20000').val() ? $('#n_20000').val() : 0) * 20000;
            let n_10000 = parseInt($('#n_10000').val() ? $('#n_10000').val() : 0) * 10000;

            let total = n_100000 + n_50000 + n_20000 + n_10000;
            $('#total_topup').html(new Intl.NumberFormat().format(total));
            if(total == parseInt($('#request_topup_nominal_value').val())) {
                $('.btn_approval').prop('disabled', false);
                $('#match_nominal').fadeIn();

            }
            else {
                $('.btn_approval').prop('disabled', true);
                $('#match_nominal').hide();                
            }
        }

        function showDetail(store_data, request_topup_data) {
            let store = JSON.parse(store_data);
            let request_data = JSON.parse(request_topup_data);
            $('#id_request').val(request_data.id);
            $('#store_name').html(store.nama);
            $('#current_balance').html(new Intl.NumberFormat().format(store.store_balance.balance));
            $('#request_topup_nominal').html(new Intl.NumberFormat().format(request_data.request_nominal));
            $('#request_topup_nominal_value').val(request_data.request_nominal);
            $('#modalReqTopup').modal('show');
        }

        function showBalance(store_data) {
            let store = JSON.parse(store_data);
            $('#balance_store_name').html(store.nama);
            $('#store_balance').html(new Intl.NumberFormat().format(store.store_balance.balance));

            $('.box-money-100rb').html(store.store_balance.n_100000);
            $('.box-money-50rb').html(store.store_balance.n_50000);
            $('.box-money-20rb').html(store.store_balance.n_20000);
            $('.box-money-10rb').html(store.store_balance.n_10000);
            $('.box-money-5rb').html(store.store_balance.n_5000);
            $('.box-money-2rb').html(store.store_balance.n_2000);
            $('.box-money-1rb').html(store.store_balance.n_1000);
            $('.box-money-500').html(store.store_balance.n_500);
            $('.box-money-200').html(store.store_balance.n_200);
            $('.box-money-100').html(store.store_balance.n_100);

            $('#modalDetailBalance').modal('show');
        }

        function approveRequest(status) {
            if($('#pin').val() == '') {
                alert('PIN is required');
                return false;
            }
            $.ajax({
                url: '{{ url('butik_emas/request_topup_approval') }}',
                method: "POST",
                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                data: { 
                    'status': status, 
                    'pin': $('#pin').val(), 
                    'id_request': $('#id_request').val(),
                    'n_100000' : $('#n_100000').val(),
                    'n_50000' : $('#n_50000').val(),
                    'n_20000' : $('#n_20000').val(),
                    'n_10000' : $('#n_10000').val(),
                },
                success: function(response) {
                    alert(response.message);
                    location.reload();
                },
                error: function(response) {
                    var response = response.responseJSON;
                    alert(response.message);
                }
            });
        }
    </script>
@endsection