@extends('user.layouts.master')

@push('css')
    
@endpush

@section('breadcrumb')
    @include('user.components.breadcrumb',['breadcrumbs' => [
        [
            'name'  => __("Dashboard"),
            'url'   => setRoute("user.dashboard"),
        ]
    ], 'active' => __($page_title)])
@endsection

@section('content')
<div class="body-wrapper">
    <div class="dashboard-list-area mt-20">
        <div class="dashboard-header-wrapper">
            <h5 class="title">{{ __($page_title) }}</h5>
            <div class="dashboard-btn-wrapper">
                <div class="dashboard-btn">
                    <button type="button" class="btn--base" data-bs-toggle="modal" data-bs-target="#addModal"><i
                            class="las la-plus me-1"></i> {{ __("Add New Card") }}</button>
                </div>
            </div>
        </div>
        <div class="dashboard-list-wrapper">
            @include('user.components.card-table.card',[
                'data'      => $cards
            ])  
        </div>
    </div>
</div>

<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Start Modal
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<div class="modal fade" id="addModal" tabindex="-1" aria-labelledby="addModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" id="addModalLabel">
                <h5 class="modal-title">{{ __("Add New Card") }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="card-wrapper-add"></div>
                <form class="modal-form" id="payment-form" action="{{ setRoute('user.card.store') }}" method="POST">
                    @csrf
                    <div class="row">
                        <div class="col-xl-6 col-lg-6 form-group">
                            <label>{{ __("Card Holder Name") }}<span>*</span></label>
                            <input type="text" class="form--control custom-input" name="name" value="{{ old('name') }}"
                                placeholder="{{ __("Enter Name") }}...">
                        </div>
                        <div class="col-xl-6 col-lg-6 form-group">
                            <label>{{ __("Card Number") }}<span>*</span></label>
                            <input type="tel" class="form--control custom-input" name="card_number"
                            value="{{ old('card_number') }}" placeholder="{{ __("Enter Number") }}...">
                        </div>
                        <div class="col-xl-6 col-lg-6 form-group">
                            <label>{{ __("CVV/CVC") }}<span>*</span></label>
                            <input type="tel" class="form--control custom-input" name="card_cvc" value="{{ old('card_cvc') }}" placeholder="{{ __("CVV/CVC") }}..." >
                        </div>
                        <div class="col-xl-6 col-lg-6 form-group">
                            <label>{{ __("Exp Date") }}<span>*</span></label>
                            <input type="tel" class="form--control custom-input expiry-date" name="expiry_date" value="{{ old('expiry_date') }}" placeholder="{{ __("Enter Date") }}..." >
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn--base w-100">{{ __("Add") }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    End Modal
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
@endsection
@push('script')

<script>
    $(".expiry-date").keyup(function(){
        var inputValue  = $(this).val();
        
        if(inputValue.length == 2){
            $(".expiry-date").val(inputValue + " " + "/" + " ");
        }
    });
</script>
<!-- card js -->
<script src="{{ asset('public/frontend/js/card.js') }}"></script>
<script>
    (function ($) {
        "use strict";
        var card = new Card({
            form: '#payment-form',
            container: '.card-wrapper-add',
            formSelectors: {
                numberInput: 'input[name="card_number"]',
                expiryInput: 'input[name="expiry_date"]',
                cvcInput: 'input[name="card_cvc"]',
                nameInput: 'input[name="name"]'
            }
        });
        var editCard = new Card({
            form: '#payment-form-edit',
            container: '.card-wrapper',
            formSelectors: {
                numberInput: 'input[name="card_number"]',
                expiryInput: 'input[name="expiry_date"]',
                cvcInput: 'input[name="card_cvc"]',
                nameInput: 'input[name="name"]'
            }
        });
        
    })(jQuery);
</script>

@if(session('modal'))
    <script>
        $(document).ready(function(){
            $('#addModal').modal('show');
        });
    </script>
@endif

<script>
    itemSearch($("input[name=search_text]"),$(".card-data"),"{{ setRoute('user.card.search') }}",1);
</script>
@endpush

• [F] index.blade.php
  Delete

Developer

• Support

Back to Home page