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

@section('content')
@include('loader')

<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Manage Module</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('updateModule') }}">
                        @csrf
                        
                        <div class="form-group d-none">
                             
                             <select name="moduleid" id="moduleid" class="form-control" >
                                <option label="" sequence="" value="0">Select Module</option>
                                
                                @foreach($modulelist as $list)
                                    <option value="{{ $list->id }}" label="{{ $list->label }}" sequence="{{ $list->sequence }}" icon="{{ $list->icon }}">{{ $list->label }}</option>
                                @endforeach
                                
                            </select>
                            
                        </div>
                        
                        <div class="form-group">
                            <label for="modulename">Name <span class="text-danger">*</span></label> 
                            <input type="text" id="modulename" name="modulename" value="{{ isset($modulename) ? $modulename : '' }}" class="form-control" required>
                            <div class="invalid-feedback">
                                Please enter the Module Name.
                            </div>
                        </div>
                                
                        <div class="form-group">
                            <label for="moduleseq">Sequence <span class="text-danger">*</span></label>
                            <input type="number" id="moduleseq" name="moduleseq" value="{{ isset($moduleseq) ? $moduleseq : '' }}" class="form-control" required>
                            <div class="invalid-feedback">
                                Please enter the Module Sequence.
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="caticon">Icon <span class="text-danger">*</span>
                                <a href="#" title="Add Icons" onclick="showIconModal()">
                                    <i class="fa-solid fa-plus text-success border border-success"></i>
                                </a>
                            </label> 
                            <select name="caticon" id="caticon" class="form-control" required>
                                <option value="">Select Icon</option>
                                @foreach($iconlist as $ilist)
                                
                                    @php
                                        $select = (isset($icon) && $icon == $ilist->value) ? 'selected' : '';
                                    @endphp
                                
                                    <option value="{{ $ilist->value }}"  {{ $select }}>{{ $ilist->name }}</option>
                                @endforeach
                            </select>
                            <div class="invalid-feedback">
                                Please select an Icon.
                            </div>
                        </div>
                        
                        <br>
                        
                        <div style="text-align:right">
                            <button type="submit" class="btn btn-success" id="savebtn">Add New</button>
                            <button type="button" class="btn btn-danger" id="deletebtn" style="display:none">Delete</button>
                        </div> 
                    </form>
                    <br>
                </div>
            </div>
            <br>
            <div class="card">
                <div class="card-header">Module List</div>
                <div class="card-body">
                    <table class="table table-bordered text-center table-sm">
                            <thead>
                                <tr>
                                    <th>Sr.</th>
                                    <th>ID</th>
                                    <th width="15%">Sequence</th>
                                    <th>Module</th>
                                    <th colspan="4">Action</th>
                                    
                                </tr>
                            </thead>
                            <tbody>
                                 @php
                                    $count=0;
                                 @endphp
                                 @foreach($modulelist as $list)
                                    <tr id="modulerow{{ $list->id }}">
                                        <td>{{++$count}}</td>
                                        <td>{{ $list->id }}</td>
                                        <td> <input type="text" id="catsequence{{ $list->id }}" value="{{ $list->sequence }}" class="form-control">
                                            <input type="hidden" id="icon{{ $list->id }}" value="{{ $list->icon }}" class="form-control">
                                        </td>
                                        
                                        <td style="text-align:left !important"> <input type="text" id="modulename{{ $list->id }}" value="{{ $list->label }}" class="form-control"></td>



                                        <td>
                                            <a href="javascript:updateModule({{ $list->id }})" title="Update">
                                                <span class="text-success">
                                                <i class="far fa-save"></i>
                                                </span>
                                            </a>    
                                
                                        </td>

                                        
                                        <td>
                                            <a href="javascript:editModule({{ $list->id }})" title="Edit">
                                                <span class="text-primary">
                                                <i class="fas fa-edit"></i>
                                                </span>
                                            </a>
                                        </td>

                                        <td>
                                            <a href="javascript:activeModule({{ $list->id }},{{ $list->inactive }})" title="Update">
                                                <span>
                                                    @if($list->inactive == 1)
                                                        <i class="fas fa-toggle-off text-danger" style="font-size:18px" title='Inactive'></i>
                                                    @else
                                                        <i class="fas fa-toggle-on text-success" style="font-size:18px" title='Active'></i>
                                                        
                                                    @endif
                                                </span>
                                            </a>    
                                        </td>

                                        <td>
                                            <a href="javascript:delModule({{ $list->id }})" title="Delete">
                                                <span class="text-danger">
                                                    <i class="fas fa-trash-alt"></i>
                                                </span>
                                            </a>    
                                        </td>
                                    
                                    </tr>
                                @endforeach
                            </tbody>
                    </table>        
                </div>
            </div>    
            
        </div>
    </div>
</div> 


<div class="modal" id="iconModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add Icons</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="closeModal()">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="iconForm">
                    <div class="form-group">
                        <label for="iconName">Icon Name:</label>
                        <input type="text" class="form-control" id="iconName" required>
                    </div>
                    <div class="form-group">
                        <label for="iconClass">Icon Class:</label>
                        <input type="text" class="form-control" id="iconClass" required>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="saveIcon()">Save</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="closeModal()">Close</button>
            </div>
        </div>
    </div>
</div>


<script>

$('#savebtn').on('click', function(event) {
    var form = event.target.form;

    if (!form.checkValidity()) {
        event.preventDefault();
    }

    $(form).addClass('was-validated');
    
});



