@extends('layouts.app')
@section('css')
    <style>
        /* Variables */
        * {
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, sans-serif;
            font-size: 20px;
            -webkit-font-smoothing: antialiased;
            display: flex;
            width: 100vw;
        }

        form {
            width: 30vw;
            min-width: 100%;
            align-self: center;
            box-shadow: 0px 0px 0px 0.5px rgba(50, 50, 93, 0.1),
            0px 2px 5px 0px rgba(50, 50, 93, 0.1), 0px 1px 1.5px 0px rgba(0, 0, 0, 0.07);
            border-radius: 7px;
            padding: 40px;
        }

        .StripeElement {
            border-bottom: 1px solid rgba(50, 50, 93, 0.1);
            box-shadow: 0px 0px 0px 0.5px rgba(50, 50, 93, 0.1),
            border-radius: 7px;
            padding: 10px;
        }

        .hidden {
            display: none;
        }

        button {
            background: #5469d4;
            font-family: Arial, sans-serif;
            color: #ffffff;
            border-radius: 4px;
            border: 0;
            padding: 12px 16px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            display: block;
            transition: all 0.2s ease;
            box-shadow: 0px 4px 5.5px 0px rgba(0, 0, 0, 0.07);
        }

        button:hover {
            filter: contrast(115%);
        }

        button:disabled {
            opacity: 0.5;
            cursor: default;
        }

        .spinner,
        .spinner:before,
        .spinner:after {
            border-radius: 50%;
        }

        .spinner {
            color: #ffffff;
            font-size: 22px;
            text-indent: -99999px;
            margin: 0px auto;
            position: relative;
            width: 20px;
            height: 20px;
            box-shadow: inset 0 0 0 2px;
            -webkit-transform: translateZ(0);
            -ms-transform: translateZ(0);
            transform: translateZ(0);
        }

        .spinner:before,
        .spinner:after {
            position: absolute;
            content: "";
        }

        .spinner:before {
            width: 10.4px;
            height: 20.4px;
            background: #5469d4;
            border-radius: 20.4px 0 0 20.4px;
            top: -0.2px;
            left: -0.2px;
            -webkit-transform-origin: 10.4px 10.2px;
            transform-origin: 10.4px 10.2px;
            -webkit-animation: loading 2s infinite ease 1.5s;
            animation: loading 2s infinite ease 1.5s;
        }

        .spinner:after {
            width: 10.4px;
            height: 10.2px;
            background: #5469d4;
            border-radius: 0 10.2px 10.2px 0;
            top: -0.1px;
            left: 10.2px;
            -webkit-transform-origin: 0px 10.2px;
            transform-origin: 0px 10.2px;
            -webkit-animation: loading 2s infinite ease;
            animation: loading 2s infinite ease;
        }
    </style>
