@extends('front.layouts.master-auth')

@section('content')
<section class="page-content">
    <div class="container">
        <div class="page-title-cont">
            @if(isset($breadcrumbs) && is_array($breadcrumbs) && count($breadcrumbs) > 0)
                <x-breadcrumb :items="$breadcrumbs" />
            @endif
            <h1 class="page-title">
                محوّل العملات العربية — تحويل الدولار إلى جميع العملات العربية
            </h1>
        </div>

        @if($rates_null)
            <div class="alert alert-danger" role="alert" style="margin-top:1.5rem;">
                <strong>تعذّر جلب أسعار الصرف</strong> — حاول مرة أخرى لاحقاً أو تواصل مع مزود خدمة الدفع للحصول على السعر الحالي.
            </div>
        @else

        <div class="row" style="margin-top:1rem;">
            {{-- العمود الأول: المقدمة + الأداة + الشحن (عرض محدود) --}}
            <div class="col-md-5 col-lg-4">
                <p style="color:#555; line-height:1.9; margin-bottom:1.2rem; font-size:0.97rem;">
                    أدخل المبلغ بالدولار، اختر العملة العربية، واحصل على المقابل فوراً.
                </p>

                <div id="converter-card" style="background:#fff; border:1px solid #e5e7eb; border-radius:0; padding:1.6rem; box-shadow:none;">

                    {{-- Direction toggle --}}
                    <div style="display:flex; gap:8px; margin-bottom:1.4rem;">
                        <button type="button" id="btn-usd-to-arab" onclick="setDirection('usd_arab')"
                            style="flex:1; padding:9px 6px; border-radius:0; border:2px solid #14965A; background:#14965A; color:#fff; font-weight:600; cursor:pointer; transition:all .2s; font-size:0.88rem;">
                            دولار ← عملة عربية
                        </button>
                        <button type="button" id="btn-arab-to-usd" onclick="setDirection('arab_usd')"
                            style="flex:1; padding:9px 6px; border-radius:0; border:2px solid #e5e7eb; background:#fff; color:#555; font-weight:600; cursor:pointer; transition:all .2s; font-size:0.88rem;">
                            عملة عربية ← دولار
                        </button>
                    </div>

                    {{-- Currency selector --}}
                    <div style="margin-bottom:1.2rem;">
                        <label style="font-weight:600; margin-bottom:6px; display:block; color:#333; font-size:0.9rem;">اختر العملة العربية</label>
                        <select id="currency-select" onchange="onCurrencyChange()"
                            style="width:100%; padding:11px 14px; border:1.5px solid #d1d5db; border-radius:0; font-size:0.95rem; font-weight:600; color:#333; background:#f9fafb; outline:none; cursor:pointer;">
                            @foreach($currencies as $code => $info)
                                @if(isset($rates[$code]))
                                <option value="{{ $code }}" {{ $code === 'EGP' ? 'selected' : '' }}>
                                    {{ $info['country'] }} — {{ $info['name'] }} ({{ $code }})
                                </option>
                                @endif
                            @endforeach
                        </select>
                    </div>

                    {{-- From --}}
                    <div style="margin-bottom:0.8rem;">
                        <label id="from-label" style="font-weight:600; margin-bottom:5px; display:block; color:#333; font-size:0.9rem;">المبلغ بالدولار (USD)</label>
                        <div style="display:flex; align-items:center; border:1.5px solid #d1d5db; border-radius:0; overflow:hidden; background:#f9fafb;">
                            <span id="from-currency" style="padding:0 14px; color:#555; font-weight:700; font-size:1rem; white-space:nowrap; border-left:1px solid #d1d5db; min-width:50px; text-align:center;">$</span>
                            <input type="number"
                                   id="amount-from"
                                   value="100"
                                   min="0"
                                   step="any"
                                   inputmode="decimal"
                                   autocomplete="off"
                                   style="flex:1; min-width:0; padding:13px 14px; border:none; background:transparent; font-size:1.1rem; font-weight:600; outline:none; direction:ltr; text-align:left;"
                                   oninput="calculate()">
                        </div>
                    </div>

                    {{-- Arrow --}}
                    <div style="text-align:center; margin:4px 0;">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#14965A" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                            <line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/>
                        </svg>
                    </div>

                    {{-- To --}}
                    <div style="margin-bottom:1rem;">
                        <label style="font-weight:600; margin-bottom:5px; display:block; color:#333; font-size:0.9rem;">
                            المقابل بـ <span id="to-label-currency-name">الجنيه المصري (EGP)</span>
                        </label>
                        <div style="display:flex; align-items:center; border:1.5px solid #14965A; border-radius:0; overflow:hidden; background:#f0fdf4;">
                            <span id="to-currency" style="padding:0 14px; color:#14965A; font-weight:700; font-size:1rem; white-space:nowrap; border-left:1px solid #a7f3d0; min-width:50px; text-align:center;">ج.م</span>
                            {{-- output بدل input readonly: بعض المتصفحات لا تعيد رسم قيمة input المعطّل عند التحديث بـ JS --}}
                            <output id="amount-to" for="amount-from currency-select"
                                style="display:block; flex:1; min-width:0; margin:0; padding:13px 14px; border:none; background:transparent; font-size:1.25rem; font-weight:700; color:#14965A; outline:none; direction:ltr; text-align:left; font-family:inherit;">—</output>
                        </div>
                    </div>

                    {{-- Rate info --}}
                    <div style="padding:10px 14px; background:#f0fdf4; border-radius:0; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:6px;">
                        <span style="font-weight:600; color:#14965A; font-size:0.9rem;" id="rate-display">جاري الحساب...</span>
                        <span style="color:#888; font-size:0.82rem;">آخر تحديث: {{ $updated_at }}</span>
                    </div>
                </div>

                <div style="margin-top:1.2rem;">
                    @auth
                        <a href="{{ route('user.transactions.charge') }}"
                           style="display:block; text-align:center; background:#14965A; color:#fff; padding:13px; border-radius:10px; font-weight:700; font-size:1rem; text-decoration:none;">
                            اشحن رصيدك الآن
                        </a>
                    @else
                        <a href="{{ route('view.register') }}"
                           style="display:block; text-align:center; background:#14965A; color:#fff; padding:13px; border-radius:10px; font-weight:700; font-size:1rem; text-decoration:none;">
                            سجّل وابدأ الآن
                        </a>
                        <p style="margin-top:8px; color:#888; font-size:0.85rem; text-align:center;">سجّل مجاناً واشحن رصيدك بأمان لتبدأ العمل على المنصة</p>
                    @endauth
                </div>
            </div>

            {{-- العمود الثاني: تعليمات هامة --}}
            <div class="col-md-7 col-lg-8 mt-4 mt-md-0">
                <div style="background:#fafafa; border:1px solid #e5e7eb; border-radius:0; padding:1.5rem 1.6rem;">
                    <h2 style="margin:0 0 1rem; font-size:1.15rem; font-weight:700; color:#1a1a2e; border-bottom:2px solid #14965A; padding-bottom:0.5rem; display:inline-block;">
                        تعليمات هامة
                    </h2>
                    <ul style="margin:0; padding-right:1.25rem; color:#444; line-height:2; font-size:0.95rem;">
                        <li style="margin-bottom:0.35rem;">رصيد منصة <strong>ربحي</strong> يُشحن بالدولار الأمريكي (USD). استخدم المحوّل لتقدير ما يعادل مبلغك بعملتك المحلية قبل الشحن.</li>
                        <li style="margin-bottom:0.35rem;">السعر المعروض يُجلب من مصدر خارجي ويُحدَّث تلقائياً؛ قد يختلف المبلغ الفعلي على كشف البنك أو بوابة الدفع بسبب رسوم الصرف أو التوقيت.</li>
                        <li style="margin-bottom:0.35rem;">يمكنك التبديل بين اتجاهين: <strong>من دولار إلى عملة عربية</strong> أو <strong>من عملة عربية إلى دولار</strong> حسب ما تحتاج معرفته.</li>
                        <li style="margin-bottom:0.35rem;">اختر الدولة والعملة من القائمة بدقة؛ الرمز (مثل EGP أو SAR) يظهر بجانب اسم العملة.</li>
                        <li style="margin-bottom:0.35rem;">إذا ظهرت رسالة تعذّر جلب السعر، انتظر قليلاً ثم حدّث الصفحة.</li>
                        <li>لإتمام الشحن فعلياً بعد التسجيل، انتقل من زر «اشحن رصيدك الآن» إلى صفحة الدفع الآمنة داخل المنصة.</li>
                    </ul>
                </div>
            </div>

        </div>{{-- end row --}}

        @endif
    </div>
