@extends('dashboard_layout')
<!-- end #header -->

<style type="text/css">
    .ui-autocomplete {
        height: 200px;
        overflow-y: scroll;
    }
    /* .loading {
        background: url('/storage/dashboard/assets/img/loading.gif') no-repeat;
    } */
</style>

<!-- begin #sidebar -->
@section('content')

<!-- Starts Main Container -->
<div class="main-container">
    <div class="common-page add-trans">

        @if(Session::has('submit-status'))
            <div class="alert alert-success"><p>{{ Session::get('submit-status') }}</p></div>
        @endif

        @if(Session::has('error-status'))
            <div class="alert alert-danger"><p>{{ Session::get('error-status') }}</p></div>
        @endif

        <div class="text-center">
            <div class="heading-panel">
                <h3>Add Transaction </h3>
            </div>
        </div>

        <!-- Starts Common Form layout -->
        <div class="common-panel">
            <div class="common-panel-title">
                <!-- <h4>Add Transaction</h4> -->
            </div>
            <div class="common-panel-body">
                <div class="common-panel-body-inner">
                    <div class="common-form-box">
                        <form name="add_transaction" method="POST" action="/insert_transaction" class="form">
                            {{ csrf_field() }}
                            <input type="hidden" name="group_id" id="group_id" value="{{base64_encode($group_id)}}" />
                            <input type="hidden" name="user_id" id="user_id" value="{{base64_encode(Auth::guard('crypto')->user()->id)}}" />
                            <input type="hidden" name="tran_type" id="tran_type" value="1" />
                            <div class="row">
                                <div class="form-group col-md-12">
                                    <label for="coin_full_name">Search for Coins</label>
                                    <input class="form-control" name="coin_full_name" id="coin_full_name" placeholder="Search for Coins" type="text" />
                                    <input type="hidden" name="coin_name" id="coin_name" />
                                    <input type="hidden" name="coin_id" id="coin_id">
                                    <span class="text-danger">{{ $errors->first('coin_full_name') }}</span>
                                </div>
                            </div>
                            <!-- <div id="loading"></div> -->
                            <div class="row">
                                <div class="col-md-12">
                                    <ul class="nav nav-tabs">
                                        <li class="active">
                                            <a style="padding: 6px 30px;" id="tab1" href="#use_100_chips" data-toggle="tab" title="Long Term Hold">
                                                <img src="{{url('/storage/dashboard/assets/img/chiplong.png')}}" alt="" class="icon-25" />
                                            </a>
                                        </li>
                                        <li class="">
                                            <a style="padding: 6px 30px;" id="tab2" href="#input_trade_targets" data-toggle="tab" title="Trade">
                                                <img src="{{url('/storage/dashboard/assets/img/chiptrade.png')}}" alt="" class="icon-25" />
                                            </a>
                                        </li>
                                        <li class="">
                                            <a style="padding: 6px 30px;" id="tab3" href="#watch" data-toggle="tab" title="Watch">
                                                <img src="{{url('/storage/dashboard/assets/img/chipeye.png')}}" alt="" class="icon-25" />
                                            </a>
                                        </li>
                                    </ul>
                                    <div class="tab-content">
                                        <div class="tab-pane fade active in row" id="use_100_chips">
                                            <div class="form-group col-md-6">
                                                <label><strong>Market Price BTC</strong> </label>
                                                <input class="form-control" name="tab1_current_price" id="tab1_current_price" placeholder="Market Price (BTC)" type="text" value="" readonly />
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label>Market Price (USD)</label>
                                                <input class="form-control" name="tab1_trade_price_usd" id="tab1_trade_price_usd" placeholder="Market Price (USD)" type="text" value="" readonly />
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label><strong>Buyin Price (BTC) *Required</strong> </label>
                                                <input class="form-control" name="tab1_trade_price_btc" id="tab1_trade_price_btc" placeholder="Buyin Price (BTC)" type="text" value="" />
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label>Actual Quantity</label>
                                                <input class="form-control" name="tab1_qty" id="tab1_qty" placeholder="Quantity" type="number" value="{{old('tab1_qty')}}" />
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label>Total Value (USD)</label>
                                                <input class="form-control" name="tab1_total_val_usd" id="tab1_total_val_usd" placeholder="Total Value (USD)" type="text" value="" readonly />
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label>Total Value (BTC)</label>
                                                <input class="form-control" name="tab1_total_val_btc" id="tab1_total_val_btc" placeholder="Total Value (BTC)" type="text" value="" readonly />
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label>Trade Date</label>
                                                <div class="input-group date-time" id="datepicker1">
                                                    <input type="text" class="form-control" placeholder="Trade Date" value="" name="tab1_trade_date" />
                                                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                                </div>
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label>Stoploss</label>
                                                <input class="form-control" name="tab1_stoploss" id="tab1_stoploss" placeholder="Stoploss" type="text" value="" />
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label>Notes</label>
                                                <textarea name="tab1_notes" class="form-control" rows="3" cols="" placeholder="Notes">{{old('tab1_notes')}}</textarea>
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label>No of Chips *Required</label>
                                                <input class="form-control chip_qty_validation_longterm" name="tab1_chip_qty" placeholder="No. of Chips" type="number" value="{{old('tab1_chip_qty') || 1}}" min="1" max="{{$remain_longterm_chip}}"  />
                                            </div>
                                        </div>
                                        <div class="tab-pane fade row" id="input_trade_targets">
                                            <div class="form-group col-md-6">
                                                <label>Market Price (BTC)</label>
                                                <input class="form-control" name="tab2_current_price" id="tab2_current_price" placeholder="Market Price (BTC)" type="text" value="" readonly />
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label>Market Price (USD)</label>
                                                <input class="form-control" name="tab2_trade_price_usd" id="tab2_trade_price_usd" placeholder="Market Price (USD)" type="text" value="" readonly />
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label><strong>Buyin Price (BTC) *Required</strong> </label>
                                                <input class="form-control" name="tab2_trade_price_btc" id="tab2_trade_price_btc" placeholder="Buyin Price (BTC)" type="text" value="" />
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label>Actual Quantity</label>
                                                <input class="form-control" name="tab2_qty" id="tab2_qty" placeholder="Quantity" type="number" value="{{old('tab2_qty')}}" />
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label>Total Value (USD)</label>
                                                <input class="form-control" name="tab2_total_val_usd" id="tab2_total_val_usd" placeholder="Total Value (USD)" type="text" value="" readonly />
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label>Total Value (BTC)</label>
                                                <input class="form-control" name="tab2_total_val_btc" id="tab2_total_val_btc" placeholder="Total Value (BTC)" type="text" value="" readonly />
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label>Trade Date</label>
                                                <div class="input-group date-time" id="datetimepicker1">
                                                    <input type="text" class="form-control" placeholder="Trade Date" value="" name="tab2_trade_date" />
                                                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                                </div>
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label>Stoploss</label>
                                                <input class="form-control" name="tab2_stoploss" id="tab2_stoploss" placeholder="Stoploss" type="text" value="" />
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label>Est. Time</label>
                                                <div class="clearfix">
                                                    <div class="pull-left m-r-10">
                                                        <select class="form-control" name="tab2_est_time_dy" id="tab2_est_time_dy">
                                                            @for($k = 1; $k <= 30; $k++)
                                                            <option value="{{$k}}">{{$k}}</option>
                                                            @endfor
                                                        </select>
                                                    </div>
                                                    <div class="pull-left m-r-10">
                                                        <span class="est-time-hr">Days</span>
                                                    </div>
                                                    <div class="clear-m-10"></div>
                                                    <div class="pull-left m-r-10">
                                                        <select class="form-control" name="tab2_est_time_hr" id="tab2_est_time_hr">
                                                            @for($i = 1; $i <= 12; $i++)
                                                            <option value="{{$i}}">{{$i}}</option>
                                                            @endfor
                                                        </select>
                                                    </div>
                                                    <div class="pull-left m-r-10">
                                                        <span class="est-time-hr">Hours</span>
                                                    </div>
                                                    <div class="clear-m-10"></div>
                                                    <div class="pull-left m-r-10">
                                                        <select class="form-control" name="tab2_est_time_mn" id="tab2_est_time_mn">
                                                            @for($j = 1; $j <= 60; $j++)
                                                            <option value="{{$j}}">{{$j}}</option>
                                                            @endfor
                                                        </select>
                                                    </div>
                                                    <div class="pull-left">
                                                        <span class="est-time-min">Mins</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label>Notes</label>
                                                <textarea name="tab2_notes" class="form-control" rows="3" cols="" placeholder="Notes">{{old('tab2_notes')}}</textarea>
                                            </div>
                                            <!-- <div class="form-group col-md-6">
                                                <label>Trade Type</label>
                                                <label><input type="radio" name="trade_type" value="long_term" checked="checked"><span style="font-weight: normal;"> 100 chips for long term</span></label>&nbsp;
                                                <label><input type="radio" name="trade_type" value="trade"><span style="font-weight: normal;"> 100 chips for trade</span></label>
                                            </div> -->
                                            <div class="form-group col-md-6">
                                                <label><strong>No of Chips *Required</strong> </label>
                                                <input class="form-control chip_qty_validation_trade" name="tab2_chip_qty" placeholder="No. of Chips" type="number" value="{{old('tab2_chip_qty') || 1}}" min="1" max="{{$remain_trade_chip}}" value="1" />
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label>Target 1</label>
                                                <input class="form-control" name="tab2_target1" placeholder="Target 1" type="text" value="{{old('tab2_target1')}}" />
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label>Target 2</label>
                                                <input class="form-control" name="tab2_target2" placeholder="Target 2" type="text" value="{{old('tab2_target2')}}" />
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label>Target 3</label>
                                                <input class="form-control" name="tab2_target3" placeholder="Target 3" type="text" value="{{old('tab2_target3')}}" />
                                            </div>
                                        </div>
                                        <div class="tab-pane fade row" id="watch">
                                            <div class="form-group" style="display: none;">
                                                <label>Buy in Price (BTC)</label>
                                                <input class="form-control" name="tab3_current_price" id="tab3_current_price" placeholder="Buy in Price (BTC)" type="text" value="" readonly />
                                            </div>
                                            <div class="form-group" style="display: none;">
                                                <label>Trade Price (USD)</label>
                                                <input class="form-control" name="tab3_trade_price_usd" id="tab3_trade_price_usd" placeholder="Trade Price (USD)" type="text" value="" readonly />
                                            </div>
                                            <div class="form-group" style="display: none;">
                                                <label>Trade Price (BTC)</label>
                                                <input class="form-control" name="tab3_trade_price_btc" id="tab3_trade_price_btc" placeholder="Trade Price (BTC)" type="text" value="" readonly />
                                            </div>
                                            <div class="form-group" style="display: none;">
                                                <label>Actual Quantity</label>
                                                <input class="form-control" name="tab3_qty" id="tab3_qty" placeholder="Quantity" type="number" value="{{old('tab3_qty')}}" />
                                            </div>
                                            <div class="form-group" style="display: none;">
                                                <label>Total Value (USD)</label>
                                                <input class="form-control" name="tab3_total_val_usd" id="tab3_total_val_usd" placeholder="Total Value (USD)" type="text" value="" readonly />
                                            </div>
                                            <div class="form-group" style="display: none;">
                                                <label>Total Value (BTC)</label>
                                                <input class="form-control" name="tab3_total_val_btc" id="tab3_total_val_btc" placeholder="Total Value (BTC)" type="text" value="" readonly />
                                            </div>
                                            <div class="form-group" style="display: none;">
                                                <label>Trade Date</label>
                                                <div class="input-group date" id="datepicker-disabled-past" data-date-format="dd M yyyy" data-date-end-date="Date.default">
                                                    <input type="text" class="form-control" placeholder="Trade Date" value="{{date('d M Y')}}" name="tab3_trade_date" />
                                                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                                </div>
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label>Notes</label>
                                                <textarea name="tab3_notes" class="form-control" rows="3" cols="" placeholder="Notes">{{old('tab3_notes')}}</textarea>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group col-md-12">
                                    <button type="submit" class="btn btn-primary common-btn">Submit</button>
                                    <button type="reset" class="btn btn-info">Cancel</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $( function() {
        var coinList = [
            @foreach($coin_list as $coin)
            {label:"{{$coin->full_name}}",value:"{{$coin->name}}",id:"{{$coin->id}}",coin_id:"{{$coin->coin_id}}",type:"{{$coin->type}}"},
            @endforeach
        ];
        $( "#coin_full_name" ).autocomplete({
            source: coinList,
            focus: function(event, ui) {
                $("#coin_full_name").val(ui.item.label);
                return false;
            },
            select: function(event, ui) {
                $("#coin_full_name").val(ui.item.label);
                $("#coin_name").val(ui.item.value);
                $("#coin_id").val(ui.item.id);
                var coin_id = ui.item.coin_id;
                var coin_name = $('#coin_name').val();
                var coin_type = ui.item.type;
                $.ajax({
                    url: '/get_price/'+coin_id+'/'+coin_name+'/'+coin_type,
                    type: 'GET',
                    //dataType: 'json',
                    beforeSend: function() {
                        /*setTimeout(function() {
                            $('#loading').addClass('loading');
                        }, 3000);*/
                    },
                    success: function(data) {
                        //alert(data);
                        var res = data.split("+");
                        $("#tab1_current_price").val(res[0]);
                        $("#tab2_current_price").val(res[0]);
                        $("#tab3_current_price").val(res[0]);
                        $("#tab1_trade_price_usd").val(res[1]);
                        $("#tab2_trade_price_usd").val(res[1]);
                        $("#tab3_trade_price_usd").val(res[1]);
                        $("#tab1_trade_price_btc").val(res[0]);
                        $("#tab2_trade_price_btc").val(res[0]);
                        $("#tab3_trade_price_btc").val(res[0]);
                    },
                    error: function() {
                        //alert('error');
                    },
                    complete: function() {
                        //$('#loading').removeClass('loading');
                    }
                });
            }
        });
    });

    $("#tab1").click(function() {
        var tran_type = 1;
        $('#tran_type').val(tran_type);
    });

    $("#tab2").click(function() {
        var tran_type = 2;
        $('#tran_type').val(tran_type);
    });

    $("#tab3").click(function() {
        var tran_type = 3;
        $('#tran_type').val(tran_type);
    });

    $("#tab1_qty").blur(function() {
        if ($("#tab1_qty").val() != '') {
            var trade_price_usd = parseFloat($("#tab1_trade_price_usd").val());
            var qty = parseFloat($("#tab1_qty").val());
            var tot_val_usd = (trade_price_usd * qty);
            var trade_price_btc = parseFloat($("#tab1_trade_price_btc").val());
            var tot_val_btc = (trade_price_btc * qty);
            $('#tab1_total_val_usd').val(tot_val_usd);
            $('#tab1_total_val_btc').val(tot_val_btc);
        }
    });

    $("#tab2_qty").blur(function() {
        if ($("#tab2_qty").val() != '') {
            var trade_price_usd = parseFloat($("#tab2_trade_price_usd").val());
            var qty = parseFloat($("#tab2_qty").val());
            var tot_val_usd = (trade_price_usd * qty);
            var trade_price_btc = parseFloat($("#tab2_trade_price_btc").val());
            var tot_val_btc = (trade_price_btc * qty);
            $('#tab2_total_val_usd').val(tot_val_usd);
            $('#tab2_total_val_btc').val(tot_val_btc);
        }
    });

    $("#tab3_qty").blur(function() {
        if ($("#tab3_qty").val() != '') {
            var trade_price_usd = parseFloat($("#tab3_trade_price_usd").val());
            var qty = parseFloat($("#tab3_qty").val());
            var tot_val_usd = (trade_price_usd * qty);
            var trade_price_btc = parseFloat($("#tab3_trade_price_btc").val());
            var tot_val_btc = (trade_price_btc * qty);
            $('#tab3_total_val_usd').val(tot_val_usd);
            $('#tab3_total_val_btc').val(tot_val_btc);
        }
    });

    $('.chip_qty_validation_longterm').on('change',function() {
        var value = $(this).val();
        if (value > {{$remain_longterm_chip}}) {
            alert ('You have consumed {{$tot_longterm_chip}} chips. Your remaining chip is {{$remain_longterm_chip}}');
            $(this).val('1');
            return false;
        } else if (value < 1) {
            alert ('Minimum 1 Chip must be added for Long Term Hold');
            $(this).val('1');
            return false;
        }
    });

    $('.chip_qty_validation_trade').on('change',function() {
        var value = $(this).val();
        if (value > {{$remain_trade_chip}}) {
            alert ('You have consumed {{$tot_trade_chip}} chips. Your remaining chip is {{$remain_trade_chip}}');
            $(this).val('1');
            return false;
        } else if (value < 1) {
            alert ('Minimum 1 Chip must be added for Trade');
            $(this).val('1');
            return false;
        }
    });
</script>
	
@endsection