@extends('tenant.layouts.supervisor-wfm')

{{--Tilte Section--}}
@section('title', 'User Management')

{{--Style Section--}}
@section('style')
    <!-- Css file for summernote js plugins  -->


@endsection

{{--Content Section--}}
@section('content')

<div class="container-fluid px-5">

    <!-- Shift managment start -->
    <div class="row p-3">
      <div class="card card shadow p-3   rounded border border-0">
          <div class="card-body" style="padding: 6px 10px 6px 10px;">

            <div class="row">

        <div class="col-sm-12 col-md-6 col-lg-6 p-2">
                <div><h4><span>    <img src="{{asset('img/WFM/nav_menu_Icons/fill/user_managment.png')}}" alt="" style="width: 3%; margin-right:1%; ;" >User Managment</h4></div>
                <div id="fontStyle" >Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus</div>
              </div>
        <div class="col-sm-12 col-md-6 col-lg-6 " style="margin:auto;">
            <div class="row" >
              <div class="col-sm-4" >

                <button id="button" type="button" class="btn btn-success plusButton" data-toggle="modal" data-target="#AddUser" ><span id="plusIcon" ><i class="fa-solid fa-plus" style="color: #ffffff;"></i></span> Add User</button>
              </div>
              <div class="col-sm-4" style="margin:auto;">
                <button id="button" type="button" class="btn btn-success plusButton" data-toggle="modal" data-target="#Edit" ><span id="plusIcon" ><i class="fa-solid fa-pen fa-lg text-decoration-underline" style="color: #ffffff;"></i></span> Edit Title</button>
              </div>
              <div class="col-sm-4" style="margin:auto;">
                <a href="/ResetPassword.html"><button id="button" type="button" class="btn btn-success plusButton" style="background-color: #000000 ; border: none;">Reset Password</button></a>
              </div>
            </div>
          </div>



            </div>
          </div>
        </div>
      </div>

    <!-- Forms  start -->
    <div class="row p-3">
      <div class="card card shadow p-3   rounded border border-0">

        <div class="card-body" >

            <div class="row">
                <div class="col">
                    <label for="exampleFormControlInput1" class="dropDownLabel" >USER ID</label>
                    <input type="text"  class="form-control" id="userId" placeholder="" style="border: 1px solid rgb(172, 172, 172);padding: 10px;border-radius: 10px;">
                  </div>
                <div class="col">
                    <label for="Year" class="dropDownLabel">Status</label>
                    <div class="dropdown">
                      <button id="dropDownLest" class="btn btn-light dropdown-toggle custom_arrow shadow" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <span>Select All</span>
                      </button>
                      <div id="dropdownMenu" class="dropdown-menu custom_arrow-dr" aria-labelledby="dropdownMenuButton">
                        <a id="dropdownItem" class="dropdown-item" href="#" style="color: #00A34E;">&#x2022; Active</a>
                        <li><hr class="dropdown-divider"></li>
                        <a id="dropdownItem" class="dropdown-item" href="#" style="color: red;">&#x2022; Not Active </a>

                      </div>
                    </div>
                  </div>
                <div class="col">
                    <label for="Year" class="dropDownLabel">To</label>
                    <div class="dropdown">
                      <button id="dropDownLest" class="btn btn-light dropdown-toggle custom_arrow shadow" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <span>Select All</span>
                      </button>
                      <div id="dropdownMenu" class="dropdown-menu custom_arrow-dr" aria-labelledby="dropdownMenuButton">
                        <a id="dropdownItem" class="dropdown-item" href="#" ><img src="{{asset('img/WFM/Title/manager.png')}}" alt="" width="25px"> Manager</a>
                         <li><hr class="dropdown-divider"></li>
                        <a id="dropdownItem" class="dropdown-item" href="#" ><img src="{{asset('img/WFM/Title/supervisor.png')}}" alt="" width="25px"> supervisor </a>
                         <li><hr class="dropdown-divider"></li>
                        <a id="dropdownItem" class="dropdown-item" href="#" ><img src="{{asset('img/WFM/Title/team Leader.png')}}" alt="" width="25px"> Team Leader </a>
                         <li><hr class="dropdown-divider"></li>
                        <a id="dropdownItem" class="dropdown-item" href="#" ><img src="{{asset('img/WFM/Title/CSR.png')}}" alt="" width="25px"> CSR </a>
                         <li><hr class="dropdown-divider"></li>
                        <a id="dropdownItem" class="dropdown-item" href="#" ><img src="{{asset('img/WFM/Title/WFM.png')}}" alt="" width="25px"> WFM </a>
                         <li><hr class="dropdown-divider"></li>
                        <a id="dropdownItem" class="dropdown-item" href="#" ><img src="{{asset('img/WFM/Title/.png')}}" alt="" width="25px"> Others </a>

                      </div>
                    </div>
                  </div>
                  <div class="col-sm-3"style="margin:auto;">

                        <button id="button" type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#NewSkill" style="background-color: #00A34E ; width: 60%;height: 46px; margin: 9% 2% 0% 10%;">Apply</button>

                  </div>

            </div>
          </div>
        </div>
      </div>
    <!-- Forms End -->

    <!-- Table start -->

    <div class="card card shadow p-3 rounded border border-0" style="padding-bottom: 3%; margin-top:25px">
      <div class="card-body">
