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



@section('css')
@endsection


@section('contents')
    <div class="transition-all duration-300 ease-in-out" id="pageContent"
        :class="{
            'lg:ml-64': !isCollapsed,
            'lg:ml-20': isCollapsed
        }">

        @php
            $target = request()->target;
        @endphp
        @if ($target == 'p2p')
            <div class="min-h-screen">
                <!-- Top Navigation Spacer for Desktop -->
                <div class="hidden lg:block h-20"></div>
                <!-- Content Area -->


                <div class="p-6 max-w-xl md:pt-16">
                    <h2 class="text-lg mb-4">New Transfer</h2>

                    <form action="{{ route('user.transfers.new') }}" method="post" id="transferForm">
                        @csrf
                        <div class="bg-gray-800 rounded-lg p-4 md:p-8 space-y-4 border border-gray-600">
                            <div class="bg-black rounded-lg p-4 min-h-[125px] flex items-center">
                                <div class="flex items-center justify-between w-full">
                                    <div class="flex items-center bg-gray-800 rounded-xl px-2 py-1">
                                        <img src="{{ asset('/assets/templates/pandel/images/icons-user.svg') }}"
                                            class="mr-1" alt="" />
                                        <span class="font-semibold">Username</span>
                                    </div>
                                    <input type="text" name="username" id="username" required
                                        class="bg-transparent text-end text-sm w-48 focus:outline-none text-gray-400 ml-auto"
                                        placeholder="Username" />
                                </div>
                            </div>

                            <div class="bg-black rounded-lg p-4 min-h-[125px] flex items-center">
                                <div class="flex items-center justify-between w-full">
                                    <div class="flex items-center bg-gray-800 rounded-xl px-2 py-1">
                                        <img src="{{ asset('/assets/templates/pandel/images/icons-user.svg') }}"
                                            class="mr-1" alt="" />
                                        <span class="font-semibold">Full name</span>
                                    </div>
                                    <input type="text" name="fullname" id="fullname" required
                                        class="bg-transparent text-end text-sm w-48 focus:outline-none text-gray-400 ml-auto"
                                        placeholder="Full name" />
                                </div>
                            </div>

                            <div class="bg-black rounded-lg p-4 min-h-[125px] flex items-center">
                                <div class="flex items-center justify-between w-full">
                                    <div class="flex items-center bg-gray-800 rounded-xl px-2 py-1">
                                        <img src="{{ asset('/assets/templates/pandel/images/circle-dollar.svg') }}"
                                            class="mr-1" alt="USD" />
                                        <span class="font-semibold">Amount ({{ site('currency') }})</span>
                                    </div>
                                    <input type="number" step="any" name="amount" id="amount" required
                                        class="bg-transparent text-end text-sm w-48 focus:outline-none text-gray-400 ml-auto"
                                        placeholder="0.00" />
                                </div>
                            </div>

                            <div class="text-sm space-y-2">
                                <div class="flex justify-between">
                                    <span class="text-blue-400">Min Deposit:</span>
                                    <span>{{ formatAmount(site('min_transfer')) }}</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-blue-400">Max Deposit:</span>
                                    <span>{{ formatAmount(site('max_transfer')) }}</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-blue-400">Fee:</span>
                                    <span>{{ site('transfer_fee') }}%</span>
                                </div>
                            </div>

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

                            <button type="submit"
                                class="w-full bg-blue-600 text-white py-3 rounded-3xl hover:bg-blue-700 flex items-center justify-center">
                                Transfer Now
                            </button>
                        </div>
                    </form>

                </div>



            </div>
        @else
            <div class="min-h-screen">
                <!-- Top Navigation Spacer for Desktop -->
                <div class="hidden lg:block h-20"></div>
                <!-- Content Area -->


                <div class="p-6">
                    <!-- p2p History  -->
                    <div class="mt-8" id="transfers">
                        <div class="grid cols-1 md:grid-cols-2 gap-4 mb-4">
                            <h2 class="text-white text-lg font-semibold md:col-span-1">
                                P2p History
                            </h2>

                            <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/pandel/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>

                        <div class="bg-gray-800/50 rounded-lg p-6">
                            <div class="w-full overflow-x-auto">
                                <table class="w-full">
                                    <thead>
                                        <tr class="border-b border-gray-700">
                                            <th class="text-gray-500 px-4 py-3 text-left">
                                                Txn Ref
                                            </th>
                                            <th class="text-gray-500 px-4 py-3 text-left">
                                                Data/Time
                                            </th>
                                            <th class="text-gray-500 px-4 py-3 text-left">Fee</th>
                                            <th class="text-gray-500 px-4 py-3 text-end">
                                                Amount/ <span class="block">Status</span>
                                            </th>
                                            <th class="text-gray-500 px-4 py-3 text-end">
                                                Receiver
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse ($transfers as $transfer)
                                            <tr class="border-b border-gray-700">
                                                <td class="text-white px-4 py-4 text-sm">
                                                    Ref: {{ $transfer->ref }}
                                                </td>
                                                <td class="text-white px-4 py-4 text-sm">
                                                    {{ date('d-m-y H:i:s', strtotime($transfer->created_at)) }}
                                                </td>
                                                <td class="text-white px-4 py-4 text-sm">
                                                    @if ($transfer->sender_id == user()->id)
                                                        {{ formatAmount($transfer->fee) }}
                                                    @endif
                                                </td>
                                                <td class="text-white px-4 py-4 text-end text-sm">

                                                    @if ($transfer->sender_id == user()->id)
                                                        {{ formatAmount($transfer->amount) }}
                                                        <span class="text-red-600 block">SENT</span>
                                                    @else
                                                        {{ formatAmount($transfer->amount) }}
                                                        <span class="text-green-500 block">RECEIVED</span>
                                                    @endif
                                                </td>
                                                <td class="text-white px-4 py-4 cursor-pointer text-end">
                                                    <button
                                                        class="bg-gray-700/50 text-gray-400 py-1 px-4 rounded-3xl inline-flex items-center justify-start w-48 h-10 text-sm gap-2">
                                                        <img src="{{ asset('/assets/templates/pandel/images/icons-user.svg') }}"
                                                            alt="Eye Icon" class="ml-1" />
                                                        {{ $transfer->receiver_name }}
                                                    </button>
                                                </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>



            </div>
        @endif


        <footer>
            <div class="mt-8 text-center text-sm text-sky-400 mb-4">
                All Rights Operational
            </div>
        </footer>


    </div>
@endsection

@section('scripts')
    {{-- 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-blue-600 hover:bg-blue-700'
                );
                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-blue-600 hover:bg-blue-700'
                        );
                        submitButton.removeClass('not-allowed-cursor');

                    }
                });
            } else {

                toastNotify('error', error);

            }

        });
    </script>
@endsection
