@extends('components.customer-layout')

@section('header')
    <div class="page-header-breadcrumb d-md-flex d-block align-items-center justify-content-between ">
        {{-- <h4 class="fw-medium mb-0">withdrawn </h4> --}}
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="javascript:void(0);" class="text-white-50">Dashboards</a>
            </li>
            <li class="breadcrumb-item active" aria-current="page">Swap Tokens</li>
        </ol>
    </div>
@endsection

<p hidden id="priceValue">0</p>
{{-- @dd($wallets) --}}

@section('content')
    <style>
        .container {
            display: flex;
            flex-direction: column;
            gap: 20px
        }

        /* .text-primary{

                                                                                                                                                                                                                                                                                            } */
        .container.swap {}

        .swap_section {
            display: flex;
            gap: 5px;
            flex-direction: column
        }

        .swap_section>div {
            display: flex;
            justify-content: space-between;
            width: 100%;
        }

        .swap_section>div:nth-child(2) {
            border: 1px solid #ccc;
            border-radius: 6px
        }

        .swap_section>div select {
            background-color: inherit;
            /* width: 40%; */
            outline: none;
            border: none;
            border-right: 1px solid #ccc;
            padding: 10px;
            color: white
        }

        .swap_section>div:nth-child(2)>p {
            width: 100%;
            padding: 10px;
            color: white;
            display: flex;
            align-items: center;
            height: 100%;
        }

        .reverse_section {
            display: flex;
            justify-content: center;

        }

        .reverse_section hr {
            width: 100%;
        }

        .reverse_section .rounded {
            height: 40px;
            width: 100px;
            border-radius: 50%;
            background-color: rgb(73, 102, 105);
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .swap_percentage {
            display: flex;
            justify-content: end;
            gap: 10px;
        }

        .percentage-btn {
            background: none !important;
            color: white
        }

        .imageSymbol {
            display: flex;
            align-items: center;
            padding: 2px;
        }

        .imageSymbol>div {
            width: 40%;
            display: flex;
            gap: 3px;
            align-items: center;
        }

        #cryptoImage,
        #convertImage {
            height: 30px;
            width: 30px;
        }

        #cryptoPrice,
        #convertPrice {
            width: 100%;
            padding-inline: 10px;
            display: flex;
        }

        .swap_section555>div:first-child {
            display: flex;
            justify-content: space-between;
            width: 100%;
            padding-bottom: 5px;
        }

        .imageSymbol223select {
            background-color: inherit;
            outline: none;
            border: none;
            padding: 10px;
            color: white
        }

        .imageSymbol223 {
            display: flex;
            border: 1px solid white;
            border-radius: 6px;
        }

        .imageSymbol223>div:first-child {
            width: 50% !important;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .imageSymbol223>div:nth-child(2) {
            padding-block: 5px;
            align-items: center;
            border-left: 1px solid white;
            margin-inline: 20px;
        }

        @media (max-width: 768px) {
            .col-xl-10.d-flex {
                flex-direction: column
            }
        }
    </style>


    <div class="row justify-content-center align-items-center">
        <div class="col-xl-10 d-flex  gap-2  "> <!-- Add classes here -->

            <div class="card custom-card d-flex flex-row ">
                <div class="card-body text-white container ">
                    <div class="swap_percentage">
                        <button class="percentage-btn btn btn-info" data-percentage="20">20%</button>
                        <button class="percentage-btn btn btn-info" data-percentage="50">50%</button>
                        <button class="percentage-btn btn btn-info" data-percentage="100">100%</button>
                    </div>
                    <div class="swap_section555">
                        <div class="">
                            <p class="p-0 m-0 ">Swap</p>
                            <p class="p-0 m-0">Available <span id="roundedcryptoPrice"></span> <span
                                    id="cryptoSymbol"></span></p>
                        </div>
                        <div class="imageSymbol223">
                            <div class="">
                                <img hidden id="cryptoImage" alt="">
                                <select class="imageSymbol223select" name="" id=""
                                    onchange="fetchCryptoData(this)">
                                    <option value="">Select Asset</option>
                                    @foreach ($crypto_asset as $item)
                                        <option value="{{ $item->id }}">
                                            {{ ucfirst($item->symbol) }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div id="cryptoPrice" class="">0</div>
                        </div>
                    </div>

                    <div class="reverse_section">
                        <hr>
                        <div class="rounded">
                            <i class="fs-13  ri ri-arrow-left-down-fill"></i>
                        </div>
                        <hr>
                    </div>


                    <div class="swap_section555">
                        <div class="">
                            <p class="p-0 m-0 ">For</p>
                            <p class="p-0 m-0 ">Available <span id="roundedCovertPrice">0</span> <span
                                    id="covertSymbol"></span></p>
                        </div>

                        <div class="imageSymbol223">
                            <div class="">
                                <img hidden id="convertImage" alt="">
                                <select class="imageSymbol223select" onchange="ConvertToData(this)" name=""
                                    id="cryptoSelect">
                                    <option value="">Select Asset</option>
                                </select>
                            </div>
                            <div id="convertPrice" class="">0</div>
                        </div>

                    </div>


                    <p hidden="true" class="depositButton  w-full px-5 m-auto ">You don't have enough <span
                            id="cryptoSymbol"></span> <a class="text-primary"
                            href="{{ route('user.web.deposit-crypto') }}"><u><b>DEPOSIT NOW!!</b></u></a>
                    </p>

                    <button onclick="swapCrypto()" hidden="true" id="swapLink"
                        class=" swapButton btn btn-primary w-full px-5 m-auto ">Swap
                        <span id="cryptoSymbol"></span> for
                        <span id="covertSymbol"></span></button>

                </div>

            </div>
            <div class="card custom-card d-flex flex-row ">


                <div class="card-body text-white container swap  ">
                    <div class="row justify-between">
                                <div class="col-6"><h4>Swap</h4></div>
                         <div class="col-6">
                            <a class="text-primary"
                            href="{{ route('user.web.deposit-crypto') }}"><u><b>DEPOSIT NOW!!</b></u></a>
                         </div>
                    </div>
            
                    <div class="">
                        <h6>How it works </h6>
                        <p class="text-justify">Enter the amount you want to swap, select the tokens, and confirm the
                            transaction to receive your swapped crypto instantly.
                        </p>
                    </div>

                    <div class="">
                        <h6>Requirements </h6>
                        <p class="text-justify">You must have a sufficient balance of the token you’re swapping from and
                            cover any network fees.

                        </p>
                    </div>
                    <div class="">
                        <h6>Condition </h6>
                        <p class="text-justify">Swaps are final and cannot be reversed, so ensure you verify details before
                            confirming.
                        </p>
                    </div>
                    <div class="">
                        <h6>Protection </h6>
                        <p class="text-justify">Transactions are secured using blockchain technology, ensuring transparency
                            and safety.
                        </p>
                    </div>

                </div>

            </div>

        </div>


    </div>







    <div class="card custom-card">
        <div class="card-header justify-content-between flex-wrap">
          
                <div style="width: 100%; align-items: center" class="row justify-space-between">
                    <div class="col-6">  <div class="card-title">Records </div></div>
                    <div class="col-6 text-end"><a href="{{ route('user.web.withdrawCrypto') }}" class="btn btn-primary">Withdraw</a></div>
                </div>
           
        </div>
        <div class="card-body">
            <div class="table-responsive">

                @if ($availableAssetBalance)
                    <table class="table card-table table-vcenter text-nowrap mb-0">
                        <thead>
                            <tr>
                                {{-- <th scope="col">S/N</th> --}}
                                <th scope="col">Name</th>
                                <th scope="col">Symbol</th>
                                <th scope="col">Balance</th>
                                <th scope="col">Current Price</th>
                                <th scope="col">Last Updated</th>
                            </tr>
                        </thead>
                        <tbody class="active-tab">

                            @foreach ($availableAssetBalance as $Investment)
                                <tr>

                                    <td>
                                        <div class="d-flex align-items-center">

                                            <div class="lh-1">
                                                <span class="fs-12">{{ ucwords($Investment['name']) }}
                                                </span>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center">

                                            <div class="align-items-center">
                                                <span class="fs-12">{{ ucwords($Investment['symbol']) }}
                                                </span>

                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <span>${{ number_format($Investment['balance'], 2, '.', ',') }}</span>
                                    </td>
                                    <td>
                                        <span>${{ number_format($Investment['price'], 2, '.', ',') }}</span>
                                    </td>

                                    <td class="">
                                        <span>
                                            {{ date('d M,Y', strtotime($Investment['updatedAt'])) }}
                                        </span>
                                    </td>

                                </tr>
                            @endforeach

                        </tbody>
                    </table>
                @else
                    <div class="alert alert-light text-center fst-italic text-secondary" role="alert">
                        <strong>No Active Portfolio found!</strong>
                    </div>
                @endif

            </div>
        </div>

    </div>


    <script>
        const selectElement = document.getElementById('cryptoSelect');
        const selectElementVal = document.getElementById('priceValue');
        const convertDivs = document.querySelectorAll('#convertPrice');
        const convertRoundedDivs = document.getElementById('roundedCovertPrice');
        const cryptoImage = document.getElementById('cryptoImage');
        const convertImage = document.getElementById('convertImage');
        const convertSymbol = document.querySelectorAll('#covertSymbol');
        const swapButton = document.querySelector('.swapButton');
        const depositButton = document.querySelector('.depositButton');
        const detailsDivs = document.querySelectorAll('#cryptoPrice');
        const detailsRoundedDivs = document.getElementById('roundedcryptoPrice');
        const detailsSymbol = document.querySelectorAll('#cryptoSymbol');

        function fetchCryptoData(selectElement) {
            swapButton.setAttribute('hidden', true); // Hide the button

            const selectedId = selectElement.value;
            // Make an AJAX request
            fetch(`/user/crypto-details/${selectedId}`, {
                    method: 'GET',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Content-Type': 'application/json',
                    }
                })
                .then(response => response.json())
                .then(data => {

                    if (data?.price) {
                        depositButton.setAttribute('hidden', true); // Hide the button
                        populateSelect(data?.other);
                    } else {
                        depositButton.removeAttribute('hidden'); // Show the button
                    }

                    // Display the fetched data in the div

                    if (data.error) {
                        detailsDiv.innerHTML = 0;
                        selectElementVal.innerHTML = 0
                        detailsSymbol.innerHTML = "";
                    } else {
                        detailsDivs.forEach((element, index) => {
                            element.textContent = data?.price
                        });

                        // Set image
                        cryptoImage.removeAttribute('hidden');
                        cryptoImage.setAttribute('src', data?.image)


                        detailsSymbol.forEach((element, index) => {
                            element.textContent = data?.symbol
                        });
                        detailsRoundedDivs.innerHTML = parseFloat(data?.price.toFixed(4));
                        selectElementVal.innerHTML = data?.price

                        convertDivs.forEach((element, index) => {
                            element.textContent = 0
                        });
                        convertRoundedDivs.innerHTML = 0;
                        convertSymbol.innerHTML = "";
                    }
                })
                .catch(error => {
                    console.error('Error fetching data:', error);
                });
        }

        function populateSelect(data) {
            // Clear any existing options
            selectElement.innerHTML = '';

            // Add a default placeholder option
            const defaultOption = document.createElement('option');
            defaultOption.textContent = 'Select Asset';
            defaultOption.value = '';
            selectElement.appendChild(defaultOption);

            // Iterate over the data array to add options
            data.forEach(item => {
                const option = document.createElement('option');
                option.value = item.id; // Set the value
                option.textContent = item.name; // Set the display text
                selectElement.appendChild(option); // Add the option to the select
            });
        }

        function ConvertToData(selectElement) {
            const selectedId = selectElement.value;
            // Make an AJAX request
            fetch(`/user/crypto-details/${selectedId}`, {
                    method: 'GET',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Content-Type': 'application/json',
                    }
                })
                .then(response => response.json())
                .then(data => {

                    swapButton.removeAttribute('hidden'); // Show the button

                    // Set image
                    convertImage.removeAttribute('hidden');
                    convertImage.setAttribute('src', data?.image)


                    if (data.error) {
                        detailsDiv.innerHTML = 0;
                        convertSymbol.innerHTML = "";
                    } else {
                        convertDivs.forEach((element, index) => {
                            element.textContent = data?.price
                        })
                        convertSymbol.forEach((element, index) => {
                            element.textContent = data?.symbol
                        });

                        convertRoundedDivs.innerHTML = parseFloat(data?.price.toFixed(4));
                    }
                })
                .catch(error => {
                    console.error('Error fetching data:', error);
                });
        }

        function swapCrypto() {
            const From = (document.getElementById("cryptoSymbol").textContent);
            const To = (document.getElementById("covertSymbol").textContent);
            const Amount = (document.getElementById("cryptoPrice").textContent);

            fetch(`/user/swap-crypto/${From}/${To}/${Amount}`, {
                    method: 'GET',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Content-Type': 'application/json',
                    }
                })
                .then(response => response.json())
                .then(data => {
                    location.href = "/user/transaction";
                })
                .catch(error => {
                    console.error('Error fetching data:', error);
                });

        }

        document.querySelectorAll('.percentage-btn').forEach(button => {
            button.addEventListener('click', function() {
                const percentage = parseInt(this.getAttribute('data-percentage')); // Get percentage value
                const availableAmount = parseFloat(document.getElementById('priceValue').textContent) ||
                    0; // Fetch available amount (adjust as per the relevant data)

                // Calculate the amount based on the percentage
                const amountToSwap = availableAmount * (percentage / 100);

                // console.log(availableAmount, percentage, amountToSwap);

                detailsDivs.forEach((element, index) => {
                    element.textContent = amountToSwap
                });

                // Update the swap amount input field
                // document.getElementById('swapAmount').value = ;
            });
        });
    </script>
    <!-- End:: row-3 -->
@endsection