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

@section('content')
<section class="content">
    @component('components.widget')
        <div class="box-header">
            <h3 class="box-title">@lang('master::lang.purchase_more_users')</h3>
        </div>
        <div class="box-body">
            @if(!empty($latest))
                <p>@lang('master::lang.subscription_type'): <strong>{{ $latest->billing_cycle === 'yearly' ? __('master::lang.yearly') : __('master::lang.monthly') }}</strong></p>
                <p>@lang('master::lang.subscription_end_date'): <strong>{{ $latest->end_date ? @format_date($latest->end_date) : __('lang_v1.na') }}</strong></p>
                <p>@lang('master::lang.current_subscription_users'): <strong>{{ $latest->users_count }}</strong></p>
                <p>@lang('master::lang.subscription_price_after_discount'): <strong>{{ number_format($latest->price_after_discount ?? $latest->total_price, 2) }} @lang('master::lang.currency')</strong></p>
            @else
                <div class="alert alert-warning">@lang('master::lang.no_active_subscription')</div>
            @endif

            <form id="purchaseUsersForm" method="POST" action="{{ action([\Modules\Master\Http\Controllers\SubdomainSubscriptionController::class, 'purchaseUsersStore']) }}">
                @csrf

                <div class="form-group">
                    <label>@lang('master::lang.additional_users')</label>
                    <input id="additional_users" type="number" name="additional_users" class="form-control" min="1" value="1" required>
                </div>
                <div class="form-group">
                    <label>@lang('master::lang.expected_price')</label>
                    <div id="calculated_price" style="font-size:18px; font-weight:700;">0 @lang('master::lang.currency')</div>
                </div>

                <div class="form-group">
                    <button id="submitPurchase" class="btn btn-primary">@lang('master::lang.go_to_payment')</button>
                    <a class="btn btn-default" href="{{ action([\Modules\Master\Http\Controllers\SubdomainSubscriptionController::class, 'index']) }}">@lang('master::lang.cancel')</a>
                </div>
            </form>

            <p class="text-muted">@lang('master::lang.purchase_more_note')</p>
        </div>
    @endcomponent
</section>
@endsection

@section('javascript')
<script>
    (function(){
        const latest = @json($latest ?? null);
        const additionalInput = document.getElementById('additional_users');
        const priceEl = document.getElementById('calculated_price');

        function formatCurrency(v){
            const n = parseFloat(v) || 0;
            return Math.floor(n) + ' د.ع';
        }

        function toNumber(val){
            if (val === null || val === undefined) return 0;
            const s = String(val).replace(/[^0-9.\-]/g, '');
            const n = parseFloat(s);
            return isNaN(n) ? 0 : n;
        }

        function calculate(){
            if (!latest){
                priceEl.innerText = 'N/A';
                return;
            }

            const additional = parseInt(additionalInput.value, 10) || 0;
            const basePrice = toNumber(latest.price_after_discount) || toNumber(latest.total_price);
            const usersCount = Math.max(1, parseInt(latest.users_count, 10) || 1);
            const perUserCycle = basePrice / usersCount;
            const daysInCycle = (String(latest.billing_cycle).toLowerCase() === 'yearly') ? 365 : 30;
            const perUserPerDay = perUserCycle / daysInCycle;

            let remainingDays = daysInCycle;
            if (latest.end_date){
                const end = new Date(latest.end_date);
                const today = new Date();
                const startOfToday = new Date(today.getFullYear(), today.getMonth(), today.getDate());
                const startOfEnd = new Date(end.getFullYear(), end.getMonth(), end.getDate());
                const msPerDay = 1000*60*60*24;
                const diffDays = Math.floor((startOfEnd - startOfToday) / msPerDay);
                remainingDays = diffDays;
                if (remainingDays < 0) remainingDays = 0;
            }

            const total = perUserPerDay * remainingDays * additional;

            console.debug('purchase calc', {
                basePrice, usersCount, perUserCycle, daysInCycle, perUserPerDay, remainingDays, additional, total
            });

            priceEl.innerText = formatCurrency(total);
        }

        if (additionalInput){
            additionalInput.addEventListener('input', calculate);
        }

        // initial calc
        calculate();
    })();
</script>
@endsection