@extends('layouts.agency')
@section('title', 'Home Page')
@section('content')

    <section class="custom--container">
    <div class="back-button">
            <a href="{{route('card.index')}}"> <div class="dash--text"><span><img src="/images/right-arrow.png" /></span></a>
            <h2>Payments</h2>
        </div>
        @if(session()->has('success'))
            <div class="alert alert-success">
                {{ session()->get('success') }}
            </div>
        @endif

        <div class="row" style="position: relative">
            <div class="col-sm-6 payment-option" id="cardDetails">
                <div class="view--cust--table-section">
                    <div class="view--cust--table">
                        <form id="payment-form" action="{{route('card.store')}}" method="post">
                            @csrf
                            <label for="card-element">
                                Credit or debit card
                            </label>
                            <div id="card-element"></div>
                            <div id="card-errors" role="alert"></div>
                            <button type="submit" class="btn btn-primary btn-sm mr-2" id="payment-button">Add Card</button>
                        </form>
                    </div>
                </div>
            </div>


        </div>
    </section>

    <script src="https://js.stripe.com/v3/"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        var stripe = Stripe('{{ env('STRIPE_KEY') }}');
        var elements = stripe.elements();
        var card = elements.create('card', {
            hidePostalCode: true
        });
        card.mount('#card-element');

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

        var form = document.getElementById('payment-form');
        $('#payment-button').click(function(e){
            e.preventDefault();
            console.log(card);
            stripe.createToken(card).then(function(result) {
                if (result.error) {
                    var errorElement = document.getElementById('card-errors');
                    errorElement.textContent = result.error.message;
                    document.getElementById('payment-button').disabled = false;
                } else {
                    var tokenInput = document.createElement('input');
                    tokenInput.setAttribute('type', 'hidden');
                    tokenInput.setAttribute('name', 'stripeToken');
                    tokenInput.setAttribute('value', result.token.id);
                    form.appendChild(tokenInput);
                    $('#payment-form').submit();
                }
            });
        });

        // Adding click event to toggle selected class
        $('.payment-option').click(function() {
            $('.payment-option').removeClass('selected');
            $(this).addClass('selected');
        });
    </script>

    <style>
        .custom--container {
            margin: 0 auto;
            max-width: 600px;
            padding: 20px;
            background: #f9f9f9;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        .dash--text {
            text-align: center;
            margin-bottom: 20px;
        }
        .view--cust--table-section {
            display: flex;
            justify-content: center;
        }
        .view--cust--table {
            width: 100%;
        }
        form {
            width: 100%;
        }
        label {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 10px;
            display: block;
        }
        #card-element {
            background: #fff;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            margin-bottom: 10px;
        }
        #card-errors {
            color: #fa755a;
            margin-top: 10px;
        }

        #payment-button{
            position: absolute;
            right: 19px;
            bottom: -15px;
        }
     
        .card {
            width: 380px;
            height: 230px;
            border: 2px solid rgba(255, 255, 255, 0.2);
            background: rgb(71 94 136);
            border-radius: 10px;
            z-index: 1;
            overflow: hidden;
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            position: relative;
        }
        .visa_logo {
            float: right;
            padding: 10px;
            font-size: 29px;
            font-weight: 800;
            font-style: italic;
        }
        .visa_logo img {
            width: 70px;
            height: 40px;
        }
        .visa_info {
            padding: 10px;
            margin: 30px 0;
        }
        .visa_info img {
            width: 60px;
            height: 45px;
        }
        .visa_info p {
            font-size: 22px;
            padding: 10px 0;
            letter-spacing: 2px;
            color: #ffffff;
        }
        .visa_crinfo {
            display: flex;
            justify-content: space-between;
            padding: 0 10px;
            color: #ffffff;
        }
        .custom--container {
            max-width: unset !important;
        }
        .custom--container .row {
            display: flex;
            justify-content: space-around;
        }
        .custom--container .row .col-sm-6 {
            width: 45%;
            border: 1px solid #000;
            border-radius: 8px;
            padding: 15px;
            cursor: pointer;
        }
        .payment-option {
            border: 2px solid transparent;
            transition: border-color 0.3s;
        }
        .payment-option.selected {
            border-color: #007bff !important;
        }
    </style>


@endsection