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

@section('content')


<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Manage Category</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('updateCategory') }}">
                        @csrf
                        
                        <div class="form-group">
                             
                             <select name="moduleid" id="moduleid" class="form-control" required>
                                <option label="" sequence="" value="">Select Module</option>
                                
                                @foreach($modulelist as $list)
                                
                                    @php
                                        $select = (isset($moduleid) && $moduleid == $list->id) ? 'selected' : '';
                                    @endphp
                                
                                    <option value="{{ $list->id }}" label="{{ $list->label }}" sequence="{{ $list->sequence }}" {{ $select }}>{{ $list->label }}</option>
                                @endforeach
                                
                            </select>
                            <div class="invalid-feedback">
                                Please select a Module.
                            </div>
                            
                        </div>
                        
                        <div class="form-group">
                            <label for="catname">Name <span class="text-danger">*</span></label> 
                            <input type="text" id="catname" name="catname" class="form-control" value="{{ isset($label) ? $label : '' }}" required>
                            <div class="invalid-feedback">
                                Please enter the Module Name.
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="urltext">URL</label> 
                            <input type="text" id="urltext" name="urltext" class="form-control" value="{{ isset($url) ? $url : '' }}">
                        </div>
                        
                        <div class="form-group">
                            <label for="component">Component</label> 
                            <input type="text" id="component" name="component" class="form-control" value="{{ isset($component) ? $component : '' }}">
                        </div>
                                
                        <div class="form-group">
                            <label for="catsequence">Sequence <span class="text-danger">*</span></label>
                            <input type="number" id="catsequence" name="catsequence" class="form-control" value="{{ isset($sequence) ? $sequence : '' }}" 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>


                        <div class="form-group">
                             <label for="menutype">Menu Type <span class="text-danger">*</span></label>
                             <select name="menutype" id="menutype" class="form-control" required>
                                @foreach($menutypelist as $mlist)
                                
                                    @php
                                        $select = (isset($menutype) && $menutype == $mlist->id) ? 'selected' : '';
                                    @endphp
                                
                                    <option value="{{ $mlist->id }}"  {{ $select }}>{{ $mlist->type }}</option>
                                @endforeach
                             </select>
                            <div class="invalid-feedback">
                                Please select a Menu Type.
                            </div>
                            
                        </div>

                        <div class="form-group">
                            <label for="addmodal">Add Modal ID (if exist)</label>
                            <input type="text" id="addmodal" name="addmodal" class="form-control" value="{{ isset($modal) ? $modal : '' }}">
                            
                        </div>
                        
                        <br>
                        
                        <div style="text-align:right">
                            <a href="{{ route('category') }}"><button type="button" class="btn btn-primary">Back</button></a>
                            <button type="submit" class="btn btn-success" id="savebtn">{{ isset($categoryid) ? 'Update' : 'Add' }}</button>
                            
                        </div> 
                        
                        <input type="hidden" name="categoryid" value="{{ isset($categoryid) ? $categoryid : '' }}" >
                        
                    </form>
                    
                </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');
});

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'
                    }
                });
            }
        });

        
    }
}





</script>

@endsection