@extends('layouts.dashboard')

@section('content')
<style>
  .dt-layout-row {
    margin-top: 0px;
  }
</style>
<section class="content-header">
  <div class="container-fluid">
    <div class="row mb-2">
      <div class="col-sm-6">
        <h1>Employees</h1>
      </div>
      <div class="col-sm-6">
        <ol class="breadcrumb float-sm-right">
          <li class="breadcrumb-item"><a href="/">Home</a></li>
          <li class="breadcrumb-item active">Employees</li>
        </ol>
      </div>
    </div>
  </div><!-- /.container-fluid -->
</section>

<section class="content">
  <div class="container-fluid">
    @if (Session::has('message'))
    <div class="col-sm-12">
      <div class="alert  {{ Session::get('alert-class', 'alert-info') }} alert-dismissible fade show" role="alert">
        {{ Session::get('message') }}
      </div>
    </div>
    @endif

    <div class="row">
      <div class="col-12 pr-0 d-flex justify-content-end">
        <button type="button" class="btn  btn-sm float-right">
          <a href="{{ route('employee.add') }}" class="uniqbtn-btn"> <i class="fa fa-plus"></i>&nbsp; Add </a></button>
      </div>
          
    </div>
    <div class="row">
            <div class="col-12 col-sm-12">
              <div class="card emp-tabs mt-3">
                <div class="card-header rounded-0 p-0 pt-0">
                  <ul class="nav nav-tabs nav-justified" id="custom-tabs-one-tab" role="tablist">
                    <li class="nav-item">
                      <a class="nav-link active font-weight-bold" id="custom-tabs-one-home-tab"
                        data-toggle="pill" href="#custom-tabs-one-home" role="tab"
                        aria-controls="custom-tabs-one-home" aria-selected="true">
                        <i class="fas fa-users mr-1"></i> Active Members
                      </a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link font-weight-bold" id="custom-tabs-one-profile-tab"
                        data-toggle="pill" href="#custom-tabs-one-profile" role="tab"
                        aria-controls="custom-tabs-one-profile" aria-selected="false">
                        <i class="fas fa-users-slash  mr-1"></i> In-active Members
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="card mt-2">
                <div class="card-body p-2">
                  <div class="tab-content" id="custom-tabs-one-tabContent">

                    <!-- Active Members Tab -->
                    <div class="tab-pane fade show active" id="custom-tabs-one-home" role="tabpanel" aria-labelledby="custom-tabs-one-home-tab">
                      <div class="table-responsive p-0">
                        <table id="employee-table-active" class="table table-head-fixed table-striped table-bordered text-nowrap text-center">
                          <thead>
                            <tr>
                              <th class="emp_sr">Sr No.</th>
                              <th>Name</th>
                              <th>Employee ID</th>
                              <th>Email</th>
                              <th>Mobile Number</th>
                              <th>VV&trade; Status</th>
                              <th>Reset Status</th>
                              <th>Active Members</th>
                              <th>Action</th>
                            </tr>
                          </thead>
                          <tbody></tbody>
                        </table>
                      </div>
                    </div>

                    <!-- In-active Members Tab -->
                    <div class="tab-pane fade" id="custom-tabs-one-profile" role="tabpanel" aria-labelledby="custom-tabs-one-profile-tab">
                      <div class="card-body table-responsive p-0">
                        <table id="employee-table-inactive" class="table table-head-fixed table-striped table-bordered text-nowrap text-center">
                          <thead>
                            <tr>
                              <th class="emp_sr">Sr No.</th>
                              <th>Name</th>
                              <th>Employee ID</th>
                              <th>Email</th>
                              <th>Mobile Number</th>
                              <th>VV&trade; Status</th>
                              <th>Reset Status</th>
                              <th>Active Members</th>
                              <th>Action</th>
                            </tr>
                          </thead>
                          <tbody></tbody>
                        </table>
                      </div>
                    </div>

                  </div>
                </div>
              </div>
              <!-- /.card -->
            </div>
          </div>

  </div><!-- /.container-fluid -->
</section>

@endsection

