@extends('layouts.admin', ['title' => 'استيراد LikeCard | RaseedNow'])

@section('content')
<section class="lc-page-shell rn-importer">
    <div class="surface p-6">
        <div class="section-heading">
            <div><span>Catalog Importer</span><h1>استيراد لعبة من LikeCard</h1><p>الصق رابط صفحة اللعبة أو البطاقة، راجع البيانات وعدّلها، ثم احفظها في متجرك.</p></div>
            <a class="secondary-button" href="{{ route('admin.products.index') }}">المنتجات</a>
        </div>

        @if($errors->any())<div class="rn-import-alert">{{ $errors->first() }}</div>@endif

        <form method="POST" action="{{ route('admin.imports.likecard.preview') }}" class="rn-import-url">
            @csrf
            <input name="url" type="url" value="{{ old('url', $preview['source_url'] ?? '') }}" required placeholder="https://ar-egypt.likecard.com/...">
            <button class="primary-button">سحب ومعاينة البيانات</button>
        </form>
        <p class="rn-import-note">يتم استيراد البيانات العامة الظاهرة في الصفحة فقط. لا يتم تجاوز تسجيل الدخول أو Cloudflare. للربط المستمر اطلب API التاجر الرسمي من LikeCard.</p>
    </div>

    @if($preview)
        <form method="POST" action="{{ route('admin.imports.likecard.store') }}" class="surface p-6 rn-import-preview">
            @csrf
            <input type="hidden" name="source_url" value="{{ $preview['source_url'] }}">
            <div class="section-heading"><div><span>Preview</span><h2>راجع قبل الحفظ</h2></div><button class="primary-button">حفظ اللعبة والباقات</button></div>

            <div class="rn-import-game-grid">
                <div class="rn-import-cover">
                    @if($preview['image_url'])<img src="{{ $preview['image_url'] }}" alt="معاينة الصورة">@else<span>لا توجد صورة</span>@endif
                    <label>رابط الصورة<input name="image_url" type="url" value="{{ old('image_url', $preview['image_url']) }}"></label>
                </div>
                <div class="rn-import-fields">
                    <label>القسم<select name="category_id" required><option value="">اختر القسم</option>@foreach($categories as $category)<option value="{{ $category->id }}" @selected(old('category_id') == $category->id)>{{ $category->parent ? $category->parent->name_ar.' ← ' : '' }}{{ $category->name_ar }}</option>@endforeach</select></label>
                    <label>الاسم العربي<input name="name_ar" value="{{ old('name_ar', $preview['name_ar']) }}" required></label>
                    <label>الاسم الإنجليزي<input name="name_en" value="{{ old('name_en', $preview['name_en']) }}" required></label>
                    <label>حالة النشر<select name="status"><option value="inactive">مسودة للمراجعة</option><option value="active">نشط فورًا</option></select></label>
                    <label class="wide">الوصف<textarea name="description_ar" rows="3">{{ old('description_ar', $preview['description_ar']) }}</textarea></label>
                </div>
            </div>

            <div class="rn-import-products-head"><div><h3>الباقات والأسعار</h3><p>كل القيم قابلة للتعديل قبل الحفظ.</p></div><button type="button" class="secondary-button" data-add-variant>+ باقة جديدة</button></div>
            <div class="rn-import-products" data-variant-list>
                @foreach($preview['variants'] as $index => $variant)
                    <div class="rn-import-product" data-variant-row>
                        <span class="rn-import-index">{{ $loop->iteration }}</span>
                        <label>اسم الباقة عربي<input name="variants[{{ $index }}][name_ar]" value="{{ $variant['name_ar'] }}" required></label>
                        <label>English<input name="variants[{{ $index }}][name_en]" value="{{ $variant['name_en'] }}" required></label>
                        <label>سعر البيع<input name="variants[{{ $index }}][price]" type="number" step="0.01" min="0.01" value="{{ $variant['price'] }}" required></label>
                        <label>التكلفة<input name="variants[{{ $index }}][cost]" type="number" step="0.01" min="0" value="{{ $variant['cost'] }}" required></label>
                        <input name="variants[{{ $index }}][external_id]" type="hidden" value="{{ $variant['external_id'] }}">
                        <button type="button" data-remove-variant aria-label="حذف">×</button>
                    </div>
                @endforeach
            </div>
            <button class="primary-button rn-import-save">حفظ كمسودة قابلة للتعديل</button>
        </form>
    @endif
