@extends('layouts.layout')

@section('body_class', 'nav-md')
@section('css')
    <style type="text/css">
        .alert-msg {
            font-size: 12px;
            font-style: italic;
            color: #f00;
            margin-top:5px;
        }
    </style>
@endsection

@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><a href="{{ url('/notification/automatic_jual') }}">Automatic Jual</a></li>
                        <li class="active">Detail</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">
                                    <label class="col-xs-12 col-sm-2 control-label">Status :</label>
                                    <div class="col-xs-12 col-sm-4">
                                        <select class="form-control" id="status" name="status">
                                            <option value="all">All</option>
                                            <option value="1">Executed</option>
                                            <option value="0">Failed</option>
                                        </select>
                                    </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>Automatic Jual Detail <span style="font-size: 14px; color: #999;">Transaksi List - <b>{{ date("d F Y H:i", strtotime($automatic_jual->created_at)) }}</span></b></h2>
                            <div class="clearfix"></div>

                            @if (\Session::has('oops'))
                                <div class="alert alert-warning" role="alert">
                                  {!! \Session::get('oops') !!}
                                </div>
                            @endif

                            @if (\Session::has('success'))
                                <div class="alert alert-success" role="alert">
                                  {!! \Session::get('success') !!}
                                </div>
                            @endif
                        </div>
                        <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>Nama Customer</th>
                                        <th>Jual (Gram)</th>
                                        <th>Saldo Akhir (Gram)</th>
                                        <th>Status</th>
                                        <th>Remark</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($details as $key => $item)
                                        <tr>
                                            <td class="text-center">{{ $key + $details->firstItem() }}</td>
                                            <td>{{ $item->transaction->code }}</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->status }}</td>
                                            <td width="300px">{{ $item->remark }}</td>
                                            <td>
                                                @if($item->status == 0)
                                                    <button onclick="showPINForm('{{ Crypt::encryptString($item->id) }}')" class="btn btn-sm btn-success">Approve</button>
                                                @else
                                                    -
                                                @endif
                                            </td>
                                        </tr>
                                    @endforeach
                                    @if(count($details) == 0)
                                        <tr>
                                            <td colspan="8" class="text-center">Data tidak ditemukan</td>
                                        </tr>
                                    @endif
                                </tbody>
                            </table>
                            <div class="margin-top:1em;">
                                <center>
                                    {{ $details->links() }}
                                </center>
                            </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" maxlength="6">
                <div class="alert-msg" style="display: none;"></div>
            </div>
            <div class="modal-footer">
                <input type="hidden" id="paramInput">
                <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() {
            @if($request->input('code'))
                $('#code').val('{{ $_GET['code'] }}');
            @endif

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

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

        function checkPin() {
            let param = $('#paramInput').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();
                    window.location = '{{ url('notification/automatic_jual/approve') }}/' + param;
                }
            });
        }
    </script>
@endsection