@extends('templates.' . site('template') . '.layouts.user')



@section('css')
    <style>
        #NewP2pModal {
            transition: opacity 0.3s ease, transform 0.3s ease;
            transform: translateX(100%);
            /* Start offscreen */
            opacity: 0;
        }

        #NewP2pModal.show {
            transform: translateX(0);
            /* Slide to visible position */
            opacity: 1;
            /* Fade in */
        }

        #NewP2pModal.hide {
            transform: translateX(100%);
            /* Slide offscreen */
            opacity: 0;
            /* Fade out */
        }
    </style>
@endsection


@section('contents')
    {{-- mobile gradients  --}}
    <!-- Top Blurs -->
    <div class="absolute inset-x-0 -top-20 w-[70vw] h-[20vh] bg-[#552481]/50 rounded-full blur-3xl lg:hidden -z-10"></div>
    <div class="absolute right-0 -top-28 w-[60vw] h-[30vh] bg-[#552481]/50 rounded-full blur-3xl lg:hidden -z-10"></div>
    <div class="absolute left-10 md:left-40 -top-40 w-[50vw] h-[25vh] bg-[#1f4470]/50 rounded-full blur-3xl lg:hidden -z-10">
    </div>

    <!-- Mid-Screen Blurs -->
    <div
        class="absolute right-5 md:right-32 top-[50vh] w-[50vw] h-[20vh] bg-[#552481]/50 rounded-full blur-3xl lg:hidden -z-10">
    </div>
    <div
        class="absolute left-5 md:left-28 top-[60vh] w-[60vw] h-[25vh] bg-[#1f4470]/50 rounded-full blur-3xl lg:hidden -z-10">
    </div>

    <!-- Bottom Blurs -->
    <div
        class="absolute left-10 md:left-40 -bottom-32 w-[50vw] h-[25vh] bg-[#1f4470]/50 rounded-full blur-3xl lg:hidden -z-10">
    </div>
    <div
        class="absolute right-5 md:right-32 -bottom-52 w-[60vw] h-[30vh] bg-[#552481]/50 rounded-full blur-3xl lg:hidden -z-10">
    </div>
    <div class="absolute inset-x-0 -bottom-72 w-[70vw] h-[20vh] bg-[#1f4470]/50 rounded-full blur-3xl lg:hidden -z-10"></div>

    <!--p2p-->
    <section class="px-6 md:mt-28 lg:max-w-7xl mx-auto lg:relative" id="pageContent">
        <div class="absolute -left-72 -top-28 p-40 bg-[#552481]/50 rounded-full blur-3xl hidden lg:block -z-10"></div>
        <div class="absolute -right-40 -top-28 p-40 md:p-80 bg-[#552481]/50 rounded-full blur-3xl hidden lg:block -z-10">
        </div>
        <div class="absolute left-40 md:left-96 -top-60 p-40 bg-[#1f4470]/50 rounded-full blur-3xl hidden lg:block -z-10">
        </div>
        <div
            class="absolute left-40 md:left-96 -bottom-40 p-40 bg-[#1f4470]/50 rounded-full blur-3xl hidden lg:block -z-10">
        </div>
        <div class="lg:max-w-screen-xl mx-auto p-4 mb-3 text-white">

            <div class="block mb-3">
                <h1 class="text-xl lg:text-3xl font-bold">P2p</h1>
            </div>

            <div class="lg:flex justify-between  mb-5 py-5">
                <div class="mb-3 block p-2">
                    <p> <span class=" text-white px-6 py-2 rounded-xl gradient-tab">P2p History</span>
                    </p>
                </div>
                <div class="mb-3 block p-2 flex flex-col gap-2 md:gap-4 lg:gap-6">
                    <button id="openNewP2pModal"
                        class="rounded-full lg:px-10  lg:py-4 py-2 px-6 text-base  bg-gradient-to-r from-[#5823c1] to-[#ff8ac7]  hover:bg-gradient-to-r hover:from-[#ff8ac7]  hover:to-[#5823c1] transition delay-100 duration-200 ease-in-out cursor-pointer">New
                        P2p</button>

                    <div
                        class="flex items-center space-x-2 border border-[#ff8ac63e] text-white rounded-2xl py-1 px-2 text-sm">
                        <!-- Search Icon -->
                        <img src="{{ asset('/assets/templates/trello/images/search-icon.png') }}" alt="" />

                        <!-- Input Field -->
                        <input type="text" x-model="search" placeholder="Txn Ref" id="search-transfer-input"
                            class="bg-transparent focus:outline-none text-sm flex-grow placeholder-gray-500"
                            value="{{ request()->s }}" />

                        <!-- Search Button -->
                        <div class="simple-pagination" data-paginator="transfers">
                            <a id="search-transfer-button" data-link="{{ route('user.transfers.index') }}" href=""
                                class="paginator-link bg-gray-800 px-3 py-1 rounded-md text-sm hover:bg-gray-700 flex items-center justify-center">
                                Search
                            </a>
                        </div>
                    </div>
                </div>



                <!-- new p2p Modal -->
                <div id="NewP2pModal"
                    class="hidden fixed inset-0 bg-opacity-50 flex items-center justify-end lg:px-6 px-2 backdrop-blur-xs">
                    <div
                        class="bg-slate-800/90 backdrop-blur-lg rounded-lg lg:w-[40vw] w-full lg:p-10 p-4 relative mt-20 mx-auto max-h-[90vh] overflow-y-auto">

                        <div class="flex justify-between items-center lg:mb-10 mb-4">
                            <h2 class="text-xl font-semibold mb-4 text-white">New Transfer</h2>
                            <button id="closeNewP2pModal" class="text-gray-400 hover:text-gray-600">
                                <img src="{{ asset('/assets/templates/trello/images/close-modal-icon.svg') }}"
                                    alt="icon">
                            </button>
                        </div>

                        <!-- Modal Content -->
                        <form action="{{ route('user.transfers.new') }}" method="post" id="transferForm">
                            @csrf

                            <div class="w-full mb-10">
                                <fieldset class="border py-1 px-3 rounded-2xl">
                                    <legend class="px-3 mx-8 text-white"><label for="amount"
                                            class="text-white text-sm">Full Name</label></legend>
                                    <div class="w-full text-white flex gap-4 items-center">
                                        <div
                                            class="w-8 h-8 flex justify-center items-center border border-white rounded-full text-white text-base">
                                            <img src="{{ asset('/assets/templates/trello/images/full-name-icon.svg') }}"
                                                alt="">
                                        </div>
                                        <div class="w-full">
                                            <input type="text" name="fullname" id="fullname"
                                                class="w-full p-4 bg-transparent text-xl text-white border-0 focus:outline-none flex-1"
                                                placeholder="Enter Fullname" required>
                                        </div>
                                    </div>
                                </fieldset>
                            </div>

                            <div class="w-full mb-10">
                                <fieldset class="border py-1 px-3 rounded-2xl">
                                    <legend class="px-3 mx-8 text-white"><label for="amount"
                                            class="text-white text-sm">Username</label></legend>
                                    <div class="w-full text-white flex gap-4 items-center">
                                        <div
                                            class="w-8 h-8 flex justify-center items-center border border-white rounded-full text-white text-base">
                                            <img src="{{ asset('/assets/templates/trello/images/user-name-icon.svg') }}"
                                                alt="">
                                        </div>
                                        <div class="w-full">
                                            <input type="text" name="username" id="username"
                                                class="w-full p-4 bg-transparent text-xl text-white border-0 focus:outline-none flex-1"
                                                placeholder="Enter Username" required>
                                        </div>
                                    </div>
                                </fieldset>
                            </div>

                            <div class="w-full mb-10">
                                <fieldset class="border py-1 px-3 rounded-2xl">
                                    <legend class="px-3 mx-8 text-white"><label for="amount"
                                            class="text-white text-sm">Amount USD</label></legend>
                                    <div class="w-full text-white flex gap-4 items-center">
                                        <div
                                            class="w-8 h-8 flex justify-center items-center border border-white rounded-full text-white text-base">
                                            {{ site('currency_symbol') }}
                                        </div>
                                        <div class="w-full">
                                            <input type="number" step="any" name="amount" id="amount"
                                                class="w-full p-4 bg-transparent text-xl text-white border-0 focus:outline-none flex-1"
                                                placeholder="Amount ({{ site('currency') }})" value="0" required>
                                        </div>
                                    </div>
                                </fieldset>
                            </div>


                            <div class="w-full lg:mb-10 mb-4 lg:px-10 px-4">
                                <div class="flex gap-4 mb-3">
                                    <p class="text-lg text-white">Important Information</p>
                                    <img src="{{ asset('/assets/templates/trello/images/information-icon.svg') }}"
                                        alt="icon">
                                </div>

                                <div class="w-full px-6 py-4 bg-slate-600 rounded-xl  text-sm">
                                    <table class="mb-3">
                                        <tr>
                                            <td><span class="text-[#bd7fee]">Minimum Deposit:</span></td>
                                            <td><span class="text-white">{{ formatAmount(site('min_transfer')) }}</span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><span class="text-[#bd7fee]">Maximum Deposit:</span></td>
                                            <td><span class="text-white">{{ formatAmount(site('max_transfer')) }}</span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><span class="text-[#bd7fee]">Fee:</span></td>
                                            <td><span class="text-white">{{ site('transfer_fee') }}%</span></td>
                                        </tr>
                                    </table>
                                    <p class="text-sm">
                                        <span class="text-[#0ffbf3]">Warning: </span>
                                        <span class="text-[#D8D8D8]">Confirm the receipient's full name before proceeding
                                            to
                                            make transfer.</span>
                                    </p>
                                </div>
                            </div>


                            <div class="w-full">
                                <div class="text-center">
                                    <button type="submit"
                                        class="rounded-full lg:px-10 pdx-5 lg:py-4 py-2 px-6 text-base  bg-gradient-to-r from-[#5823c1] to-[#ff8ac7]  hover:bg-gradient-to-r hover:from-[#ff8ac7]  hover:to-[#5823c1] transition delay-100 duration-200 ease-in-out cursor-pointer">Transfer
                                        Now</button>
                                </div>
                            </div>

                        </form>

                    </div>
                </div>
                <!--new p2p modal-->


            </div>

            <div id="transfers">
                <div class="block bg-slate-800/70 border border-white/50 rounded-2xl overflow-auto w-full max-h-[60vh]">
                    <table class="w-full" id="p2pTable">
                        <thead class="text-center   ">
                            <th class="p-6 text-left lg:min-w-52 min-w-[50vw]">Date/Time</th>
                            <th class="p-6 text-right lg:min-w-52 min-w-[50vw]">User</th>
                            <th class="p-6 text-right lg:min-w-52 min-w-[50vw]">Ref</th>
                            <th class="p-6 text-right lg:min-w-52 min-w-[50vw]">Fee</th>
                            <th class="p-6 text-right lg:min-w-52 min-w-[50vw]">Status</th>
                        </thead>
                        <tbody>
                            @forelse ($transfers as $transfer)
                                <tr class="border-b border-opacity-25 border-blue-200 py-6">
                                    <td class="p-2 py-6" data-p2p_tnx="{{ $transfer->ref }}">
                                        <p class="px-4">{{ date('d-m-y H:i:s', strtotime($transfer->created_at)) }}</p>
                                    </td>
                                    <td class="p-2 py-6 text-right">
                                        <p class="px-4">
                                            @if ($transfer->sender_id == user()->id)
                                                <span>to {{ $transfer->receiver_name }}</span>
                                            @else
                                                <span>from {{ $transfer->receiver_name }}</span>
                                            @endif
                                        </p>
                                    </td>
                                    <td class="p-2 py-6 text-right">
                                        <p class="px-4">{{ $transfer->ref }}</p>
                                    </td>
                                    <td class="p-2 py-6 text-right">
                                        <p class="px-4">
                                            @if ($transfer->sender_id == user()->id)
                                                {{ formatAmount($transfer->fee) }}
                                            @endif
                                        </p>
                                    </td>
                                    <td class="p-2 py-6 flex justify-end">
                                        <p class="text-end  text-sm">
                                            @if ($transfer->sender_id == user()->id)
                                                <span
                                                    class=" text-[#bd7fee] bg-[#bd7fee]/10 rounded-full w-auto  py-1 px-3">Sent</span>
                                            @else
                                                <span
                                                    class=" text-[#ea0a0e] bg-[#ea0a0e]/10 rounded-full w-auto  py-1 px-3">Received</span>
                                            @endif
                                        </p>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td
                                        class="w-full flex justify-center items-center ts-gray-3 p-2 rounded-lg border border-slate-800 hover:border-slate-600 cursor-pointer">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-orange-500"
                                            fill="currentColor" class="bi bi-exclamation-triangle-fill"
                                            viewBox="0 0 16 16">
                                            <path
                                                d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
                                        </svg>
                                        <span>Empty Record. No transfer found!</span>
                                    </td>
                                </tr>
                            @endforelse

                        </tbody>
                    </table>
                </div>

                <div class="cursor-pointer simple-pagination" data-paginator="transfers">
                    {{ $transfers->links('templates.' . site('template') . '.paginations.simple') }}
                </div>
            </div>

        </div>
    </section>
    <!--end p2p-->
