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

@endsection
@section('content')
    <div class="mt-32 px-1 mb-3">
            <h2 class='fw-bold h1 col-lg-9 mx-auto'>Swap Crypto</h2>
        </div>
        <div>
            <div class="row justify-content-center">
                <div class="col-lg-9">
                    <div class="wallet-send-receive">
                        <div class='dark-card rounded-4 shadow'>
                            <div>
                                <div class="row p-32">
                                    <div class="col-12">

                                        <div class="row">
                                            <div class="col-12 mb-3">
                                                <div class="floating-select position-relative">
                                                    <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-coin_id="{{$coin->coin_id}}"
                                                                        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>
                                                    <span
                                                        class="dark-card px-2 fw-bold fs-14 text-clr position-absolute ms-3"
                                                        style="top: -15px">From</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div
                                            class='crsr-pntr ripple-element bg-line-dark w-40 h-40 d-flex align-items-center justify-content-center rounded-5 no-user-select mx-auto mt-3'>
                                            <i class="material-symbols-outlined text-clr">swap_vert</i>
                                        </div>

                                    </div>
                                </div>
                            </div>
                            <div>
                                <div class="row p-32 pt-0">
                                    <div class="col-12">
                                        <form id="swap_coins">
                                            <input type="hidden" id="from_coin_id"
                                                   value="{{isset($coins_balance[0]) ? $coins_balance[0]->coin_id : ''}}">
                                            <input type="hidden" id="to_coin_id"
                                                   value="{{isset($coins_balance[0]) ? $coins_balance[0]->coin_id : ''}}">
                                            <div class="row">
                                                <div class="col-12 mb-3">
                                                    <div class="floating-select position-relative">
                                                        <div class='rounded-3 d-flex'>
                                                            <div class='coin-selector3 w-100 px-0'>

                                                                @if(isset($coins_balance[0]))
                                                                    <div class="selected3 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-dropdown3">
                                                                    {{--                                                                        <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>
                                                        <span
                                                            class="dark-card px-2 fw-bold fs-14 text-clr position-absolute ms-3"
                                                            style="top: -15px">To</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-12 mt-3">
                                                <div class="floating-input sendnig-amount position-relative">
                                                    <input
                                                        type="number"
                                                        value="0"
                                                        class="fs-14 fw-600 text-clr pe-5 p-3"
                                                        placeholder=""
                                                        id="amount"
                                                        min="0"
                                                        step="0.00000001"
                                                        oninput="this.value = this.value < 0 ? 0 : this.value"
                                                    >
                                                    <label for="amount" class="text-clr">Amount *</label>
                                                </div>

                                            </div>
                                            <div class="col-md-4 mx-auto">
                                                <button class='button w-100 px-5 mt-3 ripple-element' type='submit'
                                                        id="swap_button">Swap
                                                </button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </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();
        });

        $(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);
                $('#from_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();
                }
            });
        });

        $(document).ready(function () {
            $('#coin-search3').on('keyup', function () {
                let searchValue = $(this).val().toLowerCase();
                $('.cstm-dropdown3 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-dropdown3 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');
                $('.selected3').attr('data-coin', coinShort);
                $('.selected3 img').attr('src', coinImg);
                $('.selected3 .value span').text(coinName);
                $('.selected3 .value small').text(coinPrice);
                $('#to_coin_id').val(coinID);
                $('.cstm-dropdown3').hide();
            });
            $('.selected3').on('click', function () {
                $('.cstm-dropdown3').toggle();
            });
            $(document).on('click', function (e) {
                if (!$(e.target).closest('.coin-selector3').length) {
                    $('.cstm-dropdown3').hide();
                }
            });
        });

    </script>
@endsection