@extends('wallet.layouts.master')
@section('title','Users')
@section('page-css')
    <link rel="stylesheet" href="{{ asset('dashboard_d/assets/styles/vendor/datatables.min.css') }}">
@endsection
@section('content')
    <div class="page-title-head d-flex align-items-center justify-content-between mb-3">
        <h4 class="page-title mb-0">Users</h4>
        <button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#addUserModal">
            <i class="ti ti-plus me-1"></i> Add user
        </button>
    </div>
    <div class="card">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover w-100 align-middle" id="users-table">
                    <thead>
                    <tr>
                        <th>First name</th>
                        <th>Last name</th>
                        <th>Email</th>
                        <th>Status</th>
                        <th>Last login</th>
                        <th>Registered</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach($users as $user)
                        <tr>
                            <td><a class="fw-semibold" href="{{ route('user_details', ['id' => $user->id]) }}">{{ $user->fname ?: '—' }}</a></td>
                            <td><a class="fw-semibold" href="{{ route('user_details', ['id' => $user->id]) }}">{{ $user->lname ?: '—' }}</a></td>
                            <td>{{ $user->email }}</td>
                            <td>
                                <span class="badge {{ $user->status ? 'bg-success' : 'bg-danger' }}">{{ $user->status ? 'Active' : 'Ban' }}</span>
                            </td>
                            <td>{{ $user->last_login ?: '—' }}</td>
                            <td>{{ $user->created_at ? $user->created_at->format('n/j/Y, g:i:s A') : '—' }}</td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="modal fade" id="addUserModal" tabindex="-1" aria-labelledby="addUserModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form id="add-user-form">
                    <div class="modal-header">
                        <h5 class="modal-title" id="addUserModalLabel">Add user</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label" for="client_fname">First name</label>
                            <input class="form-control" id="client_fname" name="fname" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label" for="client_lname">Last name</label>
                            <input class="form-control" id="client_lname" name="lname">
                        </div>
                        <div class="mb-3">
                            <label class="form-label" for="client_email">Email</label>
                            <input class="form-control" id="client_email" name="email" type="email" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label" for="client_phone">Phone</label>
                            <input class="form-control" id="client_phone" name="phone">
                        </div>
                        <div class="mb-3">
                            <label class="form-label" for="client_password">Password</label>
                            <input class="form-control" id="client_password" name="password" type="password" minlength="8" required>
                        </div>
                        <div class="mb-0">
                            <label class="form-label" for="client_password_confirmation">Confirm password</label>
                            <input class="form-control" id="client_password_confirmation" name="password_confirmation" type="password" minlength="8" required>
                        </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" id="add-user-submit">Save user</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script src="{{ asset('dashboard_d/assets/js/vendor/datatables.min.js') }}"></script>
    <script>
        $(document).ready(function () {
            $('#users-table').DataTable({
                pageLength: 10,
                order: [[5, 'desc']],
                language: {
                    emptyTable: 'No users yet. Add a client or share a joining code.'
                }
            });

            $('#add-user-form').on('submit', function (event) {
                event.preventDefault();
                var button = $('#add-user-submit');
                button.prop('disabled', true);
                $.ajax({
                    url: '{{ route('save_client') }}',
                    type: 'POST',
                    data: $(this).serialize(),
                    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                    success: function (data) {
                        if (data.status == 'true' || data.status === true) {
                            Swal.fire({ icon: data.icon, title: 'Success', text: data.message }).then(function () {
                                window.location.reload();
                            });
                        } else {
                            Swal.fire({ icon: data.icon || 'error', title: 'Failed', text: data.message });
                            button.prop('disabled', false);
                        }
                    },
                    error: function (xhr) {
                        var message = (xhr.responseJSON && xhr.responseJSON.message) ? xhr.responseJSON.message : 'Could not add the user.';
                        Swal.fire({ icon: 'error', title: 'Failed', text: message });
                        button.prop('disabled', false);
                    }
                });
            });
        });
    </script>

@endsection