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

<section class="dashboard_section">
    <div class="dashboard_inner top-space">
        @include('user.dashboard.sidebar')
        <div class="right_side_wrap top-space">
            <div class="setting listing-block">
                <div class="row">
                    <div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                        <div class="breadcame margin mb-0">
                            <div class="breadcame_area transaction_breadcame">
                                <div class="left">
                                    <h2>My Transactions</h2>
                                </div>
                                <div class="right">
                                    <div class="search_input_with_btn">
                                        <div class="form-group">
                                            <input type="text" class="form-control listing-search" placeholder="Search">
                                            <div class="input-group-append">
                                                <a href="javascript:;">
                                                    <i class="far fa-search"></i>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="filter">
                                        <ul>
                                            @include('user.transaction.filters')
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xxl-7 col-xl-8 col-lg-12 col-md-12 col-sm-12 col-12">
                        <div class="flash-message"></div> 
                        <div class="up_area two transactionPage">
                            <div class="right_area transaction">
                                @if($user->stripe_card_id)
                                <div class="card-show match_height_col">
                                    <div class="up" style="z-index: 5;">
                                        <div class="left">
                                            <div class="img_area">
                                                @if (str_contains($user->card_type, 'Visa'))
                                                    <img src="{{ url('frontend/images/card/visa.png') }}" alt="..." />
                                                @elseif(str_contains($user->card_type, 'UnionPay'))
                                                    <img src="{{ url('frontend/images/card/unionpay.png') }}" alt="..." />
                                                @elseif(str_contains($user->card_type, 'Discover'))
                                                    <img src="{{ url('frontend/images/card/discover.png') }}" alt="..." />
                                                @elseif(str_contains($user->card_type, 'Japan'))
                                                    <img src="{{ url('frontend/images/card/jcb.png') }}" alt="..." />
                                                @elseif(str_contains($user->card_type, 'MasterCard'))
                                                    <img src="{{ url('frontend/images/card/maestro.png') }}" alt="..." />
                                                @elseif(str_contains($user->card_type, 'Mastercard'))
                                                    <img src="{{ url('frontend/images/card/maestro.png') }}" alt="..." />
                                                @elseif(str_contains($user->card_type, 'American'))
                                                    <img src="{{ url('frontend/images/card/american-express.png') }}" alt="..." />
                                                @else
                                                    <img src="{{ url('frontend/images/card/credit-card.png') }}" alt="..." />
                                                @endif

                                            </div>
                                        </div>
                                        <div class="right">
                                            <div class="dropdown">
                                                <button class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                                    <i class="fas fa-caret-down"></i>
                                                </button>
                                                <ul class="dropdown-menu">
                                                    <li><a href="javascript:;" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#changeCard">Change</a></li>
                                                    <li><a class="dropdown-item _remove_card" data-action="{{ route('user.unlink.card') }}" href="javascript:;">Remove</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card_number">
                                        <p>*************{{ $user->card }}</p>
                                    </div>
                                    <div class="exipre">
                                        <p>Expires</p>
                                    </div>
                                    <div class="name">
                                        <div class="left">
                                            <p>
                                                {{ $user->holder_name }}
                                            </p>
                                        </div>
                                        <div class="right">
                                            <p>
                                                {{ $user->exp_month }}/{{ $user->exp_year }}
                                            </p>
                                        </div>
                                    </div>
                                    <div class="marked">
                                        <img src="{{ url('frontend/images/Ornament.png') }}" alt="..." />
                                    </div>
                                </div>
                                @else
                                <div class="card-show match_height_col">
                                    <div class="add_card_plus">
                                        <a href="javascript:;" data-bs-toggle="modal" data-bs-target="#addcard">
                                            <i class="fal fa-plus"></i>
                                        </a>
                                        <p>Add card</p>
                                    </div>
                                    <div class="marked">
                                        <img src="{{ url('frontend/images/Ornament.png') }}" alt="..." />
                                    </div>
                                </div>
                                @endif
                                @if($user->membership_id)                                                
                                <div class="purchase_pplan two match_height_col">
                                    @if($user->membership_id && strtotime($user->membership_expire) >= strtotime(date('Y-m-d')))
                                    <a href="javascript:;" class="btn btn-primary">{{ $user->membership_title }}</a>
                                    @else
                                    <a href="javascript:;" class="btn btn-primary">{{ $user->membership_title }}</a>
                                    <a href="{{ route('user.renewPlan',['id' => General::encrypt($user->membership_id)]) }}" class="btn btn-primary renew_btn">Renew</a>
                                    @endif
                                    <div class="purache_date">
                                        <div class="left">
                                            <p>
                                                Date of purchase
                                            </p>
                                            <h6>
                                                {{ date('d/m/Y',strtotime($user->membership_date)) }}
                                            </h6>
                                        </div>
                                        <div class="right">
                                            <div class="exp">
                                                <p>
                                                    Expire Date
                                                </p>
                                                <h6>
                                                    {{ date('d/m/Y',strtotime($user->membership_expire)) }}
                                                </h6>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @else
                                <div class="purchase_pplan match_height_col">
                                    <a href="{{ route('user.subscriptionPlan') }}" class="btn btn-primary">Purchase a Subscription</a>
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>
                    <div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                        <div class="change_password">
                            <div class="transaction my_order pt-0">
                                <div class="table_row_area">
                                    <div class="table-responsive">
                                        <table class="table align-items-center table-flush listing-table">
                                            <thead>
                                                <tr>
                                                    <th style="width: 2%;"></th>
                                                    <th style="width: 25%;">
                                                                                                                <i class="far fa-sort" data-field="transactions.transaction_id" data-sort="asc"></i>
                                                                                                                Transactions id 
                                                    </th>
                                                    <th style="width: 20%;">
                                                                                                                <i class="far fa-sort" data-field="transactions.transaction_type" data-sort="asc"></i>
                                                                                                                Payment type
                                                    </th>
                                                    <th style="width: 20%;">
                                                                                                                <i class="far fa-sort" data-field="transactions.amount" data-sort="asc"></i>
                                                                                                                Amount
                                                    </th>
                                                    <th style="width: 18%;">
                                                                                                                <i class="far fa-sort" data-field="transactions.created" data-sort="asc"></i>
                                                                                                                Date
                                                    </th>
                                                    <th style="width: 15%;">
                                                                                                                <i class="far fa-sort" data-field="transactions.status" data-sort="asc"></i>
                                                                                                                Status
                                                    </th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @if(!empty($listing->items()))
                                                    @include('user.transaction.listingLoop')
                                                @else
                                                    <td align="left" colspan="7">
                                                        No records found!
                                                    </td>
                                                @endif
                                            </tbody>
                                            <tfoot>
                                                <tr>
                                                    <th align="left" colspan="20">
                                                        @include('frontend.partials.pagination', ["pagination" => $listing])
                                                    </th>
                                                </tr>
                                            </tfoot>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<div class="modal el_modal transaction_views fade" id="transaction_view" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog  modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body">
                <div class="row">
                    <div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                        <div class="content_box">
                            <div class="content">
                                <div class="img_areas">
                                    <img src="{{ url('frontend/images/polygon-3.png') }}" alt=".." />
                                </div>
                                <div class="comtnt">
                                    <p>
                                        You can only view these options if you are an active subscriber
                                    </p>
                                    
                                    <a href="javascript:;" data-bs-dismiss="modal" aria-label="Close" class="btn btn-primary ">Okay</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal el_modal transaction_views fade" id="transaction_view" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog  modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body">
                <div class="row">
                    <div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                        <div class="content_box">
                            <div class="content">
                                <div class="img_areas">
                                    <img src="{{ url('frontend/images/polygon-3.png') }}" alt=".." />
                                </div>
                                <div class="comtnt">
                                    <p>
                                        You can only view these options if you are an active subscriber
                                    </p>
                                    
                                    <a href="javascript:;" data-bs-dismiss="modal" aria-label="Close" class="btn btn-primary ">Okay</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@include('user.profile.addCard')
@include('user.profile.changeCard')

@endsection