@extends('layouts.app') {{-- Include the layout --}}

@section('content')
<style>
    .small-swal {
        width: 300px;
        font-size: 16px; 
    }
</style>
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-10">
            <div class="card">
                <div class="card-header">Manage Users</div>
                <div class="card-body">
                    @if (session('success'))
                        <div class="alert alert-success custom-alert">
                            {{ session('success') }}
                        </div>
                    @endif
                    
                    @if (session('error'))
                        <div class="alert alert-danger custom-alert">
                            {{ session('error') }}
                        </div>
                    @endif
                    
                    @if (isset($error_message))
                        <div class="alert alert-danger custom-alert">
                            {{ isset($error_message) ? $error_message : '' }}
                        </div>
                    @endif
                    
                    <form method="POST" action="{{ route('updateUser') }}">
                        @csrf
                        
                        
                        <div class="form-row">
                            <div class="form-group col-md-4">
                                <label for="username">Username <span class="text-danger">*</span></label> 
                                <input type="text" id="username" name="username" value="" class="form-control" required>
                                <div class="invalid-feedback">
                                    Please enter the Username.
                                </div>
                            </div>
                            
                            <div class="form-group col-md-4">
                                <label for="name">Name <span class="text-danger">*</span></label> 
                                <input type="text" id="name" name="name" value="" class="form-control" required>
                                <div class="invalid-feedback">
                                    Please enter the Name.
                                </div>
                            </div>
                                    
                            <div class="form-group col-md-4">
                                <label for="email">Email</label>
                                <input type="text" id="email" name="email" value="{{ isset($moduleseq) ? $moduleseq : '' }}" class="form-control">
                            </div>
                        </div>   
                        
                        <div class="form-row">
                            <div class="form-group col-md-4">
                                <label for="password">Password <span class="text-danger">*</span></label> 
                                <input type="password" id="password" name="password" value="" class="form-control" required>
                                <div class="invalid-feedback" id="passerror">
                                    Please enter the Password.
                                </div>
                            </div>
                            
                            <div class="form-group col-md-4">
                                <label for="confirmpass">Confirm Password <span class="text-danger">*</span></label> 
                                <input type="password" id="confirmpass" name="confirmpass" value="" class="form-control" required>
                                <div class="invalid-feedback" id="confirmpasserror">
                                    Please enter the Confirm  Password.
                                </div>
                            </div>
                                
                        </div>   
                        
                        <div class="row col-md-9 mt-2">
                            <table class="table table-bordered text-center table-sm">
                                <thead>
                                    <tr>
                                        <th colspan="4" class="bg-light">Menu Rights</th>
                                    </tr>
                                    <tr>
                                        <th width="10%">Sr.</th>
                                        <th width="10%">ID</th>
                                        <th width="60%">Label</th>
                                        <th width="20%">
                                            Action
                                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" class="form-check-input" id="actionCheckbox">
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                     @php
                                        $count=0;
                                     @endphp
                                     @foreach($menulist as $list)
                                        <tr>
                                            <td>{{++$count}}</td>
                                            <td>{{ $list->id }}</td>
                                            <td style="text-align:left !important">
                                                {{ $list->label }}
                                                
                                            </td>
                                            <td>
                                                <div class="form-check">
                                                    <input type="checkbox" class="form-check-input" name="menu_rights[]" id="menuid{{ $list->id }}"  value="{{ $list->id }}">
                                                </div>    
                                            </td>
                                            
                                            
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        
                        <br>
                        
                        <div style="text-align:right">
                            <input type="hidden" id="userid" name="userid"  value="0">
                            
                             <a href="" type="button" class="btn btn-primary" id="addbtn" style="display:none">Add New</a>
                            <button type="submit" class="btn btn-success" id="savebtn">Add New</button>
                        </div> 
                    </form>
                    <br>
                </div>
            </div>
            <br>
            <div class="card">
                <div class="card-header">Users List</div>
                <div class="card-body">
                    <table class="table table-bordered text-center table-sm">
                            <thead>
                                <tr>
                                    <th width="10%">Sr.</th>
                                    <th width="10%">ID</th>
                                    <th width="20%">Username</th>
                                    <th width="20%">Name</th>
                                    <th width="20%">Email</th>
                                    <th width="10%">Edit</th>
                                    <th width="10%">Delete</th>
                                </tr>
                            </thead>
                            <tbody>
                                 @php
                                    $count=0;
                                 @endphp
                                 @foreach($userslist as $list)
                                    <tr>
                                        <td>{{++$count}}</td>
                                        <td>{{ $list->id }}</td>
                                        <td style="text-align:left !important">
                                            {{ $list->username }}
                                            <input type="hidden" id="username{{ $list->id }}"  value="{{ $list->username }}">
                                        </td>
                                        <td style="text-align:left !important">
                                            {{ $list->name }}
                                            <input type="hidden" id="name{{ $list->id }}" value="{{ $list->name }}">
                                        </td>
                                        
                                        <td style="text-align:left !important">
                                            {{ $list->email }}
                                            <input type="hidden" id="email{{ $list->id }}" value="{{ $list->email }}">
                                        </td>
                                        <td>
                                            <a href="javascript:EditUser({{ $list->id }},{{ $list->menurights }})"><span class="text-success"><i class="fas fa-edit"></i></span></a>
                                        </td>
                                        <td>
                                            <a href="javascript:DeleteUser({{ $list->id }})"><span class="text-danger"><i class="fas fa-trash-alt"></i></span></a>    
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                    </table>        
                </div>
            </div>    
            
        </div>
    </div>
