@extends('layouts.app')

@section('content')
  <div class="page-content">
    <div class="container-fluid">

      <!-- start page title -->
      @include('layouts.partials.breadcrumb', ['title' => 'Employee'])

      <!-- end page title -->

      <div class="card">
        <div class="card-body">
          <div class="row g-2">
            <div class="col-sm-4">
              <div class="search-box">
                <input type="text" class="form-control" id="searchMemberList" placeholder="Search for name...">
                <i class="ri-search-line search-icon"></i>
              </div>
            </div>
            <!--end col-->
            <div class="col-sm-auto ms-auto">
              <div class="list-grid-nav hstack gap-1">

                <a class="btn btn-success" href="{{ route('employee.create') }}"><i
                    class="ri-add-fill me-1 align-bottom"></i> Create Employee</a>

              </div>
            </div>
            <!--end col-->
          </div>
          <!--end row-->
        </div>
      </div>

      <div class="row">
        <div class="col-lg-12">
          <div>

            <div id="teamlist">
              <div class="team-list row grid-view-filter" id="team-member-list">
                @forelse ($employees as $employee)
                  <div class="col">
                    <div class="card team-box ribbon-box mb-lg-0 material-shadow border shadow-none">
                      <div class="team-cover">
                        <img src="{{ asset('assets/images/small/img-9.jpg') }}" alt="" class="img-fluid">
                      </div>
                      <div class="card-body p-4">
                        @if ($employee->user)
                          <div class="ribbon-two ribbon-two-success">
                            <span>{{ optional($employee->user)->getRoleNames()->first() }}</span>
                          </div>
                        @endif
                        <div class="row align-items-center team-row">
                          <div class="col team-settings">
                            <div class="row">
                              <div class="col">
                              </div>
                              <div class="col dropdown text-end"> <a href="javascript:void(0);" data-bs-toggle="dropdown"
                                  aria-expanded="false" class=""> <i class="ri-more-fill fs-17"></i> </a>
                                <ul class="dropdown-menu dropdown-menu-end" style="">
                                  <li><a class="dropdown-item remove-item-btn" href="javascript:void(0);"
                                      data-link="{{ route('employee.destroy', $employee->id) }}"
                                      data-id="{{ $employee->id }}"><i
                                        class="ri-delete-bin-5-line text-muted me-2 align-bottom"></i>Delete</a></li>
                                </ul>
                              </div>
                            </div>
                          </div>

                          <div class="col-lg-4 col">
                            <div class="team-profile-img">
                              <div class="img-thumbnail rounded-circle flex-shrink-0">
                                <img style="height: 90px; width:90px; object-fit:cover"
                                  src="{{ asset($employee->profile_picture) }}" alt=""
                                  class="img-fluid rounded-circle">
                              </div>
                              <div class="team-content"> <a class="member-name"
                                  href="{{ route('employee.show', $employee->id) }}">
                                  <h5 class="fs-16 mb-1">{{ $employee->first_name }}</h5>
                                </a>
                                <p class="text-muted member-designation mb-0">Bibhuti</p>
                              </div>
                            </div>
                          </div>
                          {{-- <div class="col-lg-4 col">
                            <div class="row text-muted text-center">
                              <div class="col-6 border-end border-end-dashed">
                                <h5 class="projects-num mb-1">225</h5>
                                <p class="text-muted mb-0">Projects</p>
                              </div>
                              <div class="col-6">
                                <h5 class="tasks-num mb-1">197</h5>
                                <p class="text-muted mb-0">Tasks</p>
                              </div>
                            </div>
                          </div> --}}
                          <div class="col-lg-2 col">
                            <ul class="list-inline mb-0 text-center">
                              <li class="list-inline-item avatar-xs">
                                <a href="{{ route('employee.edit', $employee->id) }}"
                                  class="avatar-title bg-info-subtle text-info fs-15 rounded">
                                  <i class="ri-edit-line"></i>
                                </a>
                              </li>
                              <li class="list-inline-item avatar-xs">
                                <a href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#assignRoleModal"
                                  data-email="{{ $employee->email }}"
                                  class="avatar-title bg-primary-subtle text-primary fs-15 rounded">
                                  <i class="ri-user-add-line"></i>
                                </a>
                              </li>
                              <li class="list-inline-item avatar-xs">
                                <a href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#changePasswordModal"
                                  class="avatar-title bg-danger-subtle text-danger fs-15 rounded">
                                  <i class="ri-lock-unlock-line"></i>
                                </a>
                              </li>
                            </ul>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                @endforeach

                <div class="d-flex justify-content-end align-self-end">
                  <div class="mt-2 p-2">
                    {{ $employees->links() }}
                  </div>
                </div>


              </div>
            </div>
          </div>
        </div><!-- end col -->
      </div>
      <!--end row-->
    </div><!-- container-fluid -->
  </div>

  <div class="modal fade" id="assignRoleModal" tabindex="-1" aria-labelledby="assignRoleLabel" aria-modal="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header model-primary">
          <h5 class="modal-title" id="exampleModalgridLabel">Assign Role</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          {{ html()->form('POST')->route('employee.assignRole')->class(['needs-validation'])->attributes(['novalidate'])->open() }}
          <div class="row gy-2">
            <div class="col-lg-12">
              {{ html()->label('Email')->class('form-label') }}
              {{ html()->email('email')->class('form-control email-field')->placeholder('Enter Email')->isReadonly(true)->required() }}
            </div>

            <div class="col-lg-12">
              {{ html()->label('Role')->class('form-label') }}
              {{ html()->select('role_id', $roleLists)->class('form-select')->placeholder('Select Role')->required() }}
            </div>
          </div>

          <div class="mt-4 text-end">
            <button type="submit" class="btn btn-success w-sm">Save</button>
          </div>
          {{ html()->form()->close() }}

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

  <div class="modal fade" id="changePasswordModal" tabindex="-1" aria-labelledby="changePasswordLabel"
    aria-modal="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header model-primary">
          <h5 class="modal-title" id="exampleModalgridLabel">Change Password</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form action="{{ route('leave.store') }}" class="needs-validation" novalidate method="post">
            <div class="row gy-2">
              <div class="col-lg-12">
                {{ html()->label('New Password')->class('form-label') }}
                {{ html()->text('password')->class('form-control')->placeholder('Enter New Password')->required() }}
              </div>

              <div class="col-lg-12">
                {{ html()->label('Confirm New Password')->class('form-label') }}
                {{ html()->text('confirm_password')->class('form-control')->placeholder('Enter Confirm New Password')->required() }}
              </div>

            </div>

            <div class="mt-4 text-end">
              <button type="submit" class="btn btn-success w-sm">Save</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
@endsection

@push('js')
  <script>
    $(document).ready(function() {
      $('#assignRoleModal').on('shown.bs.modal', function(e) {
        // do something...
        var email = $(e.relatedTarget).data('email');
        $('.email-field').val(email)
        console.log(email);
      })
    })
  </script>
@endpush