@extends('layouts.master')

@section('content')
    @includeFirst([config('larapen.core.customizedViewPath') . 'common.spacer', 'common.spacer'])
    <div class="main-container">
        <div class="container">
            <div class="row">
                <div class="col-md-3 page-sidebar">
                    @includeFirst([
                        config('larapen.core.customizedViewPath') . 'account.inc.sidebar',
                        'account.inc.sidebar',
                    ])
                </div>

                <div class="col-md-9 page-content">

                    @include('flash::message')

                    @if (isset($errors) && $errors->any())
                        <div class="alert alert-danger alert-dismissible">
                            <button type="button" class="btn-close" data-bs-dismiss="alert"
                                aria-label="{{ t('Close') }}"></button>
                            <h5><strong>{{ t('oops_an_error_has_occurred') }}</strong></h5>
                            <ul class="list list-check">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <div class="inner-box default-inner-box" style="overflow: visible;">
                        {{-- Create Or Edit Payment Card --}}
                        <div class="card card-default">
                            <div class="card-header">
                                <div class="d-flex justify-content-between align-items-center">
                                    <h4 class="card-title text-primary">
                                        {{ 'Save Card' }}
                                    </h4>
                                    <a href="{{ url('account/wallet') }}" class="btn btn-primary">
                                        {{ 'See Wallet' }}
                                    </a>
                                </div>
                            </div>
                            <div id="createOrEdit" class="card-body">
                                <div class="row mb-3">
                                    <div class="col-xl-12 text-center">
                                        <img class="img-fluid" src="{{ url('images/authorizenet/payment.png') }}"
                                            title="{{ trans('authorizenet::messages.Payment with Authorize.Net') }}">
                                    </div>
                                </div>
                                <form id="wallet_card_form" name="create_address" class="form-horizontal" role="form"
                                    action="{{ url('account/wallet/card') }}" method="POST">
                                    {!! csrf_field() !!}

                                    {{-- user_id --}}
                                    <input name="user_id" type="hidden" value="{{ $user->id }}">

                                    {{-- country --}}
                                    <input name="country" type="hidden" value="{{ $user->country_code }}">

                                    {{-- Card Number --}}
                                                                        <div class="row mb-3 required">
                                        <label class="col-md-3 col-form-label{{ $cardNumError }}" for="card_number">
                                            {{ 'Card Number' }}
                                            <sup>*</sup>
                                        </label>
                                        <div class="col-md-9 col-lg-8 col-xl-6">
                                            <input name="card_number" type="text" value=""
                                                class="form-control{{ $cardNumError }}" placeholder="XXXXXXXXXXXXXX"
                                                autocomplete="off" autocapitalize="off" autocorrect="off" maxlength="19"
                                                oninput="this.value = this.value.replace(/[^0-9]/g, '')" required>
                                        </div>
                                    </div>
                                    {{-- Exp. Date --}}
                                                                        <div class="row mb-3 required">
                                        <label class="col-md-3 col-form-label{{ $expDateError }}" for="exp_date">
                                            {{ 'Exp. Date' }}
                                            <sup>*</sup>
                                        </label>
                                        <div class="col-md-9 col-lg-8 col-xl-6">
                                            <input name="exp_date" type="month" value="{{ date('Y-m') }}"
                                                min="{{ date('Y-m') }}" class="form-control{{ $expDateError }}"
                                                required>
                                        </div>
                                    </div>
                                    {{-- CVV --}}
                                                                        <div class="row mb-3 required">
                                        <label class="col-md-3 col-form-label{{ $cvvError }}" for="cvv">
                                            {{ 'CVV' }}
                                            <sup>*</sup>
                                        </label>
                                        <div class="col-md-9 col-lg-8 col-xl-6">
                                            <input name="cvv" type="text" value=""
                                                class="form-control{{ $cvvError }}" placeholder="CVV" maxlength="4"
                                                autocomplete="off" autocapitalize="off" autocorrect="off" required
                                                oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                                        </div>
                                    </div>
                                    {{-- Card Holder First Name --}}
                                                                        <div class="row mb-3 required">
                                        <label class="col-md-3 col-form-label {{ $firstNameError }}" for="first_name">
                                            {{ 'First Name' }}
                                            <sup>*</sup>
                                        </label>
                                        <div class="col-md-9 col-lg-8 col-xl-6">
                                            <input name="first_name" type="text"
                                                class="form-control {{ $firstNameError }}" placeholder="Jhon"
                                                value="{{ old('first_name', $card['firstName'] ?? '') }}" required>
                                        </div>
                                    </div>
                                    {{-- Card Holder Last Name --}}
                                                                        <div class="row mb-3 required">
                                        <label class="col-md-3 col-form-label {{ $lastNameError }}" for="last_name">
                                            {{ 'Last Name' }}
                                        </label>
                                        <div class="col-md-9 col-lg-8 col-xl-6">
                                            <input name="last_name" type="text"
                                                class="form-control {{ $lastNameError }}" placeholder="Wick"
                                                value="">
                                        </div>
                                    </div>
                                    {{-- button --}}
                                    <div class="row">
                                        <div class="offset-md-3 col-md-9">
                                            <button type="submit" id="wallet_card_form_submit" class="btn btn-primary">
                                                {{ 'Save' }}
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('after_scripts')
@endsection