$("#moduleid").change(function() {
    var moduleid=$('#moduleid').val();
    editModule(moduleid);
});

function editModule(moduleid){
    
    if(moduleid>0)
    {
        var modulename = $('#modulename' + moduleid).val();
        var sequence = $('#catsequence' + moduleid).val();
        var icon = $('#icon' + moduleid).val();
    
        console.log(icon);

        $('#modulename').val(modulename);
        $('#moduleseq').val(sequence);
        $('#caticon').val(icon);
        $('#moduleid').val(moduleid);
        $('#savebtn').text('Update');
        $('#deletebtn').show();
        
    }
    else {
        $('#modulename').val('');
        $('#moduleseq').val('');
        $('#caticon').val('');
        $('#moduleid').val(0);
        $('#savebtn').text('Add New');
        $('#deletebtn').hide();
    }
    
}


$("#deletebtn").on('click', function() {
    var moduleid=$('#moduleid').val();
    delModule(moduleid);
});
    

function delModule(moduleid){

   
    
    if(moduleid>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('deleteModule', '') }}/' + moduleid,
                    data: {
                        _token: '{{ csrf_token() }}',
                    },
                    success: function(response) {
                        
                        if (response.error) {
                            Swal.fire({
                                title: response.error,
                                icon: 'error',
                                width: '300px',
                                customClass: {
                                    title: 'swal-title'
                                }
                            });
                        } else if (response.success) {
                            
                            Swal.fire({
                                title: response.success,
                                icon: 'success',
                                width: '300px',
                                customClass: {
                                    title: 'swal-title'
                                },
                                showConfirmButton: true,
                            });
                            
                            $('#moduleid option[value="' + moduleid + '"]').remove();
                            $('#modulename').val('');
                            $('#moduleseq').val('');
                            $('#deletebtn').hide();
                            $('#modulerow'+moduleid).hide();
                        }
                    },
                    error: function(error) {
                        console.error('Error deleting the item', error);
                    }
                });
                
            } else {
           
            }
        });
                
        
            
    }
    
}

function showIconModal() {
    $('#iconModal').modal('show');
}

function closeModal() {
    $('#iconModal').modal('hide');
}

function saveIcon() {
    const iconName = $('#iconName').val();
    const iconClass = $('#iconClass').val();

    if (iconName === '' || iconClass === '') {
        Swal.fire({
            title: 'Please add Icon Name & Class!',
            icon: 'error',
            width: '300px',
            customClass: {
                title: 'swal-title'
            }
        });
        return false;
    } else {
        const formData = {
            iconName: iconName,
            iconClass: iconClass
        };

        $.ajax({
            type: 'POST',
            url: '{{ route("addIcons") }}',
            data: formData, // Send form data
            dataType: 'json',
            success: function(response) {
                if (response.status === 'error') {
                
                Swal.fire({
                    title: response.message,
                    icon: 'error',
                    width: '300px',
                    customClass: {
                        title: 'swal-title'
                    }
                });
            } else {
                // Icon saved successfully
                Swal.fire({
                    title: 'Icon Saved Successfully!',
                    icon: 'success',
                    width: '300px',
                    customClass: {
                        title: 'swal-title'
                    }
                });

                const newOption = $('<option>', {
                    value: iconClass,
                    text: iconName
                });
                $('#caticon').append(newOption);

                $('#iconModal').modal('hide');

                $('#iconName').val('');
                $('#iconClass').val('');
            }
            },
            error: function(xhr, status, error) {
                Swal.fire({
                    title: 'Error occurred while saving icon!',
                    icon: 'error',
                    width: '300px',
                    customClass: {
                        title: 'swal-title'
                    }
                });
            }
        });

        
    }
}


function updateModule(moduleid) {
    if (moduleid > 0) {

        var modulename = $('#modulename' + moduleid).val();
        var catsequence = $('#catsequence' + moduleid).val();
        
        
        if (catsequence==0 ||  catsequence=='') {
           Swal.fire({
                    icon: 'error',
                    text: 'Please add sequence.',
                    width: '300px',
                    customClass: {
                        title: 'swal-title'
                    },
                    showConfirmButton: false,
                    timer: 2000,
                });
            return;    
        }
        
        if (modulename=='') {
           Swal.fire({
                    icon: 'error',
                    text: 'Please add module name.',
                    width: '300px',
                    customClass: {
                        title: 'swal-title'
                    },
                    showConfirmButton: false,
                    timer: 2000,
                });
            return;    
        }
        
        LoadingStart();
        $.ajax({
            type: 'put',
            url: '{{ route('updateModuleRow', '') }}/' + moduleid,
            data: {
                modulename: modulename,
                catsequence: catsequence,
            },
            success: function(response) {
               console.log(response);
               LoadingStop();
            },
            error: function(error) {
                console.error('Error updating the category', error);
                 LoadingStop();
            }
        });    
    } 
}


function activeModule(moduleid,active) {


    var activestatus = active==0 ? 1 : 0;
    var activestatustext = active==0 ? 'Inactive' : 'Active';

    if (moduleid > 0) {
    
        LoadingStart();
        $.ajax({
            type: 'put',
            url: '{{ route('activeModuleRow', '') }}/' + moduleid,
            data: {
                activestatus: activestatus,
                activestatustext: activestatustext,
            },
            success: function(response) {
                console.log(response);
                window.location.reload();
                //LoadingStop();
            },
            error: function(error) {
                console.error('Error updating the category', error);
                    LoadingStop();
            }
        });    
    } 
}

</script>

@endsection