@extends('layouts.user_dashboard_main')
@section('content')

    <div class="dashboard-recent-act-rg-card">
        <div class="recent-activity">

            <div class="list-header">
                <div class="left-info">
                    <h3>@lang('public.Contact_details')</h3>
                </div>
                <div class="right-info">
                    <div class="search-box">
                        <form action="">
                            <div class="form-group">
                                <input type="search" id="contact_search" name="contact_search" placeholder="@lang('public.Search_Contact')"
                                    class="form-control" value="{{ $search }}">
                            </div>
                            <button type="submit" class="btn btn-primary d-none" id="search_btn">@lang('public.search')</button>
                        </form>
                    </div>
                </div>
            </div>

            <div class="contact-list-details">
                <ul>
                    @if($search==Auth::user()->phone)
                    <label for="u" class="cursor-pointer label-li justify-content-center">
                        <figure class="user-img-w-text">
                            <figcaption style="color:red;">Can't Send money to yourself</figcaption>
                        </figure>
                    </label>
                    @endif
                    @if($contacts !== null)
                        @forelse ($contacts as $contact)
                            <li>
                                <figure class="user-img-w-text">
                                    <div class="img-container">
                                        <img src="{{ asset('storage/profile_images/' . $contact->profile_image) }}">
                                    </div>
                                    <figcaption>{{ $contact->name }}</figcaption>
                                </figure>
                                <div class="action-buttons">
                                    <a href="/contact-pay/{{ $contact->id }}" class="custom-btn send">@lang('public.Send')</a>
                                    <a href="/contact-request/{{ $contact->id }}" class="custom-btn request">@lang('public.Request')</a>
                                </div>
                            </li>
                        @empty
                            <li>
                                <figure class="user-img-w-text">
                                    <div class="img-container">
                                        <img src="{{ asset('frontend/assets/images/user-image.png') }}">
                                    </div>
                                    <figcaption>{{ $search }}</figcaption>
                                </figure>
                                <div class="action-buttons">
                                    <a href="javascript:;" class="custom-btn send">@lang('public.Invite')</a>
                                </div>
                            </li>
                        @endforelse
                    @else
                    @endif
                </ul>
            </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-top:60px;">@lang('public.No_Saved_Card')</h5>

                        </div>
                    </div>

                </div>
            @endif
        </div>

    </div>

    <!-- ================ end: custom-dashboard-main-content ================ -->



@endsection
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
    $(document).ready(function() {
        $("#contact_search").keyup(delay(function(e) {
            if ($(this).val().length >= 4) {
                console.log($(this).val());
                $("#search_btn").click();
            }
        }, 1500));

    })

    function delay(callback, ms) {
        var timer = 0;
        return function() {
            var context = this,
                args = arguments;
            clearTimeout(timer);
            timer = setTimeout(function() {
                callback.apply(context, args);
            }, ms || 0);
        };
    }

</script>