@extends('layouts.base')
@push('css')
<!-- Switchery -->
<link href="{{URL::to('vendors/switchery/dist/switchery.min.css')}}" rel="stylesheet">
<!-- Datatables -->
<link href="{{URL::to('vendors/datatables.net-bs/css/dataTables.bootstrap.min.css')}}" rel="stylesheet">
<link href="{{URL::to('vendors/datatables.net-buttons-bs/css/buttons.bootstrap.min.css')}}" rel="stylesheet">
<link href="{{URL::to('vendors/datatables.net-fixedheader-bs/css/fixedHeader.bootstrap.min.css')}}" rel="stylesheet">
<link href="{{URL::to('vendors/datatables.net-responsive-bs/css/responsive.bootstrap.min.css')}}" rel="stylesheet">
<link href="{{URL::to('vendors/datatables.net-scroller-bs/css/scroller.bootstrap.min.css')}}" rel="stylesheet">
@endpush
@section('content')
    <div class="x_panel">
        <div class="x_content">
            <br/>
            <form action="#" method="post" id="form-create" data-parsley-validate class="form-horizontal form-label-left input_mask">
                <div class="row">
                    <div class="col-md-4 col-sm-4 col-xs-12 form-group has-feedback @if($errors->get('currency_id')) has-error @endif">
                        <label for="currency_id">Moned</label>
                        <select name="currency_id" id="currency_id" class="form-control">
                            <option value="">Seleccione</option>
                            @foreach($currencies as $currency)
                                <option value="{{$currency->id}}">{{$currency->name}}</option>
                            @endforeach
                        </select>
                        <span class="fa fa-btc form-control-feedback right" aria-hidden="true"></span>
                    </div>
                    <div class="col-md-4 col-sm-4 col-xs-12 form-group has-feedback @if($errors->get('type')) has-error @endif">
                        <label for="type">Tipo</label>
                        <select name="type" id="type" class="form-control">
                            <option value="">Seleccione</option>
                            <option value="buy">Compra</option>
                            <option value="trade">Intercambio</option>
                            <option value="discharge">Retiro</option>
                        </select>
                        <span class="fa fa-caret-down form-control-feedback right" aria-hidden="true"></span>
                    </div>
                    <div class="col-md-4 col-sm-4 col-xs-12 form-group has-feedback @if($errors->get('status')) has-error @endif">
                        <label for="status">Estatus</label>
                        <select name="status" id="status" class="form-control">
                            <option value="">Seleccione</option>
                            <option value="pending">Pendientes</option>
                            <option value="approved">Aprobadas</option>
                            <option value="canceled">Canceladas</option>
                        </select>
                        <span class="fa fa-question form-control-feedback right" aria-hidden="true"></span>
                    </div>
                </div>
                <div class="row">
                    <div class='col-md-4 col-xs-12'>
                        <div class="form-group has-feedback @if ($errors->get('date_start')) has-error @endif">
                            <label for="date_start">Fecha Inicio</label>
                            <input type="text" value="{{(old('date_start'))?old('date_start'):Session::get('date_start')}}" class="form-control has-feedback-right datepicker" id="date_start" name="date_start" placeholder="Fecha de Inicio" aria-describedby="inputSuccess2Status">
                            <span class="fa fa-calendar-o form-control-feedback right" aria-hidden="true"></span>
                            @if ($errors->get('date_start'))
                                @foreach($errors->get('date_start') as $error)
                                    <span class="help-block">{{$error}}</span>
                                @endforeach
                            @endif
                        </div>
                    </div>
                    <div class='col-md-4 col-xs-12'>
                        <div class="form-group has-feedback @if ($errors->get('date_end')) has-error @endif">
                            <label for="date_end">Fecha Fin</label>
                            <input type="text" value="{{(old('date_end'))?old('date_end'):Session::get('date_end')}}" class="form-control has-feedback-right datepicker" id="date_end" name="date_end" placeholder="Fecha Fin" aria-describedby="inputSuccess2Status">
                            <span class="fa fa-calendar-o form-control-feedback right" aria-hidden="true"></span>
                            @if ($errors->get('date_end'))
                                @foreach($errors->get('date_end') as $error)
                                    <span class="help-block">{{$error}}</span>
                                @endforeach
                            @endif
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-4 col-xs-12 form-group has-feedback @if($errors->get('transaction_code')) has-error @endif">
                        <label for="transaction_code">Código de Transacción</label>
                        <input type="text" name="transaction_code" id="transaction_code" value="{{old('transaction_code')}}" class="form-control">
                        <span class="fa fa-key form-control-feedback right" aria-hidden="true"></span>
                    </div>
                </div>
                <div class="ln_solid"></div>
                <div class="form-group">
                    <div class="col-md-5 col-sm-9 col-xs-12 col-md-offset-5">
                        <button id="filter" type="submit" class="btn btn-success"><span class="fa fa-filter"></span> Filtrar</button>
                        <button id="export" type="submit" class="btn btn-info"><span class="fa fa-file-excel-o"></span> Export</button>
                    </div>
                </div>
                <input type="hidden" name="_token" value="{{csrf_token()}}">

            </form>
        </div>
    </div>
    <div class="row">
        <div class="x_panel">
            <div class="x_content">
                <table id="users" class="table table-stripped table-hovered">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>Fecha</th>
                        <!--<th>Transacción #</th>-->
                        <th>Tipo</th>
                        <th>Usuario</th>
                        <th>Currency</th>
                        <th>Estatus</th>
                        <th>Acciones</th>
                    </tr>
                    </thead>
                    <tbody>
                    @if(count($transactions) > 0)
                        @foreach($transactions as $transaction)
                            <input type="hidden" value="{{$transaction->account}}">
                            <tr>
