@extends('layouts.master')

@section('title')
  LT-168 :: จัดการผู้ช่วย
@endsection

@section('sub_title')
  จัดการผู้ช่วย
@endsection

@section('content')

@php
  $text = 'เอเยนต์';
  if (Auth::user()->isAdmin()) $text = 'แอดมิน';
@endphp
  <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">ผู้ช่วย{{ $text }}</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 ($assists as $assist)
                <tr>
                  <td class="align-middle text-center font-weight-bold">{{ ++$i }}</td>
                  <td class="align-middle text-center font-weight-bold text-primary">{{ $assist->username }}</td>
                  <td class="align-middle text-center font-weight-bold">{{ $assist->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-fw fa-ellipsis-v"></i></button>
                    <div class="dropdown-menu" on>
                      <a href="#assistant-permission-dialog" class="dropdown-item" 
                        data-toggle="modal" data-target="#assistant-permission-dialog"
                        data-id="{{ $assist->id }}"
                        data-permission="{{ $assist->assistantPermission->toJson() }}"
                        onclick="fetchAssistantRoutePermissionDetail(this.dataset.id).then(showAssistantRoutePermissionDetail)">
                        <i class="fas fa-fw fa-list"></i> ตั้งค่าเมนู
                      </a>
                      <a class="dropdown-item" href="javascript:;" onclick="showActivity(this)"
                        data-item='{!! json_encode($assist->activity) !!}'>
                        <i class="fas fa-fw fa-history"></i> ประวัติการใช้งาน
                      </a>
                      <a class="dropdown-item" href="javascript:;" onclick="editItem(this)"
                        data-item='{!! json_encode($assist) !!}'><i class="fas fa-fw fa-wrench fa-fw"></i> แก้ไขข้อมูล</a>
                      <a class="dropdown-item text-danger" href="javascript:;" onclick="removeItem(this)"
                        data-id="{{ $assist->id }}"><i class="fas fa-fw 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>

  <div id="assistant-permission-dialog" class="modal fade" tabindex="-1">
    <form id="assistant-permission-form" class="modal-dialog m-0 mw-100 modal-dialog-scrollable">
      <fieldset class="modal-content rounded-0 border-0 vh-100 mh-100" disabled>
        <input type="hidden" name="user_id">
        <div class="modal-header">
          <h5 class="modal-title">ตั้งค่าสิทธิ์การเข้าถึงเมนูของผู้ช่วยแอดมิน</h5>
          <button class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></button>
        </div>
        <div class="modal-body">
          <input type="hidden" name="permission_type" value="route">
          <div class="row">
            <div class="col-sm mb-3">
              เลือก <span id="checked-routes-permission-count">0</span> จากทั้งหมด <span id="all-routes-permission-count">0</span>
            </div>
            <div class="col-sm-auto mb-3">
              <button class="btn btn-primary btn-sm" type="button" onclick="toggleAllRoutes(true)"><i class="far fa-check-square mr-2"></i>เลือกทั้งหมด</button>
              <button class="btn btn-primary btn-sm" type="button" onclick="toggleAllRoutes(false)"><i class="far fa-square mr-2"></i>ไม่เลือกทั้งหมด</button>
            </div>
          </div>
          {{-- @dump($assistantRouteList->getRoutes()) --}}
          <div class="form-row masonry-grid">
            @foreach ($routeGroups as $routeGroup)
              <div class="masonry-grid-item col-lg-6 col-xl-4">
                <fieldset class="border p-3" style="border-width: 2px !important;">
                  <legend class="px-1 w-auto mb-0">
                    <div class="d-inline-flex">
                      <a href="javascript:void(0)" class="text-decoration-none mr-1" onclick="toggleAllRoutes(true, this.closest('fieldset'))"><i class="far fa-check-square"></i></a>
                      <a href="javascript:void(0)" class="text-decoration-none mr-1" onclick="toggleAllRoutes(false, this.closest('fieldset'))"><i class="far fa-square"></i></a>
                    </div>
                    <small>กลุ่ม:</small>
                    <span class="badge badge-primary" style="text-transform: none;">{{ $routeGroup->group_name ?: '/' }}</span>
                  </legend>
                  @foreach ($routeGroup->routes as $route)
                    <div hidden>@dump($route)</div>
                    <div class="custom-control custom-checkbox">
                      <input type="hidden" name="route_names[{{ $route->route_name }}]" value="{{ $route->route_name }}">
                      <input class="custom-control-input" type="checkbox" name="allowed_value[{{ $route->route_name }}]" id="{{ $route->title }}" onchange="countCheckedRoutesPermission()" value="1">
                      <label class="custom-control-label d-inline" for="{{ $route->title }}" style="word-break: break-word;">
                        {{ $route->title }}
                      </label>
                    </div>
                  @endforeach
                </fieldset>
              </div>
            @endforeach
          </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>
      </fieldset>
    </form>
  </div>
@endsection

@section('scripts')
  <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
  <script>
    const $assistantPermissionDialog = document.getElementById('assistant-permission-dialog');
    const $checkedRoutesPermissionCount = document.getElementById('checked-routes-permission-count');
    const $allRoutesPermissionCount = document.getElementById('all-routes-permission-count');

    const $assistantPermissionForm = document.forms['assistant-permission-form'];

    var msnry = new Masonry('.masonry-grid', {
      itemSelector: '.masonry-grid-item',
      initLayout: false,
    });

    msnry.on( 'layoutComplete', function( items ) {
      console.log( items.length );
    });

    function countCheckedRoutesPermission() {
      let checked = 0;
      let all = 0;
      $assistantPermissionForm.querySelectorAll('[name^="allowed_value"]').forEach($el => {
        all++;
        if ($el.checked) checked++;
      });
      $checkedRoutesPermissionCount.textContent = checked;
      $allRoutesPermissionCount.textContent = all;
    }

    function toggleAllRoutes(bool, $scope) {
      if ($scope) {
        $scope.querySelectorAll('[name^="allowed_value"]').forEach($el => $el.checked = bool);
      } else {
        $assistantPermissionForm.querySelectorAll('[name^="allowed_value"]').forEach($el => $el.checked = bool);
      }
      countCheckedRoutesPermission();
    }

    function fetchAssistantRoutePermissionDetail(userId) {
      return fetchJson(`{{ route('admin.manage.user-route-permission') }}/${userId}`);
    }

    function showAssistantRoutePermissionDetail(data) {
      $assistantPermissionForm.querySelector('fieldset').disabled = false;
      $assistantPermissionForm['user_id'].value = data.user_id;
      for (const i in data.data) {
        const permission = data.data[i];
        const $routeName = $assistantPermissionForm.querySelector(`[name^="route_names"][value="${permission.allowed_value}"]`);
        if (!$routeName) continue;

        $routeName.nextElementSibling.checked = permission.status === 1;
      }

      countCheckedRoutesPermission();
    }

    function showActivity(el) {
      const datas = $(el).data('item');
      const target = $('#activityModal');
      let tr = ``;
      for (const k in datas) {
        let data = datas[k];
        tr += `<tr>
                <td class="align-middle text-center font-weight-bold">${data.activity_time}</td>
                <td class="align-middle text-center font-weight-bold text-success">เข้าสู่ระบบ</td>
              </tr>`;
      }
      target.find('tbody').html(tr);
      target.modal('show');
    }

    async function formSubmitHandler(e, el) {
      e.preventDefault();
      const self = $(el);
      const formData = new FormData(self[0]);
      const fetched = await fetchApi(`{{ route('agent.manage.assist.store') }}`, 'POST', formData);
      const result = await fetched.json();

      if (result.success) {
        swalSuccess();
        setTimeout(() => {
          location.reload();
        }, 1500);
      } else {
        swalError();
      }
    }

    async function removeItem(el) {
      const self = $(el);
      swal('ยืนยันการลบผู้ช่วย?', ' ', 'info', {
        buttons: ['ยกเลิก', 'ยืนยัน'],
      }).then(async function(sure) {
        if (sure) {
          const userId = self.data('id');
          const fetched = await fetchApi(`{{ route('agent.manage.assist.index') }}/${userId}`, 'DELETE', {});
          const result = await fetched.json();

          if (result.success) {
            swalSuccess();
            setTimeout(() => {
              location.reload();
            }, 1500);
          } else {
            swalError();
          }
        }
      });
    }

    function editItem(el) {
      const self = $(el);
      const data = self.data('item');
      const targerModal = $('#editItemModal');
      targerModal.find('input[name="username"]').val(data.username);
      targerModal.find('input[name="fullname"]').val(data.name);

      targerModal.modal('show');

      targerModal.find('form').on('submit', async function(e) {
        e.preventDefault();
        const formSelf = $(this);
        const formData = new FormData(formSelf[0]);
        const fetched = await fetchApi(`{{ route('agent.manage.assist.index') }}/${data.id}`, 'POST', formData);
        const result = await fetched.json();
        if (result.success) {
          swalSuccess();
          setTimeout(() => {
            location.reload();
          }, 1500);
        } else {
          swalError();
        }
      });
      return;
    }

    $($assistantPermissionDialog).on('shown.bs.modal', () => {
      msnry.layout();
      $('.masonry-grid').fadeIn();
    });
    $($assistantPermissionDialog).on('show.bs.modal', () => {
      $('.masonry-grid').fadeOut();
    });
    $($assistantPermissionDialog).on('hide.bs.modal', () => {
      $assistantPermissionForm.querySelector('fieldset').disabled = true;
    });

    $assistantPermissionForm.onsubmit = e => {
      e.preventDefault();
      return tryCatchSwal(async () => {
        const confirm = await swal({
          title: 'โปรดยืนยัน',
          text: `คุณต้องการตั้งค่าสิทธิ์การเข้าถึงเมนูของผู้ช่วยแอดมินบัญชีนี้ให้สามารถเข้าถึงได้ ${$checkedRoutesPermissionCount.textContent} จากทั้งหมด ${$allRoutesPermissionCount.textContent} ใช่หรือไม่ โปรดยืนยัน`,
          icon: 'warning',
          dangerMode: true,
          buttons: {
            cancel: 'ยกเลิก',
            confirm: {
              text: 'ยืนยัน',
              closeModal: false,
            }
          }
        });
        if (!confirm) return;

        const formData = new FormData($assistantPermissionForm);
        const result = await fetchJson(`{{ route('admin.manage.assistant-permission.store') }}`, 'POST', formData);
        return swal('สำเร็จ', 'บันทึกข้อมูลสิทธิ์การเข้าถึงเมนูของผู้ช่วยแอดมินเรียบร้อย', 'success');
      });
    }

  </script>
@endsection