@extends('layouts.app')
@section('title', 'Create User')
@section('content')
<div class="page-header flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
    <div>
        <h2 class="page-title">Create User</h2>
        <p class="page-subtitle">Add a new user to the system</p>
    </div>
    <a href="{{ route('users.index') }}" class="btn-ghost">
        <svg class="w-4 h-4 mr-2" 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"/></svg>
        Back to Users
    </a>
</div>

<form method="POST" action="{{ route('users.store') }}" class="bg-white dark:bg-dark-card rounded-2xl border border-gray-100 dark:border-dark-border p-6 lg:p-8 card-elevated">
    @csrf

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <x-form-group label="Name" name="name" :value="old('name')" required placeholder="Enter full name" />
        <x-form-group label="Email" name="email" type="email" :value="old('email')" required placeholder="user@example.com" />
        <x-form-group label="Password" name="password" type="password" required placeholder="Enter password" />
        <x-form-group label="Confirm Password" name="password_confirmation" type="password" required placeholder="Confirm password" />
        <x-form-group label="Phone" name="phone" :value="old('phone')" placeholder="+91 9876543210" />
        <x-form-group label="Role" name="role" type="select" :value="old('role')" :options="$roles" required />
        <x-form-group label="Status" name="status" type="select" :value="old('status', '1')" :options="['1' => 'Active', '0' => 'Inactive']" required />
        @if(auth()->user()->isSuperAdmin())
        <x-form-group label="Account" name="account_id" type="select" :value="old('account_id')" :options="$accounts" placeholder="None (Super Admin)" optionValue="id" optionLabel="account_name" />
        @endif
    </div>

    <div class="mt-6 pt-4 border-t border-gray-100 dark:border-dark-border flex items-center justify-end gap-3">
        <a href="{{ route('users.index') }}" class="btn-secondary">Cancel</a>
        <x-button type="submit">
            <svg class="w-4 h-4 mr-2" 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>
            Create User
        </x-button>
    </div>
</form>
@endsection