@extends('admin.layouts.master')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.10.5/font/bootstrap-icons.min.css">

@section('breadcrumb')
    <section class="content-header">
        <h1>User Dashboard</h1>

        <button type="button" class="btn btn-primary float-end" data-toggle="modal" data-target="#exampleModal" style="float:right; font-size: 12px; padding: 10px 20px; margin-bottom: 10px;">
            Add User
        </button>
    </section>
@stop

@section('content')
    @if (session('errorr'))
        <div class="alert alert-danger">
            {{ session('errorr') }}
        </div>
    @endif


    <div class="row">
        <div class="col-md-12">
            <div class="portlet light bordered">
                <div class="portlet-body">
                    <div class="table-scrollable">
                        <table class="table table-striped table-bordered table-hover table-checkable order-column dataTable no-footer" id="sample_1" role="grid" aria-describedby="sample_1_info">
                            <thead>
                            <tr>
                                <th>#</th>
                                <th class="all">User-Name</th>
                                <th class="all">User-Email</th>
                                <th class="all">Active</th>
                                <th class="all">Actions</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($users as $index => $user)
                                <tr>
                                    <td>{{ $index + 1 }}</td>
                                    <td>{{ $user->name }}</td>
                                    <td>{{ $user->email }}</td>
                                    <td>
                                        @if ($user->is_active)
                                            <i class="bi bi-check-circle" style="color: green; font-size: 20px; padding-left:8px;"></i>
                                        @else
                                            <i class="bi bi-x-circle" style="color: red; font-size: 18px;"></i>
                                        @endif
                                    </td>
                                    <td>
                                        @if($user->email != "hassan.tahir0011@gmail.com")
                                        <!-- Update Link -->
                                        <a href="#" title="Edit" style="color: blue;" data-toggle="modal" data-target="#exampleModal1"
                                           data-id="{{ $user->id }}" data-name="{{ $user->name }}" data-email="{{ $user->email }}">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                            <!-- Delete Form -->
                                            <form action="{{ route('admin.Users.Delete') }}" method="POST" style="display: inline;">
                                                @csrf
                                                <input type="hidden" name="id" value="{{ $user->id }}">
                                                <button type="submit" title="Delete" style="border: none; background: none; color: red; cursor: pointer;">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </form>
                                        @endif

                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <form method="post" action="{{ route('admin.Users.Store') }}" id="my-form">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Add User</h5>

                    </div>
                    <div class="modal-body">
                        @csrf
                        <div class="mb-3">
                            <label for="name" class="form-label">Name</label>
                            <input type="text" class="form-control" id="name" name="name" required>

                        </div>
                        <div class="mb-3">
                            <label for="email" class="form-label">Email address</label>
                            <input type="email" class="form-control" id="email" name="email" required>

                        </div>
                        <div class="mb-3">
                            <label for="password" class="form-label">Password</label>
                            <input type="password" class="form-control" id="password" name="password" required>
                        </div>

                        <div class="mb-3">
                            <label for="password_confirmation" class="form-label">Confirm Password</label>
                            <input type="password" class="form-control" id="password_confirmation" name="password_confirmation">
                        </div>

                        <!-- Error and success message containers -->
                        <div id="password-error" style="color: red; display: none;">Passwords do not match.</div>
                        <div id="password-success" style="color: green; display: none;">Passwords match!</div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Add</button>
                    </div>
                </div>
            </div>
        </form>




    </div>
    <div class="modal fade" id="exampleModal1" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <form method="post" action="{{ route('admin.Users.Update') }}"  id="my-form1">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Update User</h5>
                    </div>
                    <div class="modal-body">
                        @csrf
                        <input type="hidden" name="id" id="update-user-id">

                        <div class="mb-3">
                            <label for="update-name" class="form-label">Name</label>
                            <input type="text" class="form-control" id="update-name" name="name" required>
                        </div>
                        <div class="mb-3">
                            <label for="update-email" class="form-label">Email address</label>
                            <input type="email" class="form-control" id="update-email" name="email" required>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Update</button>
                    </div>
                </div>
            </div>
        </form>
    </div>

@stop

@section('last_scripts')
    <!-- Bootstrap JS and Popper.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.6/umd/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.min.js"></script>

    <script type="text/javascript">

            document.addEventListener('DOMContentLoaded', function() {
            // Get the form and field elements
            var form = document.getElementById('my-form');
            var passwordField = document.getElementById('password');
            var confirmPasswordField = document.getElementById('password_confirmation');
            var errorContainer = document.getElementById('password-error');
            var successContainer = document.getElementById('password-success');

            // Function to check if passwords match
            function checkPasswordsMatch() {
            var password = passwordField.value;
            var confirmPassword = confirmPasswordField.value;

            if (password !== confirmPassword) {
            errorContainer.style.display = 'block'; // Show error message
            successContainer.style.display = 'none'; // Hide success message
            return false;
        } else {
            errorContainer.style.display = 'none'; // Hide error message
            successContainer.style.display = 'block'; // Show success message
            return true;
        }
        }

            // Event listeners for real-time validation
            passwordField.addEventListener('input', checkPasswordsMatch);
            confirmPasswordField.addEventListener('input', checkPasswordsMatch);

            // Form submission handler
            form.addEventListener('submit', function(event) {
            if (!checkPasswordsMatch()) {
            event.preventDefault(); // Prevent form submission if passwords do not match
        }
        });
        });



    </script>
    <script type="text/javascript">
        $(document).ready(function() {
            // When the update button is clicked
            $('[data-target="#exampleModal1"]').on('click', function() {
                // Get data from the clicked link
                var userId = $(this).data('id');
                var userName = $(this).data('name');
                var userEmail = $(this).data('email');

                // Set data in the modal
                $('#update-user-id').val(userId);
                $('#update-name').val(userName); // Update ID
                $('#update-email').val(userEmail); // Update ID
            });
        });
    </script>


@stop