@extends('layouts.admin')

@section('title', trans('admin.edit_plan_title', ['name' => $plan->displayName()]))
@section('header_title', trans('admin.edit_plan_title', ['name' => $plan->displayName()]))

@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.edit_plan_title', ['name' => $plan->displayName()]) }}</h2>
                <p class="text-slate-400 mt-0.5">{{ trans('admin.edit_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.update', $plan) }}" method="POST" class="space-y-5">
            @csrf
            @method('PUT')

            <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', $plan->name_ar) }}" required 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', $plan->name) }}" required 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') }} *</label>
                    <input type="text" name="slug" value="{{ old('slug', $plan->slug) }}" 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.sort_order') }}</label>
                    <input type="number" name="sort_order" value="{{ old('sort_order', $plan->sort_order) }}" 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', $plan->price) }}" 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', $plan->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', $plan->monthly_invoice_limit) }}" 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', $plan->device_limit) }}" 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" 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', $plan->description_ar) }}</textarea>
            </div>

            <div>
                <label class="block font-bold text-slate-300 mb-1.5">{{ trans('admin.plan_features') }}</label>
                @php
                    $featuresText = is_array($plan->features) ? implode("\n", $plan->features) : '';
                @endphp
                <textarea name="features" rows="5" 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', $featuresText) }}</textarea>
                <span class="text-[10px] text-slate-500 mt-1 block">{{ trans('admin.features_hint_edit') }}</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', $plan->is_active) ? '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', $plan->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-between">
                <div class="text-[11px] text-slate-400 flex items-center gap-1.5">
                    <i class="fa-solid fa-building text-slate-600"></i>
                    {{ trans('admin.subscribers_count', ['count' => $plan->tenants()->count()]) }}
                </div>
                <div class="flex items-center 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.update_plan') }}
                    </button>
                </div>
            </div>
        </form>
    </div>

</div>
@endsection