@extends('layouts.app')
@inject('dropdown', 'Modules\Admin\Repositories\DropdownRepository')

@section('content')
  <div class="page-content">
    <div class="container-fluid">
      <div class="profile-foreground position-relative mx-n4 mt-n5">
        <div class="employee-wid-bg profile-wid-bg">
          <img src="{{ asset('assets/images/profile-bg.jpg') }}" alt="" class="profile-wid-img">
        </div>
      </div>
      <div class="mb-lg-3 pb-lg-4 profile-wrapper mb-4 pt-4">
        <div class="row g-4">
          <div class="col-auto">
            <div class="avatar-lg">
              <img src="{!! asset('storage/' . $employee->profile_picture) !!}" alt="user-img" class="img-thumbnail rounded-circle">
            </div>
          </div>
          <!--end col-->
          <div class="col">
            @if($employee->first_name && $employee->last_name)
              <div class="d-flex justify-content-between align-items-center p-2">
                <h3 class="mb-1 text-white">
                  {{ $employee->first_name }} {{ $employee->middle_name }} {{ $employee->last_name }}
                </h3>
              </div>
              <div>
                <p class="ri-phone-line text-white text-opacity-75">
                  {{ $employee->contact }}
                  <span class="ri-mail-line p-3 text-opacity-75">
                    {{ $employee->email }}
                  </span>
                </p>
              </div>

              @if ($department || $desgination)
                <p class="text-white text-opacity-75">
                  {{ $department }}{{ $department && $desgination ? ', ' : '' }}{{ $desgination }}
                </p>
              @endif

              @if($employee->temporary_address || $employee->permanent_address)
                <div class="hstack text-white-50 gap-1">
                  @if($employee->temporary_address)
                    <div class="me-2">
                      <i class="ri-map-pin-user-line fs-16 me-1 align-middle text-white text-opacity-75"></i>
                      {{ $employee->temporary_address }}
                    </div>
                  @endif
                  @if($employee->permanent_address)
                    <div>
                      <i class="ri-building-line fs-16 me-1 align-middle text-white text-opacity-75"></i>
                      {{ $employee->permanent_address }}
                    </div>
                  @endif
                </div>
              @endif
            @endif
          </div>
          <!--end col-->
          <div class="col-12 col-lg-auto order-lg-0 order-last">
            <div class="row text text-white-50 text-center">
              <div class="col-lg-6 col-4">
                <div class="p-2">
                  <h4 class="mb-1 text-white"></h4>
                  <p class="fs-14 mb-0"></p>
                </div>
              </div>
              <div class="col-lg-6 col-4">
                <div class="p-2">
                  <h4 class="mb-1 text-white"></h4>
                  <p class="fs-14 mb-0"></p>
                </div>
              </div>
            </div>
          </div>
          <!--end col-->

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

      <div class="row">
        <div class="col-3">
          <div class="card">
            <div class="card-body">
              <h5 class="card-title mb-3">Basic Info</h5>
              <div class="d-flex align-items-center mb-2">
                <div class="flex-shrink-0">
                  <p class="mb-0">Full Name:</p>
                </div>
                <div class="flex-grow-1 ms-2">
                  <h6 class="mb-0">{{ $employee->full_name }}</h6>
                </div>
              </div>
              <div class="d-flex align-items-center mb-2">
                <div class="flex-shrink-0">
                  <p class="mb-0">DOB:</p>
                </div>
                <div class="flex-grow-1 ms-2">
                  <h6 class="mb-0">{{ $employee->dob }}</h6>
                </div>
              </div>
              <div class="d-flex align-items-center mb-2">
                <div class="flex-shrink-0">
                  <p class="mb-0">Role:</p>
                </div>
                <div class="flex-grow-1 ms-2">
                  @if ($employee->user)
                    <span class="badge bg-success fs-12">{{ optional($employee->user)->getRoleNames()->first() }}</span>
                  @endif
                </div>
              </div>

            </div><!-- end card body -->
          </div><!-- end card -->

          <div class="card">
            <div class="card-header">
              <h5 class="card-title mb-0">Leave Remaining</h5>
            </div>
            <div class="card-body p-2">
              <div class="table-responsive">
                <table class="table-nowrap table-sm mb-0 table align-middle">
                  <thead class="table-dark text-white">
                    <tr>
                      <th scope="col" style="width: 62;">Leave Type</th>
                      <th scope="col">Total</th>
                      <th scope="col">Remain</th>
                    </tr>
                  </thead>
                  <tbody id="leaveRemainTable">
                    @forelse ($leaveBalance as $key => $leave)
                      <tr>
                        <td>
                            {{ $leave['leave_type'] ?: 'N/A' }}
                        </td>

                        <td>
                          {{ $leave['total'] }}
                        </td>
                        <td>
                          {{ $leave['remain'] }}
                        </td>
                      </tr>
                    @empty
                      <tr>
                        <td colspan="7" class="text-center"> No Leave Found</td>
                      </tr>
                    @endforelse
                  </tbody><!-- end tbody -->
                </table><!-- end table -->
              </div>
            </div>
            <!-- end card body -->
          </div>
        </div>

        <div class="col-9">
          <div class="d-flex profile-wrapper">
            <!-- Nav tabs -->
            <ul class="nav nav-pills animation-nav profile-nav gap-lg-3 flex-grow-1 gap-2" role="tablist">
              <li class="nav-item" role="presentation">
                <a class="nav-link fs-14 active" data-bs-toggle="tab" href="#overview-tab" role="tab"
                  aria-selected="true">
                  <i class="ri-airplay-fill d-inline-block d-md-none"></i> <span
                    class="d-none d-md-inline-block">Overview</span>
                </a>
              </li>
              <li class="nav-item" role="presentation">
                <a class="nav-link fs-14" data-bs-toggle="tab" href="#activities" role="tab" aria-selected="false"
                  tabindex="-1">
                  <i class="ri-list-unordered d-inline-block d-md-none"></i> <span
                    class="d-none d-md-inline-block">Leave</span>
                </a>
              </li>
              <li class="nav-item" role="presentation">
                <a class="nav-link fs-14" data-bs-toggle="tab" href="#projects" role="tab" aria-selected="false"
                  tabindex="-1">
                  <i class="ri-price-tag-line d-inline-block d-md-none"></i> <span
                    class="d-none d-md-inline-block">Attendance</span>
                </a>
              </li>
            </ul>
            <div class="flex-shrink-0">
              <a href="{{ route('employee.edit', $employee->id) }}" class="btn btn-success"><i
                  class="ri-edit-box-line align-bottom"></i> Edit Profile</a>
            </div>
          </div>
          <!-- Tab panes -->
          <div class="tab-content text-muted pt-4">
            <div class="tab-pane active" id="overview-tab" role="tabpanel">
              <div class="row">
                <div class="col-md-9">
                  <div class="card">
                    <div class="card-body">
                      <h5 class="card-title mb-3">About</h5>
                      <p>{{ $employee->remarks }}</p>

                      <div class="border-top border-top-dashed mt-4 pt-3">
                        <div class="row gy-3">

                          <div class="col-lg-3 col-sm-6">
                            <div>
                              <p class="text-uppercase fw-medium mb-2">Join Date :</p>
                              <h5 class="fs-15 mb-0">{{ $employee->join_date ?? 'N/A' }}</h5>
                            </div>
                          </div>
                          <div class="col-lg-3 col-sm-6">
                            <div>
                              <p class="text-uppercase fw-medium mb-2">Designation :</p>
                              <h5 class="fs-15 mb-0">{{ $desgination ?? 'N/A' }}</h5>
                            </div>
                          </div>
                          <div class="col-lg-3 col-sm-6">
                            <div>
                              <p class="text-uppercase fw-medium mb-2">Department :</p>
                              <div class="badge bg-danger fs-12">{{ $department ?? 'N/A' }}</div>
                            </div>
                          </div>
                        </div>
                      </div>

                    </div>
                  </div><!-- end card -->

                  <div class="card">
                    <div class="card-body">
                      <h5 class="card-title">Activity</h5>
                      <div class="simplebar-scrollable-y py-3" data-simplebar style="max-height: 400px;">
                        <div class="acitivity-timeline">
                          @if ($employee->activityLogs != null)
                            @foreach ($employee->activityLogs as $log)
                              <div class="acitivity-item d-flex py-2">
                                <div class="avatar-xs acitivity-avatar flex-shrink-0">
                                  <div class="avatar-title bg-primary-subtle text-primary rounded-circle">
                                    {{ substr($log->title, 0, 1) }}
                                  </div>
                                </div>
                                <div class="flex-grow-1 ms-3">
                                  <h6 class="mb-1">{{ $log->title }} </h6>
                                  <p class="text-muted mb-0">{{ $log->data }}</p>
                                </div>
                                <div class="d-flex flex-column ms-3 flex-shrink-0">
                                  <span class="badge bg-secondary fs-12 text-white">{{ $log->createdBy?->name }}</span>
                                  <small class="text-danger mb-2">{{ $log->created_at?->format('d M, Y') }}</small>
                                </div>
                              </div>
                            @endforeach
                          @endif
                        </div>
                      </div>

                    </div>
                    <!--end card-body-->
                  </div>
                </div>

                <div class="col-md-3">
                  <div class="list-group">
                    <li class="list-group-item active">Action</li>
                    @can('employee.assignRole')
                        <a href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#assignRoleModal"
                        data-email="{{ $employee->email }}"
                        data-role="{{ $employee->user ? $employee->user->roles->first()->id ?? '' : '' }}"
                        class="list-group-item list-group-item-action">
                            <i class="ri-speed-fill text-primary me-2 align-middle"></i>
                            Assign Roles
                        </a>
                    @endcan

                    <a href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#changePasswordModal"
                      class="list-group-item list-group-item-action" class="ri-speed-fill text-info me-2 align-middle"
                      data-id="{{ $employee->id }}">
                      <i class="ri-lock-unlock-line text-danger"></i> Change Password
                    </a>
                  </div>


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

            <div class="tab-pane fade" id="activities" role="tabpanel">
              @include('employee::partials.leave')

            </div>
            <div class="tab-pane fade" id="projects" role="tabpanel">
              @include('employee::partials.attendance')

            </div>
          </div>
          <!--end tab-content-->
        </div>

      </div>
      <!--end col-->
    </div>
    <!--end row-->
  </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('employee.changePassword') }}" class="needs-validation" novalidate method="post">
            @csrf
            <div class="row gy-2">
              <input type="hidden" id="employee_id" name="employee_id" value="{{ $employee->id }}">
              <div class="col-lg-12">
                {{ html()->label('New Password')->class('form-label') }}
                {{ html()->password('password')->class('form-control')->placeholder('Enter New Password')->required() }}
              </div>

              <div class="col-lg-12">
                {{ html()->label('Confirm New Password')->class('form-label') }}
                {{ html()->password('confirm_password')->class('form-control')->placeholder('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>

  <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()->span('*')->class('text-danger') }}
              {{ html()->email('email')->class('form-control email-field')->placeholder('Enter Email')->isReadonly(false)->required() }}
            </div>

            <div class="col-lg-12">
              {{ html()->label('Role')->class('form-label') }}
              {{ html()->span('*')->class('text-danger') }}
              {{ html()->select('role_id', $roleList)->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>
@endsection

@push('js')
  <script src="{{ asset('assets/js/pages/profile.init.js') }}"></script>
  <script src="{{ asset('assets/libs/swiper/swiper-bundle.min.js') }}"></script>

  <script>
    $(document).ready(function() {
      $('#assignRoleModal').on('show.bs.modal', function(event) {
        var button = $(event.relatedTarget);
        var email = button.data('email');
        var roleId = button.data('role');
        $(this).find('.email-field').val(email);
        $(this).find('select[name="role_id"]').val(roleId);
      });
    });
  </script>
@endpush