@extends('layouts.admin')

@section('title', trans('admin.plans_title'))
@section('header_title', trans('admin.plans_header'))

@section('content')
<div class="space-y-6 text-xs">

    <!-- Header Description & Actions -->
    <div class="p-6 rounded-2xl bg-navy-900 border border-slate-800 flex flex-col sm:flex-row sm:items-center justify-between gap-4 shadow-xl">
        <div>
            <h2 class="text-base font-bold text-white">{{ trans('admin.plans_header') }}</h2>
            <p class="text-slate-400 mt-1 max-w-2xl leading-relaxed">{{ trans('admin.plans_desc') }}</p>
        </div>
        <div class="flex items-center gap-3">
            <a href="{{ route('admin.bank_settings.edit') }}" class="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl bg-slate-800 hover:bg-slate-700 text-white font-bold transition">
                <i class="fa-solid fa-building-columns"></i>
                <span>{{ trans('admin.nav_bank_settings') }}</span>
            </a>
            <a href="{{ route('admin.plans.create') }}" class="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl bg-emerald-600 hover:bg-emerald-700 text-white font-bold transition shadow-lg shadow-emerald-500/20">
                <i class="fa-solid fa-plus"></i>
                <span>{{ trans('admin.add_new_plan') }}</span>
            </a>
        </div>
    </div>

    <!-- Visual Plans Cards Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        @forelse($plans as $plan)
            <div class="p-5 rounded-2xl bg-navy-900 border {{ $plan->is_popular ? 'border-emerald-500/60 shadow-lg shadow-emerald-500/5 ring-1 ring-emerald-500/40' : 'border-slate-800' }} flex flex-col justify-between relative">
                @if($plan->is_popular)
                    <div class="absolute -top-3 end-4 px-2.5 py-0.5 rounded-full bg-gradient-to-r from-emerald-600 to-teal-600 text-white text-[10px] font-black uppercase tracking-wider shadow">
                        {{ trans('admin.is_popular_badge') }}
                    </div>
                @endif

                <div>
                    <div class="flex items-center justify-between mb-2">
                        <div class="flex items-center gap-2">
                            <div class="w-8 h-8 rounded-lg bg-emerald-500/10 flex items-center justify-center">
                                <i class="fa-solid fa-gem text-emerald-400 text-sm"></i>
                            </div>
                            <h3 class="text-base font-black text-white">{{ $plan->displayName() }}</h3>
                        </div>
                        <span class="px-2 py-0.5 rounded-full text-[10px] font-bold {{ $plan->is_active ? 'bg-emerald-500/10 text-emerald-400' : 'bg-rose-500/10 text-rose-400' }}">
                            {{ $plan->is_active ? trans('admin.active') : trans('admin.inactive') }}
                        </span>
                    </div>

                    <div class="my-3">
                        <span class="text-2xl font-black text-emerald-400 code-font">{{ $plan->formattedPrice() }}</span>
                        <span class="text-[11px] text-slate-400">/ {{ trans('admin.monthly') }}</span>
                        <div class="text-[11px] text-slate-500 mt-1">{{ trans('admin.yearly') }}: {{ $plan->formattedPriceFor(\App\Enums\BillingInterval::Yearly) }}</div>
                    </div>

                    <div class="p-3 rounded-xl bg-navy-950/60 border border-slate-800/80 mb-4 space-y-1.5">
                        <div class="flex items-center justify-between text-slate-300">
                            <span class="flex items-center gap-1.5"><i class="fa-solid fa-file-invoice text-slate-500 w-3"></i> {{ trans('admin.invoice_limit') }}:</span>
                            <strong class="text-white code-font">{{ $plan->monthly_invoice_limit < 0 ? trans('admin.unlimited') : number_format($plan->monthly_invoice_limit) }}</strong>
                        </div>
                        <div class="flex items-center justify-between text-slate-300">
                            <span class="flex items-center gap-1.5"><i class="fa-solid fa-tablet-screen-button text-slate-500 w-3"></i> {{ trans('admin.device_limit') }}:</span>
                            <strong class="text-white code-font">{{ $plan->device_limit < 0 ? trans('admin.unlimited') : $plan->device_limit }}</strong>
                        </div>
                        <div class="flex items-center justify-between text-slate-300">
                            <span class="flex items-center gap-1.5"><i class="fa-solid fa-building text-slate-500 w-3"></i> {{ trans('admin.subscribers') }}:</span>
                            <strong class="text-emerald-400 code-font">{{ $plan->tenants_count }}</strong>
                        </div>
                    </div>

                    @if(is_array($plan->features) && count($plan->features) > 0)
                        <div class="mb-4">
                            <div class="text-[11px] font-bold text-slate-400 mb-2">{{ trans('admin.plan_features') }}:</div>
                            <ul class="space-y-1.5 text-slate-300 text-[11px]">
                                @foreach(array_slice($plan->features, 0, 4) as $feat)
                                    <li class="flex items-start gap-1.5">
                                        <i class="fa-solid fa-check text-emerald-400 mt-0.5 flex-shrink-0"></i>
                                        <span class="truncate">{{ $feat }}</span>
                                    </li>
                                @endforeach
                                @if(count($plan->features) > 4)
                                    <li class="text-slate-500 text-[10px]">{{ trans('admin.more_features', ['count' => count($plan->features) - 4]) }}</li>
                                @endif
                            </ul>
                        </div>
                    @endif
                </div>

                <div class="pt-4 border-t border-slate-800 flex items-center justify-between gap-2">
                    <a href="{{ route('admin.plans.edit', $plan) }}" class="flex-1 py-2 rounded-xl bg-slate-800 hover:bg-emerald-600 hover:text-white text-emerald-400 text-center font-bold transition flex items-center justify-center gap-1.5">
                        <i class="fa-solid fa-pen-to-square text-[11px]"></i>
                        {{ trans('admin.edit') }}
                    </a>

                    <form action="{{ route('admin.plans.destroy', $plan) }}" method="POST" onsubmit="return confirm('{{ trans('admin.delete_plan_confirm') }}');">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="p-2 rounded-xl bg-red-500/10 hover:bg-red-500/20 text-red-400 transition" title="{{ trans('admin.delete_plan') }}">
                            <i class="fa-solid fa-trash-can"></i>
                        </button>
                    </form>
                </div>
            </div>
        @empty
            <div class="col-span-4 p-12 text-center text-slate-500 bg-navy-900 border border-slate-800 rounded-2xl">
                <i class="fa-solid fa-gem text-4xl text-slate-700 mb-3 block"></i>
                {{ trans('admin.no_plans_found') }}
            </div>
        @endforelse
    </div>

    <!-- Detailed Plans Table -->
    <div class="bg-navy-900 border border-slate-800 rounded-2xl overflow-hidden shadow-xl mt-8">
        <div class="p-4 border-b border-slate-800 font-bold text-white text-sm flex items-center gap-2">
            <i class="fa-solid fa-table-list text-emerald-400"></i>
            <span>{{ trans('admin.plans_table_title') }}</span>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full text-start">
                <thead class="bg-navy-950/60 text-slate-400 border-b border-slate-800">
                    <tr>
                        <th class="p-4 text-start">#</th>
                        <th class="p-4 text-start">{{ trans('admin.plan') }}</th>
                        <th class="p-4 text-start">Slug</th>
                        <th class="p-4 text-start">{{ trans('admin.plan_price') }}</th>
                        <th class="p-4 text-start">{{ trans('admin.invoice_limit') }}</th>
                        <th class="p-4 text-start">{{ trans('admin.device_limit') }}</th>
                        <th class="p-4 text-start">{{ trans('admin.subscribers') }}</th>
                        <th class="p-4 text-start">{{ trans('admin.status') }}</th>
                        <th class="p-4 text-center">{{ trans('admin.action') }}</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-800/60 text-slate-300">
                    @foreach($plans as $plan)
                        <tr class="hover:bg-navy-950/40 transition">
                            <td class="p-4 code-font text-slate-500">{{ $plan->sort_order }}</td>
                            <td class="p-4">
                                <div class="font-bold text-white flex items-center gap-2">
                                    <span>{{ $plan->displayName() }}</span>
                                    @if($plan->is_popular)
                                        <span class="px-2 py-0.5 rounded-full bg-emerald-500/20 text-emerald-300 text-[9px] font-bold">Popular</span>
                                    @endif
                                </div>
                                @if($plan->name_ar && $plan->name !== $plan->name_ar)
                                    <div class="text-[10px] text-slate-500">{{ $plan->name }}</div>
                                @endif
                            </td>
                            <td class="p-4 code-font text-emerald-400">{{ $plan->slug }}</td>
                            <td class="p-4 font-bold text-emerald-400 code-font">{{ $plan->formattedPrice() }}</td>
                            <td class="p-4 code-font">{{ $plan->monthly_invoice_limit < 0 ? trans('admin.unlimited') : number_format($plan->monthly_invoice_limit) }}</td>
                            <td class="p-4 code-font">{{ $plan->device_limit < 0 ? trans('admin.unlimited') : $plan->device_limit }}</td>
                            <td class="p-4 code-font">
                                <a href="{{ route('admin.tenants.index', ['plan' => $plan->slug]) }}" class="px-2.5 py-1 rounded-lg bg-slate-800 hover:bg-emerald-600 hover:text-white transition font-bold text-emerald-400">
                                    {{ trans('admin.companies_count', ['count' => $plan->tenants_count]) }}
                                </a>
                            </td>
                            <td class="p-4">
                                @if($plan->is_active)
                                    <span class="px-2 py-0.5 rounded-full bg-emerald-500/10 text-emerald-400 text-[10px] font-bold">{{ trans('admin.active') }}</span>
                                @else
                                    <span class="px-2 py-0.5 rounded-full bg-rose-500/10 text-rose-400 text-[10px] font-bold">{{ trans('admin.inactive') }}</span>
                                @endif
                            </td>
                            <td class="p-4 text-center">
                                <a href="{{ route('admin.plans.edit', $plan) }}" class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-slate-800 hover:bg-emerald-600 hover:text-white text-emerald-400 font-bold transition">
                                    <i class="fa-solid fa-pen-to-square text-[10px]"></i>
                                    {{ trans('admin.edit') }}
                                </a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection