@extends('layouts.master')

@section('title')
  LT-168 :: จัดการสิทธิ์การเข้าถึงของผู้ช่วย
@endsection

@section('sub_title')
  จัดการสิทธิ์การเข้าถึงของผู้ช่วย
@endsection

@section('content')
  <div class="row">
    <div class="col-lg-12">
      <div class="card">
        <div class="card-header border-0">
          <div class="row align-items-center">
            <div class="col">
              <h3 class="mb-0">ผู้ช่วยเอเยนต์</h3>
            </div>
            <div class="col text-right">
              <a href="#addItemModal" data-toggle="modal" class="btn btn-sm btn-primary">
                <i class="fas fa-user-plus mr-1"></i>
                เพิ่มผู้ช่วย
              </a>
            </div>
          </div>
        </div>
        <div class="card-body table-responsive py-3">
          <table class="table table-sm table-bordered table-hover">
            <thead>
              <tr>
                <th class="align-middle text-center font-weight-bold">#</th>
                <th class="align-middle text-center font-weight-bold">ชื่อผู้ใช้</th>
                <th class="align-middle text-center font-weight-bold">ชื่อ - นามสกุล</th>
                <th class="align-middle text-center font-weight-bold"></th>
              </tr>
            </thead>
            <tbody>
              @php
                $i = 0;
              @endphp
              @foreach ($assistants as $assistant)
                <tr>
                  <td class="align-middle text-center font-weight-bold">{{ ++$i }}</td>
                  <td class="align-middle text-center font-weight-bold text-primary">{{ $assistant->username }}</td>
                  <td class="align-middle text-center font-weight-bold">{{ $assistant->name }}</td>
                  <td class="align-middle text-center font-weight-bold">
                    <button data-toggle="dropdown" class="btn btn-outline-dark btn-sm btn-icon-only rounded-circle"><i
                        class="fas fa-ellipsis-v"></i></button>
                    <div class="dropdown-menu">
                      <a class="dropdown-item" href="javascript:;" onclick="showActivity(this)"
                        data-item='{!! json_encode($assistant->activity) !!}'>
                        <i class="fas fa-history"></i> ประวัติการใช้งาน
                      </a>
                      <a class="dropdown-item" href="javascript:;" onclick="editItem(this)"
                        data-item='{!! json_encode($assistant) !!}'><i class="fas fa-wrench fa-fw"></i> แก้ไขข้อมูล</a>
                      <a class="dropdown-item text-danger" href="javascript:;" onclick="removeItem(this)"
                        data-id="{{ $assistant->id }}"><i class="fas fa-user-minus fa-fw"></i> ลบผู้ช่วย</a>
                    </div>
                  </td>
                </tr>
              @endforeach
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="addItemModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <form onsubmit="formSubmitHandler(event, this)" class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">เพิ่มผู้ช่วย</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <label>ชื่อผู้ใช้</label>
          <div class="input-group mb-3">
            <input type="text" class="form-control" name="username" placeholder="ชื่อผู้ใช้ผู้ช่วย"
              aria-label="ชื่อผู้ใช้ผู้ช่วย" aria-describedby="basic-addon2" />
            <div class="input-group-append">
              <span class="input-group-text" id="basic-addon2">{{ '@' . Auth::user()->username }}</span>
            </div>
          </div>
          <div class="form-group">
            <label for="input_fullname">ชื่อ - นามสกุล</label>
            <input type="text" class="form-control" name="full_name" id="input_fullname"
              placeholder="กรุณากรอกชื่อ - นามสกุล" />
          </div>
          <div class="form-group">
            <label for="input_password">รหัสผ่าน</label>
            <input type="password" class="form-control" id="input_password" name="password" placeholder="รหัสผ่าน" />
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">ปิด</button>
          <button type="submit" class="btn btn-primary">
            <i class="fas fa-user-plus"></i> เพิ่มผู้ช่วย
          </button>
        </div>
      </form>
    </div>
  </div>

  <div class="modal fade" id="editItemModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <form class="modal-content">
        @method('PUT')
        <div class="modal-header">
          <h5 class="modal-title">แก้ไขผู้ช่วย</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <label>ชื่อผู้ใช้</label>
          <div class="form-group">
            <label for="input_username">ชื่อผู้ใช้</label>
            <input type="text" class="form-control" name="username" id="input_username" readonly />
          </div>
          <div class="form-group">
            <label>ชื่อ - นามสกุล</label>
            <input type="text" class="form-control" name="fullname" placeholder="กรุณากรอกชื่อ - นามสกุล" />
          </div>
          <div class="form-group">
            <label>รหัสผ่าน</label>
            <input type="password" class="form-control" name="password" placeholder="รหัสผ่านใหม่" />
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">ปิด</button>
          <button type="submit" class="btn btn-warning">
            <i class="far fa-save"></i> แก้ไขข้อมูล
          </button>
        </div>
      </form>
    </div>
  </div>

  <div class="modal fade" id="activityModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">ประวัติการใช้งาน</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <table class="table table-sm table-hover">
            <thead>
              <tr>
                <th class="align-middle text-center font-weight-bold">วันที่</th>
                <th class="align-middle text-center font-weight-bold">กิจกรรม</th>
              </tr>
            </thead>
            <tbody>

            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
@endsection

@section('scripts')
  <script>
    
  </script>
@endsection