@extends('front.include.app')
@section('content')
    <style>
        .subscription-container {
            max-width: 800px;
            margin: 40px auto;
            background: #000;
            border-radius: 12px;
            box-shadow: 0 5px 20px rgba(255, 255, 255, 0.1);
            overflow: hidden;
            border: 1px solid #333;
        }

        .subscription-header {
            background: #000;
            color: white;
            padding: 25px;
            text-align: center;
            border-bottom: 1px solid #333;
        }

        .subscription-header,
        h1 {
            color: #fff
        }

        .subscription-body {
            padding: 30px;
            background: #000;
        }

        .form-section {
            margin-bottom: 25px;
            padding-bottom: 20px;
            border-bottom: 1px solid #333;
        }

        .section-title {
            font-size: 1.2rem;
            color: #fff;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
        }

        .section-title i {
            margin-right: 10px;
            color: #fff;
        }

        .card-element {
            border: 1px solid #333;
            border-radius: 5px;
            padding: 12px;
            margin-bottom: 20px;
            background: #111;
            color: #fff;
        }

        .form-control {
            background-color: #111;
            color: #fff;
            border: 1px solid #333;
        }

        .form-control:focus {
            background-color: #222;
            color: #fff;
            border-color: #555;
            box-shadow: none;
        }

        .form-label {
            color: #fff;
        }

        .btn-subscribe {
            background: #fff;
            color: #000;
            border: none;
            padding: 12px 30px;
            font-weight: 600;
            transition: all 0.3s ease;
        }

        .btn-subscribe:hover {
            background: #ddd;
            color: #000;
            transform: translateY(-2px);
        }

        .login-prompt {
            text-align: center;
            margin-top: 20px;
            color: #ccc;
        }

        .login-prompt a {
            color: #fff;
            text-decoration: underline;
        }

        .plan-card {
            border: 1px solid #333;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            background: #111;
            transition: all 0.3s ease;
        }

        .plan-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(255, 255, 255, 0.1);
        }

        .plan-name {
            font-weight: 600;
            color: #fff;
        }

        .plan-price {
            font-size: 1.8rem;
            font-weight: 700;
            color: #fff;
        }

        .benefits-list {
            list-style: none;
            padding: 0;
        }

        .benefits-list li {
            margin-bottom: 8px;
            color: #ccc;
        }

        .benefits-list li i {
            color: #fff;
            margin-right: 5px;
        }

        .form-check-input {
            background-color: #000;
            border: 1px solid #333;
        }

        .form-check-input:checked {
            background-color: #fff;
            border-color: #fff;
        }

        .form-check-label {
            color: #ccc;
        }
    </style>
    <section class="booking">
        <div class="container">
            <div class="subscription-container">
                <div class="subscription-header">
                    <h1><i class="fas fa-star"></i> Premium Studio Subscription</h1>
                    <p class="mb-0">Unlock all features with our premium plan</p>
                </div>

                <div class="subscription-body">
                    <form id="payment-form" action="{{ route('subscription.create') }}" method="POST">
                        @csrf
                        <input type="hidden" name="studio_id" value="{{ $studioId }}">

                        @if (!auth()->check())
                            <div class="form-section">
                                <h3 class="section-title"><i class="fas fa-user"></i> Account Information</h3>
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="name" class="form-label">Full Name</label>
                                        <input type="text" class="form-control" id="name" name="name" required>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="email" class="form-label">Email Address</label>
                                        <input type="email" class="form-control" id="email" name="email" required>
                                    </div>
                                </div>
                            </div>
                        @endif

                        <div class="form-section">
                            <h3 class="section-title"><i class="fas fa-credit-card"></i> Payment Information</h3>
                            <div class="mb-3">
                                <label for="cardholder-name" class="form-label">Cardholder Name</label>
                                <input type="text" class="form-control" id="cardholder-name" required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Card Details</label>
                                <div id="card-element" class="card-element">
                                </div>
                            </div>
                            <div id="card-errors" role="alert" class="text-danger"></div>
                        </div>

                        <button type="submit" class="btn btn-subscribe btn-lg w-100">
                            <i class="fas fa-lock"></i> Subscribe Now
                        </button>

                        @if (auth()->check())
                            <div class="login-prompt">
                                You're subscribed as: <strong>{{ auth()->user()->name }}</strong> |
                                <a href="{{ route('logout') }}">Not you?</a>
                            </div>
                        @else
                            <div class="login-prompt">
                                Already have an account? <a href="{{ route('login') }}">Log in</a>
                            </div>
                        @endif
                    </form>
                </div>
            </div>
        </div>
    </section>

    <script src="https://js.stripe.com/v3/"></script>
    <script>
        const stripe = Stripe("{{ config('services.stripe.key') }}");
        const elements = stripe.elements();

        const card = elements.create('card', {
            style: {
                base: {
                    fontSize: '16px',
                    color: '#ffff',
                    fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
                    '::placeholder': {
                        color: '#aab7c4'
                    }
                }
            }
        });

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

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

        const form = document.getElementById('payment-form');
        const submitButton = form.querySelector('button');

        form.addEventListener('submit', function(event) {
            event.preventDefault();

            submitButton.disabled = true;
            const originalText = submitButton.innerHTML;
            submitButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';

            stripe.createPaymentMethod({
                type: 'card',
                card: card,
                billing_details: {
                    name: document.getElementById('cardholder-name').value
                }
            }).then(function(result) {
                if (result.error) {
                    const errorElement = document.getElementById('card-errors');
                    errorElement.textContent = result.error.message;
                    submitButton.disabled = false;
                    submitButton.innerHTML = originalText;
                } else {
                    const hiddenInput = document.createElement('input');
                    hiddenInput.setAttribute('type', 'hidden');
                    hiddenInput.setAttribute('name', 'payment_method_id');
                    hiddenInput.setAttribute('value', result.paymentMethod.id);
                    form.appendChild(hiddenInput);

                    form.submit();
                }
            });
        });
    </script>
@endsection