@extends('layouts.app')

@section('title', 'Settings · DocShare')
@section('section', 'Admin console')
@section('subtitle', 'Manage regions, countries, OEMs, categories, and role permissions.')

@section('content')
@if(session('status'))
    <div class="mt-6 flex items-center gap-3 rounded-xl border border-emerald-400/30 bg-emerald-50 p-4 text-emerald-700"><svg class="h-5 w-5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6 9 17l-5-5"/></svg>{{ session('status') }}</div>
@endif
@if($errors->any())
    <div class="mt-6 rounded-xl border border-red-200 bg-red-50 p-4 text-red-700"><p class="font-semibold">Please review the form</p><ul class="mt-1 list-disc pl-5 text-sm">@foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul></div>
@endif

<div class="mt-8 grid gap-6 md:grid-cols-2">

    <section class="surface p-5 sm:p-6">
        <div class="flex items-center justify-between">
            <h2 class="display text-lg font-bold text-slate-900">Regions</h2>
            <span class="rounded-full bg-slate-100 px-2.5 py-1 text-xs font-bold text-slate-500">{{ $regions->count() }} total</span>
        </div>
        <form method="post" action="{{ route('admin.settings.store', 'regions') }}" class="mt-4 space-y-3">
            @csrf
            <input name="name" placeholder="Region name (e.g. Asia Pacific)" required class="w-full rounded-xl border border-slate-200 bg-white px-3 py-2.5 text-sm outline-none transition focus:border-teal-500 focus:ring-4 focus:ring-teal-500/10">
            <button class="btn-primary w-full text-sm">Add region</button>
        </form>
        <ul class="mt-5 space-y-2 text-sm">
            @forelse($regions as $region)
                <li class="flex items-center justify-between rounded-lg border border-slate-100 px-3 py-2">
                    <span class="font-medium text-slate-700">{{ $region->name }}</span>
                    <span class="text-xs text-slate-400">{{ $region->countries_count }} countries</span>
                </li>
            @empty
                <li class="rounded-lg bg-slate-50 px-3 py-4 text-center text-xs text-slate-400">No regions yet. Add the first one above.</li>
            @endforelse
        </ul>
    </section>

    <section class="surface p-5 sm:p-6">
        <div class="flex items-center justify-between">
            <h2 class="display text-lg font-bold text-slate-900">Countries</h2>
            <span class="rounded-full bg-slate-100 px-2.5 py-1 text-xs font-bold text-slate-500">{{ $countries->count() }} total</span>
        </div>
        <form method="post" action="{{ route('admin.settings.store', 'countries') }}" class="mt-4 space-y-3">
            @csrf
            <div class="grid grid-cols-[1fr_88px] gap-3">
                <input name="name" placeholder="Country name (e.g. Malaysia)" required class="w-full rounded-xl border border-slate-200 bg-white px-3 py-2.5 text-sm outline-none transition focus:border-teal-500 focus:ring-4 focus:ring-teal-500/10">
                <input name="code" placeholder="Code" required maxlength="2" pattern="[A-Za-z]{2}" title="Two-letter country code" class="w-full rounded-xl border border-slate-200 bg-white px-3 py-2.5 text-sm uppercase outline-none transition focus:border-teal-500 focus:ring-4 focus:ring-teal-500/10">
            </div>
            <select name="region_id" required class="w-full rounded-xl border border-slate-200 bg-white px-3 py-2.5 text-sm outline-none transition focus:border-teal-500 focus:ring-4 focus:ring-teal-500/10">
                <option value="">Select a region…</option>
                @foreach($regions as $region)
                    <option value="{{ $region->id }}">{{ $region->name }}</option>
                @endforeach
            </select>
            <button class="btn-primary w-full text-sm">Add country</button>
        </form>
        <ul class="mt-5 max-h-72 space-y-2 overflow-y-auto pr-1 text-sm">
            @forelse($countries as $country)
                <li class="flex items-center justify-between gap-3 rounded-lg border border-slate-100 px-3 py-2">
                    <span class="flex min-w-0 items-center gap-2">
                        <span class="grid h-6 w-8 flex-none place-items-center rounded bg-teal-50 text-[10px] font-bold uppercase text-teal-700">{{ strtoupper($country->code) }}</span>
                        <span class="truncate font-medium text-slate-700">{{ $country->name }}</span>
                    </span>
                    <span class="flex-none text-xs text-slate-400">{{ $country->region?->name ?? '—' }}</span>
                </li>
            @empty
                <li class="rounded-lg bg-slate-50 px-3 py-4 text-center text-xs text-slate-400">No countries yet. Add the first one above.</li>
            @endforelse
        </ul>
    </section>


    <section class="surface p-5 sm:p-6">
        <div class="flex items-center justify-between">
            <h2 class="display text-lg font-bold text-slate-900">OEMs</h2>
            <span class="rounded-full bg-slate-100 px-2.5 py-1 text-xs font-bold text-slate-500">{{ $oems->count() }} total</span>
        </div>
        <form method="post" action="{{ route('admin.settings.store', 'oems') }}" class="mt-4 space-y-3">
            @csrf
            <input name="name" placeholder="OEM name (e.g. Acme Motors)" required class="w-full rounded-xl border border-slate-200 bg-white px-3 py-2.5 text-sm outline-none transition focus:border-teal-500 focus:ring-4 focus:ring-teal-500/10">
            <input name="code" placeholder="OEM code (e.g. ACM)" required class="w-full rounded-xl border border-slate-200 bg-white px-3 py-2.5 text-sm outline-none transition focus:border-teal-500 focus:ring-4 focus:ring-teal-500/10">
            <button class="btn-primary w-full text-sm">Add OEM</button>
        </form>
        <ul class="mt-5 max-h-72 space-y-2 overflow-y-auto pr-1 text-sm">
            @forelse($oems as $oem)
                <li class="flex items-center justify-between rounded-lg border border-slate-100 px-3 py-2">
                    <span class="font-medium text-slate-700">{{ $oem->name }}</span>
                    <span class="rounded bg-slate-100 px-2 py-0.5 text-xs font-bold uppercase text-slate-500">{{ $oem->code }}</span>
                </li>
            @empty
                <li class="rounded-lg bg-slate-50 px-3 py-4 text-center text-xs text-slate-400">No OEMs yet. Add the first one above.</li>
            @endforelse
        </ul>
    </section>

    <section class="surface p-5 sm:p-6">
        <div class="flex items-center justify-between">
            <h2 class="display text-lg font-bold text-slate-900">Categories</h2>
            <span class="rounded-full bg-slate-100 px-2.5 py-1 text-xs font-bold text-slate-500">{{ $categories->count() }} total</span>
        </div>
        <form method="post" action="{{ route('admin.settings.store', 'categories') }}" class="mt-4 space-y-3">
            @csrf
            <input name="name" placeholder="Category name (e.g. User Manual)" required class="w-full rounded-xl border border-slate-200 bg-white px-3 py-2.5 text-sm outline-none transition focus:border-teal-500 focus:ring-4 focus:ring-teal-500/10">
            <button class="btn-primary w-full text-sm">Add category</button>
        </form>
        <ul class="mt-5 max-h-72 space-y-2 overflow-y-auto pr-1 text-sm">
            @forelse($categories as $category)
                <li class="flex items-center justify-between rounded-lg border border-slate-100 px-3 py-2">
                    <span class="font-medium text-slate-700">{{ $category->name }}</span>
                    <span class="text-xs text-slate-400">{{ $category->documents_count }} documents</span>
                </li>
            @empty
                <li class="rounded-lg bg-slate-50 px-3 py-4 text-center text-xs text-slate-400">No categories yet. Add the first one above.</li>
            @endforelse
        </ul>
    </section>
</div>

<section class="surface mt-6 p-5 sm:p-6">
    <h2 class="display text-lg font-bold text-slate-900">Roles and permissions</h2>
    <div class="mt-4 grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
        @foreach($roles as $role)
        <div class="rounded-xl border border-slate-100 p-4">
            <p class="font-medium text-slate-800">{{ $role->name }}</p>
            <p class="mt-1 text-sm text-slate-500">{{ $role->users_count }} users · {{ $role->permissions->count() }} permissions</p>
        </div>
        @endforeach
    </div>
</section>
@endsection