@extends('layouts.member-app')
@push('head-script')
<style>
    .message-item {
        margin-bottom: 25px;
        margin-left: 40px;
        position: relative;
    }

    .message-item .message-inner {
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 3px;
        padding: 10px;
        position: relative;
    }

    .message-item .message-inner:before {
        border-right: 10px solid #ddd;
        border-style: solid;
        border-width: 10px;
        color: rgba(0, 0, 0, 0);
        content: "";
        display: block;
        height: 0;
        position: absolute;
        left: -20px;
        top: 6px;
        width: 0;
    }

    .message-item .message-inner:after {
        border-right: 10px solid #fff;
        border-style: solid;
        border-width: 10px;
        color: rgba(0, 0, 0, 0);
        content: "";
        display: block;
        height: 0;
        position: absolute;
        left: -18px;
        top: 6px;
        width: 0;
    }

    .message-item:before {
        background: #fff;
        border-radius: 2px;
        bottom: -30px;
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
        content: "";
        height: 100%;
        left: -30px;
        position: absolute;
        width: 3px;
    }

    .message-item:after {
        background: #fff;
        border: 2px solid #ccc;
        border-radius: 50%;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        content: "";
        height: 15px;
        left: -36px;
        position: absolute;
        top: 10px;
        width: 15px;
    }

    .clearfix:before,
    .clearfix:after {
        content: " ";
        display: table;
    }

    .message-item .message-head {
        border-bottom: 1px solid #eee;
        margin-bottom: 8px;
        padding-bottom: 8px;
    }

    .message-item .message-head .avatar {
        margin-right: 20px;
    }

    .message-item .message-head .user-detail {
        overflow: hidden;
    }

    .message-item .message-head .user-detail h5 {
        font-size: 16px;
        font-weight: bold;
        margin: 0;
    }

    .message-item .message-head .post-meta {
        float: left;
        padding: 0 15px 0 0;
    }

    .message-item .message-head .post-meta>div {
        color: #333;
        font-weight: bold;
        text-align: right;
    }

    .post-meta>div {
        color: #777;
        font-size: 12px;
        line-height: 22px;
    }

    .message-item .message-head .post-meta>div {
        color: #333;
        font-weight: bold;
        text-align: right;
    }

    .post-meta>div {
        color: #777;
        font-size: 12px;
        line-height: 22px;
    }

    img {
        min-height: 40px;
        max-height: 40px;
    }
</style>


@endpush
@section('page-title')
<div class="row bg-title">
    <!-- .page title -->
    <div class="col-lg-6 col-md-4 col-sm-4 col-xs-12">
        <h4 class="page-title"><i class="{{ $pageIcon }}"></i> {{ __($pageTitle) }}</h4>
    </div>
    <!-- /.page title -->
    <!-- .breadcrumb -->
    <div class="col-lg-6 col-sm-8 col-md-8 col-xs-12">
        <ol class="breadcrumb">
            <li><a href="{{ route('admin.dashboard') }}">@lang('app.menu.home')</a></li>
            <li><a href="{{ route('admin.units.index') }}">{{ __($pageTitle) }}</a></li>
            <li class="active">Floor Detail</li>
        </ol>
    </div>
    <!-- /.breadcrumb -->
</div>
@endsection


@section('content')

