@extends('layouts.app')
@section('title') {{'Payment Settings'}} @endsection

@section('content')

<div class="breadcrumb-header justify-content-between">
    <div class="my-auto">
        <h4 class="page-title">Payment Settings</h4>
        <ol class="breadcrumb">
            <li class="breadcrumb-item active" aria-current="page">Dashboard</li>
        </ol>
    </div>
</div>
<div class="row justify-content-center">
    <div class="col-md-12">
        <div class="row">
            <div class="col">
                @if(auth()->user()->hasPermissionTo('can_manage_payment_method'))
                    <div class="text-end">
                        <button type="button" class="btn btn-primary float-right mb-2" id="payment" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Add New Payment Method</button>
                        <input type="hidden" id="showSub" name="showPopupToBuySubscription" value="{{$showPopupToBuySubscription}}">
                    </div>
                @endif
                @include('layouts.message')
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <table id="example1" class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>Card number</th>
                            <th>Brand</th>
                            <th>Expires at</th>
                            <th>Card Type</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Add New Payment Method</h5>
                    <button type="button" class="close" id="cancel-btn" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="payment-form" action="{{route('paymentsettings.create')}}" method="post">
                        @csrf

                        <div class="row">
                            <div class="col-8 col-md-6">
                                <label for="card-element" id="card-element">Credit or debit card</label>
                                <input type="text" class="form-control" name="cardno" id="cr_no" placeholder="Card Number" minlength="19" maxlength="19">
                            </div>
                            <div class="col-4 col-md-6">
                                <label for="card-element">CVV</label><br>
                                <input type="password" class="form-control" name="cvcpwd" placeholder="&#9679;&#9679;&#9679;" class="placeicon" minlength="3" maxlength="3">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <label for="card-element">Expiration Date</label><br>
                            </div>
                            <div class="col-md-12">
                                <input type="text" class="form-control" name="exp" id="exp" placeholder="MM/YY" minlength="5" maxlength="5">
                            </div>
                        </div>
                    </form>

                </div>
                <div class="modal-footer">
                    <button id="cancel-btn" type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="submit_card">Add a new card</button>
                </div>
            </div>
        </div>
    </div>
    @push("scripts")
    <script src="{{ asset('assets/plugins/datatable/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatable/js/dataTables.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatable/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatable/responsive.bootstrap5.min.js') }}"></script>

    <script src="{{ asset('js/payment_settings.js')}}"></script>




    <script type='text/javascript'>
        var cardNum = document.getElementById('cr_no');
        cardNum.onkeyup = function(e) {
            if (this.value == this.lastValue) return;
            var caretPosition = this.selectionStart;
            var sanitizedValue = this.value.replace(/[^0-9]/gi, '');
            var parts = [];

            for (var i = 0, len = sanitizedValue.length; i < len; i += 4) {
                parts.push(sanitizedValue.substring(i, i + 4));
            }

            for (var i = caretPosition - 1; i >= 0; i--) {
                var c = this.value[i];
                if (c < '0' || c > '9') {
                    caretPosition--;
                }
            }
            caretPosition += Math.floor(caretPosition / 4);

            this.value = this.lastValue = parts.join('-');
            this.selectionStart = this.selectionEnd = caretPosition;
        }


        var expDate = document.getElementById('exp');
        expDate.onkeyup = function(e) {
            if (this.value == this.lastValue) return;
            var caretPosition = this.selectionStart;
            var sanitizedValue = this.value.replace(/[^0-9]/gi, '');
            var parts = [];

            for (var i = 0, len = sanitizedValue.length; i < len; i += 2) {
                parts.push(sanitizedValue.substring(i, i + 2));
            }

            for (var i = caretPosition - 1; i >= 0; i--) {
                var c = this.value[i];
                if (c < '0' || c > '9') {
                    caretPosition--;
                }
            }
            caretPosition += Math.floor(caretPosition / 2);

            this.value = this.lastValue = parts.join('/');
            this.selectionStart = this.selectionEnd = caretPosition;
        }
    </script>
    @endpush
</div>

@endsection