@extends('gcash.layout.master')
@section('pageTitle')
  <title>Dashboard</title>
  <link rel="stylesheet" href="/css/invoice.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
@endsection
@section('metaCSRF')
  <meta name="csrf-token" content="{{ csrf_token() }}">
@endsection
@section('contents')
  <style>
    .restriction-cls {
      font-size:0.9em;
    }
    .user-alerts {
      display:none;
      padding:20px;
      border-radius:4px;
    }
    .dataTables_filter {
      display: none;
    }
    #usertable th{
      width:auto !important;
    }
    .currency-conversion {
      display:none;
    }
  </style>
  <div class="single-pro-review-area mt-t-30 mg-b-15">
    <div class="container-fluid">
      <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
          <div class="product-payment-inner-st">
            <ul id="myTabedu1" class="tab-review-design">
              <li class="active"><a href="#basicinfo">Create User</a></li>
              <li><a id="accountinfo-select" href="#accountinfo">Users List</a></li>
            </ul>
            <div id="myTabContent" class="tab-content custom-product-edit">
              <div class="product-tab-list tab-pane fade active in" id="basicinfo">
                <div class="basic-form-area mg-b-15">
                  <div class="container-fluid">
                    <form id="add-user-form">
                      <div class="row">
                        <div class="col-lg-5 col-md-5 col-sm-5 col-xs-12">
                            <div class="sparkline8-list mt-b-30">
                            <div class="sparkline8-hd">
                                <div class="main-sparkline8-hd">
                                    <h1>Basic Information</h1>
                                </div>
                            </div>
                            <div class="sparkline8-graph">
                              <div class="basic-login-form-ad">
                                <div class="row">
                                  <div class="col-lg-12">
                                    <div class="basic-login-inner" style="border:1px solid rgba(0,0,0,0.1);padding:20px;">
                                      <div class="form-group-inner">
                                        <label>First Name</label>
                                        <input type="text" name="firstname" class="form-control" placeholder="Enter Firstname" />
                                      </div>
                                      <div class="form-group-inner">
                                        <label>Last Name</label>
                                        <input type="text" name="lastname" class="form-control" placeholder="Enter Lastname" />
                                      </div>
                                      <div class="form-group-inner">
                                        <label>Email Address</label>
                                        <input type="email" name="email" class="form-control" placeholder="Enter Email Address" />
                                      </div>
                                      <div class="form-group-inner">
                                        <label>Contact Number</label>
                                        <input type="text" name="contact" class="form-control" placeholder="Enter Contact Number" />
                                      </div>
                                      <div class="row">
                                        <div class="col-lg-12">
                                          <h4 id="success-mgs" style="display:none;color:green;"></h4>
                                          <div id="error-mgs" style="display:none;color:red;">
                                              <strong>Unable to Continue!</strong> The following are required.
                                              <p id="error-mgs-data"></p>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                          <div class="sparkline8-list mt-b-30">
                            <div class="sparkline8-hd">
                              <div class="main-sparkline8-hd">
                                <h1>Account Information</h1>
                              </div>
                            </div>
                            <div class="sparkline8-graph">
                                <div class="basic-login-form-ad" style="padding:20px;margin-top:10px;border:1px solid rgba(0,0,0,0.1);">
                                  <div class="row">
                                    <div class="col-lg-12">
                                      <div class="basic-login-inner">
                                        <div class="row">
                                          <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                            <div class="form-group-inner">
                                              <label>User Name</label>
                                              <input type="text" name="username" class="form-control" placeholder="Enter Username" />
                                            </div>
                                            <div class="form-group-inner">
                                                <label>User Type</label>
                                                <select id="usertype" name="type" class="form-control">
                                                  <option value="" selected="" disabled="">Select User Type</option>
                                                  <option value="Standard">Standard</option>
                                                  <option value="Administrator">Administrator</option>
                                                </select>
                                            </div>
                                          </div>
                                          <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                            <div class="form-group-inner">
                                                <label>Password</label>
                                                <input type="password" name="password" class="form-control" placeholder="Type Password" />
                                            </div>
                                            <div class="form-group-inner">
                                                <label>Confirm Password</label>
                                                <input type="password" name="conpassword" class="form-control" placeholder="Type Password" />
                                            </div>
                                          </div>
                                        </div>
                                        <br>
                                        <div class="row">
                                          <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                            <div class="form-group-inner">
                                                <label>Branch</label>
                                                <select id="branchname-select" name="branch" class="form-control">
                                                  <option value="">--- Select Branch ---</option>
                                                  @if(isset($branches))
                                                    @foreach($branches as $branchdata)
                                                      <option value="{{$branchdata['branchcode']}}">{{$branchdata['branchname']}}</option>
                                                    @endforeach
                                                  @endif
                                                </select>
                                            </div>
                                          </div>
                                          <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                            <div class="form-group-inner">
                                                <label>Branch Code</label>
                                                <input id="branchcode" type="text" name="branchcode" class="form-control"/>
                                            </div>
                                          </div>
                                        </div>

                                        <div class="inner-restriction" style="margin-top:30px;padding:20px;">
                                          <label>Restrictions</label>
                                          <div class="row" style="padding:20px 0 20px 0;border-top:1px solid rgba(0,0,0,0.1);border-bottom:1px solid rgba(0,0,0,0.1);">
                                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                              <div class="form-group-inner">
                                                <label class="container-checkbox"><span class="restriction-cls">Dashboard</span>
                                                  <input class="restriction-input" id="dashboard" name="dashboard" type="checkbox" value="1">
                                                  <span class="checkmark"></span>
                                                </label>
                                              </div>
                                              <div class="form-group-inner">
                                                <label class="container-checkbox"><span class="restriction-cls">GCash</span>
                                                  <input class="restriction-input" id="gcash" name="gcash" type="checkbox" value="1">
                                                  <span class="checkmark"></span>
                                                </label>
                                              </div>
                                              <div class="form-group-inner">
                                                <label class="container-checkbox"><span class="restriction-cls">Customer</span>
                                                  <input class="restriction-input" id="customer" name="customer" type="checkbox" value="1">
                                                  <span class="checkmark"></span>
                                                </label>
                                              </div>
                                            </div>
                                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">

                                              <div class="form-group-inner">
                                                <label class="container-checkbox"><span class="restriction-cls">Branch</span>
                                                  <input class="restriction-input" id="branch" name="branch" type="checkbox" value="1">
                                                  <span class="checkmark"></span>
                                                </label>
                                              </div>
                                              <div class="form-group-inner">
                                                <label class="container-checkbox"><span class="restriction-cls">User</span>
                                                  <input class="restriction-input" id="user" name="user" type="checkbox" value="1">
                                                  <span class="checkmark"></span>
                                                </label>
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                        <div class="col-lg-12">
                                          <div class="login-btn-inner">
                                              <div class="inline-remember-me">
                                                  <button id="add-user-form-btn" class="btn btn-info" type="submit">Save</button>
                                                  <button id="reset-user-form-btn" class="btn btn-warning" type="reset">Reset</button>
                                              </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </form>
                  </div>
                </div>
              </div>
              <div class="product-tab-list tab-pane" id="accountinfo">
                <div class="basic-form-area mg-b-15">
                  <div class="container-fluid" style="padding:20px;border: 1px solid rgba(0,0,0,0.05);">
                      <div class="row">
                        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                            <div class="sparkline8-hd">
                                <div class="main-sparkline8-hd">
                                    <h1>Users</h1>
                                </div>
                            </div>
                            <div class="sparkline8-graph">
                              <div class="basic-login-form-ad">
                                <div class="row">
                                  <div class="col-lg-12">
                                    <div class="basic-login-inner" style="border:1px solid rgba(0,0,0,0.1);padding:20px;">
                                      <div class="sparkline13-graph">
                                          <div class="form-group">
                                              <input id="myInputTextField" type="text" class="form-control" placeholder="Search Here...">
                                          </div>
                                          <div class="datatable-dashv1-list custom-datatable-overright" style="border:1px solid rgba(0,0,0,0.1);padding:20px;">
                                              <table id="usertable" class="hover">
                                                  <thead>
                                                      <tr>
                                                          <th>User Name</th>
                                                          <th>Full Name</th>
                                                          <th>User Type</th>
                                                          <th></th>
                                                      </tr>
                                                  </thead>
                                                  <tbody></tbody>
                                              </table>
                                          </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                            <div class="sparkline8-hd">
                              <div class="main-sparkline8-hd">
                                <h1>Account Information</h1>
                              </div>
                            </div>
                            <form id="update-user-form">
                              <div class="sparkline8-graph">
                                  <div class="basic-login-form-ad" style="padding:20px;margin-top:10px;border:1px solid rgba(0,0,0,0.1);">
                                    <div class="row">
                                      <div class="col-lg-12">
                                        <div class="basic-login-inner">
                                          <div class="row">
                                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                              <div class="form-group-inner">
                                                <label>First Name</label>
                                                <input type="text" id="ifirstname" name="firstname" class="form-control" placeholder="" />
                                              </div>
                                              <div class="form-group-inner">
                                                <label>User Name</label>
                                                <input type="text" id="iusername" name="username" class="form-control" placeholder="" />

                                              </div>
                                            </div>
                                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                              <div class="form-group-inner">
                                                  <label>Last Name</label>
                                                  <input type="text" id="ilastname" name="lastname" class="form-control" placeholder="" />
                                              </div>
                                              <div class="form-group-inner">
                                                <label>User Type</label>
                                                <select id="iusertype" name="type" class="form-control">
                                                  <option value="" selected="" disabled="">Select User Type</option>
                                                  <option value="Standard">Standard</option>
                                                  <option value="Administrator">Administrator</option>
                                                </select>
                                              </div>
                                            </div>
                                          </div>
                                          <div class="inner-restriction" style="margin-top:30px;padding:20px;">
                                            <div class="row" style="padding:20px 0 20px 0;border-top:1px solid rgba(0,0,0,0.1);border-bottom:1px solid rgba(0,0,0,0.1);">
                                              <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                                <div class="form-group-inner">
                                                  <label class="container-checkbox"><span class="restriction-cls">Dashboard</span>
                                                    <input class="restriction-input" id="idashbaord" name="dashbaord" type="checkbox" value="1">
                                                    <span class="checkmark"></span>
                                                  </label>
                                                </div>
                                                <div class="form-group-inner">
                                                  <label class="container-checkbox"><span class="restriction-cls">GCash</span>
                                                    <input class="restriction-input" id="iaddclient" name="addclient" type="checkbox" value="1">
                                                    <span class="checkmark"></span>
                                                  </label>
                                                </div>
                                                <div class="form-group-inner">
                                                  <label class="container-checkbox"><span class="restriction-cls">Customer</span>
                                                    <input class="restriction-input" id="iupdateclient" name="updateclient" type="checkbox" value="1">
                                                    <span class="checkmark"></span>
                                                  </label>
                                                </div>
                                              </div>
                                              <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">

                                                <div class="form-group-inner">
                                                  <label class="container-checkbox"><span class="restriction-cls">Branch</span>
                                                    <input class="restriction-input" id="iaddsupplier" name="addsupplier" type="checkbox" value="1">
                                                    <span class="checkmark"></span>
                                                  </label>
                                                </div>
                                                <div class="form-group-inner">
                                                  <label class="container-checkbox"><span class="restriction-cls">User</span>
                                                    <input class="restriction-input" id="iupdatesupplier" name="updatesupplier" type="checkbox" value="1">
                                                    <span class="checkmark"></span>
                                                  </label>
                                                </div>
                                              </div>
                                            </div>
                                          </div>
                                          <div class="col-lg-12">
                                            <div class="login-btn-inner">
                                              <div class="form-group-inner">
                                                <label class="container-checkbox"><span class="restriction-cls">Is Active?</span>
                                                  <input class="restriction-input" id="istatus" name="status" type="checkbox" value="1">
                                                  <span class="checkmark"></span>
                                                </label>
                                              </div>
                                                <div class="inline-remember-me">