</div>    


<script>

$('#savebtn').on('click', function(event) {
    
    var password = document.getElementById('password').value;
    var confirmpass = document.getElementById('confirmpass').value;
    var username = document.getElementById('username').value;
    var name = document.getElementById('name').value;

    if(password!='' && confirmpass!='' && username!='' && name!=''){
        
        if(password.length<4) {
        
            Swal.fire({
                icon: 'error',
                text: 'Password must be at least 4 characters long!',
                timer: 3000,
                timerProgressBar: true,
                customClass: {
                    popup: 'small-swal'
                }
            });
            
            return false;
        }
        
        if(password !== confirmpass) {
        
            Swal.fire({
                icon: 'error',
                text: 'Password and Confirm Password do not match!',
                timer: 3000,
                timerProgressBar: true,
                customClass: {
                    popup: 'small-swal' 
                }
            });
            
            return false;
        }
        
        
        var isAnyCheckboxChecked = $('input[name="menu_rights[]"]:checked').length > 0;
        if (!isAnyCheckboxChecked) {
            
            event.preventDefault();
            
            Swal.fire({
                icon: 'error',
                text: 'Please select at least one menu right before saving!',
                timer: 3000,
                timerProgressBar: true,
                customClass: {
                    popup: 'small-swal'
                }
            });
    
            return false; 
        }
        
    }
    

    var form = event.target.form;

    if (!form.checkValidity()) {
        event.preventDefault();
    }
   
    $(form).addClass('was-validated');
        
       
    
});



function EditUser(id, menuRightsIds) {
    
   
    if(id>0)
    {
        var name = $('#name'+id).val();
        var username = $('#username'+id).val();
        var email = $('#email'+id).val();
    
        $('#name').val(name);
        $('#username').val(username);
        $('#email').val(email);
        $('#userid').val(id);
        $('#savebtn').text('Update');
        $('#addbtn').css('display','');
        
        $('#password').removeAttr('required');
        $('#confirmpass').removeAttr('required');
        
        if(Array.isArray(menuRightsIds) && menuRightsIds.length) {
            menuRightsIds.forEach(function(menuId) {
                $('#menuid' + menuId).prop('checked', true);
            });
        }
        
        
    }
    
}


function DeleteUser(id) {
    if(id>0)
    {
        Swal.fire({
            title: 'Are you sure?',
            icon: 'warning',
            width: '300px',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if (result.isConfirmed) {
                
                $.ajax({
                    type: 'DELETE',
                    url: '{{ route('deleteUser', '') }}/' + id,
                    data: {
                        _token: '{{ csrf_token() }}',
                    },
                    success: function(response) {
                        
                        if (response.error) {
                            Swal.fire({
                                title: response.error,
                                icon: 'error',
                                customClass: {
                                    title: 'small-swal'
                                }
                            });
                        } else if (response.success) {
                            
                            location.reload();
                        }
                    },
                    error: function(error) {
                        console.error('Error deleting the user', error);
                    }
                });
                
            } else {
           
            }
        });
                
        
            
    }
    
}


$(document).ready(function() {
    
    $('#actionCheckbox').click(function() {
        $('.form-check-input:not(#actionCheckbox)').prop('checked', this.checked);
    });

    // Uncheck the action checkbox if any row checkbox is unchecked
    $(document).on('change', '.form-check-input:not(#actionCheckbox)', function() {
        if (!this.checked) {
            $('#actionCheckbox').prop('checked', false);
        } else if ($('.form-check-input:not(#actionCheckbox):not(:checked)').length === 0) {
            $('#actionCheckbox').prop('checked', true);
        }
    });
});

</script>

@endsection