@extends('layouts.user_dashboard_main')
@section('content')
    <div class="dashboard-recent-act-rg-card">
        <div class="recent-activity">
            <div class="top-lg-btn">
                <meta name="csrf-token" content="{{ csrf_token() }}" />
                <button type="button" class="custom-btn d-none">
                    <div class="icon-container">
                        <img src="{{ asset('frontend/assets/images/send-icon.svg') }}">
                    </div>
                    <span>@lang('public.Send')</span>
                </button>
                <button type="button" class="custom-btn d-none">
                    <div class="icon-container">
                        <img src="{{ asset('frontend/assets/images/request-icon.svg') }}">
                    </div>
                    <span>@lang('public.Request')</span>
                </button>
            </div>
            <div class="list-header">
                <div class="left-info">
                    <h3>@lang('public.Recent_activity')</h3>
                </div>
                <div class="right-info d-none">
                    <div class="form-group mb-0">
                        <select class="form-control select1">
                            <option>@lang('public.Last_Month')</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="recent-activity-table">
                <table>
                    <tbody>
                        @forelse ($all_transaction_list as $key => $item)
                            <tr>
                                <td data-th="Name">
                                    <figure class="user-img-w-text">
                                        <div class="img-container">
                                            <img
                                                @if ($item['status'] == 'Paid') src="{{ asset('storage/profile_images/' . $item['receiver_details']['profile_photo']) }}  @else src="{{ asset('storage/profile_images/' . $item['sender_details']['profile_photo']) }} @endif">
                                        </div>

                                        <figcaption>
                                            @if ($item['status'] == 'Paid')
                                                {{ $item['receiver_details']['name'] }}
                                            @else
                                                {{ $item['sender_details']['name'] }}
                                            @endif
                                        </figcaption>
                                    </figure>
                                </td>
                                <td data-th="Amount">
                                    <div class="price_value text-left">{{ $item['amount'] }}</div>
                                </td>
                                <td data-th="Date">
                                    <div class="date_value">{{ $item['date'] }}</div>
                                </td>

                                <td data-th="Action">
                                    <div class="dropdown td-more-action theme-dropdown-s1">
                                        <button class="dropdown-toggle mx-auto" type="button" id="dropdownMenuButton"
                                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            <img src="{{ asset('frontend/assets/images/td-more-action.svg') }}">
                                        </button>
                                        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton"
                                            style="">
                                            <a class="dropdown-item" data-toggle="modal"
                                                data-target="#transactionSuccesful-alert-modal-{{ $key }}"
                                                href="#">@lang('public.Transaction_Details')</a>
                                        </div>
                                    </div>
                                </td>
                            </tr>

                            <div class="modal transactionSuccesful-alert-modal"
                                id="transactionSuccesful-alert-modal-{{ $key }}">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            @if ($item['status'] == 'Withdraw')
                                            <h4>@lang('public.Withdraw_Succesful')</h4>

                                            @else
                                            <h4>@lang('public.Transaction_Succesful')</h4>
                                            @endif
                                            <h5>{{ $item['date'] }}</h5>
                                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                                        </div>

                                        <div class="modal-body">
                                            <div class="transactionSuccesful-box">
                                                <div class="receivedfrom-info">
                                                    <h3>
                                                        @if ($item['status'] == 'Paid')
                                                            @lang('public.Paid_to')
                                                        @elseif($item['status'] == 'Withdraw')
                                                            @lang('public.Withdraw_from')
                                                        @else
                                                            @lang('public.Received_from')
                                                        @endif
                                                    </h3>
                                                    <div class="recFrom-row">
                                                        <figure>
                                                            <div class="icon-container">
                                                                <img
                                                                    @if ($item['status'] == 'Paid') src="{{ asset('frontend/assets/images/up arrow.svg') }}"  @else  src="{{ asset('frontend/assets/images/arow-bottom-left.svg') }}" @endif>
                                                            </div>
                                                            <figcaption>
                                                                <h4>
                                                                    @if ($item['status'] == 'Paid')
                                                                        {{ $item['receiver_details']['name'] }}
                                                                    @else
                                                                        {{ $item['sender_details']['name'] }}
                                                                    @endif
                                                                </h4>
                                                                <h5>
                                                                    @if ($item['status'] == 'Paid')
                                                                        {{ $item['receiver_details']['country_code'] }}
                                                                        {{ $item['receiver_details']['phone'] }}
                                                                    @else
                                                                        {{ $item['sender_details']['country_code'] }}
                                                                        {{ $item['sender_details']['phone'] }}
                                                                    @endif
                                                                </h5>
                                                            </figcaption>
                                                        </figure>
                                                        <div class="price">{{ $item['amount'] }}</div>
                                                    </div>
                                                </div>



                                                <div class="transfer-info">
                                                    <h3><img
                                                            src="{{ asset('frontend/assets/images/icon-park-outline_transaction-order.svg') }}">@lang('public.Transfer_Details')
                                                        </h3>
                                                    <h4>@lang('public.Transaction_ID')</h4>
                                                    <div class="id-with-rg-icon">
                                                        <h3><b id="copy_{{ $key }}">{{ $item['id'] }}</b>
                                                        </h3>
                                                        <button type="button"
                                                            onclick="copyToClipboard('#copy_{{ $key }}')"
                                                            class="copy_btn"><img
                                                                src="{{ asset('frontend/assets/images/copy-icon.svg') }}"></button>
                                                    </div>
                                                    @if($item['status'] != 'Withdraw')
                                                   
                                                    <h4>@lang('public.Credited_to')</h4>
                                                    <div class="credit_info">
                                                        <figure>
                                                            <div class="icon-container">
                                                                <img
                                                                    src="{{ asset('frontend/assets/images/ri_bank-line.svg') }}">
                                                            </div>
                                                            <figcaption>
                                                                <h5>
                                                                    <span>
                                                                        @if ($item['status'] == 'Paid')
                                                                            {{ $item['receiver_details']['name'] }}
                                                                            @lang('public.Transcash_Wallet')
                                                                        @else
                                                                            {{ auth()->user()->name }} @lang('public.Transcash_Wallet')
                                                                        @endif
                                                                    </span>
                                                                    <b>+@if ($item['status'] == 'Paid')
                                                                            {{ str_replace('-', '', $item['amount']) }}
                                                                        @else
                                                                            {{ str_replace('+', '', $item['amount']) }}
                                                                        @endif </b>
                                                                </h5>

                                                            </figcaption>
                                                        </figure>
                                                    </div>
                                                    @endif


                                                </div>
                                                <div class="actions-btns">
                                                    <a href="javascript:;" class="download-btn">
                                                        <div class="icon-container">
                                                            <img
                                                                src="{{ asset('frontend/assets/images/down-arow-btn.svg') }}">
                                                        </div>
                                                        <span>@lang('public.Download_Receipt')</span>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @empty
                            <td>@lang('public.No_Transaction_Found')</td>
                        @endforelse

                    </tbody>
                </table>
            </div>
            <div class="view-more">
                <a href="/transaction" class="view-btn">@lang('public.View_more') <img
                        src="{{ asset('frontend/assets/images/right-arow.svg') }}"></a>
            </div>
        </div>
        <div class="card-info">
            <div class="list-header">
                <div class="left-info">
                    <h3>@lang('public.My_cards')</h3>
                </div>
            </div>
            @if ($allCard)
                <div class="card-lists">

                    <div class="card-item">
                        <div class="card-box">
                            <div class="card-text-img-row">
                                <div class="text-info">
                                    <h5>{{ $allCard[0]['exp_month'] }}/{{ $allCard[0]['exp_year'] }}</h5>
                                    <h5>**** **** **** {{ $allCard[0]['number_last'] }}</h5>
                                </div>
                                <div class="img-info">
                                    <img src="{{ asset('frontend/assets/images/mastercard.svg') }}">
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="view-more">
                    <a href="/manage-account" class="view-btn">@lang('public.View_more') <img
                            src="{{ asset('frontend/assets/images/right-arow.svg') }}"></a>
                </div>
            @else
            <div class="card-lists">

                <div class="card-item">
                    <div class="card-box">
                        <h5 style="text-align: center; margin:60px;">No Saved Card </h5>
                       
                         
                       
                    </div>
                </div>

            </div>
            @endif
        </div>

    </div>
