@extends('layouts.app') 

@section('content')
@include('loader')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-10">
            <div class="card" >
                <div class="card-header">
                    Manage Sub-Category
                    <div style="float:right">
                            <a href="{{ route('subcategory-form') }}"> <button type="submit" class="btn btn-success btn-sm" id="savebtn">Add New</button></a>
                    </div> 
                </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
                    
                    <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)
                                    <option value="{{ $list->id }}" label="{{ $list->label }}" sequence="{{ $list->sequence }}" >{{ $list->label }}</option>
                                @endforeach
                                
                            </select>
                        </div>
                        
                        <div class="form-group">
                             
                             <select name="categoryid" id="categoryid" class="form-control" required>
                                <option label="" sequence="" value="">Select Category</option>
                                
                                
                                
                            </select>
                        </div>
                        
                        <div class="form-group" id="maindiv" style="display:none">
                            <label for="name"><b>Sub-Category List</b></label>
                            <div class="table-responsive" id="datadiv">
                            </div>
                            
                        </div>
                        
                    </form>
                    
                </div>
            </div>
        </div>
    </div>
</div>    


<script>


$("#moduleid").change(function() {
    
    var moduleid=$('#moduleid').val();
            
    if(moduleid>0)
    {
        $.ajax({
            url: 'category-option-list/'+moduleid, // The route to fetch the data
            type: 'GET',
            success: function(data) {
                $('#categoryid').empty();
                $('#categoryid').append(data);
                
                $('#maindiv').css('display','none');
                $('#datadiv').html('');
                
            },
            error: function() {
                alert('Error loading data.');
            }
        });
    }
    
});

$("#categoryid").change(function() {
    
    var categoryid=$('#categoryid').val();
    var moduleid=$('#moduleid').val();
    
    if(categoryid>0 && moduleid>0)
    {
        var selectedOption = $(this).find(":selected");
        var sequence = selectedOption.attr("sequence");
        var label = selectedOption.attr("label");
    
        LoadingStart();
       
        $.ajax({
            url: 'subcategory-list/'+moduleid+'/'+categoryid, // The route to fetch the data
            type: 'GET',
            success: function(data) {
                
                if(data!='')
                {
                    $('#maindiv').css('display','block');
                    $('#datadiv').html(data);
                }
                else {
                    $('#maindiv').css('display','none');
                    $('#datadiv').html('');
                }
                
                
                LoadingStop();
                
            },
            error: function() {
                alert('Error loading data.');
                LoadingStop();
            }
        });
        
        
    }
    else {
        
        $('#maindiv').css('display','none');
        $('#datadiv').html('');
    }
    
});


function deleteSubCat(subcategoryid)
{
    
    if(subcategoryid>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('deleteSubCategory', '') }}/' + subcategoryid,
                    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: false,
                                timer: 3000,
                            });
                            
                             $('#row-' + subcategoryid).hide();
                        }
                    },
                    error: function(error) {
                        console.error('Error deleting the category', error);
                    }
                });
                
            } else {
           
            }
        });
                
        
            
    }
    
}


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

function changeStatus(subcategoryid,inactive)
{
    
    if(subcategoryid>0)
    {
        if(inactive==0){
            var btntext="Yes, inactive it!";
            var btnclass="btn btn-lg text-danger";
            var iconclass="fas fa-times";
        }
        else{
            var btntext="Yes, active it!";
            var btnclass="btn btn-lg text-success";
            var iconclass="fas fa-check";
        }
        
        Swal.fire({
            title: 'Are you sure?',
            icon: 'warning',
            width: '300px',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: btntext
        }).then((result) => {
            if (result.isConfirmed) {
                
                $.ajax({
                    type: 'PUT',
                    url: '{{ route('changeCatStatus', '') }}/' + subcategoryid,
                    data: {
                        _token: '{{ csrf_token() }}',
                        inactive:inactive,
                    },
                    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: false,
                                timer: 3000,
                            }).then(() => {
                                $("#categoryid").trigger("change");
                            });
                            
                           
                             
                        }
                    },
                    error: function(error) {
                        console.error('Error deleting the category', error);
                    }
                });
                
            } else {
           
            }
        });
                
        
            
    }
    
}



</script>

@endsection