@extends('layouts.app2')
@section('title', 'ROOT ERP | ' . __('lang_v1.payment_details'))

@section('content')
<style>
    body {
        font-family: 'Tajawal', sans-serif;
        direction: rtl;
        background-color: #f8faff;
    }     .error {
            color: red;
            font-size: 0.9rem;
            margin-top: 5px;
        }

    .billing-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;
    }

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

   .bill-summary-modern {
    background: #f0f4ff;
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 25px;
    font-size: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.bill-summary-modern h3 {
    font-size: 20px;
    font-weight: 700;
    color: #1563ff;
    margin-bottom: 20px;
    text-align: center;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid #dce4f2;
    border-radius: 8px;
    margin-bottom: 10px;
    background: #ffffff;
    transition: 0.3s;
}

.summary-row:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.summary-row:hover {
    background: #e6f0ff;
}

.label {
    font-weight: 600;
    color: #555;
}

.value {
    font-weight: 700;
    color: #1563ff;
}

.discount-row .original-price {
    text-decoration: line-through;
    color: #888;
    font-weight: 500;
    margin-left: 10px;
    font-size: 14px;
}

.total-row {
    background: #fff;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    justify-content: space-between;
    padding: 15px 20px;
}

.plan-row {
     display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid #dce4f2;
    border-radius: 8px;
    margin-bottom: 10px;
    background: #ffffff;
    transition: 0.3s;
}
    .form-group {
        margin-bottom: 15px;
    }

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

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

    .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;
    }

    .form-footer {
        text-align: center;
        margin-top: 30px;
    }

    /* ===== Phone verification ===== */
    .phone-verification {
        margin-top: 20px;
    }

    .send-code-btn {
        margin-top: 10px;
    }

    .timer {
        margin-top: 5px;
        color: #555;
        font-size: 14px;
    }

    .code-input-wrapper {
        display: flex;
        gap: 10px;
        justify-content: center;
        margin-top: 15px;
    }

    .code-input-wrapper input {
        width: 45px;
        height: 50px;
        font-size: 24px;
        font-weight: bold;
        text-align: center;
        border-radius: 8px;
        border: 1px solid #ddd;
    }

    .overlay-confirm {
        display: none;
        position: fixed;
        top:0; left:0; right:0; bottom:0;
        background: rgba(0,0,0,0.4);
        z-index: 1000;
        justify-content: center;
        align-items: center;
    }

    .overlay-confirm .confirm-box {
        background: #fff;
        padding: 25px;
        border-radius: 12px;
        text-align: center;
        width: 300px;
    }

    .overlay-confirm .confirm-box button {
        margin: 10px;
    }
</style>

<div class="billing-container">
    <div class="billing-header">@lang('lang_v1.confirm_payment_and_enter_info')</div>

   <div class="bill-summary-modern">
    <h3>@lang('lang_v1.invoice_summary')</h3>

    <div class="summary-row">
        <span class="label">@lang('lang_v1.user_count')</span>
        <span class="value">{{ $user_count }}</span>
    </div>

    <div class="summary-row">
        <span class="label">@lang('lang_v1.price_per_user')</span>
        <span class="value">{{ number_format($priceAmount,0) }} @lang('lang_v1.iqd')</span>
    </div>

    @if($discount > 0)
    <div class="summary-row discount-row">
        <span class="label">@lang('lang_v1.applied_discount')</span>
        <span class="value">{{ $discount }}%</span>
        <span class="original-price">{{ number_format($priceAmount * $user_count,0) }} @lang('lang_v1.iqd')</span>
    </div>
    @endif

    <div class="summary-row total-row">
        <span class="label">@lang('lang_v1.final_total')</span>
        <span class="value">{{ number_format($final_total,0) }} @lang('lang_v1.iqd')</span>
    </div>

    <div class="summary-row plan-row">
        <span class="label">@lang('lang_v1.subscription_duration')</span>
        <span class="value">{{ $planName }}</span>
    </div>
