@extends('layouts.admin')

@section('title', trans('admin.add_new_plan'))
@section('header_title', trans('admin.add_new_plan'))

@section('content')
<div class="max-w-3xl mx-auto space-y-6 text-xs">

    <div class="p-6 rounded-2xl bg-navy-900 border border-slate-800 shadow-xl">
        <div class="flex items-center justify-between mb-6 pb-4 border-b border-slate-800">
            <div>
                <h2 class="text-base font-bold text-white">{{ trans('admin.add_new_plan') }}</h2>
                <p class="text-slate-400 mt-0.5">{{ trans('admin.plan_subtitle') }}</p>
            </div>
            <a href="{{ route('admin.plans.index') }}" class="flex items-center gap-1.5 text-slate-400 hover:text-white transition">
                <i class="fa-solid fa-arrow-right-to-bracket rotate-180"></i>
                {{ trans('admin.cancel_and_return') }}
            </a>
        </div>

        <form action="{{ route('admin.plans.store') }}" method="POST" class="space-y-5">
            @csrf

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                    <label class="block font-bold text-slate-300 mb-1.5">{{ trans('admin.plan_name_ar') }} *</label>
                    <input type="text" name="name_ar" value="{{ old('name_ar') }}" required placeholder="{{ trans('admin.placeholder_plan_name_ar') }}" class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-100 p-3 focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 focus:outline-none transition">
                </div>

                <div>
                    <label class="block font-bold text-slate-300 mb-1.5">{{ trans('admin.plan_name_en') }} *</label>
                    <input type="text" name="name" value="{{ old('name') }}" required placeholder="e.g. Pro Plan" class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-100 p-3 focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 focus:outline-none transition">
                </div>

                <div>
                    <label class="block font-bold text-slate-300 mb-1.5">{{ trans('admin.plan_slug') }} ({{ trans('admin.optional') }})</label>
                    <input type="text" name="slug" value="{{ old('slug') }}" placeholder="e.g. pro-tier" class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-100 p-3 code-font focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 focus:outline-none transition">
                </div>

                <div>
                    <label class="block font-bold text-slate-300 mb-1.5">{{ trans('admin.sort_order') }}</label>
                    <input type="number" name="sort_order" value="{{ old('sort_order', 1) }}" min="0" class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-100 p-3 code-font focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 focus:outline-none transition">
                </div>

                <div>
                    <label class="block font-bold text-slate-300 mb-1.5">{{ trans('admin.plan_price') }} (<span class="sar-symbol">﷼</span>) *</label>
                    <input type="number" step="0.01" name="price" value="{{ old('price', '199.00') }}" min="0" required class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-100 p-3 code-font focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 focus:outline-none transition">
                </div>

                <div>
                    <label class="block font-bold text-slate-300 mb-1.5">{{ trans('admin.plan_yearly_price') }} (<span class="sar-symbol">﷼</span>)</label>
                    <input type="number" step="0.01" name="yearly_price" value="{{ old('yearly_price') }}" min="0" class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-100 p-3 code-font focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 focus:outline-none transition">
                    <span class="text-[10px] text-slate-500 mt-1 block">{{ trans('admin.plan_yearly_price_hint') }}</span>
                </div>

                <div>
                    <label class="block font-bold text-slate-300 mb-1.5">{{ trans('admin.invoice_limit') }} *</label>
                    <input type="number" name="monthly_invoice_limit" value="{{ old('monthly_invoice_limit', 500) }}" required class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-100 p-3 code-font focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 focus:outline-none transition">
                    <span class="text-[10px] text-slate-500 mt-1 block">{{ trans('admin.invoice_limit_hint') }}</span>
                </div>

                <div>
                    <label class="block font-bold text-slate-300 mb-1.5">{{ trans('admin.device_limit') }} *</label>
                    <input type="number" name="device_limit" value="{{ old('device_limit', 3) }}" required class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-100 p-3 code-font focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 focus:outline-none transition">
                    <span class="text-[10px] text-slate-500 mt-1 block">{{ trans('admin.device_limit_hint') }}</span>
                </div>
            </div>

            <div>
                <label class="block font-bold text-slate-300 mb-1.5">{{ trans('admin.description_ar') }}</label>
                <textarea name="description_ar" rows="2" placeholder="{{ trans('admin.placeholder_plan_desc') }}" class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-100 p-3 focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 focus:outline-none transition">{{ old('description_ar') }}</textarea>
            </div>

            <div>
                <label class="block font-bold text-slate-300 mb-1.5">{{ trans('admin.plan_features') }}</label>
                <textarea name="features" rows="5" placeholder="{{ trans('admin.features_placeholder') }}" class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-100 p-3 focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 focus:outline-none transition">{{ old('features') }}</textarea>
                <span class="text-[10px] text-slate-500 mt-1 block">{{ trans('admin.features_hint') }}</span>
            </div>

            <input type="hidden" name="currency" value="SAR">

            <div class="flex items-center gap-6 pt-2">
                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="checkbox" name="is_active" value="1" {{ old('is_active', true) ? 'checked' : '' }} class="w-4 h-4 rounded text-emerald-600 focus:ring-emerald-500 bg-navy-950 border-slate-700">
                    <span class="font-bold text-slate-200">{{ trans('admin.is_active_badge') }}</span>
                </label>

                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="checkbox" name="is_popular" value="1" {{ old('is_popular') ? 'checked' : '' }} class="w-4 h-4 rounded text-emerald-600 focus:ring-emerald-500 bg-navy-950 border-slate-700">
                    <span class="font-bold text-slate-200">{{ trans('admin.is_popular_badge') }}</span>
                </label>
            </div>

            <div class="pt-4 border-t border-slate-800 flex items-center justify-end gap-3">
                <a href="{{ route('admin.plans.index') }}" class="px-5 py-2.5 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-300 font-bold transition">
                    {{ trans('admin.cancel') }}
                </a>
                <button type="submit" class="px-6 py-2.5 rounded-xl bg-emerald-600 hover:bg-emerald-700 text-white font-bold transition shadow-lg shadow-emerald-500/20 flex items-center gap-2">
                    <i class="fa-solid fa-floppy-disk"></i>
                    {{ trans('admin.save_plan') }}
                </button>
            </div>
        </form>
    </div>

</div>
@endsection