@extends('layouts.app')

@section('page_title', 'Create User')
@section('page_subtitle', 'Add a new user account and assign their role')

@section('page_actions')
    <a class="btn" href="{{ route('users.index') }}">
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5M12 5l-7 7 7 7"/></svg>
        Back to Users
    </a>
@endsection

@section('content')
<section class="grid grid-2">
    <div class="card card-pad">
        <div class="section-head" style="margin:0 0 18px;">
            <div>
                <h2>Account Details</h2>
                <p>Fill in the information for the new user.</p>
            </div>
        </div>

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

            <label>
                <span>Full Name</span>
                <input type="text" name="name" value="{{ old('name') }}" required placeholder="e.g. John Doe">
                @error('name') <span class="input-error">{{ $message }}</span> @enderror
            </label>

            <label>
                <span>Email Address</span>
                <input type="email" name="email" value="{{ old('email') }}" required placeholder="e.g. john@example.com">
                @error('email') <span class="input-error">{{ $message }}</span> @enderror
            </label>

            <label>
                <span>Phone <span style="font-weight:400;color:var(--color-muted);">(optional)</span></span>
                <input type="text" name="phone" value="{{ old('phone') }}" placeholder="+91 98765 43210">
                @error('phone') <span class="input-error">{{ $message }}</span> @enderror
            </label>

            <label>
                <span>Role / Permission</span>
                <select name="role" required>
                    <option value="">— assign a role —</option>
                    <option value="admin"   {{ old('role') === 'admin'   ? 'selected' : '' }}>Admin — full system access</option>
                    <option value="manager" {{ old('role') === 'manager' ? 'selected' : '' }}>Manager — manage orders & projects</option>
                    <option value="user"    {{ old('role') === 'user'    ? 'selected' : '' }}>User — view & basic actions only</option>
                </select>
                @error('role') <span class="input-error">{{ $message }}</span> @enderror
            </label>

            <label>
                <span>Password</span>
                <input type="password" name="password" required placeholder="Min. 8 characters">
                @error('password') <span class="input-error">{{ $message }}</span> @enderror
            </label>

            <label>
                <span>Confirm Password</span>
                <input type="password" name="password_confirmation" required placeholder="Repeat password">
            </label>

            <div class="toolbar" style="margin-top:6px;">
                <button class="btn btn-primary" type="submit">
                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>
                    Create User
                </button>
                <a class="btn" href="{{ route('users.index') }}">Cancel</a>
            </div>
        </form>
    </div>

    {{-- Role guide --}}
    <div class="card card-pad">
        <div class="section-head" style="margin:0 0 18px;">
            <div>
                <h2>Role Permissions Guide</h2>
                <p>What each role can do in the system.</p>
            </div>
        </div>

        <div class="grid" style="gap:14px;">
            {{-- Admin --}}
            <div style="padding:14px;border-radius:12px;border:1px solid var(--color-border);background:var(--color-info-soft);">
                <div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;">
                    <span class="badge badge-info">Admin</span>
                    <strong style="font-size:.92rem;">Full Access</strong>
                </div>
                <ul style="margin:0;padding-left:18px;color:var(--color-muted);font-size:.85rem;line-height:1.8;">
                    <li>Manage all users, roles, and permissions</li>
                    <li>Create, edit, delete projects and orders</li>
                    <li>Access activity logs and reports</li>
                    <li>Generate manifests and documents</li>
                </ul>
            </div>
            {{-- Manager --}}
            <div style="padding:14px;border-radius:12px;border:1px solid var(--color-border);background:var(--color-warning-soft);">
                <div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;">
                    <span class="badge badge-warning">Manager</span>
                    <strong style="font-size:.92rem;">Operational Access</strong>
                </div>
                <ul style="margin:0;padding-left:18px;color:var(--color-muted);font-size:.85rem;line-height:1.8;">
                    <li>Manage orders, packaging, and shipments</li>
                    <li>Create and edit projects</li>
                    <li>Generate manifests</li>
                    <li>Cannot manage users or system settings</li>
                </ul>
            </div>
            {{-- User --}}
            <div style="padding:14px;border-radius:12px;border:1px solid var(--color-border);background:var(--color-surface-alt);">
                <div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;">
                    <span class="badge">User</span>
                    <strong style="font-size:.92rem;">View & Basic Actions</strong>
                </div>
                <ul style="margin:0;padding-left:18px;color:var(--color-muted);font-size:.85rem;line-height:1.8;">
                    <li>View orders and projects</li>
                    <li>Update packaging status</li>
                    <li>Cannot delete records or manage users</li>
                </ul>
            </div>
        </div>
    </div>
</section>
@endsection