@extends('wallet.layouts.master')
@section('title','Payments')
@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-center align-items-center gap-3 px-1">
            <h2 class='fw-bold text-center h1'>Payments</h2>
        </div>
        <div class="row justify-content-center mt-28">
            <div class="col-lg-7">
                <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="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 class="position-relative">
                                        <img class="w-100 position-absolute top-0 start-0 z-3 opacity-75 mt--6" src="{{asset('wallet_d/assets/images/coming-soon.jpeg')}}" alt="image soon">
                                        <div class="row justify-content-center opacity-50">
                                            <div class=" col-lg-9 col-md-6">
                                                <div class="floating-input sendnig-amount position-relative">
                                                    <input type="number" value='0.01'
                                                           class='fs-14 fw-600 text-clr pe-5 p-3' min='0'
                                                           placeholder="" id="sendAmount">
                                                    <label for="sendAmount" class='text-clr'>Amount *</label>
                                                    <span class="select-amount-coin">USDT</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row opacity-50">
                                            <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}}">
                                                                        <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">
                                                    <input type="text" value='Enter Address'
                                                           class='fs-14 fw-600 text-clr pe-5 p-3' min='0'
                                                           placeholder="" id="sendAmount">
                                                    <label for="sendAmount" class='text-clr'>To *</label>
                                                    <span class="select-amount-coin text-primary crsr-pntr">Paste</span>
                                                </div>
                                            </div>
                                        </div>
                                        <button class='button w-100 px-5 mt-3' type='submit' disabled>Send</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">
                                        <input type="hidden" id="selected_coin_id" value="{{isset($coins_balance[0]) ? $coins_balance[0]->coin_id : ''}}">
                                        <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 class="col-lg-5 mt-lg-0 mt-3">--}}
{{--                <div class="dark-card rounded-4 shadow h-100">--}}
{{--                    <h5 class='fw-bold p-24'>Payments</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>--}}
{{--            </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 () {
            $('.basic-single').select2();
            $("#payments-page").addClass('active')
        });

        $(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