@extends('user.layout.content')
@section('content')


        <!-- Page content -->
        <div class="page-content">
            <!-- Page title -->
            <div class="page-title">
                <div class="row justify-content-between align-items-center">
                    <div class="mb-3 col-md-6 mb-md-0">
                        <h5 class="mb-0 text-white h3 font-weight-400">Trading Account(s)</h5>
                    </div>
                </div>
            </div>
            <div>
            </div>    <div>
            </div>    <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="mb-5 row">
                                <div class="shadow-lg col-lg-12 card p-lg-3 p-sm-5">
                                    <h2 class="">Noble Negotiators Account manager</h2> <br>
                                    <div clas="well">
                                        <p class="text-justify ">Don’t have time to trade or learn how to
                                            trade?
                                            Our Account Management Service is The Best Profitable Trading Option for you,
                                            We can help you to manage your account in the financial MARKET with a simple
                                            subscription model.<br>
                                            <small>Terms and Conditions apply</small><br>Reach us at support@noblenegotiators.com
                                            for more info.
                                        </p>
                                    </div>
                                    <br>
                                    <div class="py-3">
                                        <a class="text-white btn btn-primary" data-toggle="modal" data-target="#submitmt4modal">
                                            Subscribe Now
                                        </a>
                                    </div>

                                </div>
                            </div>
                            <div class="p-2 mb-5 shadow p-md-4 row card ">
                                <div class="mb-3 col-12">
                                    <h5 class="">My Trading Accounts</h5>
                                </div>
                                <div class="col-12">
                                    <div class="table-responsive" data-example-id="hoverable-table">
                                        <table id="UserTable" class="table table-hover ">
                                            <thead>
                                            <tr>
                                                <th>Account ID</th>
                                                <th>Account Password</th>
                                                <th>Account Type</th>
                                                <th>Currency</th>
                                                <th>Leverage</th>
                                                <th>Server</th>
                                                <th>Duration</th>
                                                <th>Submitted at</th>
                                                <th>Started at</th>
                                                <th>Expiring at</th>
                                                <th>Status</th>
                                                <th>Action</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <td colspan="13" class="text-center">
                                                    No data available
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-12">
                                    <h3 class="">Connect to your trading account to monitor activities on
                                        your trading account(s).</h3>
                                    <iframe src="https://trade.mql5.com/trade" name="WebTrader" title="Subscription Trade" frameborder="0"
                                            style="display: block; border: none; height: 76vh; width: 80vw;"></iframe>
                                </div>
                            </div>
                            <!-- end of chart -->
                        </div>
                    </div>
                </div>
            </div>
            <!-- Submit MT4 MODAL modal -->
            <div id="submitmt4modal" class="modal fade" role="dialog">
                <div class="modal-dialog">
                    <!-- Modal content-->
                    <div class="modal-content">
                        <div class="modal-header bg-">
                            <h4 class="modal-title text-">Subscribe to subscription Trading</h4>
                            <button type="button" class="close text-" data-dismiss="modal">&times;</button>
                        </div>
                        <div class="modal-body bg-">
                            <form role="form" method="post" action="https://noblenegotiators.com/dashboard/savemt4details">
                                <input type="hidden" name="_token" value="OhkzVKBPWzQowkMSVSuTdX5GvAV8lkvjr1pjndKn">							<div class="form-row">
                                    <div class="form-group col-md-6">
                                        <label class="text-">Subscription Duration</label>
                                        <select class="form-control bg- text-" onchange="calcAmount(this)" name="duration" class="duration" id="duratn">
                                            <option value="default">Select duration</option>
                                            <option>Monthly</option>
                                            <option>Quaterly</option>
                                            <option>Yearly</option>
                                        </select>
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label class="text-">Amount to Pay</label>
                                        <input class="form-control subamount bg- text-" type="text" id="amount" disabled><br/>

                                    </div>
                                    <div class="form-group col-md-6">
                                        <label class="text- ">Account ID*:</label>
                                        <input class="form-control bg- text-"  type="text" name="userid" required>
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label class="text- ">Account Password*:</label>
                                        <input class="form-control bg- text-"  type="text" name="pswrd" required>
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label class="text- ">Account Type:</label>
                                        <input  class="form-control bg- text-" Placeholder="E.g. Standard" type="text" name="acntype" required>
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label class="text- ">Currency*:</label>
                                        <input  class="form-control bg- text-" Placeholder="E.g. USD" type="text" name="currency" required>
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label class="text- ">Leverage*:</label>
                                        <input  class="form-control bg- text-" Placeholder="E.g. 1:500"  type="text" name="leverage" required>
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label class="text- ">Server*:</label>
                                        <input  class="form-control bg- text-" Placeholder="E.g. HantecGlobal-live"  type="text" name="server" required>
                                    </div>
                                    <div class="form-group col-12">
                                        <small class="text-">Amount will be deducted from your Account balance</small>
                                    </div>
                                    <div class="form-group col-md-6">
                                        <input id="amountpay" type="hidden" name="amount">
                                        <input type="submit" class="btn btn-primary" value="Subscribe Now">
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /plans Modal -->
            <script type="text/javascript">
                function calcAmount(sub) {
                    if(sub.value=="Quaterly"){
                        var amount = document.getElementById('amount');
                        var amountpay = document.getElementById('amountpay');
                        amount.value = '$40';
                        amountpay.value = '40';
                    }if(sub.value=="Yearly"){
                        var amount = document.getElementById('amount');
                        var amountpay = document.getElementById('amountpay');
                        amount.value = '$80';
                        amountpay.value = '80';
                    }if(sub.value=="Monthly"){
                        var amount = document.getElementById('amount');
                        var amountpay = document.getElementById('amountpay');
                        amount.value = '$30';
                        amountpay.value = '30';
                    }
                }
            </script>    <script type="text/javascript">
                function deletemt4() {
                    swal({
                        title: "Error!",
                        text: "Your subscription has already started, send an Email to support@noblenegotiators.com to have your MT4 Details Deleted.",
                        icon: "error",
                        buttons: {
                            confirm: {
                                text: "Okay",
                                value: true,
                                visible: true,
                                className: "btn btn-danger",
                                closeModal: true
                            }
                        }
                    });
                }
            </script>
        </div>

@endsection