@extends('layouts.backend')
<style media="screen">
    .portfolioList {
        background: #f6f6f6;
        height: auto;
        border-radius: 10px;
        margin-bottom: 20px;
        padding: 6px;
    }

    #listBalance {
        padding: 0px;
        margin: 0px;
        list-style: none;
        height: 40px;
    }

    #listBalance li {
        float: left;
        margin: 0 auto;
        padding: 9px 10px;
    }

    /* Slideshow container */
    .slideshow-container {
        max-width: 1000px;
        position: relative;
        margin: auto;
    }

    /* Hide the images by default */
    .mySlides {
        display: none;
    }

    /* Next & previous buttons */
    .prev,
    .next {
        cursor: pointer;
        position: absolute;
        top: 50%;
        width: auto;
        margin-top: -22px;
        padding: 0px 13px;
        color: black;
        font-weight: bold;
        font-size: 18px;
        transition: 0.6s ease;
        border-radius: 0 3px 3px 0;
    }

    .prev {
        left: 0;
    }

    /* Position the "next button" to the right */
    .next {
        right: 0;
        border-radius: 3px 0 0 3px;
    }

    /* On hover, add a black background color with a little bit see-through */
    .prev:hover,
    .next:hover {
        background-color: rgba(0, 0, 0, 0.8);
    }

    /* Caption text */
    .text {
        color: #f2f2f2;
        font-size: 15px;
        padding: 8px 12px;
        position: absolute;
        bottom: 8px;
        width: 100%;
        text-align: center;
    }

    /* Number text (1/3 etc) */
    .numbertext {
        color: #f2f2f2;
        font-size: 12px;
        padding: 8px 12px;
        position: absolute;
        top: 0;
    }

    /* The dots/bullets/indicators */
    .dot {
        cursor: pointer;
        height: 15px;
        width: 15px;
        margin: 0 2px;
        background-color: #bbb;
        border-radius: 50%;
        display: inline-block;
        transition: background-color 0.6s ease;
    }

    .btn-group>.btn {
        margin: 0px;
    }

    .active,
    .dot:hover {
        background-color: #717171;
    }

    /* Fading animation */
    .fade {
        opacity: 1 !important;
    }

    .fade {
        -webkit-animation-name: fade;
        -webkit-animation-duration: 1.5s;
        animation-name: fade;
        animation-duration: 1.5s;
    }

    @-webkit-keyframes fade {
        from {
            opacity: .4
        }

        to {
            opacity: 1
        }
    }

    @keyframes fade {
        from {
            opacity: .4
        }

        to {
            opacity: 1
        }
    }
</style>
@inject('app', 'Illuminate\Support\Facades\App')
@section('content')
<div class="row" style='display:none;'>
    <div class="col-md-12 panel panel-alternative">
        <div class="row panel-heading">
            <div class="col-sm-8 my-auto text-uppercase">
                @if($app::isLocale('en'))
                <h4>{{__('messages.historical')}} {{__('messages.chart')}}</h4>
                @else
                <h4>{{__('messages.chart')}} {{__('messages.historical')}}</h4>
                @endif
            </div>
            <div class="col-sm-4">
                <div class="row justify-content-end" style="padding-right: 15px;">
                    <button type="button" class="btn btn-alternative btn-chart"
                        id="daily">{{__('messages.daily')}}</button>
                    <button type="button" class="btn btn-alternative btn-chart"
                        id="weekly">{{__('messages.weekly')}}</button>
                    <button type="button" class="btn btn-alternative btn-chart"
                        id="monthly">{{__('messages.monthly')}}</button>
                </div>
            </div>
        </div>
        <div class="panel-body">
            <div id="historicalChart" style="height: 370px; width: 100%;">
            </div>
        </div>
    </div>
</div>
<button type="button" class="btn btn-alternative verticaldiv" id="newsButton" data-toggle="modal" data-target="#modalReleases"
    value="Go!" style="margin-left: 15px">
    <div style="writing-mode:vertical-lr;">
        <h5>{{__('messages.newsletter')}} <i class="fas fa-arrow-circle-right"></i></h5>
    </div>
</button>

<div class="balance row text-center justify-content-center">
    <div class="col-4 col-lg-3 col-xl-2">
        <div>
            <img class="img-fluid" src="{{ url('/') }}/img/icons/BTC.png" height="200" width="auto" />
            <p id="btcAmount"></p>
            <h4>{{__('messages.total')}} BTC</h4>
        </div>
    </div>
    <div class="col-4 col-lg-3 col-xl-2">
        <div>
            <img class="img-fluid" src="{{ url('/') }}/img/icons/currencies-circle/USD.png" height="200" width="auto" />
            <p id="usdAmount"></p>
            <h4>{{__('messages.total')}} USD</h4>
        </div>
    </div>
</div>
<div class="row justify-content-center mt-5">
    <div class="horizontal-line"></div>
</div>
<div class="col-md-12">
    <div class="row mt-5">
        <div class="col-sm-12 col-md-8 col-lg-8">
            <div class="row">
                <div class="col-sm-12 col-md-12">
                    <div class="panel panel-alternative panel-alternative-blank">
                        <div class="panel-heading text-center text-uppercase">
                            <h5 class="font-weight-bold">{{__('messages.portfolio')}}</h5>
                        </div>
                        <div class="panel-body myPortfolio porta text-start ">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-12 col-md-4 col-lg-4">
            <div class="panel panel-alternative panel-alternative-blank mt-5">
                <div class="panel-body">
                    <div id="chartContainer" style="height: 300px; width: 100%;"></div>
                </div>
            </div>
        </div>
    </div>
</div>
@include('modals.LevelOne')
@include('modals.Releases')

@endsection