@extends('layout.mainlayout')

@section('content')

    <main class="page-main signin-secure">
        <div class="page-title">
            <div class="container">
                <h3 class="h5">Sign in & Security</h3>
            </div>
        </div> <!-- End Page Title -->
        <form class="account-form">
            <div class="container">
                <div class="row">
                    <div class="col-lg-4 mb-5">
                        <div class="image-edit text-center">
                            <div class="image-div mx-auto">
                                <img src="img/profile-image.png" alt="User">
                                <input type="file" class="edit-img" id="image">
                            </div>
                            <h3 class="h5">Hussam Shaheen</h3>
                        </div> <!-- End Image Edit -->
                    </div> <!-- End Column -->
                    <div class="col-md-6 col-lg-4">
                        <div class="first-fields">
                            <div class="name mb-5">
                                <label for="user-name" class="d-block">Enter Your name</label>
                                <input type="text" id="user-name" class="d-block w-100" placeholder="Hussam Shaheen">
                            </div> <!-- End Name Field -->
                            <div class="natunality mb-5">
                                <label for="natunality" class="d-block">Natunality</label>
                                <select name="natunality" id="natunality" class="d-block w-100">
                                    <option value="Jordan">Jordan</option>
                                    <option value="Palestine">Palestine</option>
                                    <option value="Egypt">Egypt</option>
                                </select>
                            </div> <!-- End Natunality Field -->
                            <div class="id-num mb-5">
                                <label for="id-num" class="d-block">ID Number</label>
                                <input type="text" id="user-name" class="d-block w-100" placeholder="2569854158996">
                            </div> <!-- End ID Number Field -->
                        </div>
                    </div> <!-- End Column -->
                    <div class="col-md-6 col-lg-4">
                        <div class="sec-fields">
                            <div class="mobile-field mb-5">
                                <label for="id-num" class="d-block">Mobile Number</label>
                                <div class="fields num d-flex">
                                    <input type="tel" name="ven-num" id="ven" class="ven-num d-inline-block" style="width: 92px;">
                                    <input type="text" class="number d-inline-block flex-grow-1">
                                </div> <!-- End Fields Number-->
                            </div>
                            <div class="gender mb-5">
                                <label for="gender" class="d-block">Gender</label>
                                <select name="gender" id="gender" class="d-block w-100">
                                    <option value="Male">Male</option>
                                    <option value="Female">Female</option>
                                </select>
                            </div> <!-- End Gender -->
                            <div class="birthdate mb-5">
                                <label for="birthdate" class="d-block">Birthdate</label>
                                <input type="date" id="user-name" class="d-block w-100" placeholder="Karam Zomlut">
                            </div> <!-- End Birthdate -->
                        </div>
                    </div>
                </div> <!-- End Row -->
            </div> <!-- End Container -->
        </form> <!-- End Account orm-->

    </main> <!-- End Main Paeg-->

@endsection