@extends('patient.layouts.app')
@section('title','إتمام الاشتراك')

@push('styles')
<style>
.pay-method-btn {
    border: 2px solid #e5e7eb;
    border-radius: 14px;
    padding: .8rem;
    cursor: pointer;
    text-align: center;
    transition: all .15s;
    background: #fff;
    font-size: .82rem;
    font-weight: 600;
    color: #374151;
}
.pay-method-btn.selected {
    border-color: #7c3aed;
    background: #f5f3ff;
    color: #5b21b6;
}
.pay-method-btn .pm-icon { font-size: 1.5rem; display: block; margin-bottom: 4px; }

.billing-option {
    border: 2px solid #e5e7eb;
    border-radius: 14px;
    padding: 1rem;
    cursor: pointer;
    transition: all .15s;
    background: #fff;
}
.billing-option.selected {
    border-color: #7c3aed;
    background: #f5f3ff;
}
.billing-option:active { transform: scale(.98); }

.order-summary {
    background: linear-gradient(135deg, #5b21b6, #7c3aed);
    border-radius: 18px;
    padding: 1.2rem;
    color: #fff;
    margin-bottom: 1rem;
}
.card-input {
    border-radius: 12px;
    padding: .75rem 1rem;
    border: 1.5px solid #e5e7eb;
    font-size: .9rem;
    width: 100%;
    transition: border-color .15s;
    background: #fff;
}
.card-input:focus { outline: none; border-color: #7c3aed; }
</style>
@endpush

@section('content')

{{-- ملخص الطلب --}}
<div class="order-summary">
    <div style="font-size:.75rem;opacity:.75;margin-bottom:.3rem">تفاصيل الاشتراك</div>
    <div style="font-size:1.3rem;font-weight:700">{{ $plan->name_ar }}</div>
    <div style="font-size:.85rem;opacity:.8;margin-top:2px">{{ $plan->description }}</div>
    <div class="d-flex align-items-center justify-content-between mt-3">
        <div style="font-size:.8rem;opacity:.75" id="summary-period">شهري</div>
        <div style="font-size:1.8rem;font-weight:900" id="summary-price">
            ${{ number_format($plan->price_monthly, 2) }}
        </div>
    </div>
</div>

<form method="POST" action="{{ route('patient.subscription.checkout', $plan->id) }}" id="checkoutForm">
    @csrf

    {{-- ══ اختيار دورة الدفع ══ --}}
    <div class="p-card mb-3">
        <div class="p-card-title">دورة الفوترة</div>
        <div class="d-flex gap-3">
            <div class="billing-option selected flex-fill" id="opt-monthly" onclick="selectBilling('monthly')">
                <input type="radio" name="billing_cycle" value="monthly" id="r-monthly" checked style="display:none">
                <div class="fw-bold">${{ number_format($plan->price_monthly,2) }}</div>
                <div style="font-size:.75rem;color:#64748b">شهرياً</div>
            </div>
            <div class="billing-option flex-fill position-relative" id="opt-yearly" onclick="selectBilling('yearly')">
                <input type="radio" name="billing_cycle" value="yearly" id="r-yearly" style="display:none">
                <span style="position:absolute;top:-8px;right:10px;background:#fbbf24;color:#78350f;font-size:.6rem;font-weight:700;padding:2px 8px;border-radius:20px">وفّر 17%</span>
                <div class="fw-bold">${{ number_format($plan->price_yearly,2) }}</div>
                <div style="font-size:.75rem;color:#64748b">سنوياً</div>
            </div>
        </div>
    </div>

    {{-- ══ طريقة الدفع ══ --}}
    <div class="p-card mb-3">
        <div class="p-card-title">طريقة الدفع</div>
        <div class="row g-2 mb-3">
            <div class="col-3">
                <div class="pay-method-btn selected" id="pm-card" onclick="selectPayment('card')">
                    <input type="radio" name="payment_method" value="card" style="display:none" checked>
                    <span class="pm-icon">💳</span>بطاقة
                </div>
            </div>
            <div class="col-3">
                <div class="pay-method-btn" id="pm-tap" onclick="selectPayment('tap')">
                    <input type="radio" name="payment_method" value="tap" style="display:none">
                    <span class="pm-icon">📱</span>Tap
                </div>
            </div>
            <div class="col-3">
                <div class="pay-method-btn" id="pm-stripe" onclick="selectPayment('stripe')">
                    <input type="radio" name="payment_method" value="stripe" style="display:none">
                    <span class="pm-icon">🌐</span>Stripe
                </div>
            </div>
            <div class="col-3">
                <div class="pay-method-btn" id="pm-cash" onclick="selectPayment('cash')">
                    <input type="radio" name="payment_method" value="cash" style="display:none">
                    <span class="pm-icon">💵</span>نقدي
                </div>
            </div>
        </div>

        {{-- حقول البطاقة --}}
        <div id="card-fields">
            <div class="mb-3">
                <label class="form-label small fw-semibold">اسم حامل البطاقة</label>
                <input type="text" name="card_name" class="card-input" placeholder="AHMED ALI">
            </div>
            <div class="mb-3">
                <label class="form-label small fw-semibold">رقم البطاقة</label>
                <input type="text" name="card_number" class="card-input" placeholder="•••• •••• •••• ••••"
                       maxlength="19" oninput="formatCard(this)">
            </div>
            <div class="row g-2">
                <div class="col-6">
                    <label class="form-label small fw-semibold">تاريخ الانتهاء</label>
                    <input type="text" class="card-input" placeholder="MM/YY" maxlength="5"
                           oninput="formatExpiry(this)">
                </div>
                <div class="col-6">
                    <label class="form-label small fw-semibold">CVV</label>
                    <input type="text" class="card-input" placeholder="•••" maxlength="4"
                           style="letter-spacing:.2em">
                </div>
            </div>
        </div>

        {{-- رسالة Tap/Stripe --}}
        <div id="redirect-msg" style="display:none" class="text-center py-3 text-muted">
            <div style="font-size:2rem;margin-bottom:.5rem">🔒</div>
            <div class="fw-semibold small">ستُحوَّل لبوابة الدفع الآمنة عند الضغط على "تأكيد"</div>
        </div>

        {{-- رسالة النقد --}}
        <div id="cash-msg" style="display:none">
            <div class="pat-alert" style="background:#fef3c7;color:#92400e">
                <span>💵</span>
                سيتم تفعيل اشتراكك بعد تأكيد الدفع النقدي في أحد مراكزنا المعتمدة
            </div>
        </div>
    </div>

    {{-- ضمان وأمان --}}
    <div class="d-flex justify-content-center gap-3 mb-3" style="font-size:.72rem;color:#94a3b8">
        <span>🔒 دفع آمن</span>
        <span>✅ ضمان الاسترداد</span>
        <span>🔄 إلغاء مجاني</span>
    </div>

    {{-- زر التأكيد --}}
    <button type="submit" class="btn-pat w-100 justify-content-center" style="padding:1rem;font-size:1rem" id="confirmBtn">
        <span id="confirmText">🚀 تأكيد الاشتراك — ${{ number_format($plan->price_monthly,2) }}</span>
    </button>

    <div class="text-center mt-2">
        <a href="{{ route('patient.subscription.index') }}" style="font-size:.78rem;color:#94a3b8;text-decoration:none">
            إلغاء والعودة
        </a>
    </div>
</form>

@endsection

@push('scripts')
<script>
const monthly = {{ $plan->price_monthly }};
const yearly  = {{ $plan->price_yearly }};
let   cycle   = 'monthly';
let   method  = 'card';

function selectBilling(c) {
    cycle = c;
    ['monthly','yearly'].forEach(x => {
        document.getElementById('opt-'+x).classList.toggle('selected', x===c);
        document.getElementById('r-'+x).checked = (x===c);
    });
    const price = c==='yearly' ? yearly : monthly;
    document.getElementById('summary-price').textContent  = '$' + price.toFixed(2);
    document.getElementById('summary-period').textContent = c==='yearly' ? 'سنوي' : 'شهري';
    document.getElementById('confirmText').textContent    = '🚀 تأكيد الاشتراك — $' + price.toFixed(2);
}

function selectPayment(m) {
    method = m;
    ['card','tap','stripe','cash'].forEach(x => {
        document.getElementById('pm-'+x).classList.toggle('selected', x===m);
        document.getElementById('pm-'+x).querySelector('input').checked = (x===m);
    });
    document.getElementById('card-fields').style.display    = m==='card'   ? 'block':'none';
    document.getElementById('redirect-msg').style.display   = (m==='tap'||m==='stripe') ? 'block':'none';
    document.getElementById('cash-msg').style.display       = m==='cash'   ? 'block':'none';
}

function formatCard(el) {
    let v = el.value.replace(/\D/g,'').substring(0,16);
    el.value = v.replace(/(.{4})/g,'$1 ').trim();
}

function formatExpiry(el) {
    let v = el.value.replace(/\D/g,'');
    if (v.length >= 2) v = v.substring(0,2) + '/' + v.substring(2,4);
    el.value = v;
}

document.getElementById('checkoutForm').addEventListener('submit', function() {
    const btn = document.getElementById('confirmBtn');
    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>جارٍ المعالجة...';
});
</script>
@endpush