@extends('layouts.admin')

@section('admin-content')
<div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.5rem;">
    <a href="{{ route('admin.users.index') }}" style="color: var(--text-muted); display: inline-flex; align-items: center;" title="Volver al listado">
        <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/></svg>
    </a>
    <h2 style="font-size: 1.5rem; font-weight: 800;">Crear Nuevo Usuario</h2>
</div>

@if ($errors->any())
    <div class="alert alert-error" style="font-size: 0.85rem; padding: 0.75rem 1rem; margin-bottom: 1.5rem;">
        <div style="flex: 1;">
            @foreach ($errors->all() as $error)
                <span style="display:block;">{{ $error }}</span>
            @endforeach
        </div>
    </div>
@endif

<form action="{{ route('admin.users.store') }}" method="POST">
    @csrf

    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
        <div class="form-group">
            <label for="name" class="form-label">Nombre Completo <span style="color: var(--color-error);">*</span></label>
            <input type="text" id="name" name="name" value="{{ old('name') }}" required class="form-control" placeholder="Ej. Ana Morales">
        </div>

        <div class="form-group">
            <label for="email" class="form-label">Correo Electrónico <span style="color: var(--color-error);">*</span></label>
            <input type="email" id="email" name="email" value="{{ old('email') }}" required class="form-control" placeholder="ana@ejemplo.com">
        </div>
    </div>

    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
        <div class="form-group">
            <label for="phone" class="form-label">Número de Celular / WhatsApp</label>
            <input type="tel" id="phone" name="phone" value="{{ old('phone') }}" class="form-control" placeholder="Ej. 04141234567">
        </div>

        <div class="form-group">
            <label for="role" class="form-label">Rol del Usuario <span style="color: var(--color-error);">*</span></label>
            <select id="role" name="role" required class="form-control">
                @foreach($roles as $r)
                    <option value="{{ $r->name }}" {{ old('role', 'customer') === $r->name ? 'selected' : '' }}>{{ $r->display_name }}</option>
                @endforeach
            </select>
        </div>
    </div>

    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
        <div class="form-group">
            <label for="password" class="form-label">Contraseña <span style="color: var(--color-error);">*</span></label>
            <input type="password" id="password" name="password" required class="form-control" placeholder="Mínimo 6 caracteres">
        </div>

        <div class="form-group">
            <label for="password_confirmation" class="form-label">Confirmar Contraseña <span style="color: var(--color-error);">*</span></label>
            <input type="password" id="password_confirmation" name="password_confirmation" required class="form-control" placeholder="Repite la contraseña">
        </div>
    </div>

    <div style="margin-top: 2rem; display: flex; gap: 1rem;">
        <button type="submit" class="btn btn-primary">
            <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
            Guardar Usuario
        </button>
        <a href="{{ route('admin.users.index') }}" class="btn btn-outline">Cancelar</a>
    </div>
</form>
@endsection