@extends('layouts.app')

@section('title', 'Staff Management')
@section('page_title', 'Staff Accounts & Access Controls')

@section('content')
<div class="row g-4 mb-4">
    <div class="col-md-6">
        <div class="stat-card">
            <div class="stat-icon bg-primary bg-opacity-10 text-primary">
                <i class="bi bi-people-fill"></i>
            </div>
            <h6 class="text-secondary small fw-bold">TOTAL STAFF ACCOUNTS</h6>
            <h3 class="fw-bold mb-0 text-dark">{{ $users->count() }}</h3>
        </div>
    </div>
    <div class="col-md-6">
        <div class="stat-card">
            <div class="stat-icon bg-success bg-opacity-10 text-success">
                <i class="bi bi-shield-check"></i>
            </div>
            <h6 class="text-secondary small fw-bold">ACTIVE ACCOUNTS</h6>
            <h3 class="fw-bold mb-0 text-dark">{{ $users->where('status', 'active')->count() }}</h3>
        </div>
    </div>
</div>

<div class="card border-0 shadow-sm p-4">
    <div class="d-flex align-items-center justify-content-between mb-4">
        <h5 class="fw-bold mb-0 text-dark">Staff Directory</h5>
        <button class="btn btn-primary d-flex align-items-center gap-2" data-bs-toggle="modal" data-bs-target="#addUserModal">
            <i class="bi bi-plus-circle"></i> Create Staff Account
        </button>
    </div>

    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
            <thead>
                <tr>
                    <th>Code</th>
                    <th>Full Name</th>
                    <th>Username</th>
                    <th>Role</th>
                    <th>Phone</th>
                    <th>Last Login</th>
                    <th>Status</th>
                    <th class="text-end no-print">Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach($users as $u)
                    <tr>
                        <td class="fw-bold">{{ $u->employee_code }}</td>
                        <td><span class="fw-semibold text-dark">{{ $u->full_name }}</span></td>
                        <td><code class="small">{{ $u->username }}</code></td>
                        <td><span class="badge bg-primary-subtle text-primary">{{ $u->role->display_name }}</span></td>
                        <td>{{ $u->phone ?? '-' }}</td>
                        <td>
                            @if($u->last_login_at)
                                <small class="text-secondary">{{ $u->last_login_at->format('M d, Y H:i') }}</small>
                            @else
                                <span class="text-muted small">Never</span>
                            @endif
                        </td>
                        <td>
                            <span class="badge bg-{{ $u->status === 'active' ? 'success' : ($u->status === 'suspended' ? 'warning' : 'danger') }}">
                                {{ ucfirst($u->status) }}
                            </span>
                        </td>
                        <td class="text-end no-print">
                            <button class="btn btn-sm btn-outline-primary me-1" 
                                    data-bs-toggle="modal" 
                                    data-bs-target="#editUserModal"
                                    data-id="{{ $u->id }}"
                                    data-name="{{ $u->full_name }}"
                                    data-username="{{ $u->username }}"
                                    data-email="{{ $u->email }}"
                                    data-phone="{{ $u->phone }}"
                                    data-role-id="{{ $u->role_id }}">
                                <i class="bi bi-pencil-square"></i> Edit
                            </button>
                            <button class="btn btn-sm btn-outline-info me-1" 
                                    data-bs-toggle="modal" 
                                    data-bs-target="#permissionOverridesModal"
                                    data-id="{{ $u->id }}"
                                    data-name="{{ $u->full_name }}"
                                    data-role="{{ $u->role->display_name }}"
                                    data-overrides="{{ json_encode($u->userPermissions->mapWithKeys(function($p) { return [$p->id => $p->pivot->granted ? 'grant' : 'revoke']; })) }}">
                                <i class="bi bi-shield-lock"></i> Overrides
                            </button>
                            
                            @if($u->id !== auth()->id())
                                <button class="btn btn-sm btn-outline-secondary" 
                                        data-bs-toggle="modal" 
                                        data-bs-target="#changeStatusModal"
                                        data-id="{{ $u->id }}"
                                        data-name="{{ $u->full_name }}"
                                        data-status="{{ $u->status }}">
                                    Status
                                </button>
                            @endif
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

