{% extends "layout.html" %}

{% set title = 'My Profile' %}

{% block content %}

<div class="pages sec-pad bg-s-grey">
    <div class="container">
        <div class="box-alt">
            <div class="row">
                <div class="col-md-12 col-lg-6">
                    <div class="form-group">
                        <label for="membership" class="text-bold mb-0 mr-3">نوع الحساب</label>
                        <div class="select-custom d-block d-md-inline-block w-75 mb-0">
                            <select name="" id="membership" class="form-control">
                                <option disabled selected>اختار نوع العضوية</option>
                                <option value="1">مالك</option>
                                <option value="2">مستأجر</option>
                                <option value="23">مستخدم</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <h4 class="mt-4 mb-3 text-bold text-darkgray">البيانات الشخصية</h4>
        <div class="box-alt">
            <form action="">
                <div class="row">
                    <div class="col-sm-6 col-md-6 col-lg-4">
                        <div class="form-group">
                            <label for="fullNamee" class="d-block text-bold mb-2">الأسم الأول</label>
                            <input type="text" id="firstNamee" class="form-control" placeholder="ادخل الاسم الأول">
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-6 col-lg-4">
                        <div class="form-group">
                            <label for="fullNamee" class="d-block text-bold mb-2">الأسم الثاني</label>
                            <input type="text" id="middleNamee" class="form-control" placeholder="ادخل الاسم الثاني">
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-6 col-lg-4">
                        <div class="form-group">
                            <label for="fullNamee" class="d-block text-bold mb-2">أسم العائلة</label>
                            <input type="text" id="lastNamee" class="form-control" placeholder="ادخل أسم العائلة">
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-6 col-lg-4">
                        <div class="form-group">
                            <label for="nationality" class="d-block text-bold mb-2">الجنسية</label>
                            <div class="select-custom">
                                <select name="" id="nationality" class="form-control">
                                    <option disabled selected>اختار الجنسية</option>
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="23">23</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-6 col-lg-4">
                        <div class="form-group">
                            <label for="phoneNumberr" class="mb-2 text-semibold">رقم الجوال</label>
                            <input type="text" class="form-control" id="phoneNumberr" placeholder="">
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-6 col-lg-4">
                        <div class="form-group">
                            <label for="whatsapp" class="mb-2 text-semibold">رقم الواتس اب</label>
                            <input type="text" class="form-control phoneNumber" id="whatsapp" placeholder="">
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-6 col-lg-4">
                        <div class="form-group">
                            <label for="emailSSS" class="d-block text-bold mb-2">البريد الألكتروني</label>
                            <input type="email" class="form-control" id="emailSSS" placeholder="ادخل الايميل الالكتروني">
                        </div>
                    </div>
                </div>
                <hr class="mt-0">
                <div class="row">
                    <div class="col-sm-6 col-md-6 col-lg-4">
                        <div class="form-group">
                            <label for="country" class="d-block text-bold mb-2">البلد</label>
                            <div class="select-custom">
                                <select name="" id="country" class="form-control">
                                    <option disabled selected>اختار البلد</option>
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="23">23</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-6 col-lg-4">
                        <div class="form-group">
                            <label for="city" class="d-block text-bold mb-2">المدينة</label>
                            <div class="select-custom">
                                <select name="" id="city" class="form-control">
                                    <option disabled selected>اختار المدينة</option>
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="23">23</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-6 col-lg-4">
                        <div class="form-group">
                            <label for="address" class="d-block text-bold mb-2">العنوان</label>
                            <input type="text" class="form-control" id="address" placeholder="ادخل العنوان">
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-6 col-lg-4">
                        <div class="form-group">
                            <label for="idNumber" class="d-block text-bold mb-2">رقم الهوية\الإقامة</label>
                            <input type="text" class="form-control" id="idNumber" placeholder="ادخل رقم الهوية\الأقامة">
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-6 col-lg-4">
                        <div class="form-group">
                            <label for="datepicker" class="d-block text-bold mb-2">تاريخ الانتهاء</label>
                            <input type="text" class="form-control" id="datepicker" placeholder="ادخل تاريخ انتهاء الهوية">
                        </div>
                    </div>
                </div>
                <button type="submit" class="btn mt-3">حفظ</button>
            </form>
        </div>
        <h4 class="mt-4 mb-3 text-bold text-darkgray">بيانات العمل</h4>
        <div class="box-alt">
            <form action="">
                <div class="row">
                    <div class="col-sm-6 col-md-6 col-lg-4">
                        <div class="form-group">
                            <label for="workName" class="d-block text-bold mb-2">جهة العمل</label>
                            <input type="text" id="workName" class="form-control" placeholder="ادخل جهة العمل">
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-6 col-lg-4">
                        <div class="form-group">
                            <label for="addresss" class="d-block text-bold mb-2">العنوان</label>
                            <input type="text" class="form-control" id="addresss" placeholder="ادخل العنوان">
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-6 col-lg-4">
                        <div class="form-group">
                            <label for="ceoName" class="d-block text-bold mb-2">اسم الكفيل</label>
                            <input type="text" id="ceoName" class="form-control" placeholder="ادخل اسم الكفيل">
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-6 col-lg-4">
                        <div class="form-group">
                            <label for="ceoIdNumber" class="d-block text-bold mb-2">رقم هوية الكفيل</label>
                            <input type="text" class="form-control" id="ceoIdNumber" placeholder="ادخل رقم هوية الكفيل">
                        </div>
                    </div>
                </div>
                <button type="submit" class="btn mt-3">حفظ</button>
            </form>
        </div>
        <h4 class="mt-4 mb-3 text-bold text-darkgray">بيانات التابعين</h4>
        <div class="box-alt">
            <form action="">
                <div class="row">
                    <div class="col-sm-6 col-md-6 col-lg-4">
                        <div class="form-group">
                            <label for="fulllname" class="text-bold d-block mb-2">الأسم بالكامل</label>
                            <input type="text" id="fulllname" class="form-control" placeholder="ادخل الأسم بالكامل">
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-6 col-lg-4">
                        <div class="form-group">
                            <label for="relation" class="text-bold d-block mb-2">الصلة</label>
                            <div class="select-custom">
                                <select name="" id="relation" class="form-control">
                                    <option disabled selected>اختار الصلة</option>
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="23">23</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-6 col-lg-4">
                        <div class="text-right">
                            <button type="submit" class="btn ml-auto" style="margin-top: 32px">اضافة</button>
                        </div>
                    </div>
                </div>
            </form>
            <div class="table-responsive">
                <table class="table mt-4">
                    <thead class="bg-secondaryColor text-white">
                    <tr>
                        <th scope="col">م</th>
                        <th scope="col">الأسم</th>
                        <th scope="col">الصلة</th>
                        <th scope="col">حذف</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <th scope="row">1</th>
                        <td>مختار علي</td>
                        <td>أخ</td>
                        <td><a href="#" class="text-danger"><i class="fa fa-trash-alt"></i></a></td>
                    </tr>
                    <tr>
                        <th scope="row">2</th>
                        <td>مختار علي</td>
                        <td>أخ</td>
                        <td><a href="#" class="text-danger"><i class="fa fa-trash-alt"></i></a></td>
                    </tr>
                    <tr>
                        <th scope="row">3</th>
                        <td>مختار علي</td>
                        <td>أخ</td>
                        <td><a href="#" class="text-danger"><i class="fa fa-trash-alt"></i></a></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <h4 class="mt-4 mb-3 text-bold text-darkgray">المرفقات</h4>
        <div class="box-alt">
            <form action="">
                <div class="row">
                    <div class="col-sm-6 col-md-6 col-lg-4">
                        <div class="upload-container">
                            <div class="custom-input">
                                <div class="input-file-container text-center">
                                    <input class="input-file" id="idImage" type="file">
                                    <label tabindex="0" for="idImage" class="input-file-trigger text-left">
                                        <i class="fas fa-paperclip mr-2"></i>
                                        صورة الهوية\الأقامة
                                    </label>
                                </div>
                                <p class="file-return"></p>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-6 col-lg-4">
                        <div class="upload-container">
                            <div class="custom-input">
                                <div class="input-file-container text-center">
                                    <input class="input-file" id="jobLetter" type="file">
                                    <label tabindex="0" for="jobLetter" class="input-file-trigger text-left">
                                        <i class="fas fa-paperclip mr-2"></i>
                                        خطاب تعريفي من العمل
                                    </label>
                                </div>
                                <p class="file-return"></p>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-6 col-lg-4">
                        <button type="submit" class="btn mt-1">حفظ</button>
                    </div>
                </div>
            </form>
        </div>
        <h4 class="mt-4 mb-3 text-bold text-darkgray">الأشتراكات</h4>
        <div class="box-alt">
            <div class="d-md-flex align-items-center justify-content-between">
                <div class="mb-3 mb-md-0">
                    <h6 class="m-0 d-inline-block mr-4 text-bold">الأشتراك الحالي:</h6>
                    <span>اسم باقة الأشتراك</span>
                </div>
                <div class="mb-3 mb-md-0">
                    <p class="m-0 text-darkgray text-bold">تاريخ الأنتهاء ١٠/١٢/٢٠٢٠</p>
                </div>
                <div class="mb-3 mb-md-0">
                    <a href="plans.html" class="btn btn-yellow">ترقية الباقة</a>
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}
{% block JS %}{% endblock %}