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



@section('css')
@endsection


@section('contents')
    <div class="min-h-screen" id="pageContent">
        <!-- Top Navigation Spacer for Desktop -->
        <div class="hidden lg:block h-16"></div>
        <!-- Content Area -->
        <div class="p-4 md:p-6">
            <section class="mt-4 md:mt-12 lg:mt-20 lg:px-4">
                <div class="grid grid-cols-1 gap-4 mb-4">
                    <!-- Header and Controls Section -->
                    <div class="flex flex-col md:flex-row justify-between w-full">
                        <div class="flex flex-col space-y-3 md:w-80">
                            <button id="openNewP2pModal" class="gradient-btn-filled2 text-white py-2 px-4 rounded-xl w-full">
                                New P2p
                            </button>

                            <div
                                class="flex items-center space-x-2 border border-gray-800 text-white rounded-2xl px-2 py-1 w-68 md:col-span-1 md:ml-auto">
                                <!-- Search Icon -->
                                <img src="{{ asset('/assets/templates/cavit/images/search-icon.png') }}" alt="" />

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

                                <!-- 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>

                        <h2 class="text-white text-lg font-semibold mb-2 md:mb-0 order-first">
                            P2p History
                        </h2>
                    </div>

                    <!-- Table Section -->
                    <div class="block" id="transfers">
                        <div
                            class="shadow-lg border border-transparent bg-clip-border rounded-2xl p-2 md:p-4 mt-4 relative w-full">
                            <!-- Gradient border background -->
                            <div class="absolute inset-0 rounded-2xl"
                                style="z-index: -1; background: linear-gradient(to bottom, #ff3bff, #5c24ff); padding: 1px; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; ">
                            </div>

                            <!-- Table Container -->
                            <div
                                class="overflow-x-auto rounded-lg max-h-[calc(100vh-300px)] md:max-h-[60vh] overflow-y-auto pr-2 scrollbar-thin scrollbar-thumb-gray-600 scrollbar-track-transparent hover:scrollbar-thumb-gray-500">
                                <table class="w-full min-w-[640px]">
                                    <thead>
                                        <tr class="bg-gray-800 border-b border-gray-700">
                                            <th class="text-gray-500 px-3 md:px-4 py-3 text-left text-sm">
                                                Date/Time
                                            </th>
                                            <th class="text-gray-500 px-3 md:px-4 py-3 text-start text-sm">
                                                User
                                            </th>
                                            <th class="text-gray-500 px-3 md:px-4 py-3 text-end text-sm">
                                                Ref
                                            </th>
                                            <th class="text-gray-500 px-3 md:px-4 py-3 text-end text-sm">
                                                Fee
                                            </th>
                                            <th class="text-gray-500 px-3 md:px-4 py-3 text-end text-sm">
                                                Amount
                                            </th>
                                            <th class="text-gray-500 px-3 md:px-4 py-3 text-end text-sm">
                                                Status
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse ($transfers as $transfer)
                                            <tr class="border-b border-gray-700">
                                                <td class="text-white px-3 md:px-4 py-4 text-start text-sm">
                                                    {{ date('d-m-y H:i:s', strtotime($transfer->created_at)) }}
                                                </td>
                                                <td class="text-white px-3 md:px-4 py-4 text-start text-sm">
                                                    {{ $transfer->receiver_name }}
                                                </td>
                                                <td class="text-white px-3 md:px-4 py-4 text-end text-sm">
                                                    {{ $transfer->ref }}
                                                </td>
                                                <td class="text-white px-3 md:px-4 py-4 text-end text-sm">
                                                    @if ($transfer->sender_id == user()->id)
                                                        {{ formatAmount($transfer->fee) }}
                                                    @endif
                                                </td>
                                                <td class="text-white px-3 md:px-4 py-4 text-end text-sm">
                                                    {{ formatAmount($transfer->amount) }}
                                                </td>
                                                <td class="text-white px-3 md:px-4 py-4">
                                                    <div
                                                        class="flex text-red-400 bg-red-400/11 p-3 items-center text-xs md:text-sm rounded-2xl px-8 ml-auto w-fit whitespace-nowrap">
                                                        @if ($transfer->sender_id == user()->id)
                                                            <span class="text-red-500 block">SENT</span>
                                                        @else
                                                            <span class="text-green-500 block">RECEIVED</span>
                                                        @endif
                                                    </div>
                                                </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>

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

            </section>
        </div>
    </div>

    {{-- new p2p modal --}}
    <div id="NewP2pModal"
        class="fixed inset-0 bg-black bg-opacity-50 backdrop-blur-sm z-50 flex items-center justify-center hidden">
        <div class="bg-[#1c1c1c] p-6 rounded-3xl w-[90%] max-w-md">
            <div class="flex justify-between items-center mb-6">
                <h3 class="text-xl font-semibold text-white">New Transfer</h3>

                <button id="closeNewP2pModal" class="text-gray-400 hover:text-white">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd"
                            d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                            clip-rule="evenodd" />
                    </svg>
                </button>

            </div>

            {{-- form --}}
            <form action="{{ route('user.transfers.new') }}" method="post" id="transferForm">
                @csrf
                <div class="space-y-4">
                    <!-- Full Name Input -->
                    <div class="relative">
                        <label class="block text-xs text-gray-400 mb-1">Full Name</label>
                        <div class="relative">
                            <input type="text" placeholder="Enter Full Name" name="fullname" id="fullname" required
                                class="w-full bg-[#282828] border border-gray-700 rounded-xl p-3 text-white focus:outline-none focus:border-blue-500" />
                        </div>
                    </div>

                    <!-- User Name Input -->
                    <div class="relative">
                        <label class="block text-xs text-gray-400 mb-1">Username</label>
                        <div class="relative">
                            <input type="text" placeholder="Enter username" name="username" id="username" required
                                class="w-full bg-[#282828] border border-gray-700 rounded-xl p-3 text-white focus:outline-none focus:border-blue-500" />
                        </div>
                    </div>
                    <!-- Amount Input -->
                    <div class="relative">
                        <label class="block text-xs text-gray-400 mb-1">Amount ({{ site('currency') }})</label>
                        <div class="relative">
                            <span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">$</span>
                            <input type="number" placeholder="0.00" step="any" name="amount" id="amount" required
                                class="w-full bg-[#282828] border border-gray-700 rounded-xl p-3 pl-8 text-white focus:outline-none focus:border-blue-500" />
                        </div>
                    </div>

                    <!-- Important Information -->
                    <div class="mt-6">
                        <div class="flex items-center space-x-2 mb-2">
                            <span class="text-sm text-white">Important information</span>
                            <img src="{{ asset('/assets/templates/cavit/images/important-info-icon.svg') }}"
                                alt="" />
                        </div>
                        <div class="bg-[#282828] rounded-xl p-4 space-y-2">
                            <div class="flex justify-between text-sm">
                                <span class="text-pink-500">Minimum Deposit:</span>
                                <span class="text-white">{{ formatAmount(site('min_transfer')) }}</span>
                            </div>
                            <div class="flex justify-between text-sm">
                                <span class="text-pink-500">Maximum Deposit:</span>
                                <span class="text-white">{{ formatAmount(site('max_transfer')) }}</span>
                            </div>
                            <div class="flex justify-between text-sm">
                                <span class="text-pink-500">Fee:</span>
                                <span class="text-white">{{ site('transfer_fee') }}%</span>
                            </div>

                            <p class="text-xs text-gray-400 mt-2">
                                <span class="text-red-500">Warning: </span> Confirm the
                                recipient's full name before proceeding to make transfer.
                            </p>
                        </div>
                    </div>

                    <!-- Pay Now Button -->
                    <button type="submit"
                        class="w-full bg-gradient-to-t from-blue-500 to-blue-100 text-white py-3 rounded-2xl mt-4 hover:opacity-90 transition-opacity flex items-center justify-center">
                        Transfer Now
                    </button>
                </div>
            </form>

        </div>
    </div>
@endsection

@section('scripts')
    {{-- show modal --}}
    <script>
        function initializeP2pModals() {
            // console.log("Modals Initialized");

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

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

        }

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



    {{-- history --}}
    <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 bg-black');
                submitButton.append('<span class="button-spinner"></span>');
                submitButton.prop('disabled', true);
                //custom button style
                submitButton.removeClass(
                    'bg-gradient-to-t'
                );
                submitButton.addClass('not-allowed-cursor');


                $.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 bg-black');
                        submitButton.find('.button-spinner').remove();
                        submitButton.prop('disabled', false);

                        submitButton.addClass(
                            'bg-gradient-to-t'
                        );
                        submitButton.removeClass('not-allowed-cursor');

                        $('#NewP2pModal').addClass('hidden');

                    }
                });
            } else {

                toastNotify('error', error);

            }

        });
    </script>
@endsection
