{% extends "layouts/dashboard.twig" %}

{% block title %}{{ target_user ? __('users.titles.edit') : __('users.titles.create') }} - {{ platformName }}{% endblock %}

{% block content %}
<div class="container-fluid px-4">
    <h1 class="mt-4">{{ target_user ? __('users.titles.edit') : __('users.titles.create') }}</h1>
    <ol class="breadcrumb mb-4">
        <li class="breadcrumb-item"><a href="{{ url('admin/dashboard') }}">{{ __('dashboard.title') }}</a></li>
        <li class="breadcrumb-item"><a href="{{ url('admin/users') }}">{{ __('users.breadcrumb.users') }}</a></li>
        <li class="breadcrumb-item active">{{ target_user ? __('users.breadcrumb.edit') : __('users.breadcrumb.create') }}</li>
    </ol>

    {% include '@users/admin/nav.twig' ignore missing %}
    
    <div class="card mb-4">
        <div class="card-header">
            <i class="bi bi-person-gear me-1"></i>
            {{ __('users.headers.user_details') }}
        </div>
        <div class="card-body">
            {% if error %}
                <div class="alert alert-danger" role="alert">
                    {{ error }}
                </div>
            {% endif %}
            <form action="{{ target_user ? url('admin/users/' ~ target_user.users_id) : url('admin/users') }}" method="POST" enctype="multipart/form-data">
                {% if target_user %}
                    <input type="hidden" name="_method" value="PUT">
                {% endif %}
                {{ csrf_field()|raw }}

                <div class="row">
                    <div class="col-md-8">
                        <div class="mb-3">
                            <label for="name" class="form-label">{{ __('users.fields.name') }}</label>
                            <input type="text" class="form-control" id="name" name="name" value="{{ target_user ? target_user.users_name : '' }}" required>
                        </div>

                        <div class="mb-3">
                            <label for="email" class="form-label">{{ __('users.fields.email') }}</label>
                            <input type="email" class="form-control" id="email" name="email" value="{{ target_user ? target_user.users_email : '' }}" required>
                        </div>

                        <div class="mb-3" x-data="{ show: false }">
                            <label for="password" class="form-label">{{ __('users.fields.password') }} {{ target_user ? __('users.fields.password_hint') : '' }}</label>
                            <div class="input-group">
                                <input :type="show ? 'text' : 'password'" class="form-control" id="password" name="password" {{ target_user ? '' : 'required' }} autocomplete="new-password" value="">
                                <button class="btn btn-outline-secondary" type="button" @click="show = !show">
                                    <i :class="show ? 'bi bi-eye-slash' : 'bi bi-eye'"></i>
                                </button>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="role" class="form-label">{{ __('users.fields.role') }}</label>
                                    <select class="form-select" id="role" name="role">
                                        <option value="user" {{ target_user.users_role == 'user' ? 'selected' : '' }}>{{ __('users.roles.user') }}</option>
                                        <option value="member" {{ target_user.users_role == 'member' ? 'selected' : '' }}>{{ __('users.roles.member') }}</option>
                                        <option value="admin" {{ target_user.users_role == 'admin' ? 'selected' : '' }}>{{ __('users.roles.admin') }}</option>
                                        <option value="super_admin" {{ target_user.users_role == 'super_admin' ? 'selected' : '' }}>{{ __('users.roles.super_admin') ?: 'Super Admin' }}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="status" class="form-label">{{ __('users.fields.status') }}</label>
                                    <select class="form-select" id="status" name="status">
                                        <option value="active" {{ target_user and target_user.users_status == 'active' ? 'selected' : '' }}>{{ __('users.statuses.active') }}</option>
                                        <option value="inactive" {{ target_user and target_user.users_status == 'inactive' ? 'selected' : '' }}>{{ __('users.statuses.inactive') }}</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card mb-3">
                            <div class="card-header">{{ __('users.fields.avatar') }}</div>
                            <div class="card-body text-center">
                                <div class="mb-3">
                                    {% if target_user and target_user.users_avatar %}
                                        <img src="{{ target_user.avatar_url }}" alt="Avatar" class="img-thumbnail rounded-circle mb-2" style="width: 150px; height: 150px; object-fit: cover;">
                                    {% else %}
                                        <div class="bg-light rounded-circle d-inline-flex align-items-center justify-content-center mb-2" style="width: 150px; height: 150px;">
                                            <i class="bi bi-person fs-1 text-secondary"></i>
                                        </div>
                                    {% endif %}
                                </div>
                                <input type="file" class="form-control" id="avatar" name="avatar" accept="image/*">
                                <div class="form-text small text-muted mt-2">JPG, PNG or GIF. Max 2MB.</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="d-flex justify-content-between">
                    <a href="{{ url('admin/users') }}" class="btn btn-secondary">{{ __('users.actions.cancel') }}</a>
                    <button type="submit" class="btn btn-primary">{{ target_user ? __('users.actions.update_user') : __('users.actions.create_user') }}</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}