@extends('layouts.app')
@section('title', 'Checkout')
@section('content')

<div class="container py-5 my-5">
    <div class="row justify-content-center">
        <div class="col-md-8 col-lg-6">
            <div class="text-center mb-4">
                <h2 class="fw-800">Complete Your Purchase</h2>
                <p class="text-muted">You are subscribing to the <strong>{{ $plan->name }}</strong> plan.</p>
            </div>
            
            <div class="card border-0 shadow-sm rounded-4 mb-4">
                <div class="card-body p-4">
                    <h5 class="fw-700 mb-3 border-bottom pb-2">Order Summary</h5>
                    
                    <div class="d-flex justify-content-between mb-2">
                        <span class="text-muted">Plan</span>
                        <span class="fw-600">{{ $plan->name }}</span>
                    </div>
                    
                    <div class="d-flex justify-content-between mb-2">
                        <span class="text-muted">Billing Cycle</span>
                        <span>
                            <select id="billingCycle" class="form-select form-select-sm w-auto d-inline-block" onchange="updateTotal()">
                                <option value="monthly" data-price="{{ $plan->price }}">Monthly</option>
                                @if($plan->annual_price > 0)
                                <option value="annual" data-price="{{ $plan->annual_price }}">Annually</option>
                                @endif
                            </select>
                        </span>
                    </div>

                    <div class="d-flex justify-content-between mt-3 pt-3 border-top">
                        <span class="fw-700">Total Amount</span>
                        <h4 class="fw-800 text-teal-accent mb-0">₹<span id="displayTotal">{{ number_format($plan->price, 2) }}</span></h4>
                    </div>
                </div>
            </div>

            <div class="card border-0 shadow-sm rounded-4">
                <div class="card-body p-4">
                    <h5 class="fw-700 mb-3"><i class="fas fa-credit-card me-2 text-primary"></i>Simulated Payment</h5>
                    <p class="small text-muted mb-4">This is a simulated checkout. Clicking the button below will instantly activate your subscription and generate a mock invoice.</p>
                    
                    <form action="{{ route('checkout.process', $plan->slug) }}" method="POST">
                        @csrf
                        <input type="hidden" name="billing_cycle" id="formBillingCycle" value="monthly">
                        
                        <div class="d-grid">
                            <button type="submit" class="btn btn-primary py-3 fw-700 fs-5 rounded-3 shadow-sm">
                                Pay ₹<span id="btnTotal">{{ number_format($plan->price, 2) }}</span> & Activate Plan
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>
    function updateTotal() {
        const select = document.getElementById('billingCycle');
        const price = parseFloat(select.options[select.selectedIndex].dataset.price);
        const cycle = select.value;
        
        document.getElementById('formBillingCycle').value = cycle;
        
        const formatted = price.toLocaleString('en-IN', {minimumFractionDigits: 2, maximumFractionDigits: 2});
        document.getElementById('displayTotal').textContent = formatted;
        document.getElementById('btnTotal').textContent = formatted;
    }
</script>
@endsection