@extends('layouts.main')

@section('style')
<!-- Add Doku CSS if needed -->
<link rel="stylesheet" href="https://pay.doku.com/css/doku.css">
@endsection

@section('content')
<div class="row">
    <div class="col-12">
        <div class="page-title-box">
            <h4 class="page-title">Subscription Plans</h4>
        </div>
    </div>
</div>

@include('components.message')

@if(session('error'))
<div class="alert alert-danger alert-dismissible fade show" role="alert">
    {{ session('error') }}
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
@endif

@if($activeSubscription)
<div class="alert alert-info">
    <h5>Current Subscription</h5>
    <p>Plan: {{ $activeSubscription->subscriptionPlan->name }}</p>
    <p>Valid until: {{ $activeSubscription->end_date->format('d M Y') }}</p>
</div>
@endif

<div class="row">
    @foreach($plans as $plan)
    <div class="col-md-4">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">{{ $plan->name }}</h5>
                <h6 class="card-subtitle mb-2 text-muted">Rp {{ $plan->formatted_price }} / {{ $plan->duration_in_days }} Days</h6>
                <p class="card-text">{{ $plan->description }}</p>
                @if($plan->features)
                <ul class="list-unstyled">
                    @foreach($plan->features as $feature)
                    <li><i class="mdi mdi-check-circle text-success"></i> {{ $feature }}</li>
                    @endforeach
                </ul>
                @endif

                <form id="payment-form-{{ $plan->id }}" action="#" method="POST">
                    @csrf
                    <div class="mb-3">
                        <label class="form-label">Payment Method</label>
                        <select name="payment_method" class="form-select" required>
                            <option value="">Select Payment Method</option>
                            @if(isset($ms_methods))
                            @foreach($ms_methods as $method)
                            <option value="{{ $method->code }}">{{ $method->name }}</option>
                            @endforeach
                            @endif
                        </select>
                    </div>
                    <button type="button" class="btn btn-primary pay-button"
                        data-plan-id="{{ $plan->id }}"
                        data-plan-name="{{ $plan->name }}"
                        data-amount="{{ $plan->price }}">
                        Subscribe Now
                    </button>
                </form>
            </div>
        </div>
    </div>
    @endforeach
</div>
@endsection

@section('script')
<script src="https://pay.doku.com/js/doku.js"></script>
<script>
    document.querySelectorAll('.pay-button').forEach(button => {
        button.addEventListener('click', function(e) {
            e.preventDefault();
            const planId = this.dataset.planId;
            const form = document.getElementById(`payment-form-${planId}`);
            const paymentMethod = form.querySelector('[name="payment_method"]').value;

            if (!paymentMethod) {
                alert('Please select a payment method');
                return;
            }

            // Call backend to get payment token
            fetch(`{{ route('subscription.getPaymentToken') }}`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({
                        plan_id: planId,
                        payment_method: paymentMethod,
                        amount: this.dataset.amount,
                        plan_name: this.dataset.planName
                    })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.token) {
                        doku.startPayment(data.token);
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('Payment initialization failed');
                });
        });
    });
</script>
@endsection