@extends('layouts.app')

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

@section('content')

<div class="container-fluid">

    {{-- Page Header --}}
    <div class="d-flex justify-content-between align-items-center mb-4">

        <div>
            <h2 class="mb-1">Add User</h2>
            <p class="text-muted mb-0">
                Create a new Owner or Staff account
            </p>
        </div>

        <a href="{{ route('users.index') }}"
           class="btn btn-outline-secondary">
            ← Back to Users
        </a>

    </div>


    {{-- Validation Errors --}}
    @if($errors->any())

        <div class="alert alert-danger">

            <strong>Please fix the following errors:</strong>

            <ul class="mb-0 mt-2">

                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach

            </ul>

        </div>

    @endif


    {{-- Add User Form --}}
    <div class="card shadow-sm border-0">

        <div class="card-header bg-white py-3">
            <strong>User Information</strong>
        </div>

        <div class="card-body">

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

                @csrf


                {{-- Name --}}
                <div class="mb-3">

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

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

                </div>


                {{-- Email --}}
                <div class="mb-3">

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

                    <input type="email"
                           name="email"
                           id="email"
                           class="form-control"
                           value="{{ old('email') }}"
                           placeholder="example@akhandam.test"
                           required>

                </div>


                {{-- Password --}}
                <div class="mb-3">

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

                    <div class="input-group">

                        <input type="password"
                               name="password"
                               id="password"
                               class="form-control"
                               placeholder="Minimum 8 characters"
                               required>

                        <button type="button"
                                class="btn btn-outline-secondary"
                                onclick="togglePassword('password', this)">
                            👁
                        </button>

                    </div>

                </div>


                {{-- Confirm Password --}}
                <div class="mb-3">

                    <label for="password_confirmation" class="form-label">
                        Confirm Password
                    </label>

                    <div class="input-group">

                        <input type="password"
                               name="password_confirmation"
                               id="password_confirmation"
                               class="form-control"
                               placeholder="Re-enter password"
                               required>

                        <button type="button"
                                class="btn btn-outline-secondary"
                                onclick="togglePassword('password_confirmation', this)">
                            👁
                        </button>

                    </div>

                </div>


                {{-- Role --}}
                <div class="mb-4">

                    <label for="role" class="form-label">
                        Role
                    </label>

                    <select name="role"
                            id="role"
                            class="form-select"
                            required>

                        <option value="">Select Role</option>

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

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

                    </select>

                </div>


                {{-- Buttons --}}
                <div class="d-flex gap-2">

                    <button type="submit"
                            class="btn btn-dark">
                        Create User
                    </button>

                    <a href="{{ route('users.index') }}"
                       class="btn btn-outline-secondary">
                        Cancel
                    </a>

                </div>

            </form>

        </div>

    </div>

</div>


{{-- Password Toggle --}}
<script>

function togglePassword(inputId, button) {

    const input = document.getElementById(inputId);

    if (input.type === 'password') {

        input.type = 'text';
        button.innerHTML = '🙈';

    } else {

        input.type = 'password';
        button.innerHTML = '👁';

    }

}

</script>

@endsection