@extends('admin.layout.app')

@section('title', 'User Management')

@section('content')
<div class="page-content-wrapper">
    <!-- TOPBAR -->
    <div class="top_bar page-content">
    <!-- LOADER -->
        <div class="loader">
            <div class="top_status_bar load">
                <div class="progress_bar bar" style="left: 0px;"></div>
            </div>
        </div>
        <!-- END LOADER -->
        <!-- BREADCRUMBS -->
        <div class="breadcrumbs">
            <ul>
                <li><a href="{{ route('admin.dashboard') }}">Home</a></li>
                <li><a href="#" class="breadcrumb_link" onclick="return false">User Management</a></li>
            </ul>
            <button class="btn btn-large pull-right help theme_btn help_btn">?</button>
        </div>
        <!-- END BREADCRUMBS -->
    </div>
    <!-- END TOPBAR -->
    <div class="tab-content">
        <div class="tab-pane active" id="summery">
            @include('admin.modules.general.user_mgt')
        </div>
    </div>
</div>
<div class="modal scrollable fade bs-modal right modal-fullscreen r_u_sure in" id="new_filesAdd" role="dialog" aria-hidden="false" style="">
        <div class="sweet-overlay" tabindex="-1"></div>
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <form method="post" id="updateEmployee" class="employee_update_form">
                    <div class="modal-header">
                        <button type="button" class="close close_popup" data-dismiss="modal">×</button>
                        <h3 class="pop_heading">ADD NEW USER</h3>
                    </div>
                    <div class="modal-body">
                        <div class="body_wrap">
                            <div class="row">
                                <!--LEFT SIDE-->
                                <div class="col-md-4 left_side_task p_0">
                                    <div class="rows_wrap">
                                        <div class="sidebar_list">
                                            <div class="display_pic">
                                                <a class="overlay btn-image-upload" data-toggle="modal" href="#modal_image_uplaod" data-modal-name="Customer Profile Images" data-modal-field="customer_profile_pic_path">
                                                    <i class="fa fa-camera"></i>
                                                </a>
                                                <img class="display_picture" src="images/avatar2.png">
                                            </div>
                                            <span class="each_option basic_info active_option" id_attr="basic_info">Basic information</span>
                                            <span class="each_option staff_info" id_attr="staff_info">Role</span>
                                            <span class="each_option system_user_info" id_attr="system_user_info">Login Credentials</span>
                                        </div>
                                    </div>
                                </div>
                                <!--LEFT SIDE-->
                                <!--RIGHT SIDE-->
                                <div class="col-md-8 pl_pr_0 right_side_task update_staff_data ">
                                    <div id="basic_info">
                                        <span class="main_label">Basic Information</span>
                                        <div class="rows_wrap">
                                            <div class="row m_0">
                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                        <label for="title">Title *</label>
                                                        <select class="form-control select2 title filter validate select2-hidden-accessible" name="title" id="title" tabindex="-1" aria-hidden="true">
                                                            <option value=""></option>
                                                            <option value="Mr">Mr</option>
                                                            <option value="Mrs">Mrs</option>
                                                            <option value="Ms">Ms</option>
                                                            <option value="Dr">Dr</option>
                                                            <option value="Sh">Sh</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row m_0">
                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                        <label for="firstname">First name *</label>
                                                        <input class="form-control first_name validate" id="first_name" type="text" name="first_name" value="" autocomplete="off">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row m_0">
                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                        <label for="lastname">Last name *</label>
                                                        <input class="form-control last_name validate" id="last_name" type="text" name="last_name" value="" autocomplete="off">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row m_0">
                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                        <label for="mobile">Telephone</label>
                                                        <!-- <input id="int_phone" name="phone" type="tel"> -->
                                                        <input id="int_phone" name="mobile" type="tel" class="form-control just_number mobile validate phone" value="">
                                                        <!-- <input id="mobile" name="mobile" class="form-control just_number mobile validate phone" type="text" value=""> -->
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row m_0">
                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                        <label for="whatsapp">WhatsApp</label>
                                                        <input class="form-control last_name validate" id="whatsApp" type="text" name="whatsApp" value="" autocomplete="off">
                                                        <div class="intl-tel-input allow-dropdown">
                                                            <div class="flag-container">
                                                                <div class="selected-flag" tabindex="0" title="Saudi Arabia (&#8235;المملكة العربية السعودية&#8236;&lrm;): +966">
                                                                    <div class="iti-flag sa"></div>
                                                                    <div class="iti-arrow"></div>
                                                                </div>
                                                                <ul class="country-list hide">
                                                                    <li class="country preferred" data-dial-code="971" data-country-code="ae">
                                                                        <div class="flag-box">
                                                                            <div class="iti-flag ae"></div>
                                                                        </div>
                                                                        <span class="country-name">United Arab Emirates (&#8235;الإمارات العربية المتحدة&#8236;&lrm;)</span>
                                                                        <span class="dial-code">+971</span>
                                                                    </li>
                                                                    <li class="country preferred active" data-dial-code="966" data-country-code="sa">
                                                                        <div class="flag-box">
                                                                            <div class="iti-flag sa"></div>
                                                                        </div>
                                                                        <span class="country-name">Saudi Arabia (&#8235;المملكة العربية السعودية&#8236;&lrm;)</span>
                                                                        <span class="dial-code">+966</span>
                                                                    </li>
                                                                    <li class="divider"></li>
                                                                    <li class="country" data-dial-code="93" data-country-code="af">
                                                                        <div class="flag-box">
                                                                            <div class="iti-flag af"></div>
                                                                        </div>
                                                                        <span class="country-name">Afghanistan (&#8235;افغانستان&#8236;&lrm;)</span>
                                                                        <span class="dial-code">+93</span>
                                                                    </li>
                                                                    <li class="country" data-dial-code="355" data-country-code="al">
                                                                        <div class="flag-box">
                                                                            <div class="iti-flag al"></div>
                                                                        </div>
                                                                        <span class="country-name">Albania (Shqipëri)</span>
                                                                        <span class="dial-code">+355</span>
                                                                    </li>
                                                                    <li class="country" data-dial-code="213" data-country-code="dz">
                                                                        <div class="flag-box">
                                                                            <div class="iti-flag dz"></div>
                                                                        </div>
                                                                        <span class="country-name">Algeria (&#8235;الجزائر&#8236;&lrm;)</span>
                                                                        <span class="dial-code">+213</span>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row m_0">
                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                        <label for="email">Email *</label>
                                                        <input name="email" class="form-control validate email" type="text" value="">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="rows_wrap">
                                        <div class="row m_0" id="employee_bo_module" style="display: block;">
                                            <div id="backoffice_permission_div">
                                                <span class="main_label">Role</span> 
                                                <div class="row m_0">
                                                    <div class="col-md-12">
                                                        <div class="form-group">
                                                            <label for="role">Role</label>
                                                            <select class="form-control select2 title filter validate select2-hidden-accessible" name="title" id="title" tabindex="-1" aria-hidden="true">
                                                                <option value=""></option>
                                                                <option value="Mr">SEO</option>
                                                                <option value="Mrs">Content Writer</option>
                                                                <option value="Ms">Designer</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div> 
                                    </div>      	
                                    <div id="system_user_info">
                                        <span class="main_label">Login Credentials</span>
                                        <!-- <span class="main_label">System user information</span> -->
                                        <div class="rows_wrap">
                                            <div class="row m_0">
                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                        <label for="system_user_name">User name</label>
                                                        <input type="hidden" id="user_name_updated" value="">
                                                        <input class="form-control system_user_name" type="text" name="system_user_name" value="" autocomplete="off">
                                                    </div>
                                                </div>
                                            </div>
                                                
                                            <div class="row m_0">
                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                        <label for="password">Password</label>
                                                        <input class="form-control password" type="password" name="password" value="" autocomplete="off">
                                                    </div>
                                                </div>
                                            </div>
                                                
                                            <div class="row m_0">
                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                        <label for="password">Confirm Password</label>
                                                        <input class="form-control password" type="password" name="password" value="" autocomplete="off">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="contact_new" style="display: none;">
                                            <input type="hidden" name="contact_info_update" value="0" class="contact_info_update">
                                            <div class="row m_0">
                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                        <label for="">Title *</label>
                                                        <select class="form-control select2 lead_contact_title filter contact_field select2-hidden-accessible" name="lead_contact_title" tabindex="-1" aria-hidden="true" disabled="disabled">
                                                            <option value=""></option>
                                                            <option value="Mr">Mr</option>
                                                            <option value="Miss">Miss</option>
                                                            <option value="Dr">Dr</option>
                                                        </select>
                                                        <span class="select2 select2-container select2-container--default select2-container--disabled" dir="ltr" style="width: 100px;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="-1" aria-labelledby="select2-lead_contact_title-uq-container"><span class="select2-selection__rendered" id="select2-lead_contact_title-uq-container"><span class="select2-selection__placeholder">--Select--</span></span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row m_0">
                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                        <label for="">First Name *</label>
                                                        <input type="text" name="lead_contact_first_name" class="form-control lead_contact_first_name contact_field" disabled="disabled">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>    
                    </div>                      
                    <div class="modal-footer">
                        <div class="row" style="">
                            <div class="col-sm-6">
                                <div class="alert_box">There are errors on page</div>
                            </div>
                            <div class="col-sm-6">
                                <button type="button" class="btn dismiss" data-dismiss="modal">Cancel</button>
                                <button type="submit" class="btn theme_btn_round save_staff" data-save="1"> Save</button>
                            </div>
                        </div>
                    </div>
                                <!--RIGHT SIDE-->
                            
                         
                    </div>
                </form>    
            </div>            
        </div>
    </div>

@stop

@section('css')
<link rel="stylesheet" type="text/css" href="{{ asset('css/sweetalert.css') }}" />
<link rel="stylesheet" type="text/css" href="{{ asset('css/croppie.css') }}" />
<link rel="stylesheet" type="text/css" href="{{ asset('global/bootstrap-timepicker/css/bootstrap-timepicker.min.css') }}" />
<style>
    a.theme_btn_round:focus,
        a.theme_btn_round:active,
        .theme_btn_round:hover {
            color: #fff !important;
            background: #74d1da;
            border-color: #74d1da;
        }

        table.dataTable thead .sorting_asc:after {
            display: none;
        }
        .user_management_wrap {
            margin-top: 50px;
        }
        .user_management_wrap .tb_search{
            margin-top: -43px;
        }

        .modal-fullscreen.modal .modal-body{
            overflow-x: hidden;
        }

        .modal.uplaod_wrap  {z-index: 99999 !important;}
</style>
@stop

@section('js')
@include('admin.modules.user_mgt.js.index')
@stop