<!-- Add User Modal -->
<div class="modal fade" id="addUserModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title fw-bold">Create Staff Account</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ route('users.store') }}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label text-secondary small fw-bold">FULL NAME *</label>
                        <input type="text" class="form-control" name="full_name" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-secondary small fw-bold">USERNAME *</label>
                        <input type="text" class="form-control" name="username" required placeholder="e.g. jdoe">
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-secondary small fw-bold">EMAIL ADDRESS</label>
                        <input type="email" class="form-control" name="email">
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-secondary small fw-bold">PHONE NUMBER</label>
                        <input type="text" class="form-control" name="phone">
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-secondary small fw-bold">ROLE *</label>
                        <select class="form-select" name="role_id" required>
                            @foreach($roles as $role)
                                <option value="{{ $role->id }}">{{ $role->display_name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-secondary small fw-bold">INITIAL SECURE PASSWORD *</label>
                        <div class="input-group">
                            <input type="password" class="form-control" name="password" id="add_user_password" required minlength="6" placeholder="Min. 6 characters">
                            <button type="button" class="btn btn-outline-secondary btn-password-toggle" title="Show password" aria-label="Toggle password visibility">
                                <i class="bi bi-eye"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save Account</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit User Modal -->
<div class="modal fade" id="editUserModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title fw-bold">Edit Staff Account</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="editUserForm" method="POST">
                @csrf
                @method('PUT')
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label text-secondary small fw-bold">FULL NAME *</label>
                        <input type="text" class="form-control" name="full_name" id="edit_full_name" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-secondary small fw-bold">USERNAME *</label>
                        <input type="text" class="form-control" name="username" id="edit_username" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-secondary small fw-bold">EMAIL ADDRESS</label>
                        <input type="email" class="form-control" name="email" id="edit_email">
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-secondary small fw-bold">PHONE NUMBER</label>
                        <input type="text" class="form-control" name="phone" id="edit_phone">
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-secondary small fw-bold">ROLE *</label>
                        <select class="form-select" name="role_id" id="edit_role_id" required>
                            @foreach($roles as $role)
                                <option value="{{ $role->id }}">{{ $role->display_name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-secondary small fw-bold">CHANGE PASSWORD (OPTIONAL)</label>
                        <div class="input-group">
                            <input type="password" class="form-control" name="password" id="edit_password" minlength="6" placeholder="Leave blank to keep current">
                            <button type="button" class="btn btn-outline-secondary btn-password-toggle" title="Show password" aria-label="Toggle password visibility">
                                <i class="bi bi-eye"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save Changes</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Change Status Modal -->
<div class="modal fade" id="changeStatusModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title fw-bold">Update Account Status</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="" method="POST" id="changeStatusForm">
                @csrf
                @method('PUT')
                <div class="modal-body">
                    <p class="small text-secondary">Updating account status for <span class="fw-bold text-dark" id="statusUserLabel">-</span>.</p>
                    <div class="mb-3">
                        <label class="form-label text-secondary small fw-bold">ACCOUNT STATUS *</label>
                        <select class="form-select" name="status" id="statusSelect" required>
                            <option value="active">Active</option>
                            <option value="suspended">Suspended (Lock login)</option>
                            <option value="inactive">Inactive</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save Settings</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Permission Overrides Modal -->
<div class="modal fade" id="permissionOverridesModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title fw-bold">Permission Overrides</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="" method="POST" id="permissionOverridesForm">
                @csrf
                <div class="modal-body">
                    <div class="bg-light p-3 rounded mb-3">
                        <div>Staff Name: <span class="fw-bold" id="overrideUserLabel">-</span></div>
                        <div>Role: <span class="fw-bold text-primary" id="overrideRoleLabel">-</span></div>
                    </div>
                    <p class="small text-secondary mb-3">
                        Overrides allow you to grant or revoke specific actions regardless of the staff's standard role group.
                    </p>

                    <div class="table-responsive border rounded" style="max-height: 350px; overflow-y: auto;">
                        <table class="table align-middle table-striped table-sm mb-0">
                            <thead>
                                <tr class="border-bottom">
                                    <th style="width: 45%;">Permission Details</th>
                                    <th style="width: 55%;" class="text-center">Access Settings</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($permissions as $perm)
                                    <tr>
                                        <td>
                                            <div class="fw-semibold text-small">{{ $perm->display_name }}</div>
                                            <small class="text-secondary small d-block">{{ $perm->description }}</small>
                                        </td>
                                        <td class="text-center">
                                            <div class="btn-group btn-group-sm" role="group">
                                                <input type="radio" class="btn-check" name="overrides[{{ $perm->id }}]" id="override_{{ $perm->id }}_default" value="default" checked>
                                                <label class="btn btn-outline-secondary" for="override_{{ $perm->id }}_default">Default</label>

                                                <input type="radio" class="btn-check" name="overrides[{{ $perm->id }}]" id="override_{{ $perm->id }}_grant" value="grant">
                                                <label class="btn btn-outline-success" for="override_{{ $perm->id }}_grant">Grant</label>

                                                <input type="radio" class="btn-check" name="overrides[{{ $perm->id }}]" id="override_{{ $perm->id }}_revoke" value="revoke">
                                                <label class="btn btn-outline-danger" for="override_{{ $perm->id }}_revoke">Revoke</label>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save Overrides</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    // Edit User Modal Show Listener
    const editUserModal = document.getElementById('editUserModal');
    editUserModal.addEventListener('show.bs.modal', function(e) {
        const btn = e.relatedTarget;
        const id = btn.getAttribute('data-id');
        const name = btn.getAttribute('data-name');
        const username = btn.getAttribute('data-username');
        const email = btn.getAttribute('data-email');
        const phone = btn.getAttribute('data-phone');
        const roleId = btn.getAttribute('data-role-id');

        document.getElementById('edit_full_name').value = name;
        document.getElementById('edit_username').value = username;
        document.getElementById('edit_email').value = email;
        document.getElementById('edit_phone').value = phone;
        document.getElementById('edit_role_id').value = roleId;
        document.getElementById('edit_password').value = '';

        const form = document.getElementById('editUserForm');
        form.action = "{{ route('users.update', ':id') }}".replace(':id', id);
    });

    // Status Modal Show Listener
    const statusModal = document.getElementById('changeStatusModal');
    statusModal.addEventListener('show.bs.modal', function(e) {
        const btn = e.relatedTarget;
        const id = btn.getAttribute('data-id');
        const name = btn.getAttribute('data-name');
        const status = btn.getAttribute('data-status');

        document.getElementById('statusUserLabel').innerText = name;
        document.getElementById('statusSelect').value = status;

        const form = document.getElementById('changeStatusForm');
        form.action = "{{ route('users.status', ':id') }}".replace(':id', id);
    });

    // Permission Overrides Modal Show Listener
    const overrideModal = document.getElementById('permissionOverridesModal');
    overrideModal.addEventListener('show.bs.modal', function(e) {
        const btn = e.relatedTarget;
        const id = btn.getAttribute('data-id');
        const name = btn.getAttribute('data-name');
        const role = btn.getAttribute('data-role');
        const overrides = JSON.parse(btn.getAttribute('data-overrides') || '{}');

        document.getElementById('overrideUserLabel').innerText = name;
        document.getElementById('overrideRoleLabel').innerText = role;

        const form = document.getElementById('permissionOverridesForm');
        form.action = "{{ route('users.overrides', ':id') }}".replace(':id', id);

        // Reset radio buttons to default first
        document.querySelectorAll('.btn-check[value="default"]').forEach(r => r.checked = true);

        // Pre-select override settings
        Object.keys(overrides).forEach(permId => {
            const val = overrides[permId]; // 'grant' or 'revoke'
            const radio = document.getElementById(`override_${permId}_${val}`);
            if (radio) radio.checked = true;
        });
    });
</script>
@endsection