@extends('dashboard.layout', ['user'=>$viewer, 'id' => 20])

@section('dashboard')

<div class="container">

    <section-header title="My Information"></section-header>

    <div class="row mt-5 align-items-center">
        <div class="col-12 col-md-3">
            <div>
                <label class="form-label">
                    First name
                </label>
                <input id="phone" type="text" disabled style="background-color: #1C1538;" placeholder="firstname" class="form-control @error('phone') is-invalid @enderror" name="firstname" value="{{ old('firstname', $user->firstname) }}" required autocomplete="firstname">
            </div>
        </div>
        <div class="col-12 col-md-3 mt-3 mt-md-0">
            <div>
                <label class="form-label">
                    Last name
                </label>
                <input id="phone" type="text" disabled style="background-color: #1C1538;" placeholder="lastname" class="form-control @error('phone') is-invalid @enderror" name="lastname" value="{{ old('lastname', $user->lastname) }}" required autocomplete="lastname">
                @error('lastname')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
                @enderror
            </div>
        </div>
        <div class="col-12 col-md-5 mt-3 mt-md-0">
            <div>
                <label class="form-label">
                    Email address
                </label>
                <input id="email" type="email" disabled style="background-color: #1C1538;" placeholder="Email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email', $user->email) }}" required autocomplete="email">
                @error('email')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
                @enderror
            </div>
        </div>
        <div class="col-12 col-md-1 align-self-end mt-4 text-center" style="padding-bottom: 10px;">
            @if ($user->admin_test === 0)
            <a class="mf_btn" href={{ route('edit.customer.information') }} role="button">Edit</a>
            @else
            <button class="mf_btn" disabled role="button">Edit</button>
            @endif
        </div>
    </div>

    @if ($user->premium_user === 1)
    <section-header title="Notification" premium="true"></section-header>
    @endif

    <section-header title="My Exchanges"></section-header>

    <dashboard-profile-api-key :user="{{json_encode($user)}}" :user_apis="{{json_encode($user_apis)}}" :platforms="{{json_encode($platforms)}}" token="{{ csrf_token() }}" route="{{ route('user_apis.store')}}" routedeltawallet="{{ route('user_delta_wallet.store')}}">
    </dashboard-profile-api-key>

    <section-header title="Manage my profile"></section-header>

    <!-- <div class="row mt-5 justify-content-between align-items-center">
        <h2 style="text-decoration: underline;">Auto Trading</h2>
        <div class="col-md-6 col-sm-12">
            <div class="align-items-center">
                <h4 class="mb-1">
                    <div> You can activate the autotrading mode.</div>
                    <div>Any trade above a personalized threshold will automatically trigger a trade if you have enough cash available.</div>
                </h4>
            </div>
        </div>
        <div class="col-md-6 col-sm-12 mt-4 mt-md-0">
            <div class="justify-content-lg-end justify-content-center" style="display: flex;align-items: center;">
                <form id="formAutoTrade" method="POST" action="{{ route('set_auto_trading') }}">
                    @csrf
                    @if ($user->auto_trade == 0)
                    <input id="auto_trade_mode" type="number" name="auto_trade_mode" hidden required value="1">
                    <div style="display: grid;grid-template-columns: repeat(2,auto);align-items: center;grid-column-gap: 5px;">
                        <div>Auto trading is OFF</div>
                        <div>
                            <label class="form-label">
                                Threshold
                            </label>
                            <input id="threshold" type="number" oninvalid="this.setCustomValidity('Threshold is missing')" style="background-color: #1C1538;" class="form-control" name="threshold" required value="{{$user->trade_threshold}}">
                            <div id="thresholdError" style="font-size: 12px;color: #E63757;margin-top: 10px;"></div>
                            <div class="form-check form-switch">
                                <input class="form-check-input" onchange="submitform()" type="checkbox" id="flexSwitchCheckDefault">
                            </div>
                        </div>
                    </div>
                    @else
                    <div style="display: grid;grid-template-columns: repeat(2, auto);align-items: center;grid-column-gap: 5px;">
                        <input id="auto_trade_mode" type="number" name="auto_trade_mode" hidden required value="0">
                        <div>
                            <div>Auto trading is ON</div>
                            <div style="margin-top: 15px;">Threshold : {{$user->trade_threshold}}% <span class="bi bi-info-circle fs-5" data-toggle="tooltip" data-placement="top" data-html title="APY level above which we will automatically trade on your account if you have cash available"></span>
                                <div id="showThresh" style="display: flex;display: none">
                                    <input id="threshold" type="number" style="background-color: #1C1538;width:50px; margin-right: 5px;text-align: center;padding:0px" class="form-control" name="threshold" required value="{{$user->trade_threshold}}">
                                    <button style="align-self: center;" class="mf_btn_outline btn-sm">Save</button>
                                </div>
                            </div>
                        </div>
                        <div style="height: 100%;">
                            <div class="form-check form-switch">
                                <input class="form-check-input" onchange="document.getElementById('formAutoTrade').submit()" type="checkbox" checked id="flexSwitchCheckDefault">
                            </div>
                            <div>
                                <a type="button" style="margin-top: 10px;" onclick="editTresh()" id="btnEditTresh" class="mf_btn btn-sm">Edit</a>
                            </div>
                        </div>
                    </div>
                    @endif
                    <script type="text/javascript">
                        function editTresh() {
                            let o = document.getElementById('showThresh');
                            let te = document.getElementById('auto_trade_mode');
                            let btnEdit = document.getElementById('btnEditTresh');
                            if (document.getElementById('showThresh').style.display === 'none') {
                                document.getElementById('showThresh').style.display = 'flex';
                                btnEdit.innerText = 'Close'
                                te.value = '1'
                            } else {
                                document.getElementById('showThresh').style.display = 'none'
                                te.value = '0'
                                btnEdit.innerText = 'Edit'
                            }
                        }

                        function submitform() {
                            let form = document.getElementById('formAutoTrade');
                            let cha = document.getElementById('thresholdError')
                            if (form.threshold.value) {
                                form.submit();
                            } else {
                                form.checkValidity()
                                cha.innerHTML = form.threshold.validationMessage
                                form.flexSwitchCheckDefault.checked = false
                            }
                            return false
                        }
                    </script>
                </form>
            </div>
        </div>
    </div> -->
    <div class="mf_bg_dark mt-5 mb-5 p-4">
        <div class="row justify-content-between align-items-center">
            <div class=" col-sm-12">
                <div class="row align-items-center">
                    <h2 style="text-decoration: underline;">Your Account</h2>
                </div>
            </div>
            <div class="col-md-6 col-sm-12">
                <div class="row align-items-center">
                    <h4 class="mb-1">
                        Are your sure you want to delete your account ?
                    </h4>
                    <h4 class="mb-1">
                        All your previous information will be deleted and you won't be able to access suggestions
                    </h4>
                </div>
            </div>
            <div class="col-md-6 col-sm-12">
                <div class="text-lg-end text-center" style="margin-top: 15px;margin-bottom: 15px; ">
                    @if ($user->admin_test === 0)
                    <a class="mf_btn_danger triggerspinner" href={{ route('delete.customer') }} role="button">Delete account</a>
                    @else
                    <button class="mf_btn_danger" disabled role="button">Delete account</button>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

@endsection