@extends('layouts.user_dashboard_main')
@section('content')
    @if (session('error'))
        <div class="alert alert-danger errorMsg">
            {{ session('error') }}
        </div>
    @endif
    @if (session('success'))
        <div class="alert alert-success">
            {{ session('success') }}
        </div>
    @endif
    <div class="dashboard-recent-act-rg-card">

        <div class="card-info mw-100">
            <div class="list-header">
                <div class="left-info">
                    <h3>My Cards</h3>
                </div>
                <div class="right-info">
                    <button class="delete-card-btn" disabled onclick="deleteCard()"> Delete Card</button>
                    {{-- <a href="#" class="delete-card-btn " disabled>Delete Card</a> --}}
                </div>
            </div>
            <div class="card-lists flex-row">

                @foreach ($allCard as $card)
                    <div class="card-item">
                        <div class="position-relative">
                            <input type="checkbox" name="cardName" class="select-check" value="{{ $card['id'] }}">
                            <div class="card-box">
                                <div class="card-text-img-row">
                                    <div class="text-info">

                                        <h5>{{ $card['exp_month'] }}/{{ $card['exp_year'] }}</h5>
                                        <h5>**** **** **** {{ $card['number_last'] }}</h5>
                                    </div>
                                    <div class="img-info">
                                        <img src="{{ asset('frontend/assets/images/mastercard.svg') }}">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach

                <div class="card-item @if (count($allCard) == 3) d-none @endif">
                    <div class="add-card-box" data-toggle="modal" data-target="#add-card-modal">
                        <img src="{{ asset('frontend/assets/images/add-card.svg') }}">
                    </div>
                    <div class="view-more">
                        <a href="#" class="view-btn">Add new card</a>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <!-- ================ end: custom-dashboard-main-content ================ -->


    <!-- ================ start: add-card-modal ================ -->
    <div class="modal add-card-modal" id="add-card-modal">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h4>Add new card</h4>
                    <button type="button" class="close" data-dismiss="modal"><img
                            src="{{ asset('frontend/assets/images/close-icon01.svg') }}"></button>
                </div>

                <div class="modal-body">
                    <form action="{{ route('addCard') }}" method="POST" enctype="multipart/form-data" name="card_add"
                        id="card_add">
                        @csrf
                        <div class="add-card-box">
                            <div class="row fix-row">
                                <div class="col-12 col-md-12 fix-col">
                                    <div class="custom-form-group-s1">
                                        <label>Cardholder name</label>
                                        <input type="text" class="form-control-s1"
                                            placeholder="Enter cardholder’s full name" name="name">
                                    </div>
                                </div>
                                <div class="col-12 col-md-12 fix-col">
                                    <div class="custom-form-group-s1">
                                        <label>Card Number</label>
                                        <div class="input-with-right-icon">
                                            <input type="text" class="form-control-s1 card_name" id="card_name"
                                                placeholder="0000 0000 0000 0000" name="number" maxlength="19"
                                                pattern="(\d{4}\s?){4}" required>
                                            <img src="{{ asset('frontend/assets/images/teenyicons_credit-card-solid.svg') }}"
                                                class="right-icon">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 col-md-6 fix-col">
                                    <div class="custom-form-group-s1">
                                        <label>Expiry date</label>
                                        <div class="exp-wrapper ">
                                            <input autocomplete="off" class="exp " name="exp_month" id="month"
                                                maxlength="2" pattern="[0-9]*" inputmode="numerical" placeholder="MM"
                                                type="text" data-pattern-validate required />
                                            <input autocomplete="off" class="exp" name="exp_year" id="year"
                                                maxlength="2" pattern="[0-9]*" inputmode="numerical" placeholder="YY"
                                                type="text" data-pattern-validate required />
                                        </div>
                                    </div>
                                </div>


                                <div class="col-12 col-md-12 fix-col">
                                    <div class="custom-actions-group-s1">
                                        <button type="submit" class="theme-solid-btn submit-btn w-100">Add Card</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.33.1/sweetalert2.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.33.1/sweetalert2.js">
