{{-- resources/views/admin/content/sliders/create.blade.php --}}
@extends('admin.layouts.app')

@section('title', 'إضافة بنر/سلايد')

@php
    /** @var string $table */
    /** @var array  $columns */
    $has = fn(string $c) => in_array(strtolower($c), $columns ?? [], true);
@endphp

@push('styles')
<style>
    .card-dark{background:#121a2b;border:1px solid rgba(255,255,255,.08);color:#e6e9ef}
    .form-control,.form-select,.form-check-input{background:#0b1220;color:#e2e8f0;border:1px solid rgba(255,255,255,.12)}
    .form-control::placeholder{color:#94a3b8}
    textarea.min-h-200{min-height:200px}
    .hint{color:#94a3b8;font-size:.9rem}
</style>
@endpush

@section('content')
<div class="d-flex align-items-center justify-content-between mb-3">
    <h4 class="m-0"><i class="bi bi-image me-1"></i> إضافة بنر/سلايد</h4>
    <a href="{{ route('admin.content.sliders.index') }}" class="btn btn-outline-light">
        <i class="bi bi-arrow-right-short"></i> رجوع
    </a>
</div>

@if ($errors->any())
    <div class="alert alert-danger">
        <strong>تحقق من الأخطاء:</strong>
        <ul class="mb-0 mt-2">
            @foreach ($errors->all() as $e)
                <li>{{ $e }}</li>
            @endforeach
        </ul>
    </div>
@endif

<form method="POST" action="{{ route('admin.content.sliders.store') }}" enctype="multipart/form-data">
    @csrf

    <div class="card card-dark mb-3">
        <div class="card-body">
            <div class="row g-3">
                @if($has('title'))
                    <div class="col-md-6">
                        <label class="form-label">العنوان*</label>
                        <input type="text" name="title" value="{{ old('title') }}" class="form-control" placeholder="عنوان مختصر" required>
                    </div>
                @endif

                @if($has('position'))
                    <div class="col-md-3">
                        <label class="form-label">مكان العرض (position)</label>
                        <input list="positions" type="text" name="position" value="{{ old('position') }}" class="form-control" placeholder="home_top / hero / sidebar">
                        <datalist id="positions">
                            <option value="home_top"></option>
                            <option value="home_hero"></option>
                            <option value="homepage_slider"></option>
                            <option value="sidebar"></option>
                            <option value="footer"></option>
                        </datalist>
                    </div>
                @endif

                @if($has('locale'))
                    <div class="col-md-3">
                        <label class="form-label">اللغة</label>
                        <input type="text" name="locale" value="{{ old('locale','ar') }}" class="form-control" placeholder="ar / en / ...">
                    </div>
                @endif

                @if($has('link_url'))
                    <div class="col-md-6">
                        <label class="form-label">رابط عند الضغط (اختياري)</label>
                        <input type="url" name="link_url" value="{{ old('link_url') }}" class="form-control" placeholder="https://example.com/somewhere">
                    </div>
                @endif

                @if($has('button_text'))
                    <div class="col-md-3">
                        <label class="form-label">نص الزر (اختياري)</label>
                        <input type="text" name="button_text" value="{{ old('button_text') }}" class="form-control" placeholder="احجز الآن">
                    </div>
                @endif

                @if($has('sort_order'))
                    <div class="col-md-3">
                        <label class="form-label">الترتيب</label>
                        <input type="number" name="sort_order" value="{{ old('sort_order',0) }}" min="0" class="form-control">
                    </div>
                @endif

                @if($has('starts_at'))
                    <div class="col-md-3">
                        <label class="form-label">يبدأ العرض</label>
                        <input type="datetime-local" name="starts_at" value="{{ old('starts_at') }}" class="form-control">
                    </div>
                @endif

                @if($has('ends_at'))
                    <div class="col-md-3">
                        <label class="form-label">ينتهي العرض</label>
                        <input type="datetime-local" name="ends_at" value="{{ old('ends_at') }}" class="form-control">
                    </div>
                @endif

                @if($has('bg_color'))
                    <div class="col-md-3">
                        <label class="form-label">لون الخلفية (اختياري)</label>
                        <input type="text" name="bg_color" value="{{ old('bg_color') }}" class="form-control" placeholder="#0b1220">
                    </div>
                @endif

                @if($has('text_color'))
                    <div class="col-md-3">
                        <label class="form-label">لون النص (اختياري)</label>
                        <input type="text" name="text_color" value="{{ old('text_color') }}" class="form-control" placeholder="#ffffff">
                    </div>
                @endif

                @if($has('is_active'))
                    <div class="col-md-3 d-flex align-items-center">
                        <div class="form-check mt-4">
                            <input class="form-check-input" type="checkbox" name="is_active" id="is_active" value="1" {{ old('is_active',1) ? 'checked' : '' }}>
                            <label class="form-check-label" for="is_active">مفعّل</label>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>

    @if($has('description'))
        <div class="card card-dark mb-3">
            <div class="card-header"><strong>الوصف (اختياري)</strong></div>
            <div class="card-body">
                <textarea name="description" class="form-control min-h-200" placeholder="نص مختصر يظهر فوق الزر أو بجانب الصورة">{{ old('description') }}</textarea>
            </div>
        </div>
    @endif

    @if($has('image_path'))
        <div class="card card-dark mb-3">
            <div class="card-header d-flex justify-content-between align-items-center">
                <strong>الصورة</strong>
                <span class="hint">يمكنك رفع ملف أو إدخال مسار جاهز (واحد منهم يكفي)</span>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label">رفع ملف</label>
                        <input type="file" name="image" class="form-control" accept=".png,.jpg,.jpeg,.webp,.svg">
                        <div class="hint mt-1">يُحفظ في <code>storage/app/public/sliders</code> ويُعرض عبر <code>/storage/...</code></div>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">أو مسار صورة جاهز</label>
                        <input type="text" name="image_path" value="{{ old('image_path') }}" class="form-control" placeholder="https://... أو storage/sliders/xxx.jpg">
                    </div>
                </div>
            </div>
        </div>
    @endif

    <div class="text-end">
        <button class="btn btn-primary">
            <i class="bi bi-check2-circle me-1"></i> حفظ البنر
        </button>
    </div>
</form>
@endsection