@extends('layouts.admin', ['title' => ($offer->exists ? 'تعديل عرض' : 'عرض جديد').' | RaseedNow'])

@section('content')
    <section class="lc-page-shell">
        <div class="surface p-6">
            <div class="section-heading">
                <div>
                    <span>Offers</span>
                    <h1>{{ $offer->exists ? 'تعديل عرض' : 'عرض جديد' }}</h1>
                    <p>اختار المنتج، ارفع صورة العرض، وحدد نسبة الخصم.</p>
                </div>
                <a class="secondary-button" href="{{ route('admin.offers.index') }}">العروض</a>
            </div>

            @if($errors->any())
                <div class="mt-4 rounded-xl border border-red-200 bg-red-50 p-3 text-sm font-bold text-red-700">{{ $errors->first() }}</div>
            @endif

            <form method="POST" action="{{ $offer->exists ? route('admin.offers.update', $offer) : route('admin.offers.store') }}" enctype="multipart/form-data" class="ac-offer-form">
                @csrf
                @if($offer->exists)
                    @method('PATCH')
                @endif

                @php
                    $selectedProductId = (int) old('product_variant_id', $offer->product_variant_id);
                @endphp
                <div class="form-field ac-offer-wide">
                    <span>المنتج المرتبط بالعرض</span>
                    <input class="ac-offer-product-search" type="search" placeholder="ابحث باسم المنتج، اللعبة أو SKU..." data-offer-product-search>
                    <input type="hidden" name="product_variant_id" value="{{ $selectedProductId ?: '' }}" data-offer-product-input>
                    <div class="ac-offer-product-picker" data-offer-product-picker>
                        @foreach($products as $product)
                            @php
                                $game = $product->game;
                                $image = $game?->image_path ? asset($game->image_path) : null;
                                $name = trim(($game?->name_ar ? $game->name_ar.' - ' : '').$product->name_ar);
                                $searchText = Str::lower($name.' '.$product->sku.' '.$game?->category?->name_ar);
                            @endphp
                            <button type="button" class="ac-offer-product-option {{ $selectedProductId === $product->id ? 'is-selected' : '' }}" data-product-id="{{ $product->id }}" data-product-search="{{ $searchText }}">
                                <span class="ac-offer-product-thumb">
                                    @if($image)
                                        <img src="{{ $image }}" alt="{{ $name }}">
                                    @else
                                        {{ mb_substr($game?->name_ar ?: $product->name_ar, 0, 1) }}
                                    @endif
                                </span>
                                <span class="ac-offer-product-meta">
                                    <strong>{{ $name }}</strong>
                                    <small>{{ $product->sku }} · {{ $game?->category?->name_ar ?: 'بدون قسم' }}</small>
                                </span>
                                <em>{{ $product->displayPrice() }}</em>
                            </button>
                        @endforeach
                    </div>
                    <small class="ac-offer-hint">اختار المنتج من الكروت، واستخدم البحث لو القائمة طويلة.</small>
                </div>

                <label class="form-field"><span>عنوان العرض عربي</span><input name="title_ar" value="{{ old('title_ar', $offer->title_ar) }}" required></label>
                <label class="form-field"><span>English title</span><input name="title_en" value="{{ old('title_en', $offer->title_en) }}"></label>
                <label class="form-field"><span>نسبة الخصم %</span><input name="discount_percent" type="number" step="0.01" min="0" max="100" value="{{ old('discount_percent', $offer->discount_percent) }}" required></label>
                <label class="form-field"><span>الترتيب</span><input name="sort_order" type="number" min="0" value="{{ old('sort_order', $offer->sort_order ?? 0) }}" required></label>
                <label class="form-field"><span>مين يشوف العرض؟</span>
                    <select name="audience_type" data-offer-audience>
                        @php
                            $audienceType = old('audience_type', $offer->audience_type ?? 'all');
                        @endphp
                        <option value="all" @selected($audienceType === 'all')>كل العملاء</option>
                        <option value="new_customers" @selected($audienceType === 'new_customers')>عملاء لسه مسجلين جديد</option>
                        <option value="account_age" @selected($audienceType === 'account_age')>عملاء بقالهم عدد أيام</option>
                    </select>
                </label>
                <label class="form-field ac-offer-days"><span>عدد الأيام</span><input name="audience_days" type="number" min="1" max="3650" value="{{ old('audience_days', $offer->audience_days ?? 7) }}" data-offer-days><small>مثلا 7 يعني آخر 7 أيام للعميل الجديد، أو بقاله 7 أيام فأكثر.</small></label>
                <label class="form-field"><span>يبدأ في</span><input name="starts_at" type="datetime-local" value="{{ old('starts_at', $offer->starts_at?->format('Y-m-d\\TH:i')) }}"></label>
                <label class="form-field"><span>ينتهي في</span><input name="ends_at" type="datetime-local" value="{{ old('ends_at', $offer->ends_at?->format('Y-m-d\\TH:i')) }}"></label>

                <label class="form-field ac-offer-wide"><span>وصف عربي</span><textarea name="description_ar" rows="3">{{ old('description_ar', $offer->description_ar) }}</textarea></label>
                <label class="form-field ac-offer-wide"><span>English description</span><textarea name="description_en" rows="3">{{ old('description_en', $offer->description_en) }}</textarea></label>
                <label class="form-field"><span>مسار صورة جاهزة</span><input name="image_path" value="{{ old('image_path', $offer->image_path) }}" placeholder="images/offers/example.webp"></label>
                <label class="form-field"><span>رفع صورة العرض</span><input name="image" type="file" accept="image/*"></label>

                @if($offer->image_path)
                    <div class="ac-offer-current">
                        <span>الصورة الحالية</span>
                        <img src="{{ asset($offer->image_path) }}" alt="{{ $offer->title_ar }}">
                    </div>
                @endif

                <label class="ac-check"><input name="is_active" type="checkbox" value="1" @checked(old('is_active', $offer->is_active))> العرض نشط</label>
                <button class="primary-button ac-offer-wide" type="submit">حفظ العرض</button>
            </form>
        </div>
    </section>

    <script>
    (() => {
        const input = document.querySelector('[data-offer-product-input]');
        const cards = [...document.querySelectorAll('[data-product-id]')];
        const search = document.querySelector('[data-offer-product-search]');
        const audience = document.querySelector('[data-offer-audience]');
        const days = document.querySelector('[data-offer-days]');

        cards.forEach((card) => {
            card.addEventListener('click', () => {
                input.value = card.dataset.productId;
                cards.forEach((item) => item.classList.toggle('is-selected', item === card));
            });
        });

        search?.addEventListener('input', () => {
            const value = search.value.trim().toLowerCase();
            cards.forEach((card) => {
                card.hidden = value !== '' && !card.dataset.productSearch.includes(value);
            });
        });

        const syncDays = () => {
            const enabled = audience?.value !== 'all';
            days.closest('.form-field').classList.toggle('is-muted', !enabled);
            days.disabled = !enabled;
        };

        audience?.addEventListener('change', syncDays);
        syncDays();
    })();
    </script>
@endsection