{{-- layout --}}
@extends('layouts.contentLayoutMaster')

{{-- page title --}}
@section('title','Departments list')

{{-- vendors styles --}}
@section('vendor-style')
<link rel="stylesheet" type="text/css" href="{{asset('vendors/data-tables/css/jquery.dataTables.min.css')}}">
<link rel="stylesheet" type="text/css"
  href="{{asset('vendors/data-tables/extensions/responsive/css/responsive.dataTables.min.css')}}">
@endsection

{{-- page styles --}}
@section('page-style')
<link rel="stylesheet" type="text/css" href="{{asset('css/pages/page-users.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('css/pages/datatables.css')}}">
@endsection

<!-- <pre> -->
    {{-- print_r($data) --}}
<!-- </pre> -->

{{-- page content --}}
@section('content')

<section class="users-list-wrapper section">
<div class="user-content-head mb-5 mt-5">
    <div class="header-details">
      <h5 class="m-0 sidebar-title" style="color:#fff"><i class="fa fa-sitemap"></i> Department Management</h5>
    </div>
  </div>
</section>

<!-- users list start -->
<section class="users-list-wrapper section">
  <div class="users-list-filter d-none">
    <div class="card-panel">
      <div class="row">
        <div class="col s12 m12 display-flex align-items-center mt-5">
          <!-- Export PDF File Button -->
          <button class="add-file-btn btn btn-block waves-effect waves-light">
            <i class="material-icons">picture_as_pdf</i>
            <span>Export User</span>
          </button>
        </div>
      </div>
    </div>
  </div>
  <div class="users-list-table">
    <div class="card">
      <div class="card-content">
        <!-- datatable start -->
        <div class="responsive-table">
          <table id="departments-list-datatable" class="table">
            <thead>
              <tr>
                <th></th>
                <th>Name</th>
                <th>Status</th>
                <th>Action</th>
                <th>Created At</th>
              </tr>
            </thead>
          </table>
        </div>
        <!-- datatable ends -->
      </div>
    </div>
  </div>
</section>
<!-- users list ends -->
@endsection



{{-- vendor scripts --}}
@section('vendor-script')
<script src="{{asset('vendors/data-tables/js/jquery.dataTables.min.js')}}"></script>
<script src="{{asset('vendors/data-tables/extensions/responsive/js/dataTables.responsive.min.js')}}"></script>
<!-- Date format using moment js -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
@endsection

{{-- page script --}}
@section('page-script')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>
@endsection