</div>
    <form action="/finish-payment" method="POST" id="paymentForm">
        @csrf
        <input type="hidden" name="code" value="{{ $code ?? '' }}">
        <input type="hidden" name="plan" value="{{ $plan }}">
        <input type="hidden" name="user_count" value="{{ $user_count }}">
        <input type="hidden" name="verified_phone" id="verified-phone" value="">

        <div class="form-group">
            <label>@lang('lang_v1.phone_number')</label>
            <input type="tel" name="phone" id="phone-input" placeholder="@lang('lang_v1.phone_placeholder')" value="{{ old('phone') }}" required>
              @error('phone')
                    <div class="error">{{ $message }}</div>
              @enderror
        </div>

        <div class="phone-verification">
            <button type="button" class="btn send-code-btn" id="sendCodeBtn">@lang('lang_v1.send_code')</button>
            <div class="timer" id="timer"></div>

            <div class="code-input-wrapper" id="code-wrapper" style="display:none;">
                <input type="text" maxlength="1" class="code-input" id="code-1">
                <input type="text" maxlength="1" class="code-input" id="code-2">
                <input type="text" maxlength="1" class="code-input" id="code-3">
                <input type="text" maxlength="1" class="code-input" id="code-4">
            </div>
        </div>

        <div class="form-footer">
            <button type="submit" class="btn" id="submitBtn">@lang('lang_v1.confirm_and_finish_payment')</button>
        </div>
    </form>
</div>

<!-- Confirmation overlay -->
<div class="overlay-confirm" id="overlayConfirm">
    <div class="confirm-box">
        <p id="confirmText"></p>
        <button type="button" class="btn" id="confirmYes">@lang('lang_v1.yes')</button>
        <button type="button" class="btn" id="confirmNo">@lang('lang_v1.no')</button>
    </div>
</div>

@endsection

@section('scripts')
<script>
let timerInterval;
let initialWait = 60; // 1 min
let nextWait = 300; // 5 min
let blocked = false;
let currentWait = initialWait;

function startTimer(duration){
    let timer = duration, minutes, seconds;
    $('#timer').text('');
    timerInterval = setInterval(function(){
        minutes = parseInt(timer / 60, 10);
        seconds = parseInt(timer % 60, 10);
        $('#timer').text(`يرجى الانتظار ${minutes}:${seconds < 10 ? '0'+seconds : seconds} لإرسال كود جديد`);
        if (--timer < 0){
            clearInterval(timerInterval);
            $('#timer').text('');
            $('#sendCodeBtn').prop('disabled', false);
            if(currentWait === initialWait){
                currentWait = nextWait;
            } else {
                blocked = true;
                $('#sendCodeBtn').prop('disabled', true);
            }
        }
    }, 1000);
}

$('#sendCodeBtn').on('click', function(){
    if(blocked) return;

    const phone = $('#phone-input').val().trim();
    if(!phone){
        $('#phone-error').text('الرجاء إدخال رقم الهاتف');
        return;
    }

    $('#phone-error').text('');

    // Show confirmation overlay
    $('#confirmText').text(`هل تريد إرسال الكود إلى الرقم ${phone}?`);
    $('#overlayConfirm').fadeIn();

    $('#confirmYes').off().on('click', function(){
        $('#overlayConfirm').fadeOut();

        // Disable send button
        $('#sendCodeBtn').prop('disabled', true);
        
       
        // Send AJAX request
        $.ajax({
            url: "#",
            type: "POST",
            data: {
                phone: phone,
                _token: "{{ csrf_token() }}"
            },
            success: function(res){
                if(res.success){
                    $('#code-wrapper').show();
                    startTimer(currentWait);
                } else {
                    alert(res.message);
                    $('#sendCodeBtn').prop('disabled', false);
                }
            },
            error: function(){
                alert('حدث خطأ، حاول مرة أخرى');
                $('#sendCodeBtn').prop('disabled', false);
            }
        });
    });

    $('#confirmNo').off().on('click', function(){
        $('#overlayConfirm').fadeOut();
    });
});

// Move focus automatically between code inputs
$('.code-input').on('input', function(){
    const $this = $(this);
    const val = $this.val();
    if(val.length === 1){
        $this.next('.code-input').focus();
    }
});

// Optional: combine code to send in form
$('#paymentForm').on('submit', function(e){
    let code = '';
    $('.code-input').each(function(){
        code += $(this).val();
    });
    $('#verified-phone').val(code);
});
</script>
@endsection