@php
  $configData = Helper::appClasses();
@endphp

@extends('layouts/layoutMaster')

@section('title', 'Roles')

@section('vendor-style')
  <link rel="stylesheet" href="{{asset('assets/vendor/libs/datatables-bs5/datatables.bootstrap5.css')}}">
  <link rel="stylesheet" href="{{asset('assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css')}}">
  <link rel="stylesheet" href="{{asset('assets/vendor/libs/formvalidation/dist/css/formValidation.min.css')}}" />
@endsection

@section('vendor-script')
  <script src="{{asset('assets/vendor/libs/datatables/jquery.dataTables.js')}}"></script>
  <script src="{{asset('assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js')}}"></script>
  <script src="{{asset('assets/vendor/libs/datatables-responsive/datatables.responsive.js')}}"></script>
  <script src="{{asset('assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.js')}}"></script>

  <script src="{{asset('assets/vendor/libs/formvalidation/dist/js/FormValidation.min.js')}}"></script>
  <script src="{{asset('assets/vendor/libs/formvalidation/dist/js/plugins/Bootstrap5.min.js')}}"></script>
  <script src="{{asset('assets/vendor/libs/formvalidation/dist/js/plugins/AutoFocus.min.js')}}"></script>
@endsection

@section('page-script')
  {{-- <script src="{{asset('assets/js/app-access-roles.js')}}"></script>
  <script src="{{asset('assets/js/modal-add-role.js')}}"></script> --}}

  <script>
    $('body').on('click', '.role-edit-btn', function () {
      const roleId = $(this).data('id');
      const roleName = $(this).data('name');
      const formAction = `{{ env('APP_URL') }}app/access-roles/${roleId}/update`;

      // Populate the modal fields
      $('#editModalRoleName').val(roleName);
      $('#editRoleId').val(roleId);
      $('#editRoleForm').attr('action', formAction);
    });
  </script>
@endsection

@section('content')
  <h4 class="py-3 breadcrumb-wrapper mb-2">Roles List</h4>

  <!-- Role cards -->
  <div class="row">
    @if($roles->count() > 0)
      @foreach($roles as $role)
        @php
          $userCount = $role->users->count();
          $displayName = Str::title($role->name);
          $totalCount = $role->id === 3 ? $branchCount : $userCount;
        @endphp

        <div class="col-xl-4 col-lg-6 col-md-6 mb-3">
          <div class="card">
            <div class="card-body">
              <div class="d-flex justify-content-between mb-2">
                <h6 class="fw-normal">
                  Total {{ $totalCount }} {{ Str::plural($displayName, $totalCount) }}
                </h6>

                @if($role->id !== 3)
                  <ul class="list-unstyled d-flex align-items-center avatar-group mb-0">
                    @foreach($role->users->take(5) as $user)
                      <li class="avatar avatar-sm pull-up" title="{{ $user->name }}">
                        <img class="rounded-circle" src="{{ asset('assets/img/avatars/' . ($loop->index + 1) . '.png') }}" alt="Avatar">
                      </li>
                    @endforeach
                  </ul>
                @endif
              </div>

              <div class="d-flex justify-content-between align-items-end">
                <div class="role-heading">
                  <h4 class="mb-1">{{ $role->name }}</h4>
                  <a href="javascript:void(0);"
                    class="role-edit-btn"
                    data-id="{{ $role->id }}"
                    data-name="{{ $role->name }}"
                    data-bs-toggle="modal"
                    data-bs-target="#editRoleModal">
                    <small>Edit Role</small>
                  </a>
                </div>
                <a href="javascript:void(0);" class="text-muted"><i class="bx bx-copy"></i></a>
              </div>
            </div>
          </div>
        </div>
      @endforeach
      <div class="col-xl-4 col-lg-6 col-md-6">
        <div class="card h-100">
          <div class="row h-100">
            <div class="col-sm-5">
              <div class="d-flex align-items-end h-100 justify-content-center mt-sm-0 mt-3">
                <img src="{{asset('img/illustrations/lady-with-laptop-'.$configData['style'].'.png')}}" class="img-fluid" alt="Image" width="100" data-app-light-img="illustrations/lady-with-laptop-light.png" data-app-dark-img="illustrations/lady-with-laptop-dark.png">
              </div>
            </div>
            <div class="col-sm-7">
              <div class="card-body text-sm-end text-center ps-sm-0">
                <button data-bs-target="#addRoleModal" data-bs-toggle="modal" class="btn btn-primary mb-3 text-nowrap add-new-role">Add New Role</button>
                <p class="mb-0">Add role, if it does not exist</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    @else
      <div class="col-12 text-center my-5">
        <h5>No roles found.</h5>
        <div class="row d-flex justify-content-center align-items-center flex-column">
          <div class="col-xl-4 col-lg-6 col-md-6">
            <div class="card h-100">
              <div class="row h-100">
                <div class="col-sm-5">
                  <div class="d-flex align-items-end h-100 justify-content-center mt-sm-0 mt-3">
                    <img src="{{asset('img/illustrations/lady-with-laptop-'.$configData['style'].'.png')}}" class="img-fluid" alt="Image" width="100" data-app-light-img="illustrations/lady-with-laptop-light.png" data-app-dark-img="illustrations/lady-with-laptop-dark.png">
                  </div>
                </div>
                <div class="col-sm-7">
                  <div class="card-body text-sm-end text-center ps-sm-0">
                    <button data-bs-target="#addRoleModal" data-bs-toggle="modal" class="btn btn-primary mb-3 text-nowrap add-new-role">Add New Role</button>
                    <p class="mb-0">Add role, if it does not exist</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    @endif
  </div>
  <!--/ Role cards -->

  <!-- Add Role Modal -->
  @include('_partials/_modals/modal-add-role')

  {{-- Edit Role Modal --}}
  <div class="modal fade" id="editRoleModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-add-new-role">
      <div class="modal-content p-3 p-md-5">
        <button type="button" class="btn-close btn-pinned" data-bs-dismiss="modal" aria-label="Close"></button>
        <div class="modal-body">
          <div class="text-center mb-4">
            <h3 class="role-title">Update New Role</h3>
          </div>
          <!-- edit role form -->
          <form class="row g-3" id="editRoleForm" method="POST" action="">
            @csrf
            @method('PUT')
            <input type="hidden" id="editRoleId" name="role_id" />

            <div class="form-group col-12 mb-4">
              <label class="form-label" for="editModalRoleName">Role Name</label>
              <input type="text" id="editModalRoleName" name="name" class="form-control" placeholder="Enter role name" required />
            </div>

            <div class="form-group col-12 text-center">
              <button type="submit" class="btn btn-primary me-sm-3 me-1">Update</button>
              <button type="reset" class="btn btn-label-secondary" data-bs-dismiss="modal" aria-label="Close">Cancel</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
@endsection