<td>{{$transaction->id}}</td>
                                <td>{{$transaction->created_at_format}}</td>
                                <!--<td>{{ $transaction->transaction_date ?? $transaction->created_at_format }}</td>-->
                                <!--<td>{{($transaction->transaction_code)?$transaction->transaction_code:'N/A'}}</td>-->
                                <td>
                                    @if($transaction->type == 'buy')
                                        Compra
                                    @elseif($transaction->type == 'trade')
                                        Intercambio
                                    @else
                                        Retiro
                                    @endif
                                </td>
                                <td>{{$transaction->user->first_name.' '.$transaction->user->last_name}}</td>
                                <td>{{$transaction->currency->name}}</td>
                                <td>
                                    @if($transaction->status == 'pending')
                                        Pendiente
                                    @elseif($transaction->status == 'approved')
                                        Aprobado
                                    @else
                                        Cancelado
                                    @endif
                                </td>
                                <td>
                                    <div>
                                        <div class="btn-group">
                                            <a class="details btn btn-info" data-transaction="{{$transaction}}" title="Detalle"><span class="fa fa-info"></span> Detalle</a>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    @endif
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="modal fade" id="details" tabindex="-1" role="dialog" aria-labelledby="details">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Detalles de Transacción</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-6 col-xs-12">
                            <label for="d_ebits">Fecha de transaccion</label>
                            <input type="text" readonly class="form-control" value="" id="d_transaction">
                        </div>
                        <div class="col-sm-6 col-xs-12">
                            <label for="d_ebits">Hora de transaccion</label>
                            <input type="text" readonly class="form-control" value="" id="h_transaction">
                        </div>
                        <div class="col-sm-6 col-xs-12">
                            <label for="d_ebits">Nombre ref. de la transaccion</label>
                            <input type="text" readonly class="form-control" value="" id="ref_name_transaction">
                        </div>
                        <div class="col-sm-6 col-xs-12">
                            <label for="d_ebits">Banco ref. de la transaccion</label>
                            <input type="text" readonly class="form-control" value="" id="ref_bank_transaction">
                        </div>
                        <div class="col-sm-4 col-xs-12">
                            <label for="d_ebits">Ebits</label>
                            <input type="text" readonly class="form-control" value="" id="d_ebits">
                        </div>
                        <div class="col-sm-4 col-xs-12">
                            <label for="d_type">Tipo</label>
                            <input type="text" readonly class="form-control" value="" id="d_type">
                        </div>
                        <div class="col-sm-4 col-xs-12">
                            <label for="d_cost">Cuota</label>
                            <input type="text" readonly class="form-control" value="" id="d_fee">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <label for="d_currency">Currency</label>
                            <input type="text" readonly class="form-control" value="" id="d_currency">
                        </div>
                        <div class="col-md-4">
                            <label for="d_account_number">Número de Cuenta</label>
                            <input type="text" readonly class="form-control" value="" id="d_account_number">
                        </div>
                        <div class="col-md-4">
                            <label for="d_transaction_code">Número de Transacción</label>
                            <input type="text" readonly class="form-control" value="" id="d_transaction_code">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <label for="d_user">Usuario</label>
                            <input type="text" readonly class="form-control" value="" id="d_user">
                        </div>
                        <div class="col-md-4">
                            <label for="d_active">Estatus</label>
                            <input type="text" readonly class="form-control" value="" id="d_status">
                        </div>
                        <div class="col-md-4">
                            <label for="d_approved">URL Wallet</label>
                            <input type="text" readonly class="form-control" value="" id="d_url_wallet">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <label for="cur_destination">Currency Destino</label>
                            <input type="text" readonly class="form-control" value="" id="cur_destination">
                        </div>
                        <div class="col-md-4">
                            <label for="trade_amount">Cantidad a Intercambiar</label>
                            <input type="text" readonly class="form-control" value="" id="trade_amount">
                        </div>
                        <div class="col-md-4">
                            <label for="total_to_paid">Cantidad a Pagar</label>
                            <input type="text" readonly class="form-control" value="" id="total_to_paid">
                        </div>
                    </div>
                    <br>
                    <div class="row" id="divCryptoPaid" style="display: none">
                        <h3>Pagos con Criptomoneda</h3>
                        <div class="col-md-4">
                            <label for="currency_buy">Moneda empleada</label>
                            <input type="text" id="currency_buy" readonly class="form-control" value="">
                        </div>
                        <div class="col-md-4">
                            <label for="crypto_total_to_paid">Monto a Pagar (en Criptomoneda)</label>
                            <input type="text" id="crypto_total_to_paid" readonly value="" class="form-control">
                        </div>
                    </div>
                    <div id="image">
                        <h4>Imágen de la transacción:</h4>
                        <img id="transaction_image" src="" class="img-responsive" alt="transacction_image">
                    </div>
                    <div class="row" id="attachFile" style="margin-top:1rem;">
                      <div class="col-md-6">
                        <label>Adjuntar comprobante</label>
                        <input type="file" class="form-control" name="fileInput" id="fileInput" accept="image/jpeg,image/png">
                      </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <form class="clearfix" action="{{route('transactions.approve')}}" method="POST">
                        <input type="hidden" name="id" id="id_approved" value="">
                        <input type="hidden" name="file" id="id_file_approved" value="">
                        <input type="hidden" name="_token" value="{{csrf_token()}}">
                        <a class="approve btn btn-success" title="Aprobar"><span class="fa fa-thumbs-up"></span> Aprobar</a>
                    </form>
                    <form class="form-inline" action="{{route('transactions.cancel')}}" method="POST">
                        <input type="hidden" name="id" value="" id="id_deactivate">
                        <input type="hidden" name="file" id="id_file_cancel" value="">
                        <input type="hidden" name="_token" value="{{csrf_token()}}">
                        <a class="deactivate btn btn-danger" title="Cancelar"><span class="fa fa-thumbs-down"></span> Cancelar</a>
                    </form>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('js')