<div class="row">

    <div class="col-xs-12">
        <div class="white-box">

            <div class="row m-t-20">
                <div class="col-xs-12">
                    <div class="panel">
                        <div class="panel-wrapper collapse in">
                            <div class="panel-body b-all border-radius">
                                <div class="row dashboard-stats front-dashboard">
                                    <div class="col-lg-3">
                                        <div class="white-box">
                                            <div class="row">
                                                <div class="col-xs-3">
                                                    <div>
                                                        <span class="bg-success-gradient"><i
                                                                class="fa fa-money"></i></span>
                                                    </div>
                                                </div>
                                                <div class="col-xs-9 text-right">
                                                    <span class="widget-title">Summary Total Transaksi </span><br>
                                                    <span class="counter" id="summary_total_transaksi"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3">
                                        <div class="white-box">
                                            <div class="row">
                                                <div class="col-xs-3">
                                                    <div>
                                                        <span class="bg-success-gradient"><i
                                                                class="fa fa-money"></i></span>
                                                    </div>
                                                </div>
                                                <div class="col-xs-9 text-right">
                                                    <span class="widget-title">Summary My Income</span><br>
                                                    <span class="counter" id="summary_my_income"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3">
                                        <div class="white-box">
                                            <div class="row">
                                                <div class="col-xs-3">
                                                    <div>
                                                        <span class="bg-success-gradient"><i
                                                                class="fa fa-money"></i></span>
                                                    </div>
                                                </div>
                                                <div class="col-xs-9 text-right">
                                                    <span class="widget-title">Saldo Wallet</span><br>
                                                    <span class="counter" id="summary_my_wallet"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3">
                                        {{-- @if ($user->can('add_ledge_order')) --}}
                                        <a href="#" class="btn btn-outline btn-success btn-sm"
                                            data-target="#mdl_tarik_saldo" data-toggle="modal"><i
                                                class="fa fa-plus"></i> Withdraw</a>
                                        {{-- @endif --}}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

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

        <section>
            <div class="sttabs tabs-style-line">
                <div class="white-box">
                    <nav>
                        <ul class="showClientTabs">
                            <li class="clientProfile active"><a href="#home" data-toggle="tab"><i
                                        class="fa fa-money"></i> <span>Partner Ledger</span></a>
                            </li>
                            <li class="clientProjects"><a data-toggle="tab" href="#menu1"><i class="fa fa-history"></i>
                                    <span>Transaksi Wallet Partner</span></a>
                            </li>
                            <li class="clientProjects"><a data-toggle="tab" href="#menu2"><i
                                        class="fa fa-credit-card-alt"></i> <span>Riwayat Tarik Saldo</span></a>
                            </li>
                        </ul>
                    </nav>
                </div>

                <div class="tab-content">
                    <div id="home" class="tab-pane fade in active">
                        <div class="content-wrap">
                            <section id="section-line-1" class="show">
                                <div class="row">
                                    <div class="col-xs-12">
                                        <div class="white-box">
                                            <input type="hidden" id="page_ledger" name="page_ledger" value="1">
                                            <div class="table-responsive" id="table_ledger">

                                            </div>
                                        </div>
                                    </div>

                                </div>

                            </section>
                        </div>
                    </div>
                    <div id="menu1" class="tab-pane fade">
                        <div class="content-wrap">
                            <section id="section-line-1" class="show">
                                <div class="row">
                                    <div class="col-xs-12">
                                        <div class="white-box">
                                            <input type="hidden" id="page_wallet" name="page_wallet" value="1">
                                            <div class="table-responsive" id="table_wallet_partner">

                                            </div>
                                        </div>
                                    </div>

                                </div>

                            </section>
                        </div>
                    </div>
                    <div id="menu2" class="tab-pane fade">
                        <div class="content-wrap">
                            <section id="section-line-1" class="show">
                                <div class="row">
                                    <div class="col-xs-12">
                                        <div class="white-box">
                                            <input type="hidden" id="page_tarik_saldo" name="page_tarik_saldo"
                                                value="1">
                                            <div class="table-responsive" id="table_riwayat_tarik_saldo">

                                            </div>
                                        </div>
                                    </div>

                                </div>

                            </section>
                        </div>
                    </div>
                </div>
            </div><!-- /tabs -->
        </section>
    </div>
</div>

<div class="modal fade" id="mdl_tarik_saldo" tabindex="-1" role="dialog" aria-labelledby="mdl_create_unit"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Withdraw Wallet</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            {!!
            Form::open(['id'=>'tarikSaldoWallet','class'=>'ajax-form','method'=>'POST','enctype'=>"multipart/form-data"])
            !!}
            <div class="modal-body">
                <div class="row">
                    <table class="table table-striped table-bordered">
                        <tr>
                            <th>Remaining Wallet</th>
                            <td id="remaining_wallet"></td>
                        </tr>
                        <tr>
                            <th>Bank Name</th>
                            <td id="bank_name"></td>
                        </tr>
                        <tr>
                            <th>Bank Account Name</th>
                            <td id="bank_account_name"></td>
                        </tr>
                        <tr>
                            <th>Bank Account Number</th>
                            <td id="bank_account_number"></td>
                        </tr>
                    </table>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label class="required">Withdraw Amount</label>
                            <input type="hidden" id="current_wallet">
                            <input type="hidden" id="withdraw_to_bank_id" name="withdraw_to_bank_id">
                            <input type="hidden" name="vm_id" value="44880">
                            <input type="number" name="amount" id="input_withdraw_amount" required=""
                                class="form-control">
                            <small style="color:red;display:none" id="message_withdraw"></small>
                        </div>
                    </div>
                </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" id="btn_submit_withdraw">Submit</button>
            </div>
            {!! Form::close() !!}
        </div>
    </div>
</div>
<!-- .row -->

@endsection

