{% extends "base/app.html" %}
{% load static %}

{% block content %}
    <link rel="stylesheet" href="{% static 'css/profile/profile.css' %}">
    <h2 class="pl-2">Profile</h2>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-3">
                <!-- Profile Image -->
                <div class="card card-primary card-outline">
                    <div class="card-body box-profile">
                        <div class="d-flex justify-content-center">
                            <img class="profile-user-img img-fluid"
                                src="{{ request.session.ProfileImage }}"
                                alt="User profile picture"
                                id='profile-img'>
                            <form id="profile-blur">
                                <div style="width:100%; height: 100%;"></div>
                                <input type='file' accept="image/*" style="display:none;" id='profile-image' name='AttachmentNameX'>
                                <button type="button" id="btn-upload">
                                    <i class="fas fa-edit"></i>
                                </button>
                            </form>
                        </div>

                        <h3 class="profile-username text-center" id='complete-name'>{{ request.session.UserLoginName }}</h3>
                    </div>
                    <!-- /.card-body -->
                </div>
                <!-- /.card -->
            </div>
            <!-- /.col -->
            <div class="col-md-9">
                <div class="card">
                    <div class="card-header p-2">
                        <ul class="nav nav-pills">
                            <li class="nav-item"><a class="nav-link active" href="#personal-info" data-toggle="tab" id='nav-personal'>Personal Information</a></li>
                            <li class="nav-item"><a class="nav-link" href="#address" data-toggle="tab" id='nav-address'>Address</a></li>
                            <li class="nav-item"><a class="nav-link" href="#contacts" data-toggle="tab" id='nav-contacts'>Contacts</a></li>
                            <li class="nav-item"><a class="nav-link" href="#settings" data-toggle="tab" id='nav-password'>Password</a></li>
                        </ul>
                    </div><!-- /.card-header -->
                    <div class="card-body" id='personal-data'>
                        <div class="tab-content">
                            <div class="active tab-pane" id="personal-info">
                                <!-- personal info -->
                                <form class="form-horizontal" id='form-personal'>
                                    <div class="row">
                                        <div class="form-group col-6">
                                            <label for="first-name" class="col-sm-6 col-form-label">First Name</label>
                                            <input type="text" class="form-control" id="in-first-name" name='firstname' placeholder="First Name" value="">
                                        </div>
                                        <div class="form-group col-6">
                                            <label for="last-name" class="col-sm-6 col-form-label">Last Name</label>
                                            <input type="text" class="form-control" id="in-last-name" name='lastname' placeholder="Last Name" value="">
                                        </div>
                                        <div class="form-group col-4">
                                            <label for="middle-name" class="col-sm-6 col-form-label">Middle Name</label>
                                            <input type="text" class="form-control" id="in-middle-name" name='middlename' placeholder="Middle Name" value="">
                                        </div>
                                        <div class="form-group col-4">
                                            <label for="extension" class="col-sm-6 col-form-label">Extension</label>
                                            <input type="text" class="form-control" id="in-extension" name='extension' placeholder="Extension" value="">
                                        </div>
                                        <div class="form-group col-4">
                                            <label for="birthday" class="col-sm-6 col-form-label">Birthday</label>
                                            <input type="date" class="form-control" id="in-birthday" name='birthday' placeholder="Birthday" value="">
                                        </div>
                                        <div class="form-group col-12 row p-0">
                                            <div class="col-sm-12 p-0 d-flex justify-content-end">
                                                <button type="button" class="btn btn-danger" id="btn-submit-personal">Submit</button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                                <!-- /.personal info -->
                            </div>
                            <!-- /.tab-pane -->
                            <div class="tab-pane" id="address">
                                <form class="form-horizontal" id='form-address'>
                                    <div class="row">
                                        <div class="col-md-6 mb-3">
                                            <label for="sel-province"> State/Province <span class="text-muted">*</span></label>
                                            <select class="custom-selectd-block w-100 form-control" id="sel-province" name="province" required>
                                                 <option value="0">Choose Province ...</option>
                                            </select>                       
                                        </div>       
                                        <div class="col-md-6 mb-3">
                                            <label for="sel-city"> City <span class="text-muted">*</span></label>
                                            <select class="custom-selectd-block w-100 form-control" id="sel-city" name="city" required>
                                                <option value="0">Choose City ...</option>
                                            </select>                            
                                        </div>                                                
                                        <div class="col-md-6 mb-3">
                                            <label for="sel-barangay"> Barangay <span class="text-muted">*</span></label>
                                            <select class="custom-selectd-block w-100 form-control" id="sel-barangay" name="barangay" required>
                                                <option value="0">Choose Barangay ...</option>
                                            </select>                       
                                        </div>   
                                        <div class="col-md-6 mb-3">
                                            <label for="in-street"> Street <span class="text-muted">*</span></label>
                                            <input type="text" class="form-control" name="street" id="in-street" placeholder="" value="" required>
                                        </div>
                                        <div class="form-group col-12 row p-0">
                                            <div class="col-sm-12 p-0 d-flex justify-content-end">
                                                <button type="button" class="btn btn-danger" id="btn-submit-address">Submit</button>
                                            </div>
                                        </div>                      
                                    </div>   
                                </form>
                            </div>
                            <!-- /.tab-pane -->
                            <!-- /.tab-pane -->
                            <div class="tab-pane" id="contacts">
                                <form class="form-horizontal" id='form-contacts'>
                                    <div class="row">
                                        <div class="form-group col-6">
                                            <label for="mobile-number" class="col-sm-6 col-form-label">Contact Number</label>
                                            <input type="number" class="form-control" id="in-mobile-num" name='mobile-number' placeholder="Mobile Number">
                                        </div>
                                        <!--<div class="form-group col-6">
                                            <label for="email" class="col-sm-6 col-form-label">Email</label>
                                            <input type="email" class="form-control" id="in-email" name='email' placeholder="Email Address">
                                        </div>-->
                                        <div class="form-group col-12 row p-0">
                                            <div class="col-sm-12 p-0">
                                                <div class="col-sm-12 p-0 d-flex justify-content-end">
                                                    <button type="button" class="btn btn-danger" id="btn-submit-contacts">Submit</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <!-- /.tab-pane -->

                            <div class="tab-pane" id="settings">
                                <form class="form-horizontal" id='form-password'>
                                    <!--<div class="form-group row">
                                        <label for="current-password" class="col-sm-2 col-form-label">Current Password</label>
                                        <div class="col-sm-10">
                                            <input type="password" class="form-control" id="current-pass" name='current-pass' placeholder="Current Password">
                                        </div>
                                    </div> -->
                                    <div class="form-group row">
                                        <label for="new-password" class="col-sm-2 col-form-label">New Password</label>
                                        <div class="col-sm-10">
                                            <input type="password" class="form-control" id="new-pass" name='new-pass' placeholder="New Password">
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for="confirm-new-password" class="col-sm-2 col-form-label">Confirm New Password</label>
                                        <div class="col-sm-10">
                                            <input type="password" class="form-control" id="confirmed-pass" name='confirm-new-pass' placeholder="Confirm New Password">
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <div class="offset-sm-2 col-sm-10">
                                            <div class="col-sm-12 p-0 d-flex justify-content-end">
                                                <button type="button" class="btn btn-info mr-1 btn-clear">Clear</button>
                                                <button type="button" class="btn btn-danger" id="btn-submit-password">Submit</button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <!-- /.tab-pane -->
                        </div>
                        <!-- /.tab-content -->
                    </div><!-- /.card-body -->
                </div>
                <!-- /.card -->
            </div>
          <!-- /.col -->
        </div>
        <!-- /.row -->
    </div><!-- /.container-fluid -->
    <div class="modal fade" id="modal-profile-image" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">
                        <i class="fa fa-folder-open"></i> 
                        <span></span>
                    </h4>
                    <button type="button" class="close btn-close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="modal-form-profile-image" enctype="multipart/form-data">
                        {% csrf_token %}
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="form-group d-none">
                                    <input name='LookupID'>
                                </div>   
                                <div class="form-group">
                                    <center>
                                        <img id="image-layout-photo" style="width:auto; height:163px" alt="profile image" />
                                    </center>
                                </div>                            
                                <div class="form-group">
                                    <label class="btn-bs-file btn btn-primary btn-block" id='upload-wrapper'> Upload Photo
                                        <input type='file' class="file-layout-upload"  name='AttachmentName' accept="image/*" style="display: none;"/>
                                    </label>
                                </div>                            
                            </div>
                        </div>                    
                    </form>     
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default btn-close" data-dismiss="modal"><i class="fa fa-window-close"></i> Close</button>
                    <button type="button" class="btn btn-primary display d-none" id="btn-save">
                        <i class="fa fa-floppy"></i> Save changes</button>
                </div>
            </div>
            <!-- /.modal-content --> 
        </div>
        <!-- /.modal-dialog -->
    </div>
{% endblock %}

{% block javascript %}
    {{ block.super }}

    <script src="{% static 'js/profile/profile.js' %}"></script>
    
{% endblock %}