@extends('layouts.app2')

@section('title', 'ROOT ERP | الاشتراك')

@section('content')

    <style>
        body {
            font-family: 'Tajawal', sans-serif;
            direction: rtl;
            background-color: #f8faff;
        }

        .subscription-container {
            max-width: 900px;
            margin: 50px auto;
            background: #fff;
             
            border-radius: 15px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            padding: 30px;
        }

        .subscription-header {
            text-align: center;
            color: #1563ff;
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 25px;
        }

        .price-card {
            background: #1563ff;
            color: #fff;
            text-align: center;
            padding: 25px;
            border-radius: 12px;
            margin-bottom: 20px;
            
            position: relative;
        }

        .price-card h3 {
            font-size: 22px;
            margin-bottom: 10px;
        }

        .price-card .price {
            font-size: 36px;
            font-weight: bold;
        }

        .discount-info {
            text-align: center;
            font-size: 15px;
            margin-top: -10px;
            margin-bottom: 20px;
            color: #1563ff;
        }

        .discount-info .old-price {
            text-decoration: line-through;
            color: #999;
            margin-left: 8px;
        }

        .discount-info .discount-percent {
            color: #198754;
            font-weight: bold;
        }

        /* ======== PLAN TOGGLE ======== */
        .plan-toggle {
            position: relative;
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 260px;
            background: #e8edff;
            border-radius: 40px;
            margin: 0 auto 25px;
            padding: 5px;
            cursor: pointer;
            overflow: hidden;
        }

        .plan-toggle input {
            display: none;
        }

        .plan-toggle label {
            flex: 1;
            text-align: center;
            font-weight: 600;
            z-index: 2;
            cursor: pointer;
            padding: 8px 0;
            color: #1563ff;
            transition: color 0.3s ease;
            font-size: 16px;
        }

        .plan-toggle .toggle-slider {
            position: absolute;
            top: 5px;
            bottom: 5px;
            right: 5px;
            left: 50%;
            background: #1563ff;
            border-radius: 40px;
            transition: all 0.3s ease;
            z-index: 1;
        }

        /* When "monthly" is active */
        .plan-toggle input#monthly:checked~label[for="monthly"] {
            color: #211e1e;
        }

        .plan-toggle input#monthly:checked~.toggle-slider {
            left: 5px;
            right: 50%;
        }

        /* When "yearly" is active */
        .plan-toggle input#yearly:checked~label[for="yearly"] {
            color: #211e1e;
        }

        .plan-toggle input#yearly:checked~.toggle-slider {
            left: 50%;
            right: 5px;
        }

        .form-group {
            margin-bottom: 15px;
        }

        label {
            display: block;
            font-weight: 600;
            margin-bottom: 6px;
        }

        input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 15px;
        }

        .discount-area {
            display: flex;
            gap: 10px;
            align-items: center;
            margin-top: 10px;
        }

        .discount-area input {
            flex: 1;
        }

        .btn {
            background: #1563ff;
            color: #fff;
            padding: 10px 25px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 16px;
            transition: 0.3s;
        }

        .btn:hover {
            background: #0d47d2;
        }

        .total {
            font-size: 20px;
            font-weight: 700;
            text-align: center;
            margin-top: 20px;
            color: #1563ff;
        }

        .discount-message {
            margin-top: 8px;
            font-weight: 600;
            text-align: right;
            font-size: 14px;
        }

        .discount-message.success {
            color: #198754;
        }

        .discount-message.error {
            color: red;
        }

        .user-count-wrapper {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            background: #f0f4ff;
            border: 1px solid #cdd8ff;
            border-radius: 10px;
            padding: 6px 10px;
            width: 150px;
            margin-top: 5px;
            transition: box-shadow 0.3s ease;
        }

        .user-count-wrapper:focus-within {
            box-shadow: 0 0 0 2px rgba(21, 99, 255, 0.3);
        }

        .count-btn {
            background: #1563ff;
            color: #fff;
            border: none;
            border-radius: 8px;
            width: 32px;
            height: 32px;
            font-size: 18px;
            font-weight: bold;
            cursor: pointer;
            transition: 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .count-btn:hover {
            background: #0d47d2;
        }

        .user-count-wrapper input {
            width: 60px;
            text-align: center;
            border: none;
            background: transparent;
            font-size: 16px;
            font-weight: 600;
            color: #1563ff;
            outline: none;
        }

        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        input[type=number] {
            -moz-appearance: textfield;
        }
    </style>
    <div class="subscription-container">
        <form method="GET" action="/payment">
            <div class="subscription-header">@lang('lang_v1.subscription_and_payment')</div>
            <div class="plan-toggle">
                <input type="radio" id="monthly" name="plan" value="monthly">
                <label for="monthly">شهري</label>

                <input type="radio" id="yearly" name="plan" value="yearly" checked>
                <label for="yearly">سنوي</label>

                <div class="toggle-slider"></div>
            </div>

            <!-- Discount Info -->
            <div class="discount-info" id="discount-info">
                <span id="old-price" class="old-price"></span>
                <span id="discount-percent" class="discount-percent"></span>
            </div>

            <div class="price-card">
                <h3 id="plan-name">الخطة السنوية</h3>
                <div class="price" id="original-price" data-monthly="{{ $monthlyPrice }}"
                    data-yearly="{{ $yearlyPrice }}">
                    {{ number_format($yearlyPrice, 0) }} @lang('lang_v1.currency')
                </div>
            </div>

            <div class="form-group"> <label>@lang('lang_v1.user_count')</label>
                <div class="user-count-wrapper"> <button type="button" class="count-btn" id="decrease-user">−</button>
                    <input type="number" id="user-count" name="user_count" value="1" min="1"> <button
                        type="button" class="count-btn" id="increase-user">+</button>
                </div>
            </div>

            <div class="user-summary" id="user-summary">
                <p>@lang('lang_v1.user_count'): <span id="display-users">1</span></p>
                <p>@lang('lang_v1.price_per_all_user'): <span id="per-user-price">{{ number_format($yearlyPrice, 0) }}</span>
                    @lang('lang_v1.currency')</p>
            </div>

            <div class="form-group">
                <label>@lang('lang_v1.discount_code')</label>
                <div class="discount-area">
                    <input type="text" id="discount-code" name="code" placeholder="@lang('lang_v1.enter_discount_code')">
                    <button type="button" class="btn" id="apply-discount">@lang('lang_v1.apply')</button>
                </div>
                <div id="discount-message" class="discount-message"></div>
            </div>

            <div class="total">@lang('lang_v1.total'):
                <span id="total-price">{{ number_format($yearlyPrice, 0) }}</span> @lang('lang_v1.currency')
            </div>

            <div style="text-align:center; margin-top: 30px;">
                <button type="submit" class="btn" id="submitBtn">@lang('lang_v1.complete_payment')</button>
            </div>
        </form>
</div> @endsection

@section('scripts')

    <script>
        const monthlyPrice = parseFloat($('#original-price').data('monthly'));
        const yearlyPrice = parseFloat($('#original-price').data('yearly'));
        const userCountInput = $('#user-count');
        const totalPrice = $('#total-price');
        const displayUsers = $('#display-users');
        const perUserPrice = $('#per-user-price');
        const discountInput = $('#discount-code');
        const applyDiscountBtn = $('#apply-discount');
        const discountMessage = $('#discount-message');
        const planName = $('#plan-name');
        const oldPrice = $('#old-price');
        const discountPercent = $('#discount-percent');
        let appliedDiscount = 0;
        let currentPlan = 'yearly';
        let couponId = null;
        const userInput = $('#user-count');

        function updatePrices() {
            const users = parseInt(userCountInput.val()) || 1;
            let basePrice = currentPlan === 'yearly' ? yearlyPrice : monthlyPrice;
            let total = users * basePrice;
            let finalTotal = total;
            if (appliedDiscount > 0) {
                finalTotal -= total * (appliedDiscount / 100);
            }
            displayUsers.text(users);
            perUserPrice.text(total.toFixed(0));
            totalPrice.text(finalTotal.toFixed(0));
        }

        function showDiscountInfo() {
            const yearlyEquivalent = (monthlyPrice * 12).toFixed(0);
            const discountPercentValue = Math.round(((yearlyEquivalent - yearlyPrice) / yearlyEquivalent) * 100);
            oldPrice.text(`${yearlyEquivalent} د.ع`);
            discountPercent.text(`خصم ${discountPercentValue}% للخطة السنوية`);
        } // Toggle plans
        $('input[name="plan"]').on('change', function() {
            currentPlan = $(this).val();
            if (currentPlan === 'yearly') {
                $('#original-price').text(`${yearlyPrice.toFixed(0)} د.ع`);
                planName.text('الخطة السنوية');
                showDiscountInfo();
            } else {
                $('#original-price').text(`${monthlyPrice.toFixed(0)} د.ع`);
                planName.text('الخطة الشهرية');
                oldPrice.text('');
                discountPercent.text('');
            }
            updatePrices();
        }); // Apply discount via AJAX 
        applyDiscountBtn.on('click', function() {
            const code = discountInput.val().trim();
            if (!code) {
                appliedDiscount = 0;
                couponId = null;
                discountMessage.text('✗ أدخل كود الخصم');
                discountMessage.removeClass('success').addClass('error');
                updatePrices();
                return;
            }
            $.ajax({
                url: "{{ route('check.discount') }}",
                type: "POST",
                data: {
                    code: code,
                    _token: "{{ csrf_token() }}"
                },
                success: function(res) {
                    if (res.success) {
                        appliedDiscount = res.discount;
                        couponId = res.coupon_id;
                        discountMessage.text(`✓ تم تطبيق خصم ${appliedDiscount}%`);
                        discountMessage.removeClass('error').addClass('success');
                    } else {
                        appliedDiscount = 0;
                        couponId = null;
                        discountMessage.text(res.message);
                        discountMessage.removeClass('success').addClass('error');
                    }
                    updatePrices();
                },
                error: function() {
                    appliedDiscount = 0;
                    couponId = null;
                    discountMessage.text('حدث خطأ، حاول مرة أخرى');
                    discountMessage.removeClass('success').addClass('error');
                    updatePrices();
                }
            });
        }); // Initial setup 
        showDiscountInfo();
        updatePrices();
        $('#increase-user').on('click', function() {
            let val = parseInt($('#user-count').val()) || 1;
            $('#user-count').val(val + 1).trigger('input');
            updatePrices();
        });
        $('#decrease-user').on('click', function() {
            let val = parseInt($('#user-count').val()) || 1;
            if (val > 1) $('#user-count').val(val - 1).trigger('input');
            updatePrices();
        });
        userInput.on('input', function() {
            let val = parseInt($(this).val()) || 1;
            if (val < 1) val = 1;
            $(this).val(val);
            updatePrices();
        });
    </script>

@endsection