@extends('layouts.app')

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

@section('page-specific-style')
<!-- DataTables -->
<link href="{{asset('assets/libs/datatables.net-bs4/css/dataTables.bootstrap4.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('assets/libs/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css')}}" rel="stylesheet" type="text/css" />

<!-- Responsive datatable examples -->
<link href="{{asset('assets/libs/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css')}}" rel="stylesheet" type="text/css" />

<style>
    .avatar-xs {
        width: 2rem;
        height: 2rem;
    }

    .rounded-circle {
        border-radius: 50% !important;
    }

    .initials-badge {
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
        background: linear-gradient(135deg, #f3f4f6 0%, #e2e8f0 100%);
        color: #1f2933;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-transform: uppercase;
    }
</style>
@endsection

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex align-items-center justify-content-between">
                <h4 class="mb-0 font-size-18">Users</h4>
                <div class="page-title-right vrtlDiv">
                    <div class="text-sm-end">
                        @can('Create user')
                        <a class="btn btn-primary mb-2 me-2" href="{{ route('user.create') }}">
                            <i class="mdi mdi-plus me-1"></i> Add User
                        </a>
                        @endcan
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="card card-body">
        @include('includes.alerts')
        <div class="row mb-2">
            <div class="col-sm-4"></div>
            <div class="col-sm-8">

            </div>
        </div>
        <div class="table-container">
            <table id="datatable-buttons" class="table table-bordered dt-responsive nowrap w-100">
                <thead>
                    <tr>
                        <th class="th-sm">#</th>
                        <th class="th-sm">Name</th>
                        <th class="th-sm">Email</th>
                        <th class="th-sm">Phone</th>
                        <th class="th-sm">Status</th>
                        <th class="th-sm">Last logged in</th>
                        <th class="th-sm">Last logged in IP Address</th>
                        <th class="th-sm">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($users as $key => $user)
                    <tr>
                        <td>
                            @if($user->thumbnail)
                                <img class="rounded-circle avatar-xs" src="{{ Storage::url($user->thumbnail) }}" alt="Thumbnail" class="img-thumbnail">
                            @else
                                @php
                                    $initials = collect(explode(' ', trim($user->name ?? '')))
                                        ->filter()
                                        ->map(fn($part) => strtoupper(substr($part, 0, 1)))
                                        ->take(2)
                                        ->implode('');
                                @endphp
                                <div class="initials-badge">
                                    <strong>{{ $initials ?: 'U' }}</strong>
                                </div>
                            @endif
                        </td>
                        <td>
                            <h5 class="font-size-14 mb-1"><a href="#" class="text-dark">{{ $user->name }}</a></h5>
                            <p class="text-muted mb-0">
                                {{ $user->getRoleNames()->implode(', ') }}
                            </p>
                        </td>
                        <td>{{ $user->email }}</td>
                        <td>{{ $user->phone_number ?? 'N/A' }}</td>
                        <td>{{ $user->status == 1 ? 'Active' : 'Inactive' }}</td>
                        <td>{{ $user->last_login ? $user->last_login->format('d M, Y h:i A') : 'N/A' }}</td>
                        <td>{{ $user->logged_in_ip_address ?? 'N/A' }}</td>
                        <td>
                            @can('Update user')
                            <a class="btn btn-warning btn-sm" href="{{ route('user.edit', $user->id) }}"><i class="fas fa-edit"></i></a>
                            @endcan

                            @can('Delete user')
                            <button class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#deleteModal" data-id="{{ $user->id }}" data-name="{{ $user->name }}"><i class="fa fa-trash"></i></button>
                            @endcan

                            @can('View users')
                            @if($user->id != auth()->id())
                                <a href="{{ route('user.impersonate', $user->id) }}" class="btn btn-success btn-sm" title="Impersonate as {{ $user->name }}">
                                    <i class="fas fa-eye"></i>
                                </a>
                            @endif
                            @endcan

                            @can('Update user')
                            <button class="btn btn-info btn-sm"
                                    data-bs-toggle="modal"
                                    data-bs-target="#resetPasswordModal"
                                    data-id="{{ $user->id }}"
                                    data-name="{{ $user->name }}"
                                    title="Reset Password">
                                <i class="fas fa-key"></i>
                            </button>

                            @endcan
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="4">No user found at this moment.</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteModalLabel">Confirm Delete</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                Are you sure you want to delete <strong id="userName"></strong>?
            </div>
            <div class="modal-footer">
                <form id="deleteForm" method="POST">
                    @csrf
                    @method('DELETE')
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-danger">Delete</button>
                </form>
            </div>
        </div>
    </div>
</div>


<!-- Reset Password Modal -->
<div class="modal fade" id="resetPasswordModal" tabindex="-1" aria-labelledby="resetPasswordModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <form method="POST" id="resetPasswordForm">
            @csrf
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="resetPasswordModalLabel">Reset Password</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>Reset password for <strong id="resetUserName"></strong></p>
                    <div class="mb-3">
                        <label for="newPassword" class="form-label">New Password</label>
                        <input type="password" name="password" class="form-control" id="newPassword" required>
                    </div>
                    <div class="mb-3">
                        <label for="confirmPassword" class="form-label">Confirm Password</label>
                        <input type="password" name="password_confirmation" class="form-control" id="confirmPassword" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Reset Password</button>
                </div>
            </div>
        </form>
    </div>
</div>



@endsection

@section('page-specific-script')
<!-- Required datatable js -->
<script src="{{asset('assets/libs/datatables.net/js/jquery.dataTables.min.js')}}"></script>
<script src="{{asset('assets/libs/datatables.net-bs4/js/dataTables.bootstrap4.min.js')}}"></script>

<!-- Responsive examples -->
<script src="{{asset('assets/libs/datatables.net-responsive/js/dataTables.responsive.min.js')}}"></script>
<script src="{{asset('assets/libs/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js')}}"></script>

<!-- Datatable init js -->
<script src="{{asset('assets/js/pages/datatables.init.js')}}"></script>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const deleteModal = document.getElementById('deleteModal');

        deleteModal.addEventListener('show.bs.modal', function (event) {
            const button = event.relatedTarget; // Button that triggered the modal
            const userId = button.getAttribute('data-id'); // Extract info from data-* attributes
            const userName = button.getAttribute('data-name');
            const form = deleteModal.querySelector('#deleteForm');

            form.action = `/user/delete/${userId}`; // Update form action URL
            deleteModal.querySelector('#userName').textContent = userName; // Update user name in modal

        });
    });
</script>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const resetModal = document.getElementById('resetPasswordModal');

        resetModal.addEventListener('show.bs.modal', function (event) {
            const button = event.relatedTarget;
            const userId = button.getAttribute('data-id');
            const userName = button.getAttribute('data-name');
            const form = resetModal.querySelector('#resetPasswordForm');

            form.action = `/user/reset-password/${userId}`;
            resetModal.querySelector('#resetUserName').textContent = userName;
        });
    });
</script>


@endsection