@extends('layouts.app')

@section('sidebar')
@include('sidebar')
@stop

@section('content')
<div class="m-subheader ">
    <div class="d-flex align-items-center">
        <div class="mr-auto">
            <h3 class="m-subheader__title ">Trade History ({{ Hasher::decode($id)}})</h3>
        </div>
        <div>
            <span class="m-subheader__daterange" id="daterangepicker">
                <span class="m-subheader__daterange-label">
                    <span class="m-subheader__daterange-title"></span>
                    <span class="m-subheader__daterange-date m--font-brand"></span>
                </span>
                <a href="#" class="btn btn-sm btn-brand m-btn m-btn--icon m-btn--icon-only m-btn--custom m-btn--pill">
                    <i class="la la-angle-down"></i>
                </a>
            </span>
        </div>
    </div>
</div>
<div class="m-content">
    <div class="m-portlet m-portlet--full-height ">
        <div class="m-portlet__body">
            <ul class="nav nav-tabs m-tabs-line m-tabs-line--danger m-tabs-line--2x" role="tablist">
                <li class="nav-item m-tabs__item">
                    <a class="nav-link m-tabs__link active" data-toggle="tab" href="#open-trade">Open Trades</a>
                </li>
                <li class="nav-item m-tabs__item">
                    <a class="nav-link m-tabs__link " data-toggle="tab" href="#close-trade">Close Trades</a>
                </li>
            </ul>

            <div class="tab-content">
                <div class="tab-pane active" id="open-trade" role="tabpanel">
                    <table class="m_datatable table table-striped- table-bordered table-hover table-checkable" id="open-trade-datatable">
                        <thead>
                            <tr>
                                <th>Order No</th>
                                <th>Open-Time</th>
                                <th>Type</th>
                                <th>Volume</th>
                                <th>Symbol</th>
                                <th>Open-Price</th>
                                <th>SL</th>
                                <th>TP</th>
                                <th>Close-Price</th>
                                <th>Commission</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>

                <div class="tab-pane " id="close-trade" role="tabpanel">
                    <table class="m_datatable table table-striped- table-bordered table-hover table-checkable" id="close-trade-datatable">
                        <thead>
                            <tr>
                                <th>Order No</th>
                                <th>Open-Time</th>
                                <th>Type</th>
                                <th>Volume</th>
                                <th>Symbol</th>
                                <th>Open-Price</th>
                                <th>SL</th>
                                <th>TP</th>
                                <th>Close-Price</th>
                                <th>Close-Time</th>
                                <th>Commission</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
{{ Html::script('custom/datatables/datatables.bundle.js') }}
<script type="text/javascript">
    (function($){
        var table = '';
		$(document).ready(function () {
            var closedTradeHistoryTable , startDateDataTable,endDateDataTable,openTradeHistoryTable;
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $('#open-trade-datatable').each(function() {
                openTradeHistoryTable = $(this).DataTable({
                    'responsive':!0,
                    'searchDelay':500,
                    'processing':!0,
                    "oLanguage": {
                        "sProcessing": '<div class="m-loader m-loader--brand m-loader--left"><span>Please wait...</span></div>',
                    },
                    "serverSide": true,
                    "ajax": {
                        "url": base_url+"/ib/open-tradeDatatable/{{$id}}",
                        "data": function(d) {
                            d.startDate = startDateDataTable;
                            d.endDate = endDateDataTable;
                        },
                        "type": "GET"
                    },
                    "order": [[ 0, "desc" ]],
                    "aoColumns": [
                        // { data: 'id', name: 'id', bSearchable: false, bVisible: false },
                        { data: 'TICKET', name: 'TICKET'},
                        { data: 'OPEN_TIME', name: 'OPEN_TIME'},
                        { data: 'CMD', name: 'CMD'},
                        { data: 'VOLUME', name: 'VOLUME'},
                        { data: 'SYMBOL', name: 'SYMBOL'},
                        { data: 'OPEN_PRICE', name: 'OPEN_PRICE'},
                        { data: 'SL', name: 'SL'},
                        { data: 'TP', name: 'TP'},
                        { data: 'CLOSE_PRICE', name: 'CLOSE_PRICE'},
                        { data: 'COMMISSION', name: 'COMMISSION'},
                    ]
                });
            });

            $('#close-trade-datatable').each(function() {
                closedTradeHistoryTable = $(this).DataTable({
                    'responsive':!0,
                    'searchDelay':500,
                    'processing':!0,
                    "oLanguage": {
                        "sProcessing": '<div class="m-loader m-loader--brand m-loader--left"><span>Please wait...</span></div>',
                    },
                    "serverSide": true,
                    "ajax": {
                        "url": base_url+"/ib/close-tradeDatatable/{{$id}}",
                        "data": function(d) {
                            d.startDate = startDateDataTable;
                            d.endDate = endDateDataTable;
                        },
                        "type": "GET"
                    },
                    "order": [[ 0, "desc" ]],
                    "aoColumns": [
                        { data: 'TICKET', name: 'TICKET'},
                        { data: 'OPEN_TIME', name: 'OPEN_TIME'},
                        { data: 'CMD', name: 'CMD'},
                        { data: 'VOLUME', name: 'VOLUME'},
                        { data: 'SYMBOL', name: 'SYMBOL'},
                        { data: 'OPEN_PRICE', name: 'OPEN_PRICE'},
                        { data: 'SL', name: 'SL'},
                        { data: 'TP', name: 'TP'},
                        { data: 'CLOSE_PRICE', name: 'CLOSE_PRICE'},
                        { data: 'CLOSE_TIME', name: 'CLOSE_TIME'},
                        { data: 'COMMISSION', name: 'COMMISSION'},
                    ]
                });
            });

            $(function() {
                if ($('#daterangepicker').length == 0) {
                    return;
                }
                var picker = $('#daterangepicker');
                var starts = moment();
                var start = moment('{{$startDate}}');
                var end = moment('{{$endDate}}');
                function cb(start, end) {
                    var title = '';
                    var range = '';
                    if (start.date() == moment().date()) {
                        title = 'Today:';
                        range = start.format('MMM D');
                    } else if (start.date() == moment().subtract(1, 'days').date()) {
                        title = 'Yesterday:';
                        range = start.format('MMM D');
                    } else {
                        range = start.format('D MMM YY') + ' - ' + end.format('D MMM YY');
                    }
                    picker.find('.m-subheader__daterange-date').html(range);
                    picker.find('m-subheader__daterange-title').html(title);
                    //reloadData(start,end);
                }

                picker.daterangepicker({
                    locale: {
                        format: 'DD/MM/YYYY'
                    },
                    // direction: mUtil.isRTL(),
                    startDate: start,
                    endDate: end,
                    opens: 'left',
                    ranges: {
                        'Today': [moment(), moment()],
                        'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                        'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                        'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                        'This Month': [moment().startOf('month'), moment().endOf('month')],
                        'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
                        'This Year': [moment().startOf('year'), moment().endOf('year')],
                        'Last Year': [moment().subtract(364, 'days'), moment()],
                        // 'Last Year': [moment().subtract(1, 'year').startOf('year'), moment().subtract(1, 'year').endOf('year')],
                        'All time': [moment().subtract(30, 'year').startOf('month'), moment().endOf('month')],
                    }
                }, cb);

                cb(start, end);
            });
            $('#daterangepicker').on('apply.daterangepicker', function(ev, picker) {

                startDateDataTable = picker.startDate.format('YYYY-MM-DD');
                endDateDataTable = picker.endDate.format('YYYY-MM-DD');
                closedTradeHistoryTable.draw();
                openTradeHistoryTable.draw();
            });
		});
	})(jQuery);
    eModal.setModalOptions({ backdrop: 'static', keyboard: false });

    /*** Start Date Range Filter ***/

    /*** End Date Range Filter ***/
</script>
@endsection