{% extends '@user/layouts/commonmaster.html.twig' %}

{% block stylesheets %}
{{ parent() }}
    
{% endblock %}

{% block content %}

    <div class="card col-md-11 m-auto">
        <div class="row">

            <form method="POST" action="" id="userForm">

                <div class="row">

                    <div class="card mb-4 col-md-6">
                        <div class="card-header fw-bold">Personal Details</div>
                        <div class="card-body">
                            <div class="mb-3 row align-items-center">
                                <label class="col-sm-3 col-form-label">Name*</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" required name="name">
                                </div>
                            </div>
                            <div class="mb-3 row align-items-center">
                                <label class="col-sm-3 col-form-label">Username*</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" required name="username">
                                </div>
                            </div>

                            <div class="mb-3 row align-items-center">
                                <label class="col-sm-3 col-form-label">Phone*</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" required name="phone">
                                </div>
                            </div>
                            <div class="mb-3 row align-items-center">
                                <label class="col-sm-3 col-form-label">Age*</label>
                                <div class="col-sm-9">
                                    <input type="number" class="form-control" required name="age">
                                </div>
                            </div>
                            <div class="mb-3 row align-items-center">
                                <label class="col-sm-3 col-form-label">National ID*</label>
                                <div class="col-sm-9">
                                    <input type="number" class="form-control" required name="national_id">
                                </div>
                            </div>
                            <div class="mb-3 row align-items-center">
                                <label class="col-sm-3 col-form-label">Gender*</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" required name="gender">
                                </div>
                            </div>
                            <div class="mb-3 row align-items-center">
                                <label class="col-sm-3 col-form-label">Photo*</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" required name="gender">
                                </div>
                            </div>
                        </div>
                    </div>   

                    <div class="card mb-4 col-md-6">
                        <div class="card-header fw-bold">Company Details</div>
                        <div class="card-body">
                            <div class="mb-3 row align-items-center">
                                <label class="col-sm-3 col-form-label">Role*</label>
                                <div class="col-sm-9">
                                    <select class="form-control">
                                        {% for role in roles %}
                                        <option value="{{ role['role_id'] }}">{{ role['role'] }}</option> 
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Department*</label>
                                <div class="row">
                                    {% for department in departments %}
                                    <div class="col-md-6"> 
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value="{{ department['department_id'] }}">
                                            <label class="form-check-label">{{ department['department'] }}</label>
                                        </div>    
                                    </div>
                                    {% endfor %}
                                </div>
                            </div>
                            <div class="card">
                                <div class="card-header fw-bold">Account Login</div>
                                <div class="card-body">
                                    <div class="mb-3 row align-items-center">
                                        <label class="col-sm-3 col-form-label">Email*</label>
                                        <div class="col-sm-9">
                                            <input type="email" class="form-control" required name="email">
                                        </div>
                                    </div>
                                    <div class="mb-3 row align-items-center">
                                        <label class="col-sm-3 col-form-label">Password*</label>
                                        <div class="col-sm-9">
                                            <input type="password" class="form-control" required name="password">
                                        </div>
                                    </div>
                                    <div class="mb-3 row align-items-center">
                                        <label class="col-sm-3 col-form-label">Status*</label>
                                        <div class="col-sm-9">
                                            <select class="form-control">
                                                <option value="active">Active</option>
                                                <option value="inactive">Inactive</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div>
                        <button type="btn" class="btn btn-success">SUBMIT</button>
                    </div>
                </div>

            </form>

        </div>
    </div>

{% endblock %}

{% block javascripts %}
{{ parent() }}

<script>
$(document).ready(function() {
    console.log('resr')
})
</script>

{% endblock %}