</section>
@endsection

@section('js-body')
@if(!$rates_null)
<script type="application/json" id="conv-rates">{!! json_encode($rates) !!}</script>
<script type="application/json" id="conv-currencies">{!! json_encode($currencies) !!}</script>
<script>
    var RATES = JSON.parse(document.getElementById('conv-rates').textContent);
    var CURRENCIES = JSON.parse(document.getElementById('conv-currencies').textContent);
    var direction = 'usd_arab';

    function getCurrentCode() {
        return document.getElementById('currency-select').value;
    }

    function onCurrencyChange() {
        calculate();
        var code = getCurrentCode();
        var info = CURRENCIES[code] || {};
        var symbol = info.symbol || code;
        var name = info.name || code;

        if (direction === 'usd_arab') {
            document.getElementById('to-label-currency-name').textContent = name + ' (' + code + ')';
            document.getElementById('to-currency').textContent = symbol;
        } else {
            document.getElementById('from-label').textContent = 'المبلغ بـ ' + name + ' (' + code + ')';
            document.getElementById('from-currency').textContent = symbol;
        }

        updateRateDisplay();
    }

    function setDirection(dir) {
        direction = dir;
        document.getElementById('amount-from').value = '100';
        document.getElementById('amount-to').value = '—';

        var code = getCurrentCode();
        var info = CURRENCIES[code] || {};
        var symbol = info.symbol || code;
        var name = info.name || code;

        if (dir === 'usd_arab') {
            document.getElementById('from-label').textContent = 'المبلغ بالدولار (USD)';
            document.getElementById('from-currency').textContent = '$';
            document.getElementById('to-label-currency-name').textContent = name + ' (' + code + ')';
            document.getElementById('to-currency').textContent = symbol;
            styleActiveTab('btn-usd-to-arab', 'btn-arab-to-usd');
        } else {
            document.getElementById('from-label').textContent = 'المبلغ بـ ' + name + ' (' + code + ')';
            document.getElementById('from-currency').textContent = symbol;
            document.getElementById('to-label-currency-name').textContent = 'دولار أمريكي (USD)';
            document.getElementById('to-currency').textContent = '$';
            styleActiveTab('btn-arab-to-usd', 'btn-usd-to-arab');
        }

        updateRateDisplay();
        calculate();
        document.getElementById('amount-from').focus();
    }

    function styleActiveTab(activeId, inactiveId) {
        var a = document.getElementById(activeId);
        var b = document.getElementById(inactiveId);
        a.style.background = '#14965A'; a.style.borderColor = '#14965A'; a.style.color = '#fff';
        b.style.background = '#fff';    b.style.borderColor = '#e5e7eb'; b.style.color = '#555';
    }

    function updateRateDisplay() {
        var code = getCurrentCode();
        var rate = RATES[code];
        if (!rate) return;
        var decimals = (code === 'KWD' || code === 'BHD' || code === 'OMR' || code === 'JOD') ? 4 : 2;
        var info = CURRENCIES[code] || {};
        if (direction === 'usd_arab') {
            document.getElementById('rate-display').textContent = '1 USD = ' + rate.toFixed(decimals) + ' ' + code;
        } else {
            document.getElementById('rate-display').textContent = '1 ' + code + ' = ' + (1 / rate).toFixed(6) + ' USD';
        }
    }

    function calculate() {
        var raw = parseFloat(document.getElementById('amount-from').value);
        var code = getCurrentCode();
        var rate = RATES[code];
        var decimals = (code === 'KWD' || code === 'BHD' || code === 'OMR' || code === 'JOD') ? 4 : 2;

        var outEl = document.getElementById('amount-to');
        if (isNaN(raw) || raw < 0 || !rate) {
            outEl.value = '—';
            return;
        }

        var result;
        if (direction === 'usd_arab') {
            result = raw * rate;
            outEl.value = result.toFixed(2);
        } else {
            result = raw / rate;
            outEl.value = result.toFixed(4);
        }
    }

    document.addEventListener('DOMContentLoaded', function () {
        onCurrencyChange();
        calculate();
    });
</script>
@endif
@endsection