@extends('layouts.admin')
@section('title', 'Tambah User')

@section('content')
<form action="{{ route('admin.users.store') }}" method="POST" class="max-w-3xl bg-white rounded-xl border border-slate-200 p-6 space-y-4">
    @csrf
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
            <label class="block text-sm font-medium text-slate-700 mb-1">Nama *</label>
            <input type="text" name="name" value="{{ old('name') }}" required class="w-full rounded-lg border-slate-300 px-3 py-2 border">
        </div>
        <div>
            <label class="block text-sm font-medium text-slate-700 mb-1">Email *</label>
            <input type="email" name="email" value="{{ old('email') }}" required class="w-full rounded-lg border-slate-300 px-3 py-2 border">
        </div>
        <div>
            <label class="block text-sm font-medium text-slate-700 mb-1">Password *</label>
            <input type="password" name="password" required minlength="8" class="w-full rounded-lg border-slate-300 px-3 py-2 border">
        </div>
        <div>
            <label class="block text-sm font-medium text-slate-700 mb-1">Konfirmasi Password *</label>
            <input type="password" name="password_confirmation" required minlength="8" class="w-full rounded-lg border-slate-300 px-3 py-2 border">
        </div>
        <div>
            <label class="block text-sm font-medium text-slate-700 mb-1">Role *</label>
            <select name="role" x-data x-model="$root.role" @change="$root.role = $event.target.value" class="w-full rounded-lg border-slate-300 px-3 py-2 border">
                <option value="user">User (Tenant)</option>
                <option value="admin">Admin</option>
            </select>
        </div>
        <div class="flex items-end">
            <label class="flex items-center gap-2 text-sm">
                <input type="checkbox" name="is_active" value="1" checked class="rounded border-slate-300"> Aktif
            </label>
        </div>
    </div>

    <div class="pt-4 border-t border-slate-200">
        <h3 class="font-bold text-slate-800 mb-3">Data Perusahaan (Jika Role = User)</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="md:col-span-2">
                <label class="block text-sm font-medium text-slate-700 mb-1">Nama Perusahaan</label>
                <input type="text" name="nama_perusahaan" value="{{ old('nama_perusahaan') }}" class="w-full rounded-lg border-slate-300 px-3 py-2 border">
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">No HP Perusahaan</label>
                <input type="text" name="no_hp_perusahaan" value="{{ old('no_hp_perusahaan') }}" class="w-full rounded-lg border-slate-300 px-3 py-2 border">
            </div>
            <div class="md:col-span-2">
                <label class="block text-sm font-medium text-slate-700 mb-1">Alamat Perusahaan</label>
                <textarea name="alamat_perusahaan" rows="2" class="w-full rounded-lg border-slate-300 px-3 py-2 border">{{ old('alamat_perusahaan') }}</textarea>
            </div>
        </div>
    </div>

    <div class="flex gap-2 pt-4">
        <button class="bg-[#7f1d1d] hover:bg-[#991b1b] text-white font-semibold px-4 py-2 rounded-lg">Simpan</button>
        <a href="{{ route('admin.users.index') }}" class="bg-slate-200 hover:bg-slate-300 px-4 py-2 rounded-lg">Batal</a>
    </div>
</form>
@endsection