@extends('layouts.admin', ['title' => __('messages.admin_services')])

@section('content')
@php
    $currentPlan = request('plan', '');
    $currentType = request('type', '');
@endphp

{{-- Filters --}}
<div class="flex flex-col gap-2 mb-4">
    <div class="flex items-center gap-2 overflow-x-auto scrollbar-hide">
        @foreach([['', __('messages.filter_all')], ['free','Free'], ['vip','👑 VIP']] as [$val, $label])
            <a href="{{ route('admin.services', ['plan' => $val ?: null, 'type' => $currentType ?: null]) }}"
               class="shrink-0 px-3.5 py-1.5 rounded-xl text-xs font-bold transition whitespace-nowrap
                      {{ $currentPlan === $val ? 'bg-teal-500 text-[#0a0f1e]' : 'bg-white/5 text-gray-200 hover:bg-white/10 border border-white/5' }}">
                {{ $label }}
            </a>
        @endforeach
    </div>
    <div class="flex items-center gap-2 overflow-x-auto scrollbar-hide">
        @foreach([['', __('messages.filter_all')], ['robot','🤖 Robot'], ['indicator','📊 Indicator'], ['course','🎓 Course'], ['copier','📡 Copier']] as [$val, $label])
            <a href="{{ route('admin.services', ['plan' => $currentPlan ?: null, 'type' => $val ?: null]) }}"
               class="shrink-0 px-3 py-1 rounded-lg text-xs font-bold transition whitespace-nowrap
                      {{ $currentType === $val ? 'bg-blue-500/15 text-blue-300 ring-1 ring-blue-500/30' : 'bg-white/5 text-gray-200 hover:bg-white/10 border border-white/5' }}">
                {{ $label }}
            </a>
        @endforeach
    </div>
</div>

{{-- Add new service (collapsible) --}}
<section x-data="{ open: false }" class="rounded-2xl bg-cardapp border border-white/5 shadow-md overflow-hidden mb-5">
    <button @click="open = !open" type="button" class="w-full px-5 py-4 flex items-center justify-between hover:bg-white/[.03] transition">
        <div class="flex items-center gap-2">
            <span class="w-9 h-9 rounded-lg btn-teal flex items-center justify-center text-lg">＋</span>
            <span class="font-bold text-white">{{ __('messages.add_new_service') }}</span>
        </div>
        <svg class="w-5 h-5 text-gray-400 transition-transform" :class="open && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
    </button>
    <form x-show="open" x-collapse method="POST" action="{{ route('admin.services.store') }}" class="px-5 pb-5 border-t border-white/5 pt-5">
        @csrf
        @include('admin._service_form', ['service' => null])
        <div class="flex justify-end mt-5">
            <button class="rounded-xl btn-teal px-6 py-2.5 text-sm">{{ __('messages.save_service') }}</button>
        </div>
    </form>
</section>

{{-- Cards grid --}}
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    @forelse($services as $svc)
        <div class="rounded-2xl bg-cardapp border border-white/5 p-4 shadow-md flex flex-col {{ ! $svc->is_active ? 'opacity-60' : '' }}">
            <div class="flex items-start gap-3">
                <div class="w-12 h-12 rounded-xl bg-white/5 ring-1 ring-white/10 flex items-center justify-center text-2xl">{{ $svc->icon }}</div>
                <div class="flex-1 min-w-0">
                    <div class="font-bold text-white truncate">{{ $svc->name_ar }}</div>
                    <div class="text-xs text-gray-400 truncate" dir="ltr">{{ $svc->name_en }}</div>
                    <div class="mt-1.5 flex items-center gap-1.5 flex-wrap">
                        <span class="px-1.5 py-0.5 rounded text-[10px] font-bold bg-white/5 text-gray-300">{{ $svc->type }}</span>
                        @if($svc->plan === 'vip')
                            <span class="px-1.5 py-0.5 rounded text-[10px] font-bold bg-teal-500/15 text-teal-300">👑 VIP</span>
                        @else
                            <span class="px-1.5 py-0.5 rounded text-[10px] font-bold bg-blue-500/15 text-blue-300">Free</span>
                        @endif
                        @if($svc->is_active)
                            <span class="px-1.5 py-0.5 rounded text-[10px] font-bold bg-emerald-500/15 text-emerald-300">{{ __('messages.active') }}</span>
                        @else
                            <span class="px-1.5 py-0.5 rounded text-[10px] font-bold bg-red-500/15 text-red-300">{{ __('messages.inactive') }}</span>
                        @endif
                    </div>
                </div>
            </div>

            <div class="mt-3 text-xs text-gray-400 line-clamp-3">{{ $svc->description_ar }}</div>

            <div class="flex items-center justify-between gap-2 mt-4 pt-4 border-t border-white/5">
                <form method="POST" action="{{ route('admin.services.toggle', $svc) }}">
                    @csrf @method('PATCH')
                    <button title="{{ __('messages.active') }}" class="px-2.5 py-1.5 rounded-lg bg-white/5 hover:bg-white/10 text-xs font-bold text-gray-200 border border-white/10">
                        {{ $svc->is_active ? __('messages.pause') : __('messages.enable') }}
                    </button>
                </form>
                <div class="flex items-center gap-2">
                    <a href="{{ route('admin.services.edit', $svc) }}" class="px-2.5 py-1.5 rounded-lg bg-blue-500/15 hover:bg-blue-500/25 text-xs font-bold text-blue-300 border border-blue-500/20">
                        ✏️ {{ __('messages.edit') }}
                    </a>
                    <form method="POST" action="{{ route('admin.services.destroy', $svc) }}" onsubmit="return confirm('{{ __('messages.delete') }}?');">
                        @csrf @method('DELETE')
                        <button class="px-2.5 py-1.5 rounded-lg bg-red-500/15 hover:bg-red-500/25 text-xs font-bold text-red-300 border border-red-500/20">🗑️</button>
                    </form>
                </div>
            </div>
        </div>
    @empty
        <div class="col-span-full rounded-2xl border border-white/5 bg-cardapp p-10 text-center text-gray-400">
            لا توجد خدمات.
        </div>
    @endforelse
</div>

<div class="mt-4">{{ $services->links() }}</div>
@endsection