@extends('web.layout.master')

@section('content')
    <div class="container">

        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('my-account') }}" aria-label="Account overview">Account
                        overview</a></li>
                <li class="breadcrumb-item active" aria-current="page">Payment Information</li>
            </ol>
        </nav>
        <div class="row">
            <div class="col-sm-12">
                <div class="mb-2 text-black font-weight-bold">
                    <label class="fs-1">Payment Information</label>
                </div>
            </div>
        </div>
        @foreach (['danger', 'warning', 'success', 'info'] as $msg)
            @if (Session::has('alert-' . $msg))
                <p class="alert alert-{{ $msg }}">{{ Session::get('alert-' . $msg) }}</p>
            @endif
        @endforeach
        <div class="row">
            <div class="col-md-3">

                <a onclick="addCardForm()" class="btn btn-outline-primary w-2" aria-label="+ ADD NEW ADDRESS">+ ADD NEW
                    CARD</a>
            </div>

        </div>

        <div class="row mt-2" style="min-height: 300px">


            @forelse ($customer_card as $c)
                <div class="col-md-3">
                    <div class="card mt-2 border border-dark border-3">

                        <div class="card-body">
                            <div style="min-height: 100px">
                                <div class="row">
                                    <div class="col-md-2" style="font-size:30px;">
                                        <i class="fa fa-credit-card" aria-hidden="true"></i>

                                    </div>

                                    <div class="col-md-10">
                                        <p><b>{{ $c->name_on_card }}</b><br> Credit card ending in {{ $c->cardNumber }}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-2 text-start">
                                    @if ($c->is_default == 1)
                                        <span class="badge bg-success">Default</span>
                                    @endif
                                </div>
                                <div class="col-md-10 text-end">
                                    <a onclick="editCardForm('{{ \Crypt::encryptString($c->id) }}')" class="btn btn-sm btn-primary"
                                        aria-label="EDIT"><i class="fa fa-edit"></i> EDIT</a>
                                    <a onclick="deleteUser(event)" data-href="{{ route('customer-card-delete', \Crypt::encryptString($c->id)) }}"
                                        class="btn btn-sm btn-danger" aria-label="DELETE"><i class="fa fa-trash"></i>
                                        DELETE</a>

                                </div>

                            </div>

                        </div>
                    </div>
                </div>
            @empty
                <p>No address available</p>
            @endforelse


        </div>

    </div>



    <div class="modal fade" id="customerCardAdd" tabindex="-1" aria-labelledby="customerCardAddModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="customerCardAddModalLabel">Add a credit or debit card</h5>
                    <button aria-labelledby="..." type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="customerCard" action="{{ route('customer-card-add-process') }}" method="post">
                        @csrf

                        <div class="row mt-2">

                            <div class="col-12">
                                <input aria-labelledby="PartsWarehouse" type="hidden" name="authorizeId" id="authorizeId" value="">
                                <div class="shipping-address-input form-group">
                                    <label for="card_number">Card number</label>

                                    <span class="card-type mt-4" style="padding-left:10px;"></span>
                                    <input aria-labelledby="PartsWarehouse" placeholder="Card Number" id="cc" name="card_number" type="text"
                                        onkeypress="return checkDigit(event,this)" class="form-control card_number">
                                </div>

                                <div class="form-group">
                                    <label for="name_on_card">Name on card</label>
                                    <input aria-labelledby="PartsWarehouse" type="text" class="form-control" value="{{ old('name_on_card') }}"
                                        name="name_on_card" id="name_on_card" placeholder="Enter name on card"
                                        autocomplete="off">
                                </div>
                            </div>

                            <div class="date-cvv-main clearfix form-group">

                                <div class="row mt-2">
                                    <label for="name_on_card">Expiration date</label>

                                    <div class="col-lg-4 col-md-4 col-sm-4 col-5">
                                        <select name="expiry_month" id="expiry_month" class="form-control">
                                            <option value=""> Month</option>
                                            <option value="01">01</option>
                                            <option value="02">02</option>
                                            <option value="03">03</option>
                                            <option value="04">04</option>
                                            <option value="05">05</option>
                                            <option value="06">06</option>
                                            <option value="07">07</option>
                                            <option value="08">08</option>
                                            <option value="09">09</option>
                                            <option value="10">10</option>
                                            <option value="11">11</option>
                                            <option value="12">12</option>
                                        </select>
                                    </div>
                                    <div class="col-lg-4 col-md-4 col-sm-4 col-5">
                                        <select name="expiry_year" id="expiry_year"
                                            class="form-control form-control-solid ">
                                            <option value="">Year</option>
                                                                                        <option value="2025">2025</option>
                                                                                        <option value="2026">2026</option>
                                                                                        <option value="2027">2027</option>
                                                                                        <option value="2028">2028</option>
                                                                                        <option value="2029">2029</option>
                                                                                        <option value="2030">2030</option>
                                                                                        <option value="2031">2031</option>
                                                                                        <option value="2032">2032</option>
                                                                                        <option value="2033">2033</option>
                                                                                        <option value="2034">2034</option>
                                                                                        <option value="2035">2035</option>
                                            
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-group mt-2">
                            <div class="modal-footer">
                                <button aria-labelledby="..." type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                                <button aria-labelledby="..." type="submit" class="btn btn-primary">Add Your Card</button>
                            </div>
                        </div>

                    </form>
                </div>

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


    <div class="modal fade" id="customerCardEdit" tabindex="-1" aria-labelledby="customerCardModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="customerCardModalLabel">Edit payment method</h5>
                    <button aria-labelledby="..." type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="editCard">

                </div>

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

    <script>
        onload = function() {
            document.getElementById('cc').oninput = function() {
                this.value = cc_format(this.value)
            }
        }

        function cc_format(value) {
            var v = value.replace(/\s+/g, '').replace(/[^0-9]/gi, '')
            var matches = v.match(/\d{4,16}/g);
            var match = matches && matches[0] || ''
            var parts = []
            for (i = 0, len = match.length; i < len; i += 4) {
                parts.push(match.substring(i, i + 4))
            }
            if (parts.length) {
                return parts.join(' ')
            } else {
                return value
            }
        }

        function checkDigit(event, $t) {

            var code = (event.which) ? event.which : event.keyCode;

            if ((code < 48 || code > 57) && (code > 31)) {
                return false;
            }

            var cardType = GetCardType($($t).val());
            $('.card-type').html('<i class="fab fa-brands fa-cc-' + cardType + '"></i>');

            return true;
        }

        function GetCardType(number) {

            // visa
            var re = new RegExp("^4");
            if (number.match(re) != null)
                return "visa";

            // Mastercard
            // Updated for Mastercard 2017 BINs expansion
            if (/^(5[1-5][0-9]{14}|2(22[1-9][0-9]{12}|2[3-9][0-9]{13}|[3-6][0-9]{14}|7[0-1][0-9]{13}|720[0-9]{12}))$/.test(
                    number))
                return "mastercard";

            // AMEX
            re = new RegExp("^3[47]");
            if (number.match(re) != null)
                return "amex";

            // Discover
            re = new RegExp("^(6011|622(12[6-9]|1[3-9][0-9]|[2-8][0-9]{2}|9[0-1][0-9]|92[0-5]|64[4-9])|65)");
            if (number.match(re) != null)
                return "discover";

            // Diners
            re = new RegExp("^36");
            if (number.match(re) != null)
                return "diners-club";

            // Diners - Carte Blanche
            re = new RegExp("^30[0-5]");
            if (number.match(re) != null)
                return "diners-club";

            // JCB
            re = new RegExp("^35(2[89]|[3-8][0-9])");
            if (number.match(re) != null)
                return "jcb";

            // Visa Electron
            re = new RegExp("^(4026|417500|4508|4844|491(3|7))");
            if (number.match(re) != null)
                return "visa";

            return "";
        }


        $.validator.addMethod('CCExp', function(value, element, params) {
            var minMonth = new Date().getMonth() + 1;
            var minYear = new Date().getFullYear();
            var expiry_date = $(params.expiry_date).val();
            var expiry_year = $(params.expiry_year).val();

            // expiry_date = expiry_date.split("/");

            var month = parseInt(expiry_date);
            var year = parseInt(expiry_year);
                return (!month || !year || year > minYear || (year === minYear && month >= minMonth));
          }, 'Your Credit Card Expiration date is invalid.');


        function deleteUser(e) {
            var url = e.currentTarget.getAttribute('data-href')
            Swal.fire({
                title: 'Are you sure?',
                text: "You won't be able to revert this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    window.location.href = url;
                }
            })
        }
    </script>

    <script>
        function addCardForm() {
            $('#customerCardAdd').modal('show');

        }

        function editCardForm(id) {

            var url = "{{ route('customer-card-edit', ['id' => ':id']) }}";
            url = url.replace(':id', id);
            $('#editCard').load(url)
            $('#customerCardEdit').modal('show');

        }
    </script>

    <script>

        $(document).ready(function() {

            $('#expiry_year').on('change', function(evt){
                $('#expiry_month').valid();
            });

            $(function() {

                $('#customerCard').validate({
                    rules: {

                        card_number: {
                            required: true,
                            creditcard: true,

                            remote: {
                                    headers: {
                                        'X-CSRF-TOKEN': "{{ csrf_token() }}"
                                    },
                                url: "{{ route('customer-card-validate') }}",
                                type: "get",
                                data: {
                                    card_number: function() {
                                        return $('.card_number').val();
                                        },

                                    }
                                }
                            },

                        name_on_card: {
                            required: true,
                        },
                        expiry_month: {
                            required: function() {
                                return $('input[name="authorizeId"]').val() == "";
                            },
                            CCExp: {
                                expiry_date: '#expiry_month'
                            }
                        },
                        expiry_year: {
                            required: function() {
                                return $('input[name="authorizeId"]').val() == "";
                            },
                            CCExp: {
                                expiry_date: '#expiry_year'
                            }
                        },

                    },
                    messages: {
                        card_number: {
                            remote: "This card already exists in your account.",
                            required: 'Please enter card number',
                            creditcard: 'Please enter a valid credit card number.'
                        },
                        name_on_card: {
                            required: 'Please enter name on card',
                        },
                        expiry_month: {
                            required: 'Please enter expiry month'
                        },
                        expiry_year: {
                            required: 'Please enter expiry year'
                        },

                    },
                    errorElement: 'span',
                    errorPlacement: function(error, element) {
                        error.addClass('invalid-feedback');
                        element.closest('.form-group').append(error);
                    },
                    highlight: function(element, errorClass, validClass) {
                        $(element).addClass('is-invalid');
                    },
                    unhighlight: function(element, errorClass, validClass) {
                        $(element).removeClass('is-invalid');
                    }
                });
            });
        });
    </script>
@endsection