@extends('layouts.simple.master')

@section('title', 'Default')

@section('css')

@endsection

@section('style')
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/animate.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/datatables.css') }}">
@endsection

@section('breadcrumb-title')
    <h3>Accounts</h3>
@endsection

@section('breadcrumb-items')
    <li class="breadcrumb-item">Accounts</li>
@endsection

@section('content')
    <div class="container-fluid">
        <div class="col-sm-12 col-xxl-12 col-md-12">
            @if ($errors->has('error'))
                <div class="alert alert-danger dark alert-dismissible fade show">
                    <i class="icon-alert"></i>
                    <b>{{ $errors->first('error') }}</b>
                    <button class="btn-close" type="button" data-bs-dismiss="alert" aria-label="Close"
                        data-bs-original-title="" title=""></button>
                </div>
            @endif
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-11 col-10">
                            <ul class="nav nav-tabs nav-primary" id="pills-warningtab" role="tablist"
                                style="display: flex;">
                                <li class="nav-item"><a class="nav-link active" id="pills-warningContent-tab"
                                        data-bs-toggle="pill" href="#pills-warningtabContent" role="tab"
                                        aria-controls="pills-warninghome" aria-selected="true" data-bs-original-title=""
                                        title="">Live Accounts</a></li>
                                <li class="nav-item"><a class="nav-link" id="pills-warningprofile-tab" data-bs-toggle="pill"
                                        href="#pills-warningprofile" role="tab" aria-controls="pills-warningprofile"
                                        aria-selected="false" data-bs-original-title="" title="">Demo</a></li>
                            </ul>
                        </div>
                        <div class="col-md-1 col-1">
                            <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                                data-bs-target="#createaccount"><span class="fa fa-plus"></span></button>
                        </div>
                    </div>
                    <div class="tab-content" id="pills-warningtabContent">
                        <div class="table-responsive pt-5">
                            <table class="table table-hover tabel-border-secondary dataTable">
                                <thead>
                                    <tr>
                                        <th>Name</th>
                                        <th>Balance</th>
                                        <th>Laverage</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @if ($liveAccounts)
                                        @foreach ($liveAccounts as $account)
                                            <tr>
                                                <td style="display: flex;">
                                                    <span>
                                                        <img src="{{ asset('assets/meta_trader_5.jpg') }}" height="60"
                                                            width="160" class="m-r-10"
                                                            style="border:1px solid black; float:left">
                                                    </span>
                                                    <span>
                                                        <span style="display: flex;">
                                                            <span>{{ $account['ctidTraderAccountId'] }}</span>
                                                            <span class="badge bg-success badge-sm m-l-20">Live</span>
                                                        </span>
                                                        <span style="display: flex;">
                                                            <span>{{ $account['name'] }}</span>
                                                            <span class="badge badge-sm bg-warning m-l-10"
                                                                style="height:fit-content">
                                                                {{ ucfirst($account['account_type']) }}</span>
                                                        </span>
                                                    </span>
                                                </td>
                                                <td>{{ $account['balance'] }} USD</td>
                                                <td>{{ $account['leverage'] }}</td>
                                                <td style="width:20%" class="dropdown-basic">
                                                    <div style="display: flex;">
                                                        <div>
                                                            <a href="#" class="btn btn-primary rem_btn"
                                                                data-bs-toggle="modal"
                                                                data-bs-target="#trade_info">Trade</a>
                                                        </div>
                                                        <div class="">
                                                            <button type="button"
                                                                class="btn btn-custom btn-dark custom_main_dropdown_btn m-l-10 rem_btn"
                                                                style="padding-top:6px !important;padding-bottom:6px !important; padding-right:28px !important; padding-left:28px !important"><span
                                                                    class="fa fa-gear"></span></button>
                                                            <div class="custom_dropdown" style="display:none;">
                                                                <a href="#" class="btn-light custom_dropdown_btn"
                                                                    data-bs-original-title="" title="">Deposit</a>
                                                                <a href="#" class="btn-light custom_dropdown_btn"
                                                                    data-bs-original-title="" title="">Withdraw</a>
                                                                <a href="#" class="btn-light custom_dropdown_btn"
                                                                    data-bs-original-title="" title="">Transfer</a>
                                                                <a href="#" class="btn-light custom_dropdown_btn"
                                                                    data-bs-original-title="" title="">Credit
                                                                    Transfer</a>
                                                                <a href="#" class="btn-light custom_dropdown_btn"
                                                                    data-bs-original-title="" title="">Master
                                                                    Password</a>
                                                                <a href="#" class="btn-light custom_dropdown_btn"
                                                                    data-bs-original-title="" title="">Investor
                                                                    Password</a>
                                                                <a href="#" class="btn-light custom_dropdown_btn"
                                                                    data-bs-original-title="" title="">Change
                                                                    Laverage</a>
                                                                <a href="#" class="btn-light custom_dropdown_btn"
                                                                    data-bs-original-title="" title="">Ctrader</a>
                                                                <a href="#" class="btn-light custom_dropdown_btn"
                                                                    data-bs-original-title="" title="">Open
                                                                    Positions</a>
                                                                <a href="#" class="btn-light custom_dropdown_btn"
                                                                    data-bs-original-title="" title="">Account
                                                                    History</a>
                                                                <a href="#" class="btn-light custom_dropdown_btn"
                                                                    data-bs-original-title="" title="">Transaction
                                                                    History</a>
                                                                <a href="#" class="btn-light custom_dropdown_btn"
                                                                    data-bs-original-title="" title="">Delete</a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforeach
                                    @endif
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="tab-content fade" id="pills-warningprofile" role="tabpanel"
                        aria-labelledby="pills-warningprofile-tab">
                        <div class="table-responsive pt-5">
                            <table class="table table-hover tabel-border-secondary dataTable">
                                <thead>
                                    <tr>
                                        <th>Name</th>
                                        <th>Balance</th>
                                        <th>Laverage</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @if ($demoAccounts)
                                        @foreach ($demoAccounts as $account)
                                            <tr>
                                                <td style="display: flex;">
                                                    <span>
                                                        <img src="{{ asset('assets/meta_trader_5.jpg') }}" height="60"
                                                            width="160" class="m-r-10"
                                                            style="border:1px solid black; float:left">
                                                    </span>
                                                    <span>
                                                        <span style="display: flex;">
                                                            <span>{{ $account['traderloginid'] }}</span>
                                                        </span>
                                                        <span style="display: flex;">
                                                            <span>{{ $account['name'] }}</span>
                                                        </span>
                                                    </span>
                                                </td>
                                                <td>{{ $account['balance'] }} USD</td>
                                                <td>{{ $account['leverage'] }}</td>
                                                <td style="width:20%" class="dropdown-basic">
                                                    <div style="display: flex;">
                                                        <div>
                                                            <a href="#" class="btn btn-primary rem_btn"
                                                                data-bs-toggle="modal"
                                                                data-bs-target="#trade_info">Trade</a>
                                                        </div>
                                                        <div class="">
                                                            <button type="button"
                                                                class="btn btn-custom btn-dark custom_main_dropdown_btn m-l-10 rem_btn"
                                                                style="padding-top:6px !important;padding-bottom:6px !important; padding-right:28px !important; padding-left:28px !important"><span
                                                                    class="fa fa-gear"></span></button>
                                                            <div class="custom_dropdown" style="display:none;">
                                                                <a href="#" class="btn-light custom_dropdown_btn"
                                                                    data-bs-original-title="" title="">Deposit</a>
                                                                <a href="#" class="btn-light custom_dropdown_btn"
                                                                    data-bs-original-title="" title="">Withdraw</a>
                                                                <a href="#" class="btn-light custom_dropdown_btn"
                                                                    data-bs-original-title="" title="">Transfer</a>
                                                                <a href="#" class="btn-light custom_dropdown_btn"
                                                                    data-bs-original-title="" title="">Credit
                                                                    Transfer</a>
                                                                <a href="#" class="btn-light custom_dropdown_btn"
                                                                    data-bs-original-title="" title="">Master
                                                                    Password</a>
                                                                <a href="#" class="btn-light custom_dropdown_btn"
                                                                    data-bs-original-title="" title="">Investor
                                                                    Password</a>
                                                                <a href="#" class="btn-light custom_dropdown_btn"
                                                                    data-bs-original-title="" title="">Change
                                                                    Laverage</a>
                                                                <a href="#" class="btn-light custom_dropdown_btn"
                                                                    data-bs-original-title="" title="">Ctrader</a>
                                                                <a href="#" class="btn-light custom_dropdown_btn"
                                                                    data-bs-original-title="" title="">Open
                                                                    Positions</a>
                                                                <a href="#" class="btn-light custom_dropdown_btn"
                                                                    data-bs-original-title="" title="">Account
                                                                    History</a>
                                                                <a href="#" class="btn-light custom_dropdown_btn"
                                                                    data-bs-original-title="" title="">Transaction
                                                                    History</a>
                                                                <a href="#" class="btn-light custom_dropdown_btn"
                                                                    data-bs-original-title="" title="">Delete</a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforeach
                                    @endif
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="trade_info" tabindex="-1" role="dialog" aria-labelledby="trade_infoLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="trade_infoLabel">Trade</h5>
                    <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"
                        data-bs-original-title="" title=""></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6 col-6">Live Account Name</div>
                        <div class="col-md-6 col-6">Demo Account</div>
                        <div class="col-md-6 col-6">Account Type</div>
                        <div class="col-md-6 col-6">MT5</div>
                        <div class="col-md-6 col-6">Currency</div>
                        <div class="col-md-6 col-6">USD</div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary w-100" type="button" data-bs-dismiss="modal"
                        data-bs-original-title="" title=""><span class="fa fa-windows"> Meta Trader 5 For
                            Windows</span></button>
                    <button class="btn btn-primary w-100" type="button" data-bs-dismiss="modal"
                        data-bs-original-title="" title=""><span class="fa fa-apple"> Meta Trader 5 For
                            iOS</span></button>
                    <button class="btn btn-primary w-100" type="button" data-bs-dismiss="modal"
                        data-bs-original-title="" title=""><span class="fa fa-android"> Meta Trader 5 For
                            Android</span></button>
                </div>
            </div>
        </div>
    </div>
    <style>
        .switch-state {
            background-color: #c8c8c8;
        }
    </style>
    <div class="modal fade" id="createaccount" tabindex="-1" role="dialog" aria-labelledby="trade_infoLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="trade_infoLabel">New Account</h5>
                    <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"
                        data-bs-original-title="" title=""></button>
                </div>
                <form method="post" action="{{ route('createAccount') }}">
                    @csrf
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-12 p-2">
                                <label for="">Choose Platform:</label><br>
                                <img src="{{ asset('assets/ctrader.png') }}" height="75" width="150"
                                    style="border:2px solid orange">
                            </div>
                            <div class="col-md-12">
                                <label>Enviornment</label>
                                <select name="environmentName" class="form-control envtype">
                                    <option value="demo">Demo</option>
                                    <option value="live">Live</option>
                                </select>
                            </div>
                            <div class="col-md-12 m-t-20">
                                <label>Account Type</label>
                                <select name="account_type" class="form-control" onchange="deposit_limit(this)">
                                    <option value="micro" data-deposit="$10">Micro</option>
                                    <option value="standart" data-deposit="$100">Standart</option>
                                    <option value="ecn" data-deposit="$500">ECN</option>
                                    <option value="ecn_pro" data-deposit="$5000">ECN Pro</option>
                                </select>
                                <p id="deposit_limit" class="text-primary m-t-5">Minimum account deposit limit is $10</p>
                            </div>
                            <div class="col-md-12">
                                <label for="">Nick Name</label>
                                <input type="text" name="nickname" class="form-control" placeholder="Nick Name" required>
                            </div>

                            <div class="col-md-12">
                                <label>Laverage</label>
                                <select name="laverage" class="form-control">
                                    <option>1:10</option>
                                    <option>1:50</option>
                                    <option>1:100</option>
                                    <option>1:200</option>
                                    <option>1:500</option>
                                    <option>1:1000</option>
                                </select>
                            </div>
                            <div class="col-md-12 bal">
                                <label>Starting Amount</label>
                                <select name="startingbalance" class="form-control ">
                                    <option>200</option>
                                    <option>500</option>
                                    <option>1000</option>
                                    <option>1000</option>
                                    <option>50000</option>
                                </select>
                            </div>

                            <div class="col-md-12 pt-3">
                                <div class="media mb-2">
                                    <div class="media-body text-end icon-state">
                                        <label class="switch">
                                            <input type="checkbox" id="terms" data-bs-original-title=""
                                                title=""><span class="switch-state"></span>
                                        </label>
                                    </div>
                                    <label class="col-form-label m-r-10">Agree to terms and conditions</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-primary" type="submit" id="createbtn" disabled> Create Account</button>
                        <button class="btn btn-danger" type="button" data-bs-dismiss="modal" data-bs-original-title=""
                            title=""> Close</button>
                    </div>
                </form>
            </div>
        </div>
    </div>


    <script type="text/javascript">
        $(document).on('change', '.envtype', function() {
            $('.bal').hide()
            if ($(this).find('option:selected').val() == 'demo') {
                $('.bal').show()
            }
        })
        var session_layout = `{{ session()->get('layout') }}`;

        document.addEventListener('DOMContentLoaded', function() {
            // Disable buttons within #pills-warningprofile
            var warningProfileButtons = document.querySelectorAll('#pills-warningprofile .rem_btn');
            warningProfileButtons.forEach(function(button) {
                button.disabled = true;
            });
        });

        document.getElementById('pills-warningContent-tab').addEventListener('click', function() {
            document.getElementById('pills-warningtabContent').style.display = 'block';
            document.getElementById('pills-warningprofile').style.display = 'none';

            var warningTabContentButtons = document.querySelectorAll('#pills-warningtabContent .rem_btn');
            warningTabContentButtons.forEach(function(button) {
                button.disabled = false;
            });

            var warningProfileButtons = document.querySelectorAll('#pills-warningprofile .rem_btn');
            warningProfileButtons.forEach(function(button) {
                button.disabled = true;
            });
        });

        document.getElementById('pills-warningprofile-tab').addEventListener('click', function() {
            document.getElementById('pills-warningtabContent').style.display = 'none';
            document.getElementById('pills-warningprofile').style.display = 'block';

            var warningTabContentButtons = document.querySelectorAll('#pills-warningtabContent .rem_btn');
            warningTabContentButtons.forEach(function(button) {
                button.disabled = true;
            });

            var warningProfileButtons = document.querySelectorAll('#pills-warningprofile .rem_btn');
            warningProfileButtons.forEach(function(button) {
                button.disabled = false;
            });
        });
        document.getElementById('terms').addEventListener('change', function() {
            var createBtn = document.getElementById('createbtn');
            if (this.checked) {
                createBtn.disabled = false;
            } else {
                createBtn.disabled = true;
            }
        });

        function deposit_limit(obj) {
            var limit = $(obj).find('option:selected').data('deposit');
            $('#deposit_limit').html('Minimum account deposit limit is ' + limit);
        }
    </script>
@endsection

@section('script')
    <script src="{{ asset('assets/js/datatable/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/js/datatable/datatables/datatable.custom.js') }}"></script>
    <script>
        $('.dataTable').dataTable();
    </script>
@endsection