@extends('layouts.app')

@section('title', 'New User | DYSON LATAM')

@section('content')

    <style>
        .user-form-page {
            display: flex;
            flex-direction: column;
            gap: 18px;
            max-width: 900px;
        }

        .user-form-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 18px;
        }

        .user-form-kicker {
            margin-bottom: 5px;
            color: #7a80a0;
            font-family: monospace;
            font-size: 9px;
            font-weight: 700;
            letter-spacing: .12em;
            text-transform: uppercase;
        }

        .user-form-title {
            margin: 0;
            color: #161929;
            font-size: 24px;
            font-weight: 800;
            letter-spacing: -.03em;
        }

        .user-form-subtitle {
            margin: 6px 0 0;
            color: #7a80a0;
            font-family: monospace;
            font-size: 10px;
        }

        .user-back-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 36px;
            padding: 0 13px;
            border: 1px solid #dde1ee;
            border-radius: 8px;
            background: #ffffff;
            color: #555b74;
            font-family: monospace;
            font-size: 8px;
            font-weight: 700;
            text-decoration: none;
            text-transform: uppercase;
        }

        .user-back-link:hover {
            background: #f7f8fc;
            color: #171a2b;
        }

        .user-form-card {
            background: #ffffff;
            border: 1px solid #dde1ee;
            border-radius: 12px;
            box-shadow: 0 4px 14px rgba(31, 36, 56, .04);
            padding: 20px;
        }

        .user-form-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 16px;
        }

        .user-form-field {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .user-form-field-full {
            grid-column: 1 / -1;
        }

        .user-form-label {
            color: #4d536d;
            font-family: monospace;
            font-size: 8px;
            font-weight: 700;
            letter-spacing: .06em;
            text-transform: uppercase;
        }

        .user-form-input,
        .user-form-select {
            width: 100%;
            min-height: 40px;
            padding: 0 11px;
            border: 1px solid #dfe3ee;
            border-radius: 8px;
            outline: none;
            background: #ffffff;
            color: #252a3d;
            font-size: 10px;
        }

        .user-form-input:focus,
        .user-form-select:focus {
            border-color: #8d93aa;
            box-shadow: 0 0 0 3px rgba(23, 26, 43, .05);
        }

        .user-form-error {
            color: #d03535;
            font-family: monospace;
            font-size: 8px;
        }

        .user-form-actions {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 9px;
            margin-top: 20px;
            padding-top: 16px;
            border-top: 1px solid #edf0f6;
        }

        .user-form-submit {
            min-height: 38px;
            padding: 0 15px;
            border: 0;
            border-radius: 8px;
            background: #171a2b;
            color: #ffffff;
            font-family: monospace;
            font-size: 9px;
            font-weight: 700;
            letter-spacing: .04em;
            cursor: pointer;
            text-transform: uppercase;
        }

        .user-form-submit:hover {
            background: #252a41;
        }

        @media (max-width: 700px) {
            .user-form-header {
                flex-direction: column;
            }

            .user-form-grid {
                grid-template-columns: 1fr;
            }

            .user-form-field-full {
                grid-column: auto;
            }

            .user-form-actions {
                flex-direction: column;
                align-items: stretch;
            }
        }
    </style>

    <div class="user-form-page">

        <div class="user-form-header">

            <div>
                <div class="user-form-kicker">
                    DYSON LATAM / ADMINISTRATION
                </div>

                <h1 class="user-form-title">
                    New User
                </h1>

                <p class="user-form-subtitle">
                    Create a new system user and access profile
                </p>
            </div>

            <a href="{{ route('users.index') }}" class="user-back-link">
                ← Back to Users
            </a>

        </div>

        <div class="user-form-card">

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

                <div class="user-form-grid">

                    <div class="user-form-field">

                        <label for="name" class="user-form-label">
                            Name
                        </label>

                        <input type="text" id="name" name="name" class="user-form-input"
                            value="{{ old('name') }}" required>

                        @error('name')
                            <div class="user-form-error">
                                {{ $message }}
                            </div>
                        @enderror

                    </div>

                    <div class="user-form-field">

                        <label for="email" class="user-form-label">
                            Email
                        </label>

                        <input type="email" id="email" name="email" class="user-form-input"
                            value="{{ old('email') }}" required>

                        @error('email')
                            <div class="user-form-error">
                                {{ $message }}
                            </div>
                        @enderror

                    </div>

                    <div class="user-form-field">

                        <label for="role" class="user-form-label">
                            Profile
                        </label>

                        <select id="role" name="role" class="user-form-select" required>
                            <option value="">Select profile</option>

                            <option value="admin" {{ old('role') === 'admin' ? 'selected' : '' }}>
                                ADMIN
                            </option>

                            <option value="editor" {{ old('role') === 'editor' ? 'selected' : '' }}>
                                EDITOR
                            </option>

                            <option value="viewer" {{ old('role') === 'viewer' ? 'selected' : '' }}>
                                SOLO VER
                            </option>
                        </select>

                        @error('role')
                            <div class="user-form-error">
                                {{ $message }}
                            </div>
                        @enderror

                    </div>

                    <div class="user-form-field">

                        <label for="active" class="user-form-label">
                            Status
                        </label>

                        <select id="active" name="active" class="user-form-select" required>
                            <option value="1" {{ old('active', '1') == '1' ? 'selected' : '' }}>
                                ACTIVO
                            </option>

                            <option value="0" {{ old('active') === '0' ? 'selected' : '' }}>
                                INACTIVO
                            </option>
                        </select>

                        @error('active')
                            <div class="user-form-error">
                                {{ $message }}
                            </div>
                        @enderror

                    </div>

                    <div class="user-form-field user-form-field-full">

                        <label for="password" class="user-form-label">
                            Password
                        </label>

                        <input type="password" id="password" name="password" class="user-form-input" required>

                        @error('password')
                            <div class="user-form-error">
                                {{ $message }}
                            </div>
                        @enderror

                    </div>

                </div>

                <div class="user-form-actions">

                    <a href="{{ route('users.index') }}" class="user-back-link">
                        Cancel
                    </a>

                    <button type="submit" class="user-form-submit">
                        Create User
                    </button>

                </div>

            </form>

        </div>

    </div>

@endsection