@extends('layouts.app')
@section('title', __('dashboard.Loyalty Settings'))
@section('page_heading', __('dashboard.Loyalty Settings'))


@section('content')
<div style="display:flex;align-items:center;justify-content:flex-end;gap:.5rem;margin-bottom:1.25rem">
    <a href="{{ route('dashboard.loyalty.index') }}" class="app-btn app-btn--secondary app-btn--sm">
        <i class="fa-solid fa-arrow-right"></i> رجوع
    </a>
</div>

{{-- KPIs --}}
<div class="app-grid gap-4 mb-6">
    @foreach([
        ['icon'=>'fa-solid fa-coins',            'bg'=>'#eff6ff','color'=>'#2563eb','val'=>number_format((float)$pointsPerUnit,2),                                    'lbl'=>__('dashboard.Points per Currency Unit')],
        ['icon'=>'fa-solid fa-money-bills',      'bg'=>'#f0fdf4','color'=>'#16a34a','val'=>number_format((float)$pointValue,3),                                       'lbl'=>__('dashboard.Value of 1 Point')],
        ['icon'=>'fa-solid fa-bolt','bg'=>'#fffbeb','color'=>'#d97706','val'=>number_format(1000*(float)$pointsPerUnit*(float)$pointValue,2),             'lbl'=>'قيمة 1000 وحدة مصروفة'],
        ['icon'=>'fa-solid fa-clock-rotate-left',   'bg'=>'#f8fafc','color'=>'#64748b','val'=>$pointsExpiryDays?number_format((int)$pointsExpiryDays).'d':'∞',           'lbl'=>'صلاحية النقاط'],
    ] as $k)
    <div class="col-span-3">
        <div class="app-card">
            <div class="app-card__body flex items-center gap-3 p-4">
                <div class="fin-icon" style="background:{{ $k['bg'] }};color:{{ $k['color'] }}"><i class="{{ $k['icon'] }}"></i></div>
                <div>
                    <div style="font-size:1.2rem;font-weight:900;color:#0f172a">{{ $k['val'] }}</div>
                    <div class="text-slate-500 dark:text-slate-400" style="font-size:.72rem;font-weight:700">{{ $k['lbl'] }}</div>
                </div>
            </div>
        </div>
    </div>
    @endforeach
</div>

<div class="app-grid gap-5">
    <div class="xl:col-span-8">
        <form action="{{ route('dashboard.loyalty.settings.update') }}" method="POST">
            @csrf
            <div class="app-card">
                <div class="app-card__header">
                    <div class="app-card__title"><i class="fa-solid fa-sliders2"></i> {{ __('dashboard.Loyalty Points Configuration') }}</div>
                </div>
                <div class="app-card__body">
                    <div class="app-grid gap-4">
                        <div class="md:col-span-6">
                            <label class="app-label">{{ __('dashboard.Points per Currency Unit') }} <span class="text-red-600 dark:text-red-400">*</span></label>
                            <input type="number" step="0.01" name="loyalty_points_per_unit" class="app-input" value="{{ $pointsPerUnit }}" required>
                            <div class="text-slate-500 dark:text-slate-400 mt-1" style="font-size:.75rem">{{ __('dashboard.How many points a customer earns for every 1 unit spent (e.g., 1 point per 1 EGP)') }}</div>
                        </div>
                        <div class="md:col-span-6">
                            <label class="app-label">{{ __('dashboard.Value of 1 Point') }} <span class="text-red-600 dark:text-red-400">*</span></label>
                            <input type="number" step="0.001" name="loyalty_point_value" class="app-input" value="{{ $pointValue }}" required>
                            <div class="text-slate-500 dark:text-slate-400 mt-1" style="font-size:.75rem">{{ __('dashboard.The monetary value of a single point when redeemed (e.g., 0.05 EGP per point)') }}</div>
                        </div>
                        <div class="col-span-12">
                            <label class="app-label">مدة صلاحية النقاط بالأيام</label>
                            <input type="number" min="0" step="1" name="loyalty_points_expiry_days" class="app-input" value="{{ $pointsExpiryDays }}">
                            <div class="text-slate-500 dark:text-slate-400 mt-1" style="font-size:.75rem">`0` أو فارغ = بدون انتهاء. يُستخدم أيضاً كقيمة افتراضية عند توليد كروت الولاء.</div>
                        </div>
                        <div class="col-span-12">
                            <div class="p-3 border rounded-lg" style="background:#eff6ff;border-color:#bfdbfe!important">
                                <div class="font-bold mb-2" style="font-size:.85rem">{{ __('dashboard.Quick Example') }}</div>
                                <div style="font-size:.85rem;color:#334155">
                                    {{ __('dashboard.If a customer spends 1000 EGP, they earn') }}
                                    <strong id="example_earned" class="text-blue-600 dark:text-blue-400">0</strong>
                                    {{ __('dashboard.points') }} —
                                    {{ __('dashboard.Those points are worth') }}
                                    <strong id="example_value" class="text-emerald-600 dark:text-emerald-400">0</strong>
                                    {{ __('dashboard.EGP') }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="app-card__footer flex justify-end">
                    <button type="submit" class="app-btn app-btn--primary">{{ __('dashboard.Save Changes') }}</button>
                </div>
            </div>
        </form>
    </div>

    <div class="xl:col-span-4">
        <div class="app-card">
            <div class="app-card__header"><div class="app-card__title"><i class="fa-solid fa-circle-info"></i> ملاحظات البرنامج</div></div>
            <div class="app-card__body flex flex-col gap-3">
                @foreach([
                    ['fa-solid fa-arrow-trend-up','آلية الاكتساب','كلما ارتفعت قيمة النقاط لكل وحدة زادت سرعة تجميع العميل للنقاط.'],
                    ['fa-solid fa-wallet',       'آلية الاستبدال','قيمة النقطة تحدد الخصم الفعلي، اضبطها بما يناسب هامش الربح.'],
                    ['fa-solid fa-shield-halved',  'اتساق النظام','أي تغيير ينعكس مباشرة على احتساب النقاط في المبيعات والحجوزات.'],
                ] as [$icon,$title,$text])
                <div class="flex gap-3 p-3 border rounded-lg">
                    <div class="fin-icon fin-icon--sm" style="background:#eff6ff;color:#2563eb;flex-shrink:0"><i class="{{ $icon }}"></i></div>
                    <div>
                        <div class="font-bold" style="font-size:.85rem">{{ $title }}</div>
                        <div class="text-slate-500 dark:text-slate-400" style="font-size:.75rem">{{ $text }}</div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</div>
@endsection

@section('styles')
<style>
.fin-icon{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}
.fin-icon--sm{width:30px;height:30px;border-radius:8px;font-size:.82rem}
</style>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    function update() {
        const perUnit = parseFloat(document.querySelector('[name="loyalty_points_per_unit"]').value) || 0;
        const val     = parseFloat(document.querySelector('[name="loyalty_point_value"]').value) || 0;
        const earned  = 1000 * perUnit;
        document.getElementById('example_earned').textContent = earned.toLocaleString();
        document.getElementById('example_value').textContent  = (earned * val).toLocaleString(undefined, {minimumFractionDigits:2});
    }
    document.querySelectorAll('input[type="number"]').forEach(i => i.addEventListener('input', update));
    update();
});
</script>
@endsection