@extends('layouts.app')
@section('title', __('master::lang.purchase_subscription'))

@section('content')
<section class="content">
    <div class="tw-bg-white tw-rounded-xl tw-shadow-md tw-p-6 lg:tw-max-w-3xl tw-mx-auto">
        <h2 class="tw-text-2xl tw-font-bold tw-mb-4">@lang('master::lang.purchase_subscription')</h2>

        {!! Form::open([
            'url' => route('subdomain.subscriptions.store'),
            'method' => 'post',
            'id' => 'purchase_subscription_form'
        ]) !!}

        {{-- عدد المستخدمين --}}
        <div class="tw-mb-4">
            {!! Form::label('users_count', __('master::lang.number_of_users'), ['class' => 'tw-font-semibold']) !!}
            {!! Form::number('users_count', 1, [
                'class' => 'form-control',
                'min' => 1,
                'id' => 'users_count'
            ]) !!}
        </div>

        {{-- دورة الفوترة --}}
        <div class="tw-mb-4">
            {!! Form::label('billing_cycle', __('master::lang.billing_cycle'), ['class' => 'tw-font-semibold']) !!}
            <div class="tw-flex tw-gap-4">
                <label class="tw-flex tw-items-center">
                    {!! Form::radio('billing_cycle', 'monthly', true, ['class' => 'billing_cycle']) !!}
                    <span class="tw-ml-2">@lang('master::lang.monthly')</span>
                </label>
                <label class="tw-flex tw-items-center">
                    {!! Form::radio('billing_cycle', 'yearly', false, ['class' => 'billing_cycle']) !!}
                    <span class="tw-ml-2">@lang('master::lang.yearly')</span>
                </label>
            </div>
        </div>

        {{-- حقل الكوبون --}}
        <div class="tw-mb-4">
            {!! Form::label('coupon_code', __('master::lang.coupon_code'), ['class' => 'tw-font-semibold']) !!}
            <div class="tw-flex tw-gap-2">
                {!! Form::text('coupon_code', null, [
                    'class' => 'form-control tw-flex-1',
                    'id' => 'coupon_code',
                    'placeholder' => __('master::lang.enter_coupon')
                ]) !!}
                <button type="button" id="apply_coupon" class="tw-dw-btn tw-dw-btn-primary tw-px-4">
                    تحقق
                </button>
            </div>
            <p class="tw-text-sm tw-mt-1" id="coupon_message"></p>
        </div>

        {{-- عرض السعر --}}
        <div class="tw-mb-4 tw-p-4 tw-bg-gray-100 tw-rounded">
            <h3 class="tw-font-bold">@lang('master::lang.total_price'):</h3>
            <p class="tw-text-xl tw-font-bold" id="display_price">0.00 د.ع</p>
            <p class="tw-text-sm tw-text-gray-600" id="price_details"></p>
            <p class="tw-text-sm tw-text-green-700" id="discount_display"></p>
        </div>

        {{-- الحقول المخفية --}}
        {!! Form::hidden('original_price', 0, ['id' => 'original_price']) !!}
        {!! Form::hidden('price_after_discount', 0, ['id' => 'price_after_discount']) !!}
        {!! Form::hidden('coupon_id', '', ['id' => 'coupon_id']) !!}

        {{-- زر الشراء --}}
        <div class="tw-mb-4">
            {!! Form::submit(__('master::lang.buy_now'), ['class' => 'tw-dw-btn tw-dw-btn-success tw-text-white tw-w-full']) !!}
        </div>

        {!! Form::close() !!}
    </div>
</section>
@endsection

@section('javascript')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const pricing_per_user_monthly = {{ $monthly_price_per_user ?? 20 }};
    const pricing_per_user_yearly = {{ $yearly_price_per_user ?? 200 }};
    let discount_percent = 0;

    const couponInput = document.getElementById('coupon_code');
    const applyBtn = document.getElementById('apply_coupon');
    const msgEl = document.getElementById('coupon_message');
    const couponIdField = document.getElementById('coupon_id');

    // حساب السعر
    function updatePrice() {
        const users = parseInt(document.getElementById('users_count').value) || 1;
        const cycle = document.querySelector('input[name="billing_cycle"]:checked').value;

        let originalTotal = 0;
        let total = 0;
        let details = '';
        let discount_text = '';

        if (cycle === 'monthly') {
            originalTotal = users * pricing_per_user_monthly;
        } else {
            originalTotal = pricing_per_user_yearly * users;
            details = `(${(pricing_per_user_yearly).toFixed(2)} د.ع سنوياً لكل مستخدم  |  ${(pricing_per_user_yearly / 12).toFixed(2)}  د.ع شهرياً لكل مستخدم)`;
        }

        total = originalTotal;

        if (discount_percent > 0) {
            const discountAmount = (total * discount_percent) / 100;
            total -= discountAmount;
            discount_text = `تم تطبيق خصم ${discount_percent}% (-${discountAmount.toFixed(2)} د.ع)`;
        }

        // تحديث العرض
        document.getElementById('display_price').innerText = total.toFixed(2) + ' د.ع';
        document.getElementById('price_details').innerText = details;
        document.getElementById('discount_display').innerText = discount_text;

        // تحديث القيم المخفية
        document.getElementById('original_price').value = originalTotal.toFixed(2);
        document.getElementById('price_after_discount').value = total.toFixed(2);
    }

    // التحقق من الكوبون
    applyBtn.addEventListener('click', function () {
        const code = couponInput.value.trim();

        if (!code) {
            msgEl.textContent = 'الرجاء إدخال كود الكوبون';
            msgEl.className = 'tw-text-red-600';
            couponIdField.value = '';
            discount_percent = 0;
            updatePrice();
            return;
        }

        fetch("{{ route('coupon.check') }}", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "X-CSRF-TOKEN": "{{ csrf_token() }}"
            },
            body: JSON.stringify({ code })
        })
        .then(res => res.json())
        .then(data => {
            console.log('🔹 استجابة السيرفر:', data);

            if (data.valid) {
                discount_percent = Number(data.discount_percent) || 0;
                msgEl.className = 'tw-text-green-600';
                msgEl.textContent = data.message || 'تم تطبيق الكوبون بنجاح';

                // تأكد من وجود coupon_id في الاستجابة
                if (data.coupon_id) {
                    couponIdField.value = data.coupon_id;
                } else {
                    couponIdField.value = '';
                    console.warn('⚠️ لم يتم إرجاع coupon_id من السيرفر.');
                }
            } else {
                discount_percent = 0;
                msgEl.className = 'tw-text-red-600';
                msgEl.textContent = data.message || 'الكوبون غير صالح';
                couponIdField.value = '';
            }

            updatePrice();
        })
        .catch(err => {
            console.error('خطأ أثناء التحقق من الكوبون:', err);
            msgEl.className = 'tw-text-red-600';
            msgEl.textContent = 'حدث خطأ أثناء التحقق من الكوبون.';
            discount_percent = 0;
            couponIdField.value = '';
            updatePrice();
        });
    });

    document.getElementById('users_count').addEventListener('input', updatePrice);
    document.querySelectorAll('.billing_cycle').forEach(el => el.addEventListener('change', updatePrice));

    updatePrice();
});
</script>
@endsection