@endsection
<script src="https://www.gstatic.com/firebasejs/7.23.0/firebase.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.33.1/sweetalert2.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.33.1/sweetalert2.js"></script>

<script>

function copyToClipboard(element) {
        console.log('hit', element);
        var temp = $("<input>");
        $("body").append(temp);
        temp.val($(`${element}`).text()).select();
        document.execCommand("copy");
        temp.remove();
        Swal.fire('Copied!!')
    }
    // For Firebase JS SDK v7.20.0 and later, measurementId is optional
    const firebaseConfig = {
        apiKey: "AIzaSyCq9LP25gSfh8ccbfk12kIXT0dxqmZpNx0",
        authDomain: "transcash-solution.firebaseapp.com",
        projectId: "transcash-solution",
        storageBucket: "transcash-solution.appspot.com",
        messagingSenderId: "733872098055",
        appId: "1:733872098055:web:1ed5835fd908c910dc93a2",
        measurementId: "G-S1Z3NEWJV7",
    };

    firebase.initializeApp(firebaseConfig);
    const messaging = firebase.messaging();

    function initFirebaseMessagingRegistration() {
        messaging
            .requestPermission()
            .then(function() {
                return messaging.getToken()
            })
            .then(function(token) {
                console.log(token);

                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });

                $.ajax({
                    url: '{{ route('save-token') }}',
                    type: 'POST',
                    data: {
                        device_token: token
                    },
                    dataType: 'JSON',
                    success: function(response) {
                        console.log(response);
                    },
                    error: function(err) {
                        console.log('User Chat Token Error' + err);
                    },
                });

            }).catch(function(err) {
                console.log('User Chat Token Error' + err);
            });
    }

    messaging.onMessage(function(payload) {
        const noteTitle = payload.notification.title;
        const noteOptions = {
            body: payload.notification.body,
            icon: payload.notification.icon,
        };
        new Notification(noteTitle, noteOptions);
    });

    const registerServiceWorker = async () => {
        if ("serviceWorker" in navigator) {
            try {
                const registration = await navigator.serviceWorker.register("/firebase-messaging-sw.js", {
                    scope: "/",
                });
                if (registration.installing) {
                    console.log("Service worker installing");


                } else if (registration.waiting) {
                    console.log("Service worker installed");

                } else if (registration.active) {
                    console.log("Service worker active");
                    initFirebaseMessagingRegistration();


                }
            } catch (error) {
                console.error(`Registration failed with ${error}`);
            }
        }
    };


    registerServiceWorker();
</script>