@extends('wallet.layouts.master')
@section('title','Wallets')
@section('page-css')

@endsection
@section('content')
    <main class='w-100 p-3'>
        <input type="hidden" value="{{Auth::user()->id}}" id="user_id">
        <div class="heading d-flex justify-content-between align-items-center gap-3 px-1">
            <h2 class='fw-bold h1'>Wallets</h2>
        </div>
        <div>
            <div class="row flex-column-reverse flex-lg-row">
                <div class="col-lg-6 mt-3 mt-lg-0">
                    <div class="dark-card rounded-4 shadow p-24">
                        <h5 class='fw-bold mb-5'>Your Assets</h5>
                        <div class="text-center pb-2">
                            <h2 class='fw-bold'>${{round($total_usd,4)}}</h2>
                            <small class='text-clr fw-bold'>Total Amount</small>
                        </div>
                        <hr class='border border-primary border-opacity-50'>

                        <div class="selections pt-2">
                            @foreach($coins_balance as $coin)

                                <a href="{{route('deposit-history',['coin_id'=>$coin->coin_id,'user_id'=>$coin->user_id])}}">
                                    <div
                                        class="single-select ripple-element {{ $loop->first ? 'singleSelected' : '' }} ">
                                        <div class="left">
                                            <div class="image">
                                                <img src="{{asset($coin->coin->image ?? '')}}"
                                                     alt="{{$coin->coin->full_name ?? ''}}">
                                            </div>
                                            <div>
                                                <p class='fs-14 fw-600'>{{$coin->coin->full_name ?? ''}}</p>
                                                <small class='text-clr'>{{$coin->coin->short_name ?? ''}}</small>
                                            </div>
                                        </div>
                                        <div class="right text-end">
                                            <p class='fs-14 fw-600'>{{$coin->balance}}</p>
                                            {{--                                        <small class='text-clr fw-600'>$0.000</small>--}}
                                        </div>
                                    </div>
                                </a>
                            @endforeach
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="wallet-send-receive">
                        <div class='dark-card rounded-4 shadow'>
                            <nav>
                                <div class="nav nav-tabs border-secondary border-opacity-50" id="nav-tab"
                                     role="tablist">
                                    <button class="nav-link py-3 col-6 fs-14 fw-600 justify-content-center"
                                            id="nav-walletSend-tab" data-bs-toggle="tab"
                                            data-bs-target="#nav-walletSend" type="button" role="tab"
                                            aria-controls="nav-walletSend" aria-selected="true"> Send
                                    </button>
                                    <button class="nav-link active py-3 col-6 fs-14 fw-600 justify-content-center"
                                            id="nav-walletReceive-tab" data-bs-toggle="tab"
                                            data-bs-target="#nav-walletReceive" type="button" role="tab"
                                            aria-controls="nav-walletReceive" aria-selected="false"> Receive
                                    </button>
                                </div>
                            </nav>
                            <div class="tab-content mt-28" id="nav-tabContent">
                                <div class="px-3">
                                    @include('wallet.partials.deposit-addresses')
                                </div>

                                <input type="hidden" id="selected_coin_id"
                                       value="{{isset($coins_balance[0]) ? $coins_balance[0]->coin_id : ''}}">
                                <div class="tab-pane fade" id="nav-walletSend" role="tabpanel"
                                     aria-labelledby="nav-walletSend-tab" tabindex="0">
                                    <div class="row p-32 pt-0">
                                        <div class="col-12 no-user-select">
                                            <form id="send_withdrawal_request" class="position-relative">
                                                <div class="row">
                                                    <div class="col-12 mb-3">
                                                        <div class="floating-select">
                                                            <div class='rounded-3 d-flex'>
                                                                <div class='coin-selector2 w-100 px-0'>
                                                                    @if(isset($coins_balance[0]))
                                                                        <div class="selected2 border-0" data-coin="BTC">
                                                                            <img
                                                                                src="{{asset($coins_balance[0]->coin->image  ?? '')}}"
                                                                                alt="image">
                                                                            <div class="value">
                                                                                <span>{{$coins_balance[0]->coin->full_name ?? ''}}
                                                                                <small class='text-clr'>{{$coins_balance[0]->coin->short_name ?? ''}}</small>
                                                                                </span>
                                                                                <small>{{$coins_balance[0]->balance}} </small>
                                                                            </div>
                                                                            <span
                                                                                class="material-symbols-outlined arrowDown">keyboard_arrow_down</span>
                                                                        </div>
                                                                    @endif

                                                                    <ul class="cstm-dropdown2">
                                                                        <input type="text" class='w-100 coin-search'
                                                                               name="" id="coin-search"
                                                                               placeholder="Search for a coin...">
                                                                        @foreach($coins_balance as $coin)
                                                                            <li data-coin="{{$coin->coin->short_name ?? ''}}"
                                                                                data-name="{{$coin->coin->full_name ?? ''}}"
                                                                                data-price="{{$coin->balance}}"
                                                                                data-coin_id="{{$coin->coin_id}}">
                                                                                <img
                                                                                    src="{{asset($coin->coin->image ?? '')}}"
                                                                                    alt="image">
                                                                                <div class="value">
                                                                                    <span>{{$coin->coin->full_name ?? ''}}
                                                                                    <small class='text-clr'>{{$coin->coin->short_name ?? ''}}</small>
                                                                                    </span>
                                                                                    <small>{{$coin->balance}}</small>
                                                                                </div>
                                                                            </li>
                                                                        @endforeach
                                                                    </ul>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-12">
                                                        <div
                                                            class="floating-input sendnig-amount position-relative mt-3">
                                                            <input type="text" value=''
                                                                   class='fs-14 fw-600 text-clr pe-5 p-3' min='0'
                                                                   placeholder="" id="deposit_address">
                                                            <label for="deposit_address" class='text-clr'>Address/IBAN *</label>
                                                        </div>
                                                    </div>
                                                    <div class="col-12">
                                                        <div
                                                            class="floating-input sendnig-amount position-relative mt-3">
                                                            <input type="text" value=''
                                                                   class='fs-14 fw-600 text-clr pe-5 p-3' min='0'
                                                                   placeholder="" id="amount">
                                                            <label for="amount" class='text-clr'>Amount *</label>
                                                        </div>
                                                    </div>
                                                </div>

                                                <button class='button w-100 px-5 mt-3' id="send_withdrawal_request_btn"
                                                        type='submit'>Send Request
                                                </button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane fade show active dark-card rounded-4 shadow" id="nav-walletReceive"
                                     role="tabpanel" aria-labelledby="nav-walletReceive-tab" tabindex="0">
                                    <div class="row p-32 pt-0">
                                        <div class="col-12">
                                            <form id="get_wallet_address">
                                                <div class="row justify-content-center">
                                                    <div class=" col-lg-9 col-md-6">
                                                        <div class="floating-input sendnig-amount position-relative">
                                                            <img src="" id="wallet_qr_code">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-12 mb-3">
                                                        <div class="floating-select">
                                                            <div class='rounded-3 d-flex'>
                                                                <div class='coin-selector2 w-100 px-0'>
                                                                    @if(isset($coins_balance[0]))
                                                                        <div class="selected2 border-0" data-coin="BTC">
                                                                            <img
                                                                                src="{{asset($coins_balance[0]->coin->image  ?? '')}}"
                                                                                alt="image">
                                                                            <div class="value">
                                                                                <span>{{$coins_balance[0]->coin->full_name ?? ''}}
                                                                                <small class='text-clr'>{{$coins_balance[0]->coin->short_name ?? ''}}</small>
                                                                                </span>
                                                                                <small>{{$coins_balance[0]->balance}} </small>
                                                                            </div>
                                                                            <span
                                                                                class="material-symbols-outlined arrowDown">keyboard_arrow_down</span>
                                                                        </div>
                                                                    @endif

                                                                    <ul class="cstm-dropdown2">
                                                                        {{--                                                                        <input type="text" class='w-100 coin-search'--}}
                                                                        {{--                                                                               name="" id="coin-search"--}}
                                                                        {{--                                                                               placeholder="Search for a coin...">--}}
                                                                        @foreach($coins_balance as $coin)
                                                                            <li data-coin="{{$coin->coin->short_name ?? ''}}"
                                                                                data-name="{{$coin->coin->full_name ?? ''}}"
                                                                                data-price="{{$coin->balance}}"
                                                                                data-coin_id="{{$coin->coin_id}}">
                                                                                <img
                                                                                    src="{{asset($coin->coin->image ?? '')}}"
                                                                                    alt="image">
                                                                                <div class="value">
                                                                                    <span>{{$coin->coin->full_name ?? ''}}
                                                                                    <small class='text-clr'>{{$coin->coin->short_name ?? ''}}</small>
                                                                                    </span>
                                                                                    <small>{{$coin->balance}}</small>
                                                                                </div>
                                                                            </li>
                                                                        @endforeach
                                                                    </ul>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-12">
                                                        <div
                                                            class="floating-input sendnig-amount position-relative d-none "
                                                            id="wallet_address_div">
                                                            <input type="text" readonly value='Enter Address'
                                                                   class='fs-14 fw-600 text-clr pe-5 p-3' min='0'
                                                                   placeholder="" id="wallet_address">
                                                            <label for="sendAmount" class='text-clr'>Address *</label>
                                                            <span class="select-amount-coin text-primary crsr-pntr"
                                                                  onclick="copyToClipboard()">Copy</span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <button class='button w-100 px-5 mt-3' type='submit'
                                                        id="get_wallet_address_button">Get wallet address
                                                </button>
                                            </form>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
{{--        <div class="dark-card rounded-4 shadow mt-32">--}}
{{--            <h5 class='fw-bold p-24'>Recent Transactions</h5>--}}
{{--            <div class='no-found text-center opacity-50 pt-32 pb-32'>--}}
{{--                <img class='w-250 object-fit-contain' src="{{asset('wallet_d/assets/images/you_lost.png')}}"--}}
{{--                     alt="you lost">--}}
{{--                <h4 class='fw-bold'>Oops! Nothing is here.</h4>--}}
{{--                <p class='fw-500'>We couldn't find any transactions.</p>--}}
{{--            </div>--}}
{{--        </div>--}}
@endsection

@section('script')
    <script>
        function copyToClipboard() {
            var wallet_address = $("#wallet_address").val();
            navigator.clipboard.writeText(wallet_address).then(function () {
                Swal.fire({
                    icon: 'success',
                    title: 'Copied',
                    text: 'Address copied to clipboard!',
                });
            }).catch(function (error) {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Failed to copy the address.',
                });
            });
        }
    </script>

    <script>

        $(document).ready(function () {
            $("#wallets-page").addClass('active')
            $('.basic-single').select2();
        });

        $(document).ready(function () {
            const $selected = $('.selected');
            const $dropdown = $('.cstm-dropdown');
            const $coinItems = $('.cstm-dropdown li');
            $selected.on('click', function () {
                $dropdown.toggle();
            });
            $(document).on('click', function (e) {
                if (!$(e.target).closest('.coin-selector').length) {
                    $dropdown.hide();
                }
            });
            $coinItems.on('click', function () {
                const coinName = $(this).data('coin');
                const coinImg = $(this).find('img').attr('src');
                $selected.html(`<img src="${coinImg}" alt="image"> ${coinName}`);
                $dropdown.hide();
            });
        });

        $('.selections .single-select').click(function () {
            $('.selections .single-select').removeClass('singleSelected');
            $(this).addClass('singleSelected');
        });

        $(document).ready(function () {
            $('.ripple-element').on('click', function (e) {
                var $ripple = $('<span class="ripple"></span>');
                var offset = $(this).offset();
                var x = e.pageX - offset.left;
                var y = e.pageY - offset.top;

                $ripple.css({
                    width: $(this).width() * 2,
                    height: $(this).width() * 2,
                    left: x - $(this).width(),
                    top: y - $(this).width()
                }).appendTo($(this));

                setTimeout(function () {
                    $ripple.remove();
                }, 1000);
            });
        });

        $(document).ready(function () {
            $('#coin-search').on('keyup', function () {
                let searchValue = $(this).val().toLowerCase();
                $('.cstm-dropdown2 li').filter(function () {
                    let coin = $(this).data('coin').toLowerCase();
                    let name = $(this).data('name').toLowerCase();
                    let price = $(this).data('price').toString();
                    if (coin.indexOf(searchValue) > -1 || name.indexOf(searchValue) > -1 || price.indexOf(searchValue) > -1) {
                        $(this).show();
                    } else {
                        $(this).hide();
                    }
                });
            });
            $('.cstm-dropdown2 li').on('click', function () {
                let coinName = $(this).data('name');
                let coinPrice = $(this).data('price');
                let coinShort = $(this).data('coin');
                let coinID = $(this).data('coin_id');
                let coinImg = $(this).find('img').attr('src');
                $('.selected2').attr('data-coin', coinShort);
                $('.selected2 img').attr('src', coinImg);
                $('.selected2 .value span').text(coinName);
                $('.selected2 .value small').text(coinPrice);
                $('#selected_coin_id').val(coinID);
                $('.cstm-dropdown2').hide();
            });
            $('.selected2').on('click', function () {
                $('.cstm-dropdown2').toggle();
            });
            $(document).on('click', function (e) {
                if (!$(e.target).closest('.coin-selector2').length) {
                    $('.cstm-dropdown2').hide();
                }
            });
        });


    </script>

@endsection