@endsection

@section('scripts')
    <script>
        //# // search transfer
        $(document).on('input keyup', '#search-transfer-input', function(e) {
            var ref = $(this).val();
            var base_link = $('#search-transfer-button').data('link');
            var encodedRef = encodeURIComponent(ref);

            // Append the query parameter to the URL
            var link = base_link + '?s=' + encodedRef;
            $('#search-transfer-button').attr('href', link);
        });
    </script>




    <script>
        // handle user form
        $(document).on('submit', '#userForm', function(e) {
            e.preventDefault();
            var form = $(this);
            var formData = new FormData(this);
            $.ajax({
                url: form.attr('action'),
                method: 'POST',
                data: formData,
                dataType: 'json',
                contentType: false,
                processData: false,
                success: function(response) {
                    $('#fullname').val(response.name)

                },
                error: function(xhr, status, error) {
                    var errors = xhr.responseJSON.errors;

                    if (errors) {
                        $.each(errors, function(field, messages) {
                            var fieldErrors = '';
                            $.each(messages, function(index, message) {
                                fieldErrors += message + '<br>';
                            });
                            toastNotify('error', fieldErrors);
                        });
                    } else {
                        toastNotify('error', 'An Error occured, try again later');
                    }


                }
            });
        });


        // handle transfer form
        $(document).on('submit', '#transferForm', function(e) {
            e.preventDefault();
            var amount = $('#amount').val() * 1;
            var min_transfer = "{{ site('min_transfer') }}" * 1;
            var max_transfer = "{{ site('max_transfer') }}" * 1;
            var currency = "{{ site('currency') }}";

            //check the currency code
            var error = null;
            //check min and max transfer
            if (amount < min_transfer) {
                error = 'Minimum transfer amount is ' + currency + min_transfer;
            }

            if (amount > max_transfer) {
                error = 'Maximum transfer amount is ' + currency + max_transfer;
            }

            if (error === null) {
                var form = $(this);
                var formData = new FormData(this);

                var submitButton = $(this).find('button[type="submit"]');
                submitButton.addClass('relative disabled');
                submitButton.append('<span class="button-spinner"></span>');
                submitButton.prop('disabled', true);
                $.ajax({
                    url: form.attr('action'),
                    method: 'POST',
                    data: formData,
                    dataType: 'json',
                    contentType: false,
                    processData: false,
                    success: function(response) {


                        loadPage(form.attr('action'), submitButton, '#pageContent');

                        $('html, body').animate({
                            scrollTop: 0 + 100
                        }, 800);
                        toastNotify('success', response.message);




                    },
                    error: function(xhr, status, error) {
                        var errors = xhr.responseJSON.errors;

                        if (errors) {
                            $.each(errors, function(field, messages) {
                                var fieldErrors = '';
                                $.each(messages, function(index, message) {
                                    fieldErrors += message + '<br>';
                                });
                                toastNotify('error', fieldErrors);
                            });
                        } else {
                            toastNotify('error', 'An Error occured, try again later');
                        }


                    },
                    complete: function() {
                        submitButton.removeClass('disabled');
                        submitButton.find('.button-spinner').remove();
                        submitButton.prop('disabled', false);

                    }
                });
            } else {

                toastNotify('error', error);

            }

        });


        //////////////// initiate p2p modal
        function initializeP2pModals() {
            // console.log("Modals Initialized");

            // Deposit modal toggle
            $(document).off("click", "#openNewP2pModal").on("click", "#openNewP2pModal", function() {
                $('#NewP2pModal').removeClass('hidden hide').addClass('show');
            });

            $(document).off("click", "#closeNewP2pModal").on("click", "#closeNewP2pModal", function() {
                $('#NewP2pModal').removeClass('show').addClass('hide');
                setTimeout(function() {
                    $('#NewP2pModal').addClass('hidden');
                }, 300);
            });

        }

        // Run modal initialization on page load
        $(document).ready(function() {
            initializeP2pModals();
        });
    </script>
@endsection
