@extends('layouts.admin')
@section('title', $user->exists ? 'Edit User' : 'Tambah User')

@section('content')

<div class="max-w-lg mx-auto">

    {{-- Back --}}
    <a href="{{ route('admin.users.index') }}"
       class="inline-flex items-center gap-1.5 text-sm text-gray-500 hover:text-gray-800
              mb-5 transition group">
        <svg class="w-4 h-4 group-hover:-translate-x-0.5 transition-transform"
             fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
        </svg>
        Kembali ke Daftar User
    </a>

    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden">

        {{-- Header --}}
        <div class="bg-brand-700 px-6 py-5">
            <h1 class="text-white font-bold text-lg">
                {{ $user->exists ? 'Edit Akun' : 'Tambah Akun Baru' }}
            </h1>
            <p class="text-brand-200 text-sm mt-0.5">
                {{ $user->exists ? "Perbarui data akun {$user->name}" : 'Isi data lengkap untuk akun baru' }}
            </p>
        </div>

        {{-- Form --}}
        @if($user->exists)
        <form method="POST" action="{{ route('admin.users.update', $user) }}" class="p-6 space-y-5">
            @method('PATCH')
        @else
        <form method="POST" action="{{ route('admin.users.store') }}" class="p-6 space-y-5">
        @endif
            @csrf

            {{-- Nama --}}
            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-1.5">
                    Nama Lengkap <span class="text-red-500">*</span>
                </label>
                <input type="text" name="name" value="{{ old('name', $user->name) }}"
                       placeholder="Contoh: Budi Santoso"
                       class="w-full rounded-xl border px-4 py-2.5 text-sm bg-white
                              focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-transparent
                              {{ $errors->has('name') ? 'border-red-400 bg-red-50' : 'border-gray-200' }}">
                @error('name')
                    <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                @enderror
            </div>

            {{-- Email --}}
            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-1.5">
                    Alamat Email <span class="text-red-500">*</span>
                </label>
                <input type="email" name="email" value="{{ old('email', $user->email) }}"
                       placeholder="nama@domain.com"
                       class="w-full rounded-xl border px-4 py-2.5 text-sm bg-white
                              focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-transparent
                              {{ $errors->has('email') ? 'border-red-400 bg-red-50' : 'border-gray-200' }}">
                @error('email')
                    <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                @enderror
            </div>

            {{-- Role --}}
            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-1.5">
                    Role <span class="text-red-500">*</span>
                </label>
                <select name="role"
                        class="w-full rounded-xl border px-4 py-2.5 text-sm bg-white
                               focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-transparent
                               {{ $errors->has('role') ? 'border-red-400 bg-red-50' : 'border-gray-200' }}">
                    @foreach($roles as $role)
                    <option value="{{ $role }}" {{ old('role', $user->role) === $role ? 'selected' : '' }}>
                        {{ ucfirst($role) }}
                    </option>
                    @endforeach
                </select>
                @error('role')
                    <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                @enderror
                <p class="mt-1.5 text-xs text-gray-400">
                    Admin: full akses &nbsp;·&nbsp; Kasir: invoice + pelanggan &nbsp;·&nbsp; Teknisi: servis &nbsp;·&nbsp; Kurir: handover saja
                </p>
            </div>

            {{-- Password --}}
            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-1.5">
                    Password
                    @if($user->exists)
                        <span class="text-gray-400 font-normal">(kosongkan jika tidak ingin mengubah)</span>
                    @else
                        <span class="text-red-500">*</span>
                    @endif
                </label>
                <div x-data="{ show: false }" class="relative">
                    <input :type="show ? 'text' : 'password'" name="password"
                           placeholder="{{ $user->exists ? 'Password baru (opsional)' : 'Min. 8 karakter, ada huruf & angka' }}"
                           class="w-full rounded-xl border pr-10 px-4 py-2.5 text-sm bg-white
                                  focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-transparent
                                  {{ $errors->has('password') ? 'border-red-400 bg-red-50' : 'border-gray-200' }}">
                    <button type="button" @click="show = !show"
                            class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600">
                        <svg x-show="!show" 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="M15 12a3 3 0 11-6 0 3 3 0 016 0zm-3-9C7.477 3 2 8.477 2 12c0 3.523
                                     5.477 9 10 9s10-5.477 10-9c0-3.523-5.477-9-10-9z"/>
                        </svg>
                        <svg x-show="show" 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.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7
                                     a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878
                                     9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59
                                     3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025
                                     10.025 0 01-4.132 4.411m0 0L21 21"/>
                        </svg>
                    </button>
                </div>
                @error('password')
                    <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                @enderror
            </div>

            {{-- Submit --}}
            <div class="flex items-center justify-between pt-2 border-t border-gray-100">
                <a href="{{ route('admin.users.index') }}"
                   class="text-sm text-gray-500 hover:text-gray-700 transition">
                    Batal
                </a>
                <button type="submit"
                        class="inline-flex items-center gap-2 bg-brand-600 hover:bg-brand-700 text-white
                               font-semibold text-sm rounded-xl px-6 py-2.5 transition shadow-sm">
                    <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="M5 13l4 4L19 7"/>
                    </svg>
                    {{ $user->exists ? 'Simpan Perubahan' : 'Buat Akun' }}
                </button>
            </div>
        </form>

    </div>

</div>

@endsection
