@extends('layouts.app')

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

@section('content')

<div class="container-fluid">

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

        <div>
            <h1 class="mb-1">Edit User</h1>
            <p class="text-muted mb-0">
                Update 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


    <div class="card shadow-sm">

        <div class="card-header bg-white">

            <h5 class="mb-0">
                User Information
            </h5>

        </div>


        <div class="card-body">

            <form method="POST"
                  action="{{ route('users.update', $user) }}">

                @csrf

                @method('PUT')


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

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

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

                </div>


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

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

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

                </div>


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

                    <label class="form-label">
                        New Password
                    </label>

                    <div class="input-group">

                        <input
                            type="password"
                            name="password"
                            id="password"
                            class="form-control"
                            placeholder="Leave blank to keep current password"
                        >

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

                    </div>

                    <small class="text-muted">
                        Leave blank if you don't want to change the password.
                    </small>

                </div>


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

                    <label class="form-label">
                        Confirm New Password
                    </label>

                    <div class="input-group">

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

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

                    </div>

                </div>


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

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

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

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

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

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

                    </select>

                </div>


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

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

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

                </div>

            </form>

        </div>

    </div>

</div>


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

function togglePassword(fieldId, button) {

    const field = document.getElementById(fieldId);

    if (field.type === "password") {

        field.type = "text";
        button.innerHTML = "🙈";

    } else {

        field.type = "password";
        button.innerHTML = "👁️";

    }

}

</script>

@endsection