@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 Banks</h3>
                </div>
                <div class="right-info">
                    <button class="delete-card-btn" disabled onclick="deleteBank()"> Delete Account</button>
                    {{-- <a href="#" class="delete-card-btn " disabled>Delete Card</a> --}}
                </div>
            </div>
            <div class="card-lists flex-row">

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

                                        <h5>Acc Holder Name:- {{ $account['acc_holder_name'] }}</h5>
                                        <h5>Acc No:-  {{ $account['acc_number'] }}</h5>
                                        <h5>Bank Name:- {{ $account['bank_name'] }}</h5>
                                        <h5>IFSC Code:-  {{ $account['ifsc_code'] }}</h5>
                                        <h5>Account Type:-  {{ $account['type'] }}</h5>


                                    </div>
                                    {{-- <div class="img-info">
                                       
                                    </div> --}}
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach

                <div class="card-item @if (count($allAccount) == 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 Bank</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 Bank</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('addBank') }}" method="POST" enctype="multipart/form-data" name="bank_add"
                        id="bank_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>Account Holder name</label>
                                        <input type="text" class="form-control-s1"
                                            placeholder="Enter account holder’s full name" name="acc_holder_name" required>
                                    </div>
                                </div>
                                <div class="col-12 col-md-12 fix-col">
                                    <div class="custom-form-group-s1">
                                        <label>Account Number</label>
                                        <div class="input-with-right-icon">
                                            <input type="text" class="form-control-s1 card_name" id="account_number"
                                                placeholder="Account Number" name="acc_number" maxlength="19" required>
                                           
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 col-md-12 fix-col">
                                    <div class="custom-form-group-s1">
                                        <label>Bank name</label>
                                        <input type="text" class="form-control-s1"
                                            placeholder="Enter cardholder’s full name" name="bank_name" required>
                                    </div>
                                </div>
                                
                                <div class="col-12 col-md-12 fix-col">
                                    <div class="custom-form-group-s1">
                                        <label>Bank IFSC Code</label>
                                        <input type="text" class="form-control-s1"
                                            placeholder="Enter cardholder’s full name" name="ifsc_code" required>
                                    </div>
                                </div>

                                <div class="col-12 col-md-12 fix-col">
                                    <div class="custom-form-group-s1">
                                        <label>Account Type</label>
                                        <select name="type" id="type" required class="form-control-s1">
                                            <option value="">Selected Account</option>
                                            <option value="Personal">Personal</option>
                                            <option value="Saving">Saving</option>
                                            <option value="Checking">Checking</option>
                                          </select>
                                    </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 Bank Account</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() {

       


        // 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>