@push('scripts')
<script>
  $(document).ready(() => {
    var i = 1;
    let datatable = $('#departments-list-datatable').DataTable({
      pageLength: 10,
      responsive: true,
      processing: true,
      serverSide: true,
      stateSave: true,
      order: [[0, "desc"]],
      // bFilter: false,
      ajax: {
        url: "{{ route('get.departments.data') }}",
        async: true,
        serverSide: true,
        data: ( d ) => {
          //d.customer_name = $('#search_customer_name').val();
          //d.customer_status = $('#search_customer_status').val()
        }
      },
      columnDefs: [
                    { className: "non-select ", "targets": [ 0,3 ] },
                ],
      columns: [{
        data: "",
        orderable: true,
        defaultContent: '',
        bSortable: true,
        render: function ( data, type, row, meta ) {
          return meta.row + meta.settings._iDisplayStart + 1;
        }
      }, {
        data: "name",
        name: "name",
        render: ( data, type, full ) => {

          return `<div>${data}</div>`;
        }
      }, {
        data: "status",
        name: "status",
        orderable: false,
        render: ( data, type, full ) => {
          const {status: departmentStatus} = full;
          let bgColor = '';
          let textColor = '';
          let statusText = '';

          switch ( departmentStatus ) {
              case 'active':
                  bgColor = `{{config('settings.user.status.active.bg_color')}}`;
                  textColor = `{{config('settings.user.status.active.text_color')}}`;
                  break;
              case 'inactive':
                  bgColor = `{{config('settings.user.status.inactive.bg_color')}}`;
                  textColor = `{{config('settings.user.status.inactive.text_color')}}`;
                  break;
          }

          statusText = ucwords(departmentStatus);

          return `<span class="chip ${bgColor}"><span class="${textColor}">${statusText}</span></span>`;
        }
      }, {
        data: "id",
        name: "id",
        orderable: false,
        render: ( data, type, full ) => {
          const {
            status: departmentStatus,
            id: userId,
            name: userName,
            encryptedId: encryptId
          } = full;

          let activeRoute = `{{ route('get.departments.show', 'id') }}`;
          activeRoute = activeRoute.replace('id', encryptId);

          let statusTxtColor  = '';
          let statusIcon      = '';
          let statusData      = '';
          let changedepartmentStatusButtons = "";

          switch ( departmentStatus ) {
            case 'active':
              statusTxtColor = `{{config('settings.user.status.active.text_color')}}`;
              statusIcon = `{{config('settings.user.status.active.icon')}}`;
              statusData = `deactivate-department`;
              break;
            case 'inactive':
              statusTxtColor = `{{config('settings.user.status.inactive.text_color')}}`;
              statusIcon = `{{config('settings.user.status.inactive.icon')}}`;
              statusData = `activate-department`;
                break;
          }

          changedepartmentStatusButtons = `<span data-name="${statusData}" data-toggle="tooltip" data-placement="bottom" title="${departmentStatus} user" >
                                            <i class="material-icons mr-2 text-success ${statusTxtColor}" data-encrypt="${encryptId}" data-name="${userName}" style="cursor: pointer">${statusIcon}</i>
                                        </span>`;

          let viewRoute = `{{ route('get.departments.show', 'id') }}`;
          viewRoute = viewRoute.replace('id', encryptId);

          let viewDepartmentButtons =
            `<a href="${viewRoute}"><i class="material-icons blue-text">remove_red_eye</i></a>`;

          let editRoute = `{{ route('get.departments.edit','id') }}`;
          editRoute = editRoute.replace('id', encryptId);

          let editDepartmentButtons = `<a href="${editRoute}"><i class="material-icons amber-text text-accent-3">edit</i></a>`;
            
            return `<span>
                    ${viewDepartmentButtons}
                    ${editDepartmentButtons}
                    ${changedepartmentStatusButtons}
                    </span>`;
          }
      }, {
        data: "created_at",
        name: "created_at",
        render: ( data ) => {
          return convertToDisplayDate(data);
        }
      }]
    });

    $(document).on('click', 'span[data-name="activate-department"]', (e) => {
      e.stopPropagation();
      const currentRowId = e.target.getAttribute('data-encrypt');
      const currentDepartmentName = e.target.getAttribute('data-name');
      Swal.fire({
        title: `Activate ${currentDepartmentName}?`,
        text: `The action can be revert by deactivate back the department  `,
        type: 'warning',
        showCancelButton: true,
        reverseButtons: true,
        confirmButtonColor: '#30dd1c',
        confirmButtonText: 'Yes, activate it'
      }).then((result) => {
        if ( result.value ) {
          $.ajax({
            type: 'PUT',
            url: "{{ route('post.activate.department') }}",
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            data: {
              'encryptId': currentRowId
            },
            success: (data) => {
              Swal.fire({
                type: 'success',
                title: 'Department Activated successfully.'
              });
              // location.reload(true);
              $('#departments-list-datatable').DataTable().ajax.reload(null, false )
            }
          })
        }
      })
    });
    
    $(document).on('click', 'span[data-name="deactivate-department"]', (e) => {
      e.stopPropagation();
      const currentRowId = e.target.getAttribute('data-encrypt');
      const currentDepartmentName = e.target.getAttribute('data-name');
      Swal.fire({
        title: `Deactivate ${currentDepartmentName}?`,
        text: `The action can be revert by activate back the department .  `,
        type: 'warning',
        showCancelButton: true,
        reverseButtons: true,
        confirmButtonColor: '#d33',
        confirmButtonText: 'Yes, deactivate it!'
      }).then((result) => {
        if ( result.value ) {
          $.ajax({
            type: 'DELETE',
            url: "{{ route('post.deactivate.department') }}",
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            data: {
              'encryptId': currentRowId
            },
            success: () => {
              Swal.fire({
                type: 'success',
                title: 'Department deactivate successfully.'
              });

              // reload(null, false) - keep current page you are.
              //reload() - will reload back the table tu default
              $('#departments-list-datatable').DataTable().ajax.reload(null, false );
            }
          })
        }
      })
    });
  });
</script>
@endpush