@extends('layouts.auth')

@section('content')
    <div class="container py-5">
        {{-- HEADER --}}
        <div class="text-center mb-5">
            <h2 class="fw-bold">Finaliser votre abonnement</h2>
            <p class="text-muted">Choisissez votre durée et votre mode de paiement sécurisé</p>
        </div>

        <div class="row justify-content-center">
            <div class="col-md-7">
                {{-- CARD --}}
                <div class="card border-0 shadow-lg rounded-4">
                    {{-- HEADER PLAN --}}
                    <div class="card-header bg-primary text-white text-center rounded-top-4 py-4">
                        <h4 class="mb-1 fw-bold">{{ $plan->name }}</h4>
                        <h2 class="fw-bold mb-0">
                            {{ number_format($plan->price, 0, ',', ' ') }} FCFA
                        </h2>
                        <small>Abonnement flexible et sécurisé</small>
                    </div>

                    <div class="card-body p-4">
                        <form method="POST" action="{{ route('pay.init') }}">
                            @csrf
                            <input type="hidden" name="plan_id" value="{{ $plan->id }}">

                            {{-- DURÉE --}}
                            <div class="mb-4">
                                <label class="form-label fw-bold">📅 Durée d’abonnement <span class="text-danger">*</span></label>
                                <select name="duration" class="form-control form-control-lg shadow-sm @error('duration') is-invalid @enderror" style="height: 45px">
                                    <option value="1" selected>Mensuel (1 mois)</option>
                                    <option value="3">Trimestriel (3 mois)</option>
                                    <option value="6">Semestriel (6 mois)</option>
                                    <option value="12">Annuel (12 mois)</option>
                                </select>
                                @error('duration')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            {{-- PAIEMENT --}}
                            <div class="mb-4">
                                <label class="form-label fw-bold">Mode de paiement <span class="text-danger">*</span></label>
                                <div class="row g-3">
                                    {{-- WAVE --}}
                                    <div class="col-4">
                                        <label class="payment-card w-100">
                                            <input type="radio" name="method" value="wave" checked hidden>
                                            <div class="border rounded-4 p-3 text-center payment-box">
                                                <img src="https://play-lh.googleusercontent.com/B2sfLVgRWgV_bk5rtF51w6AieJWXc0qWbyWoaA8pMNp-is41AmvhJYVr95Dq9hT97Es"
                                                    style="height:30px" class="mb-2">
                                                <div class="small fw-bold">Wave</div>
                                            </div>
                                        </label>
                                    </div>

                                    {{-- ORANGE --}}
                                    <div class="col-4">
                                        <label class="payment-card w-100">
                                            <input type="radio" name="method" value="orange" hidden>
                                            <div class="border rounded-4 p-3 text-center payment-box">
                                                <img src="https://play-lh.googleusercontent.com/VGOxVRf_AtRYSFbYCr1qZ-eZDDldQxt8dpjQ62MFpoS9JXK-f2l1DIKxjt8TJ8MX-txu"
                                                    style="height:30px" class="mb-2">
                                                <div class="small fw-bold">Orange</div>
                                            </div>
                                        </label>
                                    </div>

                                    {{-- PAYTECH --}}
                                    <div class="col-4">
                                        <label class="payment-card w-100">
                                            <input type="radio" name="method" value="paytech" hidden>
                                            <div class="border rounded-4 p-3 text-center payment-box">
                                                <img src="https://paytech.sn/assets/srcs/img/logo_paytech.png"
                                                    style="height:30px" class="mb-2">
                                                <div class="small fw-bold mt-1">PayTech</div>
                                            </div>
                                        </label>
                                    </div>
                                </div>
                            </div>

                            {{-- BUTTON --}}
                            <button type="submit" class="btn btn-primary btn-lg w-100 rounded-3 shadow-sm">
                                Payer maintenant
                            </button>

                            <p class="text-center text-muted small mt-3">
                                Paiement sécurisé • Activation automatique
                            </p>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- STYLE --}}
    <style>
        .payment-card input:checked + .payment-box {
            border: 2px solid #0d6efd;
            background: #f0f6ff;
            transform: scale(1.05);
            transition: 0.2s;
        }

        .payment-box {
            cursor: pointer;
            transition: 0.2s;
        }

        .payment-box:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
    </style>
@endsection