@extends('layouts.app')

@section('title', 'User Groups')

@section('content')
<style>
  /* Constrain the table area similar to User Accounts with sticky header */
  #userGroupsCard .ug-table-container { height: calc(100vh - 260px); overflow: auto; position: relative; }
  #userGroupsCard table.ug-sticky thead th { position: sticky; top: 0; z-index: 3; background: var(--bs-body-bg, #fff); }
  #userGroupsCard .ug-table-container .dropdown-menu { position: absolute; will-change: transform; z-index: 5; }
</style>

<div id="userGroupsPage"
  data-url-users="{{ route('system-administration.manage-users.user-accounts.dropdown-users') }}"
  data-url-roles="{{ route('system-administration.manage-users.roles') }}"
  data-company-set="{{ session('company_id') ? 1 : 0 }}">

  <div class="card mb-3" id="userGroupsCard">
    <div class="card-header">
      <div class="row flex-between-center">
        <div class="col-4 col-sm-auto d-flex align-items-center pe-0">
          <h5 class="fs-9 mb-0 text-nowrap py-2 py-xl-0">User Groups</h5>
        </div>
        <div class="col-8 col-sm-auto text-end ps-2">
          <div>
            <button class="btn btn-falcon-default btn-sm mx-2" type="button" data-bs-toggle="collapse" data-bs-target="#userGroupsFilters">
              <span class="fas fa-filter" data-fa-transform="shrink-3 down-2"></span>
              <span class="d-none d-sm-inline-block ms-1">Filter</span>
            </button>
            <button class="btn btn-primary btn-sm mx-1" type="button" id="createGroupBtn" data-bs-toggle="offcanvas" data-bs-target="#userGroupFormOffcanvas">
              <span class="fas fa-plus me-1"></span>New
            </button>
            <button class="btn btn-falcon-default btn-sm" type="button" id="exportUserGroupsBtn" disabled>
              <span class="fas fa-external-link-alt" data-fa-transform="shrink-3 down-2"></span>
              <span class="d-none d-sm-inline-block ms-1">Export</span>
            </button>
          </div>
        </div>
      </div>
    </div>

    <div class="collapse" id="userGroupsFilters">
      <div class="card-body border-top fs-10 p-2">
        <div class="bg-100 rounded-1 border border-200 p-2 px-sm-3 py-2 mx-2">
          <form id="userGroupFilterForm" class="row gy-1 gx-2 align-items-center w-100 flex-nowrap">
            <div class="col-auto d-flex align-items-center">
              <label class="form-label form-label-sm mb-0 me-2">Search</label>
              <div class="input-group input-group-sm" style="width: 240px;">
                <span class="input-group-text bg-100 text-700"><span class="fas fa-search"></span></span>
                <input type="text" class="form-control" name="q" placeholder="Group name">
              </div>
            </div>
            <div class="col-auto d-flex align-items-center">
              <select class="form-select form-select-sm" name="status" style="width: 180px;">
                <option value="">All Status</option>
                <option value="ACTIVE">Active</option>
                <option value="INACTIVE">Inactive</option>
              </select>
            </div>
            <div class="col-auto ms-auto d-flex align-items-center">
              <button class="btn btn-falcon-default btn-sm me-1" type="button" id="applyUserGroupFilters">Apply</button>
              <button class="btn btn-falcon-default btn-sm" type="button" id="clearUserGroupFilters">Clear</button>
            </div>
          </form>
        </div>
      </div>
    </div>

    @if(!session('company_id'))
      <div class="card-body border-top py-2">
        <div class="alert alert-warning d-flex align-items-center mb-0" role="alert">
          <span class="fas fa-exclamation-triangle me-2"></span>
          <div>Please select a company to manage User Groups.</div>
        </div>
      </div>
    @endif

    <div class="card-body p-0">
      <div class="table-responsive scrollbar ug-table-container">
        <table class="table table-sm table-striped fs-10 mb-0 overflow-hidden ug-sticky" id="user-groups-table">
          <thead class="bg-200">
            <tr>
              <th class="text-900 pe-1 align-middle white-space-nowrap" style="width: 60px;">#</th>
              <th class="text-900 sort pe-1 align-middle white-space-nowrap">Name</th>
              <th class="text-900 sort pe-1 align-middle white-space-nowrap">Description</th>
              <th class="text-900 sort pe-1 align-middle white-space-nowrap" style="width: 140px;">Status</th>
              <th class="text-900 sort pe-1 align-middle white-space-nowrap" style="width: 200px;">Created</th>
              <th class="text-900 pe-1 align-middle white-space-nowrap" style="width: 120px;">Actions</th>
            </tr>
          </thead>
          <tbody id="table-user-groups-body">
            <tr><td colspan="6" class="text-center py-4 text-500">Loading...</td></tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="card-footer"><div id="laravel_paginator"></div></div>
  </div>

  <!-- Offcanvas: Create/Edit Group -->
  <div class="offcanvas offcanvas-end" tabindex="-1" id="userGroupFormOffcanvas" aria-labelledby="userGroupFormLabel">
    <div class="offcanvas-header bg-light offcanvas-header-polished">
      <h5 class="offcanvas-title" id="userGroupFormLabel"><span class="fas fa-users me-2"></span><span class="ug-title-text">New Group</span></h5>
      <div class="d-flex align-items-center gap-2">
        <button type="button" class="btn btn-sm btn-secondary d-none" id="editUserGroupBtn"><i class="fas fa-pen me-1"></i>Edit</button>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
    </div>
    <div class="offcanvas-body p-0 d-flex flex-column form-standard">
      <div class="form-scroll-container flex-grow-1 p-3">
        <div class="card h-100 border-0 d-flex flex-column">
          <div class="card-body py-3 overflow-auto">
            <div class="px-sm-2 px-md-4">
              <form id="userGroupForm" class="needs-validation" novalidate>
                <input type="hidden" name="user_group_id" id="user_group_id" />
                <div class="row g-3">
                  <div class="col-md-6">
                    <label class="form-label" for="group_name">Group Name <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" id="group_name" name="name" placeholder="e.g., Sales Team" required />
                    <div class="invalid-feedback" data-field="name">Please enter group name</div>
                  </div>
                  <div class="col-md-6">
                    <label class="form-label" for="group_status">Status <span class="text-danger">*</span></label>
                    <select class="form-select" id="group_status" name="status" required>
                      <option value="ACTIVE" selected>Active</option>
                      <option value="INACTIVE">Inactive</option>
                    </select>
                    <div class="invalid-feedback" data-field="status">Please select a status</div>
                  </div>
                  <div class="col-12">
                    <label class="form-label" for="group_description">Description</label>
                    <input type="text" class="form-control" id="group_description" name="description" placeholder="Optional" />
                  </div>
                </div>
              </form>

              <hr class="my-4" />

              <div id="groupMembershipSection" class="d-none">
                <div class="row g-3">
                  <div class="col-12">
                    <h6 class="mb-2">Members</h6>
                    <div class="row g-2 align-items-center mb-2">
                      <div class="col">
                        <select class="form-select" id="memberUserSelect" multiple data-placeholder="Search and select users"></select>
                        <div class="form-text">Search all users except Super Admin.</div>
                        <div class="small text-600 mt-1" id="membersCreateHint">Tip: save the group first to apply changes.</div>
                      </div>
                      <div class="col-12 col-md-auto d-flex flex-wrap align-items-center gap-2" id="membersApplyWrap">
                        <div class="d-flex align-items-center gap-3">
                          <div class="form-check form-check-inline mb-0">
                            <input class="form-check-input" type="radio" name="mg_mode" id="mg_mode_attach" value="attach" checked>
                            <label class="form-check-label" for="mg_mode_attach">Attach</label>
                          </div>
                          <div class="form-check form-check-inline mb-0">
                            <input class="form-check-input" type="radio" name="mg_mode" id="mg_mode_detach" value="detach">
                            <label class="form-check-label" for="mg_mode_detach">Detach</label>
                          </div>
                          <div class="form-check form-check-inline mb-0">
                            <input class="form-check-input" type="radio" name="mg_mode" id="mg_mode_sync" value="sync">
                            <label class="form-check-label" for="mg_mode_sync">Sync exactly</label>
                          </div>
                        </div>
                        <button type="button" class="btn btn-sm btn-primary" id="applyMembersBtn"><i class="fas fa-check me-1"></i>Apply <span class="badge bg-light text-dark ms-1" id="membersSelectedCount" style="display:none;">0</span><span class="badge bg-warning text-dark ms-2 d-none" id="membersWillChange">0 will change</span><span class="spinner-border spinner-border-sm ms-2 align-text-bottom d-none" id="membersWillChangeSpinner" role="status" aria-hidden="true"></span></button>
                      </div>
                    </div>
                    <ul class="list-group mb-4" id="groupMembersList"></ul>
                    <!-- Last operation result for Members -->
                    <div id="membersOpResults" class="mt-2 d-none">
                      <div class="small text-600 mb-1">Last operation on Members</div>
                      <ul class="list-group list-group-flush small" id="membersOpResultsList"></ul>
                    </div>
                  </div>

                  <div class="col-12">
                    <h6 class="mb-2">Group Roles</h6>
                    <div class="row g-2 align-items-center mb-2">
                      <div class="col">
                        <select class="form-select" id="groupRoleSelect" multiple data-placeholder="Select roles"></select>
                        <div class="small text-600 mt-1" id="rolesCreateHint">Tip: save the group first to apply changes.</div>
                      </div>
                      <div class="col-12 col-md-auto d-flex flex-wrap align-items-center gap-2" id="rolesApplyWrap">
                        <div class="d-flex align-items-center gap-3">
                          <div class="form-check form-check-inline mb-0">
                            <input class="form-check-input" type="radio" name="gr_mode" id="gr_mode_attach" value="attach" checked>
                            <label class="form-check-label" for="gr_mode_attach">Attach</label>
                          </div>
                          <div class="form-check form-check-inline mb-0">
                            <input class="form-check-input" type="radio" name="gr_mode" id="gr_mode_detach" value="detach">
                            <label class="form-check-label" for="gr_mode_detach">Detach</label>
                          </div>
                          <div class="form-check form-check-inline mb-0">
                            <input class="form-check-input" type="radio" name="gr_mode" id="gr_mode_sync" value="sync">
                            <label class="form-check-label" for="gr_mode_sync">Sync exactly</label>
                          </div>
                        </div>
                        <button type="button" class="btn btn-sm btn-primary" id="applyRolesBtn"><i class="fas fa-check me-1"></i>Apply <span class="badge bg-light text-dark ms-1" id="rolesSelectedCount" style="display:none;">0</span><span class="badge bg-warning text-dark ms-2 d-none" id="rolesWillChange">0 will change</span><span class="spinner-border spinner-border-sm ms-2 align-text-bottom d-none" id="rolesWillChangeSpinner" role="status" aria-hidden="true"></span></button>
                      </div>
                    </div>
                    <ul class="list-group" id="groupRolesList"></ul>
                    <!-- Last operation result for Roles -->
                    <div id="rolesOpResults" class="mt-2 d-none">
                      <div class="small text-600 mb-1">Last operation on Roles</div>
                      <ul class="list-group list-group-flush small" id="rolesOpResultsList"></ul>
                    </div>
                    <!-- Unified Apply mode descriptions (visible only in edit mode) -->
                    <div class="small text-600 mt-3 d-none" id="applyModeNotes">
                      <div class="fw-semi-bold mb-1">Apply modes</div>
                      <div class="row g-3">
                        <div class="col-12 col-md-6">
                          <div class="text-700 mb-1">Members</div>
                          <ul class="mb-0 ps-3">
                            <li><strong>Attach</strong>: Add the selected users into this group.</li>
                            <li><strong>Detach</strong>: Remove only the selected users from this group.</li>
                            <li><strong>Sync exactly</strong>: Replace current members with exactly the selected set.</li>
                          </ul>
                        </div>
                        <div class="col-12 col-md-6">
                          <div class="text-700 mb-1">Group Roles</div>
                          <ul class="mb-0 ps-3">
                            <li><strong>Attach</strong>: Add the selected roles to this group (members inherit them).</li>
                            <li><strong>Detach</strong>: Remove only the selected roles from this group (cleaned from members if not retained elsewhere).</li>
                            <li><strong>Sync exactly</strong>: Replace group roles with exactly the selected set (propagated to members).</li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                  
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="border-top px-3 py-2 d-flex justify-content-between align-items-center mt-auto sticky-bottom-footer offcanvas-footer-polished">
        <button type="button" class="btn btn-sm btn-falcon-default" data-bs-dismiss="offcanvas"><i class="fas fa-times me-1"></i>Cancel</button>
        <button type="button" class="btn btn-sm btn-primary" id="saveUserGroupBtn"><i class="fas fa-check me-1"></i>Save</button>
      </div>
    </div>
  </div>
</div>
@endsection
<style>
  /* Offcanvas width and sticky footer pattern (match Warehouse) */
  #userGroupFormOffcanvas {
    --bs-offcanvas-width: clamp(700px, 60vw, 960px);
    width: clamp(700px, 60vw, 960px) !important;
    max-width: 100vw;
  }
  @media (max-width: 768px) {
    #userGroupFormOffcanvas { --bs-offcanvas-width: 100vw; width: 100vw !important; }
  }
  #userGroupFormOffcanvas .offcanvas-body { display: flex; flex-direction: column; height: 100%; }
  #userGroupFormOffcanvas .form-scroll-container { flex: 1 1 auto; overflow: visible; min-height: 0; }
  #userGroupFormOffcanvas .card.h-100 { display: flex; flex-direction: column; min-height: 0; }
  #userGroupFormOffcanvas .card-body { flex: 1 1 auto; min-height: 0; }
  #userGroupFormOffcanvas .sticky-bottom-footer { flex: 0 0 auto; position: sticky; bottom: 0; }
  </style>
@push('scripts')
<script src="/assets/js/utils/datetime.js"></script>
<script src="/assets/js/utils/will-change.js"></script>
<script src="/assets/js/custom/system/user-groups.js"></script>
@endpush