@extends('admin.layout')

@section('title', isset($user) ? 'Edit User' : 'Tambah User')
@section('page_heading', isset($user) ? 'Edit Data User' : 'Tambah User Baru')

@section('content')
<div class="max-w-3xl mx-auto space-y-6">

    <div class="flex justify-between items-center mb-8">
        <div>
            <h2 class="font-headline-lg text-3xl font-bold text-on-surface">{{ isset($user) ? 'Edit User' : 'Tambah User Baru' }}</h2>
            <p class="text-sm text-on-surface-variant mt-1">Lengkapi informasi untuk data admin/operator.</p>
        </div>
        <a href="{{ route('admin.users.index') }}" class="px-6 py-2.5 bg-surface-container text-on-surface rounded-xl font-label-lg hover:bg-surface-container-high transition-colors flex items-center gap-2">
            <span class="material-symbols-outlined">arrow_back</span> Kembali
        </a>
    </div>

    <form action="{{ isset($user) ? route('admin.users.update', $user) : route('admin.users.store') }}" method="POST" class="crud-form bg-surface-container-lowest border border-outline-variant rounded-2xl shadow-sm p-6 sm:p-8 space-y-6">
        @csrf
        @if(isset($user))
            @method('PUT')
        @endif

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <!-- Nama -->
            <div class="space-y-1.5 md:col-span-2">
                <label for="name" class="block font-label-md text-xs font-bold text-on-surface">Nama Lengkap <span class="text-error">*</span></label>
                <input type="text" name="name" id="name" value="{{ old('name', $user->name ?? '') }}" required maxlength="40"
                    class="w-full bg-surface-container-low border border-outline-variant rounded-xl px-4 py-2.5 text-xs text-on-surface focus:ring-1 focus:ring-primary focus:border-primary transition-all placeholder:text-outline"
                    placeholder="Masukkan nama lengkap (Maks. 40 karakter)">
            </div>

            <!-- Email -->
            <div class="space-y-1.5">
                <label for="email" class="block font-label-md text-xs font-bold text-on-surface">Email <span class="text-error">*</span></label>
                <input type="email" name="email" id="email" value="{{ old('email', $user->email ?? '') }}" required maxlength="40"
                    class="w-full bg-surface-container-low border border-outline-variant rounded-xl px-4 py-2.5 text-xs text-on-surface focus:ring-1 focus:ring-primary focus:border-primary transition-all placeholder:text-outline"
                    placeholder="Contoh: admin@terapisku.com">
            </div>

            <!-- No. WA -->
            <div class="space-y-1.5">
                <label for="phone" class="block font-label-md text-xs font-bold text-on-surface">No. WhatsApp <span class="text-error">*</span></label>
                <input type="text" name="phone" id="phone" value="{{ old('phone', $user->phone ?? '') }}" required maxlength="15" pattern="[0-9]+" oninput="this.value = this.value.replace(/[^0-9]/g, '')"
                    class="w-full bg-surface-container-low border border-outline-variant rounded-xl px-4 py-2.5 text-xs text-on-surface focus:ring-1 focus:ring-primary focus:border-primary transition-all placeholder:text-outline"
                    placeholder="Contoh: 081234567890">
                <p class="text-[10px] text-on-surface-variant">Hanya angka (Maks. 15 digit), awali dengan 08...</p>
            </div>

            <!-- Role -->
            <div class="space-y-1.5 md:col-span-2">
                <label for="role" class="block font-label-md text-xs font-bold text-on-surface">Hak Akses (Role) <span class="text-error">*</span></label>
                <select name="role" id="role" required class="w-full bg-surface-container-low border border-outline-variant rounded-xl px-4 py-2.5 text-xs text-on-surface focus:ring-1 focus:ring-primary focus:border-primary transition-all">
                    <option value="operator" {{ old('role', $user->role ?? '') === 'operator' ? 'selected' : '' }}>Operator</option>
                    <option value="superadmin" {{ old('role', $user->role ?? '') === 'superadmin' ? 'selected' : '' }}>Superadmin</option>
                </select>
                <p class="text-[10px] text-on-surface-variant mt-1">Superadmin memiliki akses ke seluruh sistem termasuk Keuangan. Operator hanya dapat mengelola data harian.</p>
            </div>



        </div>

        <div class="flex justify-end gap-3 pt-6 border-t border-outline-variant">
            <a href="{{ route('admin.users.index') }}" class="px-5 py-2.5 rounded-xl font-bold text-xs bg-red-50 text-red-600 hover:bg-red-100 transition-colors flex items-center gap-2">
                <span class="material-symbols-outlined text-base">close</span>
                Batal
            </a>
            <button type="submit" class="px-5 py-2.5 rounded-xl bg-primary text-on-primary font-bold text-xs hover:bg-opacity-90 transition-all active:scale-95 shadow flex items-center gap-2">
                <span class="material-symbols-outlined text-base">{{ isset($user) ? 'save' : 'person_add' }}</span>
                {{ isset($user) ? 'Simpan Perubahan' : 'Tambah User' }}
            </button>
        </div>
    </form>

</div>
@endsection