@extends('layouts.app')

@section('title', 'Add User')
@section('page_title', 'Add User')

@section('content')
    <div class="page-header">
        <div>
            <h2 class="page-title">Add User</h2>
            <div class="page-subtitle">Create a simple sign-in account and choose what the person is responsible for.</div>
        </div>
        <a class="quick-link" href="{{ route('users.index') }}">Back to Users</a>
    </div>

    @if ($errors->any())
        <div class="error-box">
            <strong>Please correct the following:</strong>
            <ul class="form-note-list">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form data-unsaved-warning data-submit-once method="POST" action="{{ route('users.store') }}" class="card form-card">
        @csrf
        <div class="form-grid">
            <div class="form-group">
                <label for="name">Full Name</label>
                <input id="name" name="name" value="{{ old('name') }}" required>
            </div>
            <div class="form-group">
                <label for="username">Username</label>
                <input id="username" name="username" value="{{ old('username') }}" required autocomplete="off" placeholder="Example: kassim">
                <small>This short name appears across MauzoTrack and can be used to sign in.</small>
            </div>
            <div class="form-group">
                <label for="email">Email <span class="muted-small">(Required for Owner only)</span></label>
                <input id="email" type="email" name="email" value="{{ old('email') }}">
                <small>Managers and Cashiers can sign in with their username. If an email is added, MauzoTrack sends an account notice and verification link.</small>
            </div>
            <div class="form-group">
                <label for="role">Role</label>
                <select id="role" name="role" required>
                    @foreach ($roles as $key => $label)
                        <option value="{{ $key }}" @selected(old('role', 'cashier') === $key)>{{ $label }}</option>
                    @endforeach
                </select>
                <div class="role-help" id="roleHelp"><strong>Cashier</strong><span>Sales, daily expenses and permitted stock tasks.</span></div>
            </div>
            <div class="form-group">
                <label for="password">Password</label>
                <input id="password" type="password" name="password" required placeholder="Minimum 8 characters">
            </div>
            <div class="form-group">
                <label for="password_confirmation">Confirm Password</label>
                <input id="password_confirmation" type="password" name="password_confirmation" required>
            </div>
        </div>

        <div class="form-actions">
            <button class="btn" type="submit">Save User</button>
            <a class="quick-link" href="{{ route('users.index') }}">Cancel</a>
        </div>
    </form>
    <script>
    (()=>{const role=document.getElementById('role'),help=document.getElementById('roleHelp'),email=document.getElementById('email');const copy={owner:['Owner','Full system access, users, settings and recovery.'],manager:['Manager','Sales, stock, reports, returns and daily operations.'],cashier:['Cashier','Sales, daily expenses and permitted stock tasks.']};function sync(){const [title,text]=copy[role.value]||copy.cashier;help.innerHTML=`<strong>${title}</strong><span>${text}</span>`;email.required=role.value==='owner';}role.addEventListener('change',sync);sync();})();
    </script>
@endsection