@extends('layouts.app')

@section('title', 'Daftar')

@section('content')
<div class="min-h-screen flex" x-data="{ form: { name: '{{ old('name') }}', email: '{{ old('email') }}', branch_id: '{{ old('branch_id') }}', role: '{{ old('role', 'cashier') }}', phone: '{{ old('phone') }}', password: '', password_confirmation: '' } }">
    <!-- Left Side - Form -->
    <div class="w-full lg:w-1/2 flex items-center justify-center p-6 lg:p-12 overflow-y-auto">
        <div class="w-full max-w-md py-8">
            <!-- Logo -->
            <div class="mb-6">
                <a href="{{ route('login') }}" class="flex items-center gap-2.5">
                    @php $storeLogo = \App\Services\SettingsService::get('store_logo'); @endphp
                    @if($storeLogo)
                    <img src="{{ asset('uploads/logo/' . $storeLogo) }}" alt="Logo" class="w-9 h-9 object-contain">
                    @else
                    <div class="w-9 h-9 bg-blue-600 rounded-lg flex items-center justify-center">
                        <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                        </svg>
                    </div>
                    @endif
                    <span class="text-xl font-semibold text-slate-900 dark:text-white truncate max-w-[150px]">{{ \App\Services\SettingsService::getStoreName() }}</span>
                </a>
            </div>

            <!-- Header -->
            <div class="mb-6">
                <h1 class="text-2xl font-semibold text-slate-900 dark:text-white">Buat Akun Baru di {{ \App\Services\SettingsService::getStoreName() }}</h1>
                <p class="text-slate-500 dark:text-slate-400 mt-1">Lengkapi form di bawah untuk mendaftar</p>
            </div>

            <!-- Alert Messages -->
            @if(session('success'))
            <div x-data="{ show: true }" x-show="show" x-transition
                 class="mb-6 p-4 bg-emerald-50 dark:bg-emerald-900/20 border border-emerald-200 dark:border-emerald-800 rounded-lg">
                <p class="text-sm text-emerald-800 dark:text-emerald-300">{{ session('success') }}</p>
            </div>
            @endif

            @if(session('error'))
            <div x-data="{ show: true }" x-show="show" x-transition
                 class="mb-6 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
                <p class="text-sm text-red-800 dark:text-red-300">{{ session('error') }}</p>
            </div>
            @endif

            @if($errors->any())
            <div x-data="{ show: true }" x-show="show" x-transition
                 class="mb-6 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
                <p class="text-sm text-red-800 dark:text-red-300">{{ $errors->first() }}</p>
            </div>
            @endif

            <!-- Form -->
            <form action="{{ route('register') }}" method="POST" class="space-y-4">
                @csrf

                <!-- Name -->
                <div>
                    <label for="name" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Nama Lengkap</label>
                    <input type="text"
                           id="name"
                           name="name"
                           value="{{ old('name') }}"
                           required
                           autofocus
                           placeholder="John Doe"
                           class="w-full px-4 py-2.5 bg-white dark:bg-slate-800 border border-gray-300 dark:border-slate-600 rounded-lg text-slate-900 dark:text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all @error('name') border-red-500 @enderror">
                    @error('name')
                        <p class="mt-1.5 text-xs text-red-500">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Email -->
                <div>
                    <label for="email" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Email</label>
                    <input type="email"
                           id="email"
                           name="email"
                           value="{{ old('email') }}"
                           required
                           placeholder="nama@email.com"
                           class="w-full px-4 py-2.5 bg-white dark:bg-slate-800 border border-gray-300 dark:border-slate-600 rounded-lg text-slate-900 dark:text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all @error('email') border-red-500 @enderror">
                    @error('email')
                        <p class="mt-1.5 text-xs text-red-500">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Branch & Role -->
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label for="branch_id" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Cabang</label>
                        <select id="branch_id"
                                name="branch_id"
                                required
                                class="w-full px-4 py-2.5 bg-white dark:bg-slate-800 border border-gray-300 dark:border-slate-600 rounded-lg text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all @error('branch_id') border-red-500 @enderror">
                            <option value="">Pilih</option>
                            @foreach($branches as $branch)
                                <option value="{{ $branch->id }}" {{ old('branch_id') == $branch->id ? 'selected' : '' }}>
                                    {{ Str::limit($branch->name, 20) }}
                                </option>
                            @endforeach
                        </select>
                        @error('branch_id')
                            <p class="mt-1.5 text-xs text-red-500">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="role" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Role</label>
                        <select id="role"
                                name="role"
                                required
                                class="w-full px-4 py-2.5 bg-white dark:bg-slate-800 border border-gray-300 dark:border-slate-600 rounded-lg text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all @error('role') border-red-500 @enderror">
                            <option value="cashier" {{ old('role') === 'cashier' ? 'selected' : '' }}>Kasir</option>
                            <option value="supervisor" {{ old('role') === 'supervisor' ? 'selected' : '' }}>Supervisor</option>
                            <option value="manager" {{ old('role') === 'manager' ? 'selected' : '' }}>Manager</option>
                            <option value="admin" {{ old('role') === 'admin' ? 'selected' : '' }}>Admin</option>
                        </select>
                        @error('role')
                            <p class="mt-1.5 text-xs text-red-500">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <!-- Phone -->
                <div>
                    <label for="phone" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">No. Telepon <span class="text-slate-400 font-normal">(Opsional)</span></label>
                    <input type="text"
                           id="phone"
                           name="phone"
                           value="{{ old('phone') }}"
                           placeholder="081234567890"
                           class="w-full px-4 py-2.5 bg-white dark:bg-slate-800 border border-gray-300 dark:border-slate-600 rounded-lg text-slate-900 dark:text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all">
                </div>

                <!-- Password -->
                <div>
                    <label for="password" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Password</label>
                    <input type="password"
                           id="password"
                           name="password"
                           required
                           placeholder="Minimal 8 karakter"
                           class="w-full px-4 py-2.5 bg-white dark:bg-slate-800 border border-gray-300 dark:border-slate-600 rounded-lg text-slate-900 dark:text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all @error('password') border-red-500 @enderror">
                    @error('password')
                        <p class="mt-1.5 text-xs text-red-500">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Confirm Password -->
                <div>
                    <label for="password_confirmation" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Konfirmasi Password</label>
                    <input type="password"
                           id="password_confirmation"
                           name="password_confirmation"
                           required
                           placeholder="Ulangi password"
                           class="w-full px-4 py-2.5 bg-white dark:bg-slate-800 border border-gray-300 dark:border-slate-600 rounded-lg text-slate-900 dark:text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all">
                </div>

                <!-- Submit -->
                <button type="submit"
                        class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2.5 px-4 rounded-lg transition-colors flex items-center justify-center gap-2">
                    Buat Akun
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
                    </svg>
                </button>
            </form>

            <!-- Login Link -->
            <p class="mt-6 text-center text-sm text-slate-600 dark:text-slate-400">
                Sudah punya akun?
                <a href="{{ route('login') }}" class="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400">Masuk ke akun</a>
            </p>

            <!-- Footer -->
            <p class="mt-8 text-center text-xs text-slate-500 dark:text-slate-400">
                &copy; {{ date('Y') }} Kasir POS System. All rights reserved.
            </p>
        </div>
    </div>

    <!-- Right Side - Decorative (Desktop Only) -->
    <div class="hidden lg:flex lg:w-1/2 bg-blue-600 relative items-center justify-center p-12">
        <div class="absolute inset-0 bg-gradient-to-br from-blue-600 to-blue-800"></div>
        <div class="relative z-10 max-w-md text-center text-white">
            <svg class="w-24 h-24 mx-auto mb-6 text-white/80" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"></path>
            </svg>
            <h2 class="text-3xl font-semibold mb-3">Bergabung dengan Kami</h2>
            <p class="text-blue-100 text-lg">Daftarkan bisnis Anda dan mulai kelola toko dengan sistem yang modern dan efisien.</p>
        </div>
    </div>
</div>
@endsection