@extends('layout.app')

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

    <div class="card shadow-lg">
        <div class="card-body">

            <!-- HEADER -->
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h4 class="mb-0">
                    <i class="bi bi-people-fill text-primary me-2"></i>
                    {{ lang_value('User Management','பயனர் நிர்வாகம்') }}
                </h4>

                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#userModal">
                    <i class="bi bi-plus-circle me-1"></i>
                    {{ lang_value('Add User','பயனர் சேர்க்க') }}
                </button>
            </div>

            <hr>

            <!-- USERS TABLE -->
            <div class="table-responsive">
                <table class="table table-bordered table-hover align-middle text-center">
                    <thead class="table-light">
                        <tr>
                            <th>#</th>
                            <th>{{ lang_value('Username','பயனர் பெயர்') }}</th>
                            <th>{{ lang_value('Password','கடவுசொல்') }}</th>
                            <th>{{ lang_value('Role','பங்கு') }}</th>
                            <th>{{ lang_value('Status','நிலை') }}</th>
                            <th>{{ lang_value('Permissions','அனுமதிகள்') }}</th>
                            <th>{{ lang_value('Action','செயல்') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($users as $i => $user)
                        <tr>
                            <td>{{ $i+1 }}</td>
                            <td>{{ $user->username }}</td>
                            <td>{{ $user->password }}</td>
                            <td>{{ $user->role->name }}</td>
                            <td>
                                <span class="badge {{ $user->status ? 'bg-success' : 'bg-danger' }}">
                                    {{ $user->status ? 'Active' : 'Inactive' }}
                                </span>
                            </td>
                            <td>
                                <button class="btn btn-sm btn-outline-info permission-btn"
                                    data-user='@json($user)'>
                                    <i class="bi bi-shield-lock"></i>
                                </button>
                            </td>
                            <td>
                                <button class="btn btn-sm btn-outline-secondary edit-btn"
                                    data-user='@json($user)'>
                                    <i class="bi bi-pencil"></i>
                                </button>

                                <button class="btn btn-sm btn-outline-danger toggle-status"
                                    data-id="{{ $user->id }}">
                                    <i class="bi bi-power"></i>
                                </button>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>

                <!-- Edit User Modal -->
                <div class="modal fade" id="editUserModal" tabindex="-1">
                    <div class="modal-dialog modal-lg modal-dialog-centered">
                        <div class="modal-content">
                            <form id="editUserForm" method="POST" action="{{ route('settings.users.update') }}">
                                @csrf

                                <div class="modal-header">
                                    <h5 class="modal-title">Edit User</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                </div>

                                <div class="modal-body row g-3">
                                    <input type="hidden" name="id" id="edit_user_id">

                                    <div class="col-md-6">
                                        <label class="form-label">Username</label>
                                        <input type="text" class="form-control" name="username" id="edit_username">
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">Password</label>
                                        <input type="password" class="form-control" name="password" id="edit_password">
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">Role</label>
                                        <select class="form-select" name="role_id" id="edit_role">
                                            @foreach($roles as $role)
                                                <option value="{{ $role->id }}">{{ $role->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">Status</label>
                                        <select class="form-select" name="status" id="edit_status">
                                            <option value="1">Active</option>
                                            <option value="0">Inactive</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="modal-footer">
                                    <button class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                                    <button class="btn btn-primary">Update</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

            </div>

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

<!-- PERMISSION MODAL -->
<div class="modal fade" id="permissionModal" tabindex="-1">
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <form method="POST" action="{{ route('settings.users.permissions') }}" class="modal-content">
            @csrf

            <input type="hidden" name="user_id" id="perm_user_id">

            <div class="modal-header">
                <h5 class="modal-title">Manage Permissions</h5>
                <button class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="table-responsive">
                <table class="table table-bordered text-center align-middle">
                    <thead class="table-light">
                        <tr>
                            <th>Menu</th>
                            <th>View</th>
                            <th>Create</th>
                            <th>Edit</th>
                            <th>Delete</th>
                        </tr>
                    </thead>
                    <tbody>
                      @foreach($menus as $menu)
<tr>
    <td>{{ $menu->name }}</td>
    @foreach(['view','create','edit','delete'] as $action)
        @php
            $perm = $menu->permissions->firstWhere('action', $action);
        @endphp
        <td>
            @if($perm)
            <input type="checkbox"
                   name="permissions[]"
                   value="{{ $perm->id }}"
                   class="perm-check"
                   id="p{{ $perm->id }}">
            @endif
        </td>
    @endforeach
</tr>
@endforeach

                    </tbody>
                </table>
            </div>

            <div class="modal-footer">
                <button class="btn btn-primary">Save Permissions</button>
                <button class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
            </div>
        </form>
    </div>
</div>

<!-- CREATE / EDIT USER MODAL -->
<div class="modal fade" id="userModal" tabindex="-1">
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <form id="userForm" method="POST" action="{{ route('settings.users.store') }}" class="modal-content">
            @csrf

            <div class="modal-header">
                <h5 class="modal-title">
                    {{ lang_value('Create / Edit User','பயனர் உருவாக்க / திருத்த') }}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">
                <input type="hidden" name="shop_id" value="{{ session('user_id') }}">
                <div class="row g-3">
                    <div class="col-md-4">
                        <label class="form-label">{{ lang_value('Username','பயனர் பெயர்') }}</label>
                        <input type="text" name="username" id="username" class="form-control" required>
                    </div>

                    <div class="col-md-4">
                        <label class="form-label">{{ lang_value('Password','கடவுச்சொல்') }}</label>
                        <input type="password" name="password" id="password" class="form-control">
                    </div>
                </div>

                <hr>

               <!-- PERMISSIONS -->
<h6 class="mb-2">{{ lang_value('Permissions','அனுமதிகள்') }}</h6>

<div class="row">
    @foreach($permissions as $permission)
        @php
            $checked = in_array($permission->id, $userPermissions ?? []) ? 'checked' : '';
        @endphp
        <div class="col-md-3 col-6">
            <div class="form-check">
                <input class="form-check-input permission-checkbox"
                       type="checkbox"
                       name="permissions[]"
                       value="{{ $permission->id }}"
                       id="perm{{ $permission->id }}"
                       {{ $checked }}>
                <label class="form-check-label" for="perm{{ $permission->id }}">
                    {{ $permission->name }}
                </label>
            </div>
        </div>
    @endforeach
</div>


            </div>

            <div class="modal-footer">
                <button type="submit" class="btn btn-success">
                    <i class="bi bi-check-circle me-1"></i>
                    {{ lang_value('Save','சேமி') }}
                </button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    Esc
                </button>
            </div>

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

@endsection

@push('scripts')
<script>
document.addEventListener('click', function(e){
    if(e.target.closest('.edit-btn')){
        let user = JSON.parse(e.target.closest('.edit-btn').getAttribute('data-user'));
        document.getElementById('edit_user_id').value = user.id;
        document.getElementById('edit_username').value = user.username;
        document.getElementById('edit_password').value = '';
        document.getElementById('edit_role').value = user.role_id;
        document.getElementById('edit_status').value = user.status ? 1 : 0;
        new bootstrap.Modal(document.getElementById('editUserModal')).show();
    }

    if(e.target.closest('.permission-btn')){
        let user = JSON.parse(e.target.closest('.permission-btn').getAttribute('data-user'));
        document.getElementById('perm_user_id').value = user.id;
        document.querySelectorAll('.perm-check').forEach(cb => cb.checked = false);
        if(user.permissions){
            user.permissions.forEach(p => {
                let checkbox = document.querySelector(`.perm-check[value="${p.id}"]`);
                if(checkbox) checkbox.checked = true;
            });
        }
        new bootstrap.Modal(document.getElementById('permissionModal')).show();
    }

    if(e.target.closest('.toggle-status')){
        let id = e.target.closest('.toggle-status').dataset.id;
        if(confirm('Change user status?')){
            window.location.href = `/settings/users/toggle/${id}`;
        }
    }
});

/* Enter key submits create user form */
document.querySelectorAll('#userForm input').forEach(input => {
    input.addEventListener('keypress', function(e){
        if(e.which === 13) document.getElementById('userForm').submit();
    });
});

document.addEventListener('click', function(e){
    if(e.target.closest('.permission-btn')){
        let user = JSON.parse(e.target.closest('.permission-btn').getAttribute('data-user'));
        let userId = user.id;
        document.getElementById('perm_user_id').value = userId;

        // Reset all checkboxes
        document.querySelectorAll('.perm-check').forEach(cb => cb.checked = false);

        // AJAX request
        fetch("{{ route('users.get-permissions') }}", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "X-CSRF-TOKEN": "{{ csrf_token() }}"
            },
            body: JSON.stringify({ user_id: userId })
        })
        .then(res => res.json())
        .then(data => {
            // data = {menu_id: {action: permission_id}}
            Object.keys(data).forEach(menuId => {
                Object.keys(data[menuId]).forEach(action => {
                    let permId = data[menuId][action];
                    let checkbox = document.getElementById('p'+permId);
                    if(checkbox) checkbox.checked = true;
                });
            });
        });

        // Show modal
        new bootstrap.Modal(document.getElementById('permissionModal')).show();
    }
});

</script>
<script>
document.addEventListener("keydown", function(e) {

    // If user is typing inside input, textarea — ignore backspace
    const active = document.activeElement;
    const typingTags = ["INPUT", "TEXTAREA"];

    if (typingTags.includes(active.tagName)) return;

    // Backspace = go back
    if (e.key === "Backspace") {
        e.preventDefault();
        window.location.href = "{{ route('user.dashboard') }}";
    }
});
</script>
@endpush