@push('footer-script')
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    var min_withdraw = '';
    var max_withdraw = '';
    var url = '/admin/workorders/ajax_get_ledger?page=';
        function getTableledger() {
        var page = $('#page_ledger').val();
        $.get(url + page, function (res) {
            $('#table_ledger').html(res)
        })
    }
    getTableledger()

    $('body').on('click', '.page_ledger', function () {
        var id = $(this).attr('id');
        var id_new = id.replace('page_ledger_', '');
        $('#page_ledger').val(id_new)
        getTableledger()
    })

    function getTableWalletPartner() {
        var page = $('#page_wallet').val();
        $.get('/admin/workorders/ajax_get_wallet_partner?page=' + page, function (res) {
            $('#table_wallet_partner').html(res)
        })
    }
    getTableWalletPartner()

    $('body').on('click', '.page_wallet', function () {
        var id = $(this).attr('id');
        var id_new = id.replace('page_wallet_', '');
        $('#page_wallet').val(id_new)
        getTableWalletPartner()
    })

    function getTableRiwayatTransaksi() {
        var page = $('#page_tarik_saldo').val();
        $.get('/admin/workorders/ajax_get_transaksi_wallet?page=' + page, function (res) {
            $('#table_riwayat_tarik_saldo').html(res)
        })
    }
    getTableRiwayatTransaksi()

    $('body').on('click', '.page_tarik_saldo', function () {
        var id = $(this).attr('id');
        var id_new = id.replace('page_tarik_saldo_', '');
        $('#page_tarik_saldo').val(id_new)
        getTableRiwayatTransaksi()
    })

    $.get('/admin/workorders/ajax_get_summary_transaksi', function (res) {
        $('#summary_total_transaksi').text('Rp. ' + (new Intl.NumberFormat().format(res.summary_total_sales)))
        $('#summary_my_income').text('Rp. ' + (new Intl.NumberFormat().format(res.summary_partner_comission)))
        $("#summary_my_wallet").text('Rp. ' + (new Intl.NumberFormat().format(res.saldo_wallet)))
        $("#bank_name").text(res.bank_name)
        $("#bank_account_name").text(res.bank_acc_name)
        $("#bank_account_number").text(res.bank_acc_number)
        $('#withdraw_to_bank_id').val(res.withdraw_to_bank_id)
        $("#remaining_wallet").text('Rp. ' + (new Intl.NumberFormat().format(res.saldo_wallet)))
        $('#current_wallet').val(res.saldo_wallet)
    }, 'json')

    $('body').on('keyup', '#input_withdraw_amount', function () {
        var x = $(this).val();
        var current_wallet = $('#current_wallet').val()
        if (parseInt(x) > parseInt(current_wallet)) {
            $('#message_withdraw').show()
            $('#message_withdraw').text('Saldo Wallet Anda tidak cukup');
            $('#btn_submit_withdraw').attr('disabled', true)
        } else {
//            if (parseInt(x) < parseInt(min_withdraw)) {
//                $('#message_withdraw').show()
//                $('#message_withdraw').text('Minimal Withdraw ' + min_withdraw);
//                $('#btn_submit_withdraw').attr('disabled', true)
//            }else if ((parseInt(x) > parseInt(max_withdraw)) {
//                $('#message_withdraw').show()
//                $('#message_withdraw').text('Maximal Withdraw ' + max_withdraw);
//                $('#btn_submit_withdraw').attr('disabled', true)
//            }else{
//                $('#message_withdraw').hide()
//                $('#message_withdraw').text('')
//                $('#btn_submit_withdraw').attr('disabled', false)
//            }
            
            if (parseInt(x) < parseInt(min_withdraw)) {
                $('#message_withdraw').show()
                $('#message_withdraw').text('Minimal Withdraw ' + min_withdraw);
                $('#btn_submit_withdraw').attr('disabled', true)
            }else if(parseInt(x) > parseInt(max_withdraw)){
                $('#message_withdraw').show()
                $('#message_withdraw').text('Maximal Withdraw ' + max_withdraw);
                $('#btn_submit_withdraw').attr('disabled', true)
            }else{
                $('#message_withdraw').hide()
                $('#message_withdraw').text('')
                $('#btn_submit_withdraw').attr('disabled', false)
            }
            
            
            
        }
    })

    $('#tarikSaldoWallet').on('submit', function (e) {
        $('#mdl_tarik_saldo').modal('hide')
        e.preventDefault();
        var formData = new FormData(this);
        $.ajax({
            type: 'POST',
            url: '{{route('admin.workorders.create_withdraw')}}',
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            success: function (data) {
                if (data.status == 'success') {
                    $('.input_withdraw_amount').val('0')
                    Swal.fire({
                        icon: 'success',
                        title: 'Success',
                        text: data.message,
                        allowOutsideClick: false
                    }).then((result) => {
                        getTableRiwayatTransaksi()
                    })
                }
            },
            error: function (data) {

            }
        }, 'json');
    });
</script>
@endpush