<!-- Parsley -->
<script src="{{URL::to('vendors/parsleyjs/dist/parsley.min.js')}}"></script>
<!-- Switchery -->
<script src="{{URL::to('vendors/switchery/dist/switchery.min.js')}}"></script>
<!-- Datatables -->
<script src="{{URL::to('vendors/datatables.net/js/jquery.dataTables.min.js')}}"></script>
<script src="{{URL::to('vendors/datatables.net-bs/js/dataTables.bootstrap.min.js')}}"></script>
<script src="{{URL::to('vendors/datatables.net-buttons/js/dataTables.buttons.min.js')}}"></script>
<script src="{{URL::to('vendors/datatables.net-buttons-bs/js/buttons.bootstrap.min.js')}}"></script>
<script src="{{URL::to('vendors/datatables.net-buttons/js/buttons.flash.min.js')}}"></script>
<script src="{{URL::to('vendors/datatables.net-buttons/js/buttons.html5.min.js')}}"></script>
<script src="{{URL::to('vendors/datatables.net-buttons/js/buttons.print.min.js')}}"></script>
<script src="{{URL::to('vendors/datatables.net-fixedheader/js/dataTables.fixedHeader.min.js')}}"></script>
<script src="{{URL::to('vendors/datatables.net-keytable/js/dataTables.keyTable.min.js')}}"></script>
<script src="{{URL::to('vendors/datatables.net-responsive/js/dataTables.responsive.min.js')}}"></script>
<script src="{{URL::to('vendors/datatables.net-responsive-bs/js/responsive.bootstrap.js')}}"></script>
<script src="{{URL::to('vendors/datatables.net-scroller/js/dataTables.scroller.min.js')}}"></script>
<script src="{{URL::to('vendors/moment/min/moment.min.js')}}"></script>
<script src="{{URL::to('vendors/bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js')}}"></script>
<script>
    var transaction = {};
    var table = {};

    $('#fileInput').bind('change', function (e) { //dynamic property binding
    handleImage(e);
    });

    function handleImage(e){
      // console.log(e.target.files);
      for(let i=0;i<e.target.files.length;i++){
        parseBase64(e.target.files[i]);
      }
    }
    function parseBase64(file){
      // console.log(file);
      let _this=this;
      var reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onloadend = function() {
        $('#id_file_approved').val(reader.result);
        $('#id_file_cancel').val(reader.result);
        console.log(reader.result);
        return reader.result;
      }
    }

    $(document).ready(function () {
        $('.datepicker').datetimepicker({
            format:'Y-MM-D'
        });
        $("#filter").click(function (e) {
            var action = '{{route('transactions.filter')}}';
            var form = $("#form-create");
            form.prop('action', action);
            form.submit();
        });

        $("#export").click(function (e) {
            var action = '{{route('transactions.getCsv')}}';
            var form = $("#form-create");
            form.prop('action', action);
            form.submit();
        });

        table = $("#users").DataTable({
            responsive:true,
            dom: "Bfrtip",
	    order: [[ 0, "desc" ]],
            buttons: [
                {
                    extend: "csv",
                    className: "btn-sm"
                },
                {
                    extend: "excel",
                    className: "btn-sm"
                }
            ],
        });
    });
    $(document).on("click", ".approve", function (e) {
        if (!confirm('¿Está seguro de aprobar ésta transacción?')) {
            e.preventDefault();
            return;
        }
        $(this).closest('form').submit();
    });
    $(document).on("click", ".deactivate", function (e) {
        if (!confirm('¿Está seguro de cancelar ésta transacción?')) {
            e.preventDefault();
            return;
        }
        $(this).closest('form').submit();
    });
    $(document).on("click", ".details", function () {
        transaction = $(this).data('transaction');
        if(transaction.account)
            $("#d_account_number").val(transaction.account.account_number);
        else
            $("#d_account_number").val('N/A');

        if(transaction.name_reference)
            $("#ref_name_transaction").val(transaction.name_reference);
        else
            $("#ref_name_transaction").val('N/A');

        if(transaction.bank)
            $("#ref_bank_transaction").val(transaction.bank.name);
        else
            $("#ref_bank_transaction").val('N/A');

        switch (transaction.status){
            case 'pending':
                $("#d_status").val('Pendiente');
                $('#attachFile').show();
                break;
            case 'approved':
                $("#d_status").val('Aprobado');
                $('#attachFile').hide();
                break;
            default:
                $("#d_status").val('Cancelado');
                $('#attachFile').hide();
                break;
        }
        $("#d_currency").val(transaction.currency.name);
        $("#d_ebits").val(transaction.amount);
        $("#d_transaction").val(transaction.date);
        $("#h_transaction").val(transaction.hour);
        switch(transaction.type){
            case 'buy':
                $("#d_type").val('Compra');
                break;
            case 'trade':
                $("#d_type").val('Intercambio');
                break;
            case 'discharge':
                $("#d_type").val('Retiro');
                break;
        }
        if(!transaction.currency_destination && transaction.type === 'discharge'){
            $("#cur_destination").val('Dolar');
        }else{
            $("#cur_destination").val((transaction.currency_destination)?transaction.currency_destination.name:'N/A')
        }
        if(transaction.currency_buy_id){
            $("#crypto_total_to_paid").val(transaction.total_to_paid);
            $("#currency_buy").val(transaction.currency_buy.name);
            $("#divCryptoPaid").show();
        }else{
            $("#divCryptoPaid").hide();
        }
        if(transaction.type === 'discharge'){
            $("#total_to_paid").val(parseFloat(transaction.amount)-parseFloat(transaction.fee));
        }else{
            $("#total_to_paid").val('N/A');
        }
        $("#trade_amount").val((transaction.trade_amount)?transaction.trade_amount:'N/A');
        $("#d_fee").val(transaction.fee);
        $("#d_url_wallet").val((transaction.url_wallet)?transaction.url_wallet:'N/A');
        var name = transaction.user.first_name+' '+transaction.user.last_name;
        $("#d_user").val(name);
        $("#d_transaction_code").val((transaction.transaction_code)?transaction.transaction_code:'N/A');
        $("#id_approved").val(transaction.id);
        $("#id_deactivate").val(transaction.id);
        if(transaction.image){
            $("#transaction_image").attr('src', transaction.image);
            $("#image").show();
        }else{
            $("#image").hide();
        }
        $("#details").modal();
    });
</script>
@endpush