@endsection
@section('content')

    @include('layouts.toolbar')

    <div id="kt_content_container" class="d-flex flex-column-fluid align-items-start container-xxl">
        <div class="content flex-row-fluid" id="kt_content">
            <div class="card">
                <div class="card-header border-0 pt-6">
                    <div class="card-title">
                        <div class="d-flex align-items-center position-relative my-1">
                            <h3 class="fw-semibold text-dark mb-7" style="font-weight: bolder !important;">Cards
                                Information</h3>
                        </div>
                    </div>
                </div>
                <div class="card-body py-4">
                    <div class="row">
                        <div class="col-lg-6 col-sm-12 col-md-12 mb-5">

                            @if(session('program') == 1)
                                <form action="{{url('summer-enrollment/payment-source-store')}}" id="AddCardForm"
                                      method="POST" class="pt-1">

                                    @elseif(session('program') == 2)
                                        <form action="{{url('after-school/payment-source-store')}}" id="AddCardForm"
                                              method="POST" class="pt-1">

                                            @elseif(session('program') == 4)
                                                <form action="{{url('winter-camp/payment-source-store')}}"
                                                      id="AddCardForm" method="POST" class="pt-1">
                                                    @endif

                                                    {{ csrf_field() }}
                                                    <div class="row">
                                                        <div class="col-12 mb-5">
                                                            <div class="form-row">
                                                                <label for="card-element "
                                                                       style="width: 100% !important;">
                                                                    <div class="form-label fs-6 fw-semibold"
                                                                         style="margin-bottom: 10px !important; margin-top: 15px !important;">
                                                                        Credit or Debit Card Info
                                                                    </div>
                                                                    <div id="card-element"></div>
                                                                </label>

                                                                <div id="card-errors" role="alert"></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <input type="hidden" name="student_id" value="">
                                                    <input type="hidden" name="parent_id" value="{{user()->parent_id}}">
                                                    <input type="hidden" name="record_id" value="">
                                                    <button class="btn btn-sm btn-lg btn-success me-3 d-inline-block"
                                                            id="finalButton">
                                                        <span class="hidden" id="spinner"><i
                                                                    class="fas fa-2x fa-spinner fa-spin"></i></span>
                                                        <span id="button-text">Add Card</span>
                                                    </button>
                                                </form>

                        </div>
                        <div class="col-lg-6 col-sm-12 col-md-12 mb-5 align-content-center">
                            <div class="border-1 border-dashed border-primary p-8 mt-sm-5 mt-lg-15 mt-md-15 text-center text-black-50">
                                Your card will not be charged until your invoice is due and
                                payment has not been received through other methods
                                after one or more requests for payment
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body py-2">
                    <div class="card card-xxl-stretch">
                        <div class="card-header border-0 align-content-center">
                            <h3 class="card-title text-center fw-bold text-gray-800 fs-2">Select One Card </h3>
                        </div>
                        <div class="card-body py-0">
                            <div class="table-responsive">

                                <table class="table align-middle table-row-dashed fs-6 gy-5" id="kt_table_parent_cards">
                                    <thead>
                                    <tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
                                        <th class="min-w-30px">IS Primary</th>
                                        <th class="min-w-30px">Id</th>
                                        <th class="min-w-150px">Card</th>
                                        <th class="min-w-100px">Expire Month</th>
                                        <th class="min-w-100px">Expire Year</th>
                                        <th class="min-w-125px">Status</th>
                                        <th class="min-w-80px">Action</th>
                                    </tr>
                                    </thead>
                                    <tbody class="fw-semibold text-gray-600">
                                    @foreach($paymentSources as $index => $source)
                                        <tr>
                                            <td class="min-w-30px">
                                                <div class="m_table_label">Select Option:</div>
                                                <div class="table_value">
                                                    <input type="radio" name="check_card"
                                                           class="check_card form-check-input border border-primary"
                                                           @if ($source->is_primary == 1)
                                                               {!! "checked" !!}
                                                           @elseif(!$index && $source->is_primary == 0)
                                                               {!! "checked" !!}
                                                           @endif value="{{$source->id}}">
                                                </div>
                                            </td>
                                            <td class="min-w-30px">{{$source->id}}</td>
                                            <td class="min-w-150px">{!! getCardIcon($source->brand) !!} {{$source->last_four}}</td>
                                            <td class="min-w-100px">{{$source->exp_month}}</td>
                                            <td class="min-w-100px">{{$source->exp_year}}</td>
                                            <td class="min-w-125px">{!! getStatusIcon($source->status) !!}</td>
                                            @if($source->is_primary == 0)
                                                <td class="min-w-125px">
                                                    <a href="javascript:void(0)"
                                                       class="btn btn-sm btn-secondary p-3 text-center  m-1 trash"
                                                       data-id="{{$source->id}}" title="Delete"> <i
                                                                class="fa-solid fa-xl fa-trash text-danger"></i></a>
                                                </td>
                                            @endif
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script src="https://js.stripe.com/v3/"></script>
    <script>
        @if(session('error-stripe'))
        let messageErrorStripe = '{{ session('error-stripe') }}';
        toastr.error(messageErrorStripe);
        @endif
        $(document).on('click', '.trash', function (e) {
            e.preventDefault();
            deleteConfirmation($(this).attr('data-id'));
        });
        var stripePublicKey = '{{config('services.stripe.public_key')}}';
        var stripe = Stripe(stripePublicKey);

        var elements = stripe.elements();

        var style = {
            base: {
                iconColor: '#7e8299',
                color: '#000',
                fontWeight: '500',
                fontFamily: 'Roboto, Open Sans, Segoe UI, sans-serif',
                fontSize: '16px',
                fontSmoothing: 'antialiased',
                ':-webkit-autofill': {
                    color: '#fce883',
                },
                '::placeholder': {
                    color: '#7e8299',
                },
            },
            invalid: {
                color: '#fa755a',
                iconColor: '#fa755a'
            }
        };

        var card = elements.create('card', {style: style});

        card.mount('#card-element');

        card.addEventListener('change', function (event) {
            var displayError = document.getElementById('card-errors');
            if (event.error) {
                displayError.textContent = event.error.message;
            } else {
                displayError.textContent = '';
            }
        });

        var form = document.getElementById('AddCardForm');
        form.addEventListener('submit', function (event) {
            event.preventDefault();
            setLoading(true);
            stripe.createToken(card).then(function (result) {
                if (result.error) {
                    setLoading(false);
                    var errorElement = document.getElementById('card-errors');
                    errorElement.textContent = result.error.message;
                } else {
                    stripeTokenHandler(result.token);
                }
            });
        });

        function stripeTokenHandler(token) {
            var form = document.getElementById('AddCardForm');
            var hiddenInput = document.createElement('input');
            hiddenInput.setAttribute('type', 'hidden');
            hiddenInput.setAttribute('name', 'stripeToken');
            hiddenInput.setAttribute('value', token.id);
            form.appendChild(hiddenInput);

            form.submit();
        }

        function setLoading(isLoading) {
            if (isLoading) {
                document.querySelector("#finalButton").disabled = true;
                document.querySelector("#spinner").classList.remove("hidden");
                // document.querySelector("#button-text").classList.add("hidden");
            } else {
                document.querySelector("#finalButton").disabled = false;
                document.querySelector("#spinner").classList.add("hidden");
                // document.querySelector("#button-text").classList.remove("hidden");
            }
        }

        function deleteConfirmation(id) {
            Swal.fire({
                icon: 'warning',
                title: 'Are you sure you want to delete this record?',
                showDenyButton: false,
                showCancelButton: true,
                confirmButtonText: 'Yes'
            }).then(function (result) {
                if (result.isConfirmed) {
                    $.ajax({
                        url: '{{url('parent/delete-payment-source')}}',
                        type: "POST",
                        data: {
                            _token: "{{ csrf_token() }}",
                            card_id: id
                        },
                        success: function (response) {
                            toastr.error(response.message);
                            setTimeout(function () {
                               window.location.reload();
                            }, 2000);
                        },
                        error: function (xhr) {
                            toastr.error(xhr.responseText);
                        }
                    });
                } else {
                    return false;
                }
            });
        }

        $(document).ready(function () {
            $(".check_card").on("change", function () {
                if ($(this).is(":checked")) {
                    let $checkbox = $(this);

                    Swal.fire({
                        icon: 'warning',
                        title: 'Are you sure you want to change this card to primary?',
                        showDenyButton: false,
                        showCancelButton: true,
                        confirmButtonText: 'Yes'
                    }).then(function (result) {
                        if (result.isConfirmed) {
                            let selectedValue = $checkbox.val();
                            if (selectedValue) {
                                selectedValue = selectedValue.toLowerCase();
                            }

                            $.ajax({
                                url: '{{ url('parent/save-primary-payment-source') }}',
                                type: "POST",
                                data: {
                                    _token: "{{ csrf_token() }}",
                                    card_id: selectedValue
                                },
                                success: function (response) {
                                    toastr.success(response.message);
                                },
                                error: function (xhr) {
                                    toastr.error(xhr.responseText);
                                }
                            });
                        } else {
                            $checkbox.prop("checked", false);
                        }
                    });
                }
            });

            $("input[name='check_card']").on("click", function (event) {
                let clickedRadio = $(this);

                setTimeout(function () {
                    if ($("input[name='check_card']:checked").length === 0) {
                        alert("Error: You must select at least one option!");
                        clickedRadio.prop("checked", true);
                    }
                }, 100);
            });
        });



    </script>
@endsection