@extends(template().'layout.master2')

@section('content2')

    <div class="dashboard-body-part">

        <div class="mobile-page-header">
            <h5 class="title">{{ __('Exchange') }}</h5>
            <a href="{{ route('user.dashboard') }}" class="back-btn"><i class="bi bi-arrow-left"></i> {{ __('Back') }}</a>
        </div>



        <style>
           

            .assets-modal
            {
                height: 100vh;
                flex-direction: row;
                justify-content: space-between;
                left: 0;
                margin-top: 0;
                position: fixed;
                top: 50px;
                z-index: 1000;
                align-items: stretch;
                background: #08090d;
               
                width: 100vw;
            }
            .assets-modal__left {
                
                padding: 50px 40px 150px 120px; 
                background: hsla(0,0%,100%,.01);
                
            }
            
            .assets-modal__header {
            padding: 0;
            }
            .assets-modal__footer, .assets-modal__header {
                padding: 0 15px;
                width: 100%;
            }
            .assets-modal__logo {
                display: block;
                opacity: 1;
            }
            .logo__name {
                color: #fff;
                font-size: 24px;
                font-weight: 500;
                line-height: 1;
                padding-left: 9px;
            }
            .assets-modal__title {
                font-size: 56px;
            }
            .assets-modal__title {
                color: #fff;
                font-size: 46px;
                font-weight: 500;
                letter-spacing: -.1px;
                line-height: 42px;
                margin-top: 35px;
                text-align: left;
            }
            .assets-modal__row {
                display: block;
            }
            .assets-modal__row {
                margin-top: 24px;
            }
            .assets-modal__link {
                font-size: 24px;
                font-weight: 500;
                line-height: 28px;
            }
            .assets-modal__link {
                color: #fff;
                font-style: normal;
                opacity: .7;
            }
            
            .assets-modal__link--disabled {
                cursor: default;
                opacity: .1;
            }
            .assets-modal__footer {
                margin-top: 10px;
                padding: 0;
                width: 100%;
            }
            .btn--blue:not(.btn--outline) {
                background-color: #315cf0;
            }
            .btn--full-width {
                width: 100%;
            }
            .btn--blue {
                color: #fff;
            }
            
            
            
            
            
            
            .assets-modal__right {
            
                padding: 100px 7rem 50px; 
            }
            .assets-modal__right {
                background: #08090d;
                
            }
            .assets-modal__body {
                margin: 0 auto;
                max-width: 560px;
                width: 100%;
            }
            .select {
                margin-bottom: 16px;
            }
            .select--label-bold .select__label {
                color: #fff;
                font-size: 1rem;
                font-weight: 500;
                margin-bottom: 12px;
            }
            .form-networks__label {
                color: #fff;
                font-size: 1rem;
                font-weight: 500;
                margin-bottom: 3px;
                margin-top: 5px;
            }
            .deposit-qr, .form-networks .tabs {
                -webkit-box-pack: center;
                justify-content: center;
            }
            .tabs {
                align-items: center;
                display: flex;
                gap: 18px;
                margin-bottom: 1.5rem;
                row-gap: 0.5rem;
            }
            .tabs:not(.tabs--disabled) .tabs__item--active {
                background: #315df1;
            }
            .tabs__item {
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                border: 1px solid hsla(0,0%,100%,.1);
                border-radius: 2px;
                color: #fff;
                cursor: pointer;
                display: flex;
                font-size: 14px;
                font-weight: 500;
                gap: 10px;
                justify-content: center;
                line-height: 16px;
                padding: 12px 32px;
                position: relative;
                text-align: center;
                transition: all .25s;
            }
            .btn--blue3:not(.btn--outline) {
                background-color: #00bdb0;
            }
            .btn--blue3 {
                color: #fff;
            }
            .assets-modal__close {
    cursor: pointer;
    position: absolute;
    right: 50px;
    top: 30px;
    font-size: 20px;
}
            
            @media (min-width: 320px) and (max-width: 767px) {
              
              /* CSS */
              .assets-modal {
                position: absolute;
              }
              .assets-modal__left {
                padding: 50px 40px 50px 30px;
            }
            .assets-modal__title {
                font-size: 36px;
            }
            .assets-modal__right {
                padding: 50px 3rem 50px;
                margin-bottom: 70px;
            }
              
            }
            
                    </style>







        

<div class="assets-modal">
    <a href="dashboard">
        <div class="assets-modal__close"><i class="fas fa-times-circle"></i></div>
    </a>
    <div class="row">
        <div class="col-lg-6 assets-modal__left">
            <div class="assets-modal__header">
            
                <div class="assets-modal__title">Exchange Crypto</div>
                <div class="assets-modal__row"><a href="deposit" class=" assets-modal__link "><span> Deposit Crypto </span></a></div>
                <div class="assets-modal__row"><a href="withdraw" class="assets-modal__link"><span> Withdraw Crypto </span></a></div>
                <div class="assets-modal__row"><a href="transfer-money" class="assets-modal__link"><span> Transfer Crypto </span></a></div>
                <div class="assets-modal__row"><a href="exchange" class="router-link-active assets-modal__link assets-modal__link--disabled"><span> Exchange Crypto </span></a></div>
            </div>
            <div class="assets-modal__footer"><a href="#" class="btn btn--blue btn--full-width"><span> View all exchanges </span></a></div>
        </div>
        <div class="col-lg-6 assets-modal__right">
           
            <div class="">
            
                <div class="assets-modal__body">
                    <div class="select__label">From Currency </div>
                <select class="form-control">
                    @foreach ($currencies as $currency)
                          <option value="{{ $currency->name  }}"> 
                            {{ $currency->name  }}</option>
                        @endforeach
                </select>
                    <div class="input input--medium input--label-bold pt-3 mb-5">
                        <div class="input__label"> Give </div>
                        <div class="input__wrapper">
                            <!---->
                            <div class="input__box">
                                <!----><input class="input__field form-control" id="input_705268" tabindex="0" type="text">
                                <!---->
                                <!---->
                            </div>
                        </div>
                    </div>
                   
                    <div class="select__label">To Currency </div>
                    <select id="currencySelect" class="form-control">
                        @foreach ($currencies as $currency)
                          <option value="{{ $currency->name  }}"> 
                            {{ $currency->name  }}</option>
                        @endforeach
                    </select>
                    <div class="input input--medium input--label-bold pt-3 mb-3">
                        <div class="input__label"> Receive </div>
                        <div class="input__wrapper">
                            <!---->
                            <div class="input__box">
                                <!----><input class="input__field form-control" id="input_424643" tabindex="0" type="text">
                                <!---->
                                <!---->
                            </div>
                        </div>
                    </div><button type="submit" class="btn btn--blue btn--full-width"><span> Continue </span></button></div>
            </div>
             
        </div>

        
    </div>
</div>
   


@endsection

@push('script')

<script>
    // Get the <select> element by its ID
    var select = document.getElementById('currencySelect');
  
    // Hide the first option (index 0)
    if (select.options.length > 1) {
    // Remove the first option (index 0)
    select.remove(0);
  }
  </script>

@endpush