</script>
<script>
    $(document).ready(function() {

        var input = document.getElementById("card_name");

        card_name.addEventListener('keypress', function(e) {
            // console.log(e.keyCode);
            if (e.keyCode !== 8) {
                if (this.value.length === 4 || this.value.length === 9 || this.value.length === 14) {
                    this.value = this.value += ' ';
                }
            }
        });


        const monthInput = document.querySelector('#month');
        const yearInput = document.querySelector('#year');

        const focusSibling = function(target, direction, callback) {
            const nextTarget = target[direction];
            nextTarget && nextTarget.focus();
            // if callback is supplied we return the sibling target which has focus
            callback && callback(nextTarget);
        }

        // input event only fires if there is space in the input for entry. 
        // If an input of x length has x characters, keyboard press will not fire this input event.
        monthInput.addEventListener('input', (event) => {

            const value = event.target.value.toString();
            // adds 0 to month user input like 9 -> 09
            if (value.length === 1 && value > 1) {
                event.target.value = "0" + value;
            }
            // bounds
            if (value === "00") {
                event.target.value = "01";
            } else if (value > 12) {
                event.target.value = "12";
            }
            // if we have a filled input we jump to the year input
            2 <= event.target.value.length && focusSibling(event.target, "nextElementSibling");
            event.stopImmediatePropagation();
        });

        yearInput.addEventListener('keydown', (event) => {
            // if the year is empty jump to the month input
            if (event.key === "Backspace" && event.target.selectionStart === 0) {
                focusSibling(event.target, "previousElementSibling");
                event.stopImmediatePropagation();
            }
        });

        const inputMatchesPattern = function(e) {
            const {
                value,
                selectionStart,
                selectionEnd,
                pattern
            } = e.target;

            const character = String.fromCharCode(e.which);
            const proposedEntry = value.slice(0, selectionStart) + character + value.slice(selectionEnd);
            const match = proposedEntry.match(pattern);

            return e.metaKey || // cmd/ctrl
                e.which <= 0 || // arrow keys
                e.which == 8 || // delete key
                match && match["0"] === match
                .input; // pattern regex isMatch - workaround for passing [0-9]* into RegExp
        };

        document.querySelectorAll('input[data-pattern-validate]').forEach(el => el.addEventListener('keypress',
            e => {
                if (!inputMatchesPattern(e)) {
                    return e.preventDefault();
                }
            }));


        // form 
        // $('#card_add').submit(function(e){
        //     console.log('under submit');
        //         e.preventDefault();
        //       var type= creditCardTypeFromNumber($('#card_name').val());
        //         console.log(type);
        // }); //submit




        // card type detect

        function creditCardTypeFromNumber(num) {
            console.log('under here', num);
            // first, sanitize the number by removing all non-digit characters.
            num = num.replace(/[^\d]/g, '');
            // now test the number against some regexes to figure out the card type.
            if (num.match(/^5[1-5]\d{14}$/)) {
                return 'MasterCard';
            } else if (num.match(/^4\d{15}/) || num.match(/^4\d{12}/)) {
                return 'Visa';
            } else if (num.match(/^3[47]\d{13}/)) {
                return 'AmEx';
            } else if (num.match(/^6011\d{12}/)) {
                return 'Discover';
            }
            return 'UNKNOWN';
        }




        // card delete

        var checkboxes = $("input[type='checkbox']"),
            deleteBttn = $(".delete-card-btn");

        checkboxes.click(function() {
            deleteBttn.attr("disabled", !checkboxes.is(":checked"));
        });





    });

    function deleteCard() {

        var array = $.map($('input[type="checkbox"]:checked'), function(c) {
            return c.value;
        })
        var card_id = array.map(Number);
        var _token = $("input[name='_token']").val();
        console.log(_token);


        // Old Code 
        // ---------------------------------------------------

        
        // if (confirm('Are you sure you want to delete this?')) {
        // $.ajax({
        //     url: "{{ route('deleteCard') }}",
        //     type: "POST",
        //     data: {
        //         _token: _token,
        //         card_id: card_id,

        //     },
        //     success: function(data) {
        //         swal({
        //             title: "Removed!",
        //             text: "Card has been removed ",
        //             type: "success"
        //         }).then(function() {
        //             window.location.reload();
        //         });

        //     }
        // })
        // }


        // New Code 
        //---------------------------------

        swal({
            title: "Are you sure?",
            text: "You will not be able to use this card",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "Yes, delete it!",
        }).then(result => {

            if (result.value) {
                $.ajax({
                    url: "{{ route('deleteCard') }}",
                    type: "POST",
                    data: {
                        _token: _token,
                        card_id: card_id,

                    },
                    success: function(data) {
                        swal({
                            title: "Removed!",
                            text: "Card has been removed ",
                            type: "success"
                        }).then(function() {
                            window.location.reload();
                        });

                    }
                })
            } else if (
                // Read more about handling dismissals
                result.dismiss === swal.DismissReason.cancel
            ) {
                swal("Cancelled", "Your card is not removed :)", "error");
            }
            swall.closeModal();
        });


    }
</script>