<div class="table-responsive">
    <!-- <table class="table table-bordered ">
      <thead class="table-light" style="text-align: center;">
        <tr>

          <th style="text-align: center;" scope="col">NAME</th>
          <th style="text-align: center;" scope="col">USER ID</th>
          <th style="text-align: center;" scope="col">STATUS</th>
          <th style="text-align: center;" scope="col">TITLE</th>

        </tr>
      </thead>
      <tbody>
        <tr>
          <td style="text-align: center;" >hassan mohammad naser</td>
          <td style="text-align: center;" ><span class="greenIcon">#443534</span></td>
          <td style="text-align: center; color: #00A34E;">&#x2022; Active</td>
          <td style="text-align: center;" >Super User WFM</td>
        <tr>
        <tr>
          <td style="text-align: center;" >hassan mohammad naser</td>
          <td style="text-align: center;" ><span class="greenIcon">#443534</span></td>
          <td style="text-align: center; color: #00A34E;">&#x2022; Active</td>
          <td style="text-align: center;" >Super User WFM</td>
        <tr>
        <tr>
          <td style="text-align: center;" >hassan mohammad naser</td>
          <td style="text-align: center;" ><span class="greenIcon">#443534</span></td>
          <td style="text-align: center; color: red;">&#x2022;Not Active</td>
          <td style="text-align: center;" >Super User WFM</td>
        <tr>

      </tbody>
    </table> -->
    <div class="card-body"style="text-align: center;">
        <img src="{{asset('img/WFM/noSelected/user_managment.png')}}" alt=""  >
        <h2>Enter User Id</h2>
      </div>
    </div>
      </div>
    </div>
    <!-- Table End -->

    <!--Add User popuo start -->
    <div class="modal fade" id="AddUser" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true" >
      <div class="modal-dialog modal-dialog-centered" role="document"   >
        <div class="modal-content" >
          <div class="modal-header" id="modalHeader">
            <h5 class="modal-title" id="exampleModalLongTitle">Add New User</h5>
            <i aria-hidden="true" type="button" data-bs-dismiss="modal" aria-label="Close"><img width="35px" src="{{asset('img/remove.png')}}" alt="" ></i>

          </div>
          <div class="modal-body">
            <form>
                <div class="row">
                    <div class="col-sm-6" style="margin: 3% 0% 3% 0%;">
                        <div class="form-group">

                          <label for="exampleInputEmail1"><h6 id="fontStyle" >User ID</h6></label>
                          <input type="Name"  class="form-control" id="Name" placeholder="" style="border: 1px solid rgb(172, 172, 172);padding: 10px;border-radius: 10px;">
                        </div>
                      </div>
                    <div class="col-sm-6" style="margin: 3% 0% 3% 0%;">
                        <div class="form-group">

                          <label for="exampleInputEmail1"><h6 id="fontStyle" >CSR Name</h6></label>
                          <input type="Name"  class="form-control" id="Name" placeholder="" style="border: 1px solid rgb(172, 172, 172);padding: 10px;border-radius: 10px;">
                        </div>
                      </div>
                    <div class="col-sm-6" style="margin: 3% 0% 3% 0%;">
                        <div class="form-group">

                          <label for="exampleInputEmail1"><h6 id="fontStyle" >password</h6></label>
                          <input type="password"  class="form-control" id="password" placeholder="" style="border: 1px solid rgb(172, 172, 172);padding: 10px;border-radius: 10px;">
                        </div>
                      </div>
                    <div class="col-sm-6" style="margin: 3% 0% 3% 0%;">
                        <div class="form-group">

                          <label for="exampleInputEmail1"><h6 id="fontStyle" >Extensya Email</h6></label>
                          <input type="email"  class="form-control" id="email" placeholder="" style="border: 1px solid rgb(172, 172, 172);padding: 10px;border-radius: 10px;">
                        </div>
                      </div>
                    <div style="margin: 3% 0% 3% 0%;" class="col-sm-6">

                      <label for="exampleInputEmail1"><h6 id="fontStyle" >Title</h6></label>
                      <div class="dropdown">
                        <button id="dropDownLest" class="btn btn-light dropdown-toggle custom_arrow shadow" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                          <span>Select</span>
                        </button>
                        <div id="dropdownMenu" class="dropdown-menu custom_arrow-dr" aria-labelledby="dropdownMenuButton">
                        <a id="dropdownItem" class="dropdown-item" href="#" ><img src="{{asset('img/WFM/Title/manager.png')}}" alt="" width="25px"> Manager</a>
                         <li><hr class="dropdown-divider"></li>
                        <a id="dropdownItem" class="dropdown-item" href="#" ><img src="{{asset('img/WFM/Title/supervisor.png')}}" alt="" width="25px"> supervisor </a>
                         <li><hr class="dropdown-divider"></li>
                        <a id="dropdownItem" class="dropdown-item" href="#" ><img src="{{asset('img/WFM/Title/team Leader.png')}}" alt="" width="25px"> Team Leader </a>
                         <li><hr class="dropdown-divider"></li>
                        <a id="dropdownItem" class="dropdown-item" href="#" ><img src="{{asset('img/WFM/Title/CSR.png')}}" alt="" width="25px"> CSR </a>
                         <li><hr class="dropdown-divider"></li>
                        <a id="dropdownItem" class="dropdown-item" href="#" ><img src="{{asset('img/WFM/Title/WFM.png')}}" alt="" width="25px"> WFM </a>
                         <li><hr class="dropdown-divider"></li>
                        <a id="dropdownItem" class="dropdown-item" href="#" ><img src="{{asset('img/WFM/Title/.png')}}" alt="" width="25px"> Others </a>


                        </div>
                      </div>
                    </div>

                  </div>
            </form>
          </div>

          <div style="text-align: center; margin: 7% 0% 6% 0%;" >
          <button type="button" id="submitButton" class="btn" >Submit</button>
          <button type="button" id="closeButton"  class="btn" data-dismiss="modal" >Close</button>
        </div>

        </div>
      </div>
    </div>
    <!--ADd User popuo start -->

    <!-- Edit popup start-->
    <div class="modal fade" id="Edit" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true" >
      <div class="modal-dialog modal-dialog-centered" role="document"   >
        <div class="modal-content" >
          <div class="modal-header" id="modalHeader">
            <h5 class="modal-title" id="exampleModalLongTitle">Edit Employee Title</h5>

            <i aria-hidden="true" type="button" data-bs-dismiss="modal" aria-label="Close"><img width="35px" src="{{asset('img/remove.png')}}" alt="" ></i>

          </div>
          <div class="modal-body">
            <form>
                <div class="row">
                    <div class="col-sm-12" style="margin: 3% 0% 3% 0%;">
                        <div class="form-group">

                          <label for="exampleInputEmail1"><h6 id="fontStyle" >User ID</h6></label>
                          <input type="Name"  class="form-control" id="Name" placeholder="" style="border: 1px solid rgb(172, 172, 172);padding: 10px;border-radius: 10px;">
                        </div>
                      </div>

                    <div style="margin: 3% 0% 3% 0%;" class="col-sm-12">

                      <label for="exampleInputEmail1"><h6 id="fontStyle" >Title</h6></label>
                      <div class="dropdown">
                        <button id="dropDownLest" class="btn btn-light dropdown-toggle custom_arrow shadow" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                          <span style="margin-right: 85%;">Select</span>
                        </button>
                        <div id="dropdownMenu" class="dropdown-menu custom_arrow-dr" aria-labelledby="dropdownMenuButton">
                        <a id="dropdownItem" class="dropdown-item" href="#" ><img src="{{asset('img/WFM/Title/manager.png')}}" alt="" width="25px"> Manager</a>
                        <a id="dropdownItem" class="dropdown-item" href="#" ><img src="{{asset('img/WFM/Title/supervisor.png')}}" alt="" width="25px"> supervisor </a>
                        <a id="dropdownItem" class="dropdown-item" href="#" ><img src="{{asset('img/WFM/Title/team Leader.png')}}" alt="" width="25px"> Team Leader </a>
                        <a id="dropdownItem" class="dropdown-item" href="#" ><img src="{{asset('img/WFM/Title/CSR.png')}}" alt="" width="25px"> CSR </a>
                        <a id="dropdownItem" class="dropdown-item" href="#" ><img src="{{asset('img/WFM/Title/WFM.png')}}" alt="" width="25px"> WFM </a>
                        <a id="dropdownItem" class="dropdown-item" href="#" ><img src="{{asset('img/WFM/Title/.png')}}" alt="" width="25px"> Others </a>


                        </div>
                      </div>
                    </div>

                  </div>

            </form>
          </div>

          <div style="text-align: center; margin: 7% 0% 6% 0%;" >
          <button type="button" id="submitButton" class="btn" >Submit</button>
          <button type="button" id="closeButton"  class="btn" data-dismiss="modal" >Close</button>
        </div>
        </div>
      </div>
    </div>
    <!-- Edit popup end-->

</div>

@endsection

{{--Script Section--}}
@section('script')
<script>


</script>

@endsection