@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>Notifikasi</h3>
                </div>
                <div class="clearfix"></div>
            </div>

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

                <div class="col-xs-12">
                    <div class="x_panel">
                        <div class="x_content">
                            <form class="form-horizontal" method="get">
                                <div class="form-group">
                                    <label class="col-xs-12 col-sm-2 control-label">Transaction code :</label>
                                    <div class="col-xs-12 col-sm-4">
                                        <input id="code" name="code" type="text" class="form-control"
                                            placeholder="Transaction code (eg: AA2002020)" autocomplete="false">
                                    </div>
                                </div>
                                
                                <div class="form-group">
                                    <div class="text-center loading" style="display:none"><i
                                            class="fa fa fa-spinner fa-pulse"></i></div>
                                    <div class="col-xs-12 col-sm-offset-2 col-sm-10">
                                        <button type="submit" class="btn btn-default"><i class="fa fa-search"
                                                aria-hidden="true"></i> Search</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <div class="col-xs-12">
                    <div class="x_panel">
                        <div class="x_title">
                            <h2>Manual Jual List</h2>
                            <div class="clearfix"></div>
                        </div>

                        @if (\Session::has('oops'))
                        <div class="alert alert-warning" role="alert">
                            {!! \Session::get('oops') !!}
                        </div>
                        @endif
                        <div class="x_content table-responsive">
                            <table class="table table-bordered table-striped" id="user_list">
                                <thead>
                                    <tr>
                                        <th class="text-center" width="70">No</th>
                                        <th>Code Transaksi</th>
                                        <th>Tanggal Transaksi</th>
                                        <th>Nama Customer</th>
                                        <th>Jual (Gram)</th>
                                        <th>Saldo Akhir (Gram)</th>
                                        <th>Total Bayar (Rp)</th>
                                        <th>Remark</th>
                                        <th>Reason</th>
                                        <th>Approve</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @if(count($manual_sells) == 0)
                                    <tr>
                                        <td colspan="10" class="text-center">Data tidak ditemukan</td>
                                    </tr>
                                    @else
                                        @foreach($manual_sells as $key => $item)
                                        <tr>
                                            <td class="text-center">
                                                {{ $key + $manual_sells->firstItem() }}
                                            </td>
                                            <td>{{ $item->transaction->code }}</td>
                                            <td>{{ $item->transaction->created_at }}</td>
                                            <td>{{ $item->transaction->tabungan_transaksi[0]->tabungan->customer->name }}
                                            </td>
                                            <td>{{ $item->transaction->tabungan_transaksi[0]->debet }}</td>
                                            <td>{{ $item->transaction->tabungan_transaksi[0]->tabungan->saldo }}</td>
                                            <td>{{ $item->transaction->tabungan_transaksi[0]->total_dana_setor }}</td>                                        
                                            <td width="300px">{{ $item->remark }}</td>
                                            <td width="300px">{{ $item->reason }}</td>
											<td>
                                                @if(empty($item->transaction->tabungan_transaksi[0]->tabungan->customer->is_blocked) && $item->status==0)
                                                <input class="text-center" type="checkbox" class="custom-control-input"
                                                    name="arr_id_transactions[]" value="{{$item->id}}" />
                                                @endif
                                            </td>
                                            <td>
                                                @if($item->status == 0 && empty($item->transaction->tabungan_transaksi[0]->tabungan->customer->is_blocked))
                                                <button onclick="showPINForm('{{ Crypt::encryptString($item->id) }}','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) }}','0')"
                                                    class="btn btn-sm btn-danger"><i
                                                        class="fa fa-times"></i>&nbsp;&nbsp;Reject</button>
                                                @else
                                                -
                                                @endif
                                            </td>
                                        </tr>
                                        @endforeach
                                   
                                    @endif
                                </tbody>
                            </table>
                            <div class="margin-top:1em;">
                                <center>
                                    {{ $manual_sells->links() }}
                                </center>
                            </div>
                            <div>
                                <button class="btn btn-default" id="btn-select" type="submit">Select All</button>
                                <button class="btn btn-default" id="btn-unselect" type="submit"
                                    style="display:none;">Unselect All</button>
                                <i class="loading hidden fa fa fa-spinner fa-pulse"></i>
                                <button class="btn btn-success" onclick="showPINForm('2','2')">Approve</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @include('includes.footer')
    </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">
        $('document').ready(function() {
            $('#btn-select').on('click', select_all_clicked);
            $('#btn-unselect').on('click', unselect_all_clicked);
            @if($request->input('code'))
                $('#code').val('{{ $_GET['code'] }}');
            @endif

            @if($request->input('status') == '1' || $request->input('status') == '0')
                $('#status').val('{{ $_GET['status'] }}');
            @endif
        });

        function select_all_clicked() {
            $('#user_list').find(':checkbox').prop('checked', true);
            $("#btn-select").attr( "style" , "display:none;");
            $("#btn-unselect").attr( "style" , "display:inline;");

            return false;
        }

        function unselect_all_clicked() {
            $('#user_list').find(':checkbox').prop('checked', false);
            $("#btn-select").attr( "style" , "display:inline;");
            $("#btn-unselect").attr( "style" , "display:none;");

            return false;
        }

        function showPINForm(param,status) {
            $('#paramInput').val(param);
            $('#paramStatus').val(status);
            $('#passwordAdmin').modal('show');
            setTimeout(function(){ 
                document.getElementById("pinUser").focus();
            }, 500);
        }

        function checkPin() {
            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);
                    $("#form-tarik").find(".loading").addClass("hidden");
                    $("#form-tarik").find(".btn-add").removeClass("hidden");
                },
                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('notification/manual_jual/approve') }}/' + param;
                    }else if(status=='2'){
                        $.ajax({
                            url: web_url + '/notification/manual_jual/bulk_approve',
                            method: "POST",
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            data: {
                                arr_id_transactions : $("input[name='arr_id_transactions[]']:checked").map(function(){
                                                        return $(this).val();
                                                    }).get(),
                            }
                        })
                        .done(function(response) {
                            alert(response);
                            location.reload();
                        }).error(function(response) {

                            var data = response.responseJSON;

                            if(data.errors) {
                                var errorHtml = '';
                                $.each(data.errors, function(key, value) {
                                    errorHtml += value[0]+' \n';
                                });
                                alert(errorHtml);
                            }

                            $modal.find('.loading').addClass('hidden');
                            $modal.find('.submit').removeClass('hidden');
                        });
                    }else{
                        window.location = '{{ url('notification/manual_jual/reject') }}/' + param; 
                    }
                }
            });
        }
    </script>
    @endsection