</section>
@endsection

@push('styles')
<style>
.rn-importer{display:grid;gap:20px}.rn-import-url{display:grid;grid-template-columns:1fr auto;gap:12px;margin-top:22px}.rn-import-url input{min-height:50px;padding:0 16px;border:1px solid #dce4f0;border-radius:14px;direction:ltr}.rn-import-note{margin:11px 0 0;color:#758198;font-size:12px}.rn-import-alert{margin-top:18px;padding:13px 15px;border:1px solid #fecaca;border-radius:13px;background:#fff1f2;color:#b42318;font-weight:700}.rn-import-game-grid{display:grid;grid-template-columns:270px 1fr;gap:22px;margin-top:24px}.rn-import-cover{display:grid;gap:12px;padding:12px;border:1px solid #e3e9f3;border-radius:18px;background:#f8faff}.rn-import-cover>img,.rn-import-cover>span{width:100%;height:190px;object-fit:contain;border-radius:13px;background:#fff}.rn-import-cover>span{display:grid;place-items:center;color:#8793a8}.rn-import-cover label,.rn-import-fields label,.rn-import-product label{display:grid;gap:6px;color:#43506a;font-size:11px;font-weight:800}.rn-import-cover input,.rn-import-fields input,.rn-import-fields select,.rn-import-fields textarea,.rn-import-product input{width:100%;min-height:42px;padding:8px 11px;border:1px solid #dce4ef;border-radius:11px;background:#fff;color:#14213d}.rn-import-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.rn-import-fields .wide{grid-column:1/-1}.rn-import-products-head{display:flex;align-items:center;justify-content:space-between;margin:28px 0 12px}.rn-import-products-head h3{margin:0}.rn-import-products-head p{margin:4px 0 0;color:#8490a5;font-size:12px}.rn-import-products{display:grid;gap:10px}.rn-import-product{display:grid;grid-template-columns:34px 1.35fr 1.2fr 120px 120px 38px;gap:9px;align-items:end;padding:10px;border:1px solid #e2e8f2;border-radius:14px;background:#fbfcff}.rn-import-index{display:grid;width:30px;height:30px;place-items:center;align-self:center;border-radius:9px;background:#edf4ff;color:#1268ff;font-weight:900}.rn-import-product>button{width:36px;height:42px;border:0;border-radius:10px;background:#fff0f0;color:#d72c2c;font-size:22px}.rn-import-save{width:100%;margin-top:18px}.rn-import-preview>.section-heading .primary-button{display:none}@media(max-width:900px){.rn-import-url,.rn-import-game-grid{grid-template-columns:1fr}.rn-import-fields{grid-template-columns:1fr}.rn-import-fields .wide{grid-column:auto}.rn-import-product{grid-template-columns:30px 1fr 1fr}.rn-import-product label:nth-of-type(3),.rn-import-product label:nth-of-type(4){grid-column:auto}.rn-import-product>button{grid-column:3;justify-self:end}.rn-import-cover{max-width:420px}}
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('click',event=>{const list=document.querySelector('[data-variant-list]');if(event.target.closest('[data-add-variant]')&&list){const index=list.children.length;list.insertAdjacentHTML('beforeend',`<div class="rn-import-product" data-variant-row><span class="rn-import-index">${index+1}</span><label>اسم الباقة عربي<input name="variants[${index}][name_ar]" required></label><label>English<input name="variants[${index}][name_en]" required></label><label>سعر البيع<input name="variants[${index}][price]" type="number" step="0.01" min="0.01" required></label><label>التكلفة<input name="variants[${index}][cost]" type="number" step="0.01" min="0" required></label><input name="variants[${index}][external_id]" type="hidden"><button type="button" data-remove-variant>×</button></div>`)}const remove=event.target.closest('[data-remove-variant]');if(remove&&document.querySelectorAll('[data-variant-row]').length>1)remove.closest('[data-variant-row]').remove()});
</script>
@endpush