@push('scripts')
<script>
  $(document).ready(function() {

    // Active Members DataTable
    var activeTable = $('#employee-table-active').DataTable({
      processing: true,
      serverSide: true,
      bLengthChange: false,
      order: [
        [0, 'desc']
      ],
      pageLength: 30,
      searching: true,
      ajax: {
        url: '{{ route("employee.index") }}',
        data: function(d) {
          d.status_filter = 'active';
        }
      },
      columnDefs: [{
          targets: 0,
          className: 'emp_sr'
        },
        {
          targets: '_all',
          className: 'text-center'
        }
      ],
      columns: [{
          data: 'DT_RowIndex',
          name: 'DT_RowIndex',
          orderable: false,
          searchable: false
        },
        {
          data: 'name',
          name: 'name'
        },
        {
          data: 'employee_id',
          name: 'employee_id'
        },
        {
          data: 'email',
          name: 'email'
        },
        {
          data: 'mobile_number',
          name: 'mobile_number'
        },
        {
          data: 'status',
          name: 'status'
        },
        {
          data: 'reset_status_toggle',
          name: 'reset_status_toggle',
          orderable: false,
          searchable: false
        },
        {
          data: 'active_member',
          name: 'active_member',
          orderable: false,
          searchable: false
        },
        {
          data: 'action',
          name: 'action',
          orderable: false,
          searchable: false
        }
      ],
      drawCallback: function() {
        initializeToggles();
      }
    });

    // In-active Members DataTable
    var inactiveTable = $('#employee-table-inactive').DataTable({
      processing: true,
      serverSide: true,
      bLengthChange: false,
      order: [
        [0, 'desc']
      ],
      pageLength: 30,
      searching: true,
      ajax: {
        url: '{{ route("employee.index") }}',
        data: function(d) {
          d.status_filter = 'inactive';
        }
      },
      columnDefs: [{
          targets: 0,
          className: 'emp_sr'
        },
        {
          targets: '_all',
          className: 'text-center'
        }
      ],
      columns: [{
          data: 'DT_RowIndex',
          name: 'DT_RowIndex',
          orderable: false,
          searchable: false
        },
        {
          data: 'name',
          name: 'name'
        },
        {
          data: 'employee_id',
          name: 'employee_id'
        },
        {
          data: 'email',
          name: 'email'
        },
        {
          data: 'mobile_number',
          name: 'mobile_number'
        },
        {
          data: 'status',
          name: 'status'
        },
        {
          data: 'reset_status_toggle',
          name: 'reset_status_toggle',
          orderable: false,
          searchable: false
        },
        {
          data: 'active_member',
          name: 'active_member',
          orderable: false,
          searchable: false
        },
        {
          data: 'action',
          name: 'action',
          orderable: false,
          searchable: false
        }
      ],
      drawCallback: function() {
        initializeToggles();
      }
    });

    function initializeToggles() {
      $('.chkToggle').bootstrapToggle();
      $('.chkToggle1').bootstrapToggle();

      $('.chkToggle').off('change').on('change', function() {
        const checkbox = $(this);
        const id = checkbox.data('id');

        Swal.fire({
          title: "Are you sure to change the status?",
          showDenyButton: true,
          denyButtonText: "No",
          confirmButtonText: "Yes",
        }).then((result) => {
          if (result.isConfirmed) {
            $.ajax({
              type: "POST",
              url: "{{ route('employee.change-reset-status') }}",
              data: {
                "_token": "{{ csrf_token() }}",
                'id': id
              },
              success: function(data) {
                if (data.status === "success") {
                  Swal.fire("Status changed successfully!", "", "success");
                } else {
                  Swal.fire("Not able to change status!", "", "info");
                }
              },
              error: function() {
                Swal.fire("Error changing status!", "", "error");
              }
            });
          } else {
            checkbox.bootstrapToggle('toggle');
            Swal.fire("Action cancelled", "", "info");
          }
        });
      });

      $('.chkToggle1').off('change').on('change', function() {
        const checkbox = $(this);
        const id = checkbox.data('id');

        Swal.fire({
          title: "Are you sure to change the status?",
          showDenyButton: true,
          denyButtonText: "No",
          confirmButtonText: "Yes",
        }).then((result) => {
          if (result.isConfirmed) {
            $.ajax({
              type: "POST",
              url: "{{ route('employee.change-active-member') }}",
              data: {
                "_token": "{{ csrf_token() }}",
                'id': id
              },
              success: function(data) {
                if (data.status === "success") {
                  Swal.fire("Status changed successfully!", "", "success");
                } else {
                  Swal.fire("Not able to change status!", "", "info");
                }
              },
              error: function() {
                Swal.fire("Error changing status!", "", "error");
              }
            });
          } else {
            checkbox.bootstrapToggle('toggle');
            Swal.fire("Action cancelled", "", "info");
          }
        });
      });
    }

  });



  function copyToClipboard(button, text) {
    // Copy text to clipboard
    navigator.clipboard.writeText(text).then(function() {
      // Change icon/text inside the button
      const iconSpan = button.querySelector('.copy-icon');
      iconSpan.innerHTML = '<i class="fa fa-check text-success"></i>';

      // Revert after 2 seconds
      setTimeout(() => {
        iconSpan.innerHTML = '<i class="fa fa-clipboard"></i>';
      }, 2000);
    });
  }
</script>
@endpush