@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="buysell-title text-left">
                        <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 Card Details</h2>
                    </div><!-- .buysell-title -->
                    <div class="">
                        <div class="row g-gs">



                                <div class="col-sm-12" style="margin-right:20px">
                                    <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" id="cardNumber">{{ wordwrap($virtualCard->masked_pan, 4, ' ', true)}}</div>
                                        <div class="card-info">
                                            <div class="expiry">
                                                EXPIRES <span id="expiry_date">**/**</span>
                                            </div>
                                            <div class="expiry">
                                                CVV <span id="cvv">***</span>
                                            </div>
                                        </div>
                                        <div class="card-type">
                                            <img src="{{ asset('assets/'.$virtualCard->cardbrand.'.png') }}" alt="Card Brand Logo" class="card-logo">
                                        </div>
                                        <div class="card-holder">
                                            <span>{{$virtualCard->first_name}}</span>
                                        </div>
                                    </div>

                                    <address id="billing_address" >
                                        <b>Billing Address:</b>
                                       <br/> Address: {{$virtualCard->billing_address}}<br/>
                                        City: {{$virtualCard->billing_city}}<br/>
                                        State: {{$virtualCard->billing_state}}<br/>
                                        Postal: {{$virtualCard->billing_postal_code}}<br/>
                                        Country: {{$virtualCard->billing_country}} <br/>
<b>Alternative Billing Address:</b>
                                        <br/> Address:  8 The Green Ste R<br/>
                                        City: Dover County<br/>
                                        State: Delaware<br/>
                                        Postal: 19901<br/>
                                        Country: US
                                    </address>
                                    <hr>
                                    <ul class="nk-block-tools g-3"  style="display: flex; gap: 1rem; overflow-x: auto; padding: 1rem; margin: 0; white-space: nowrap; scrollbar-width: thin;">
                                        <li >
                                            <button class=" btn btn-icon btn-outline-primary" id="showDetails" data-status="0" ><em class="icon ni ni-eye" id="revealIcon"></em><span id="revealText">Show Card Details</span> </button>
                                        </li>
                                    <li><button  class="btn btn-white btn-dim btn-outline-primary" data-bs-toggle="modal" data-bs-target="#fundCard"><em class="icon ni ni-download-cloud"></em><span>Fund Card</span></button></li>
                                        <li><a href="#" class="btn btn-white btn-dim btn-outline-primary"><em class="icon ni ni-download-cloud"></em><span>Withdraw</span></a></li>
                                        <li><button class="btn btn-white btn-dim btn-outline-danger" data-bs-toggle="modal" data-bs-target="#freezeCard"><em class="icon ni ni-lock"></em><span>{{$virtualCard->freeze_status?"Unfreeze Card":'Freeze Card'}} </span></button></li>

                                    </ul><br/>
                                    <h5 style="padding-left:100px">Card Balance: ${{$virtualCard->available_bal}} </h5>
                                    <hr>
                                </div>

                            <div class="col-md-12">
                                <div class="card card-bordered card-full">
                                    <div class="card-inner">
                                        <div class="card-title-group">
                                            <div class="card-title">
                                                <h6 class="title"><span class="me-2">Card Transaction Activities</span></h6>
                                            </div>

                                        </div>
                                    </div><!-- .card-inner -->
                                    <div class="card-inner p-0 border-top">
                                        <div class="nk-tb-list nk-tb-orders">
                                            <div class="nk-tb-item nk-tb-head">
                                                <div class="nk-tb-col nk-tb-orders-type"><span>Type</span></div>
                                                <div class="nk-tb-col"><span>Desc</span></div>
                                                <div class="nk-tb-col tb-col-sm"><span>Date</span></div>
                                                <div class="nk-tb-col tb-col-xxl"><span>Time</span></div>
                                                <div class="nk-tb-col tb-col-xxl"><span>Ref</span></div>
                                                <div class="nk-tb-col tb-col-sm text-end"><span>USD Amount</span></div>
                                                <div class="nk-tb-col text-end"><span>Status</span></div>
                                            </div><!-- .nk-tb-item -->
                                            <div class="nk-tb-item">

                                            </div><!-- .nk-tb-item -->
                                        </div>
                                    </div><!-- .card-inner -->
                                    <div class="card-inner-sm border-top text-center d-sm-none">
                                        <a href="#" class="btn btn-link btn-block">See History</a>
                                    </div><!-- .card-inner -->
                                </div><!-- .card -->
                            </div>
                        </div><!-- .nk-block -->
                    </div>

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


    <!-- content @e -->

    @include('user.virtual-card._fund_modal');
    @include('user.virtual-card._freeze_modal');
@endsection
@push('script')
    <script>
        $("#showDetails").click(function(e) {
            e.preventDefault();

            // Get the clicked button
            var revealButton = $(this);
            var iconElement = $("#revealIcon"); // Get the <em> element
           var revealText= $("#revealText");
            var cardId = revealButton.data("cardId");
            var status = revealButton.data("status");

            // DOM elements to update
            var cardNumber = $("#cardNumber");
            var expireDate = $("#expiry_date");
            var cvv = $("#cvv");

            // If card details are already visible, hide them
            if (status === '1') {
                // Toggle back to hidden
                cardNumber.text("{{$virtualCard->masked_pan}}");
                expireDate.text("**/**");
                cvv.text("***");

                // Update button and icon
                revealButton.data("status", '0');
                revealText.text("Show Card Details");
                iconElement.removeClass("ni-eye-off").addClass("ni-eye"); // Update the icon class
                return;
            }

            // Change button state to loading
            revealText.text("Loading...").prop("disabled", true);

            // CSRF Token
            let csrfToken = '{{ csrf_token() }}';

            // AJAX Request
            $.ajax({
                url: "{{ route('user.virtual-cards.reveal-card', $virtualCard->_id) }}",
                type: "POST",
                data: {
                    card_id: cardId,
                    _token: csrfToken
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    if (response.status === 'success') {
                        // Update card details
                        const cardNumberDirect = response.data.card_number;
                        const formattedCardNumber = cardNumberDirect.replace(/(\d{4})(?=\d)/g, '$1 ');
                        cardNumber.text(formattedCardNumber);
                        expireDate.text(response.data.expiry_date);
                        cvv.text(response.data.cvv);

                        // Update button and icon
                        revealButton.data("status", '1');
                        revealText.text("Hide Card Details");
                        iconElement.removeClass("ni-eye").addClass("ni-eye-off"); // Update the icon class
                    } else {
                        revealButton.data("status", '0');
                        revealText.text("Show Card Details");
                        iconElement.removeClass("ni-eye-off").addClass("ni-eye"); // Update the icon class
                        showAlert(response.message || "Unable to reveal card details.", 'error');
                    }
                },
                error: function(xhr) {
                    // Handle error response
                    let errorMessage = xhr.responseJSON?.message || "Something went wrong!";
                    showAlert(errorMessage, 'error');
                },
                complete: function() {
                    // Re-enable the button

                }
            });
        });
    </script>
@endpush