@extends('layouts.super-admin')

@section('title', 'Add New Client')
@section('page_title', 'Client Management')

@section('content')
<div class="max-w-xl mx-auto">
    <div class="mb-4">
        <a href="{{ route('clients.index') }}" class="text-[10px] font-bold text-zinc-500 hover:text-zinc-900 dark:hover:text-zinc-100 uppercase tracking-widest flex items-center">
            <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
            Back to List
        </a>
    </div>

    <div class="bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-sm shadow-sm overflow-hidden">
        <div class="p-4 border-b border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900">
            <h3 class="text-[11px] font-bold uppercase tracking-widest">Client Details</h3>
        </div>
        <form action="{{ route('clients.store') }}" method="POST" class="p-4 space-y-4">
            @csrf
            <div>
                <label for="name" class="block text-[10px] font-bold text-zinc-500 uppercase tracking-tighter mb-1">Full Name / Brand Name</label>
                <input type="text" name="name" id="name" value="{{ old('name') }}" required
                    class="w-full px-3 py-1.5 bg-zinc-50 dark:bg-zinc-950 border border-zinc-200 dark:border-zinc-800 rounded-sm text-xs focus:outline-hidden focus:border-amber-500/50 focus:ring-1 focus:ring-amber-500/20 transition-all">
                @error('name') <p class="text-[9px] text-red-500 mt-1 uppercase">{{ $message }}</p> @enderror
            </div>

            <div>
                <label for="email" class="block text-[10px] font-bold text-zinc-500 uppercase tracking-tighter mb-1">Email Address</label>
                <input type="email" name="email" id="email" value="{{ old('email') }}" required
                    class="w-full px-3 py-1.5 bg-zinc-50 dark:bg-zinc-950 border border-zinc-200 dark:border-zinc-800 rounded-sm text-xs focus:outline-hidden focus:border-amber-500/50 focus:ring-1 focus:ring-amber-500/20 transition-all">
                @error('email') <p class="text-[9px] text-red-500 mt-1 uppercase">{{ $message }}</p> @enderror
            </div>

            <div>
                <label for="password" class="block text-[10px] font-bold text-zinc-500 uppercase tracking-tighter mb-1">Initial Password</label>
                <input type="password" name="password" id="password" required
                    class="w-full px-3 py-1.5 bg-zinc-50 dark:bg-zinc-950 border border-zinc-200 dark:border-zinc-800 rounded-sm text-xs focus:outline-hidden focus:border-amber-500/50 focus:ring-1 focus:ring-amber-500/20 transition-all">
                @error('password') <p class="text-[9px] text-red-500 mt-1 uppercase">{{ $message }}</p> @enderror
            </div>

            <div class="flex items-center space-x-2">
                <input type="hidden" name="active" value="0">
                <input type="checkbox" name="active" id="active" value="1" {{ old('active', true) ? 'checked' : '' }}
                    class="w-3 h-3 rounded-xs border-zinc-300 text-amber-600 focus:ring-amber-500">
                <label for="active" class="text-[10px] font-bold text-zinc-500 uppercase">Account Active</label>
            </div>

            <div class="pt-2">
                <button type="submit" class="w-full py-2 bg-amber-600 hover:bg-amber-500 text-white text-[11px] font-bold uppercase tracking-widest rounded-sm transition-all active:scale-[0.98]">
                    Create Client Account
                </button>
            </div>
        </form>
    </div>
</div>
@endsection