@extends('layouts.user')

@section('title')
    @lang('Virtual Cards')
@endsection

@section('breadcrumb')
    Virtual Cards
@endsection

@section('content')
    <style>
        .cardb {
            width: 350px;
            height: 200px;
            border-radius: 15px;
            color: white;
            padding: 20px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            position: relative;
            overflow: hidden;
            background: url('{{ asset('assets/card_bg.jpg') }}') no-repeat center center;
            background-size: cover;
        }

        .card-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10px;
        }

        .chip img {
            width: 50px;
            height: 40px;
        }

        .company-name {
            font-size: 14px;
            font-weight: bold;

            margin-left: 10px;
        }

        .card-number {
            font-size: 22px;
            letter-spacing: 2px;
            margin-bottom: 10px;
        }

        .card-info {
            font-size: 12px;
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
        }

        .card-info .expiry {
            font-size: 12px;
            text-align: center;
        }

        .card-type {
            position: absolute;
            bottom: 20px;
            right: 20px;
        }

        .card-type img.card-logo {
            width: 50px;
            height: auto;
        }

        .card-holder {
            position: absolute;
            bottom: 10px;
            left: 20px;
            font-size: 14px;
            text-transform: uppercase;
        }

        .card-holder span {
            font-size: 16px;
            margin-top: 5px;
            display: block;
        }
    </style>



    <!-- content @s -->

    <div class="nk-content nk-content-fluid">
        <div class="container-xl wide-lg">
            <div class="nk-content-body">



                <div class="nk-block-head nk-block-head-sm">
                    <div class="nk-block-between">
                        <div class="nk-block-head-content">

                            <h2 class="title"><a href="#" onclick="history.go(-1)" class="btn btn-icon btn-trigger nk-chat-hide ms-n1 d-lg-none "><em class="icon ni ni-arrow-left "></em></a>Virtual Cards</h2>

                            <div class="nk-block-des text-soft">
                                <p>Do any transaction with you our USD Virtual Cards.</p>
                            </div>
                        </div><!-- .nk-block-head-content -->
                        <!-- .nk-block-head-content -->
                    </div><!-- .nk-block-between -->
                </div><!-- .nk-block-head -->
                <div class="nk-block">
                    <div class="nk-block">
                        <div class="row ">
                            @foreach($virtualCards as $card)


                                <div class="col-md-4" style="margin-right:20px">
                                    <a href="{{ route('user.virtual-cards.details', $card->_id) }}">
                                        <div class="cardb">
                                            <div class="card-header">
                                                <div class="chip">
                                                    <img src="{{ asset('assets/u_dashboard/images/favicon.png') }}" alt="Chip" >
                                                </div>
                                                <div class="company-name">Refer2Trade</div>
                                            </div>

                                            <div class="card-number">{{$card->masked_pan}}</div>
                                            <div class="card-info">
                                                <div class="expiry">
                                                    EXPIRES <span>**/**</span>
                                                </div>
                                                <div class="expiry">
                                                    CVV <span>***</span>
                                                </div>
                                            </div>
                                            <div class="card-type">
                                                <img src="{{ asset('assets/'.$card->cardbrand.'.png') }}" alt="Card Brand Logo" class="card-logo">
                                            </div>
                                            <div class="card-holder">
                                                <span>{{$card->first_name}}</span>
                                            </div>
                                        </div>
                                    </a>
                                    <hr>
                                    <ul class="nk-block-tools g-3">
                                        <li>Status:
                                            @if($card->cardstatus)
                                                <span class="badge bg-success"> Active</span>
                                            @else
                                                <span class="badge bg-danger"> Not Active</span>
                                            @endif
                                        </li>
                                    </ul>
                                    <hr>
                                </div>





                            @endforeach

                                <div class="col-md-4" style="margin-left:20px">

                                    <div class="card card-bordered dashed">
                                        <div class="nk-wgw-add">
                                            <div class="nk-wgw-inner">
                                                <a href="{{route('user.virtual-cards.create')}}" >
                                                    <div class="add-icon">
                                                        <em class="icon ni ni-plus"></em>
                                                    </div>
                                                    <h6 class="title">Create Virtual New Card</h6>
                                                </a>

                                            </div>
                                        </div>
                                    </div><!-- .card -->






                                </div><!-- .row -->
                        </div><!-- .nk-block -->
                    </div>

            </div>

    </div>
    </div>

    <!-- content @e -->

    @include('user.wallets._modal_add_asset');
@endsection