@extends('layouts.app')
@section('content')
    <nav class="navbar navbar-main navbar-expand-lg px-0 mx-2 shadow-none border-radius-xl mt-2 bg-primary">
        <div class="container-fluid py-1 px-3 ">
            @include('layouts.navbars.auth.topnav', ['title' => trans('words.homeelementmanagement')])
            <div class="collapse navbar-collapse mt-sm-0 mt-2 me-md-0 me-sm-4" id="navbar">
                <ul class="navbar-nav justify-content-end ms-md-auto pe-md-3 d-flex align-items-center">
                    <li class="nav-item d-flex align-items-center">
                        @include('auth.logout')
                    </li>
                    <li class="nav-item px-3 d-flex align-items-center">
                        <a href="#" onclick='profileSetting({{ auth()->user()->id }});'>
                            <span class=''>
                                <i class="fa fa-user me-sm-0" style="color: white;"></i>
                            </span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="card mx-1 my-1 mt-1 pt-1" id="basic-info">
        <div class="card-header mt-1 pt-1">
            <h5>@lang('words.elementmanagement')</h5>
        </div>
        <div class="card-body mt-1 pt-1">
        <form method="POST" action="" enctype="multipart/form-data">
                @csrf
                <div class="row">
                    <div class="col-lg-1"></div>
                    <div class="col-lg-2 text-end">
                        <label class="form-label">@lang('words.woname')</label>
                    </div>
                    <div class="col-lg-6">
                       <div class=" dropdown-container">
                         <input type="text" class="form-control dropdown-input" name="workorder_name" id="workorder_name" placeholder="Search WorkOrder Name">
                            <div class="dropdown-menu" id="dropdownMenu">
                                <div class="dropdown-item" data-value="0">...</div>
                                @foreach ($workorders as $workorder)
                                    <div id="selectedWorkOrder" class="dropdown-item" data-value="{{ $workorder->id }}">{{ $workorder->name }}</div>
                                @endforeach
                                </div>
                            </div>
                        </div>
                        <p id="workorder_error" class="text-danger text-xs pt-1 errmsg"></p>
                        <p id="workordermatch_error" class="text-danger text-xs pt-1 errmsg"></p>
                        <div class="col-lg-2 text-center" id="delGroup">
                            <button class="btn btn-icon btn-4 btn-success" type="button" id="btnAddGroup" onclick="addNewGroup();">
                                <span class="btn-inner--icon"></span>
                                <span class="btn-inner--text">@lang('words.deleteelement')</span>
                            </button>
                        </div>
                    </div>   
              
                    <div class="col-lg-1"></div>
                </div>
            </form>
        </div>
</div>
        

@endsection
@push('css')
    <style>
        .choices {
            margin-bottom: 0;
        }
        
        #tblUsers > tbody > tr > td {
            text-align: center;
        }
        .dropdown-container {
            position: relative;
            display: inline-block;
        }

        .dropdown-input {
            width: 600px;
            box-sizing: border-box;
        }

        .dropdown-menu {
            display: none;
            position: absolute;
            background-color: white;
            box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
            z-index: 1;
            width: 600px;
            max-height: 200px;
            overflow-y: auto;
        }

        .dropdown-container.show .dropdown-menu {
            display: block;
        }

        .dropdown-item {
            padding: 8px 16px;
            cursor: pointer;
        }

        .dropdown-item:hover {
            background-color: #f1f1f1;
        }
    </style>
@endpush
@push('js')
    <script src="/assets/js/core/jquery.min.js"></script>
    <script src="/assets/js/plugins/choices.min.js"></script>
    <script src="/assets/js/plugins/sweetalert.min.js"></script>
    
    <script>
        function profileSetting(user) {
            window.location.href = "/profileView/" + user;
        }
        var dtusers;
        var workorderid = 0;
        $(document).ready(function() {
            $('.errmsg').hide();
            
            dtusers = $('#tblUsers').DataTable({
                paging: false,
                
                searching: false,
                ordering: true,
                info: true,
                language: {
                    emptyTable: '@lang('words.noworkorderhistoryavailable')'
                },
                columns: [
                    { 
                        data: 'serialNumber',
                        render: function(data, type, row, meta) {
                        return meta.row + 1;
                     }
                    },  
                    { data: 'date' },
                    { data: 'processname' },
                    { data: 'description' },
                    { data: 'remarks' },
                    { data: 'assignedBy' },
                    { data: 'assignedTo' },
                    
                ]
            });
        });


       
        function addNewGroup() {
    let workorderId = $('#selectedWorkOrder').val();
    let isValidWorkorder = false;

    // Check if the workorder ID is present in the dropdown items
    $('#dropdownMenu .dropdown-item').each(function() {
        if ($(this).data('value') == workorderId) {
            console.log(workorderId);
            isValidWorkorder = true;
            return false;  // Break the loop
        }
    });

    if (!isValidWorkorder || parseInt(workorderId) === 0 ) {
        // alert('Please insert a valid workorder');
    } else {
        $('#workorder_error').hide();
        $('#btnAddGroup').hide();
        $('#divAddNewGroup').show();
        $('#workorder_name').setAttribute('readonly', true);
        //fetchWorkOrderDetails(workorderId);
    }
}

    document.querySelectorAll('.dropdown-item').forEach(function(item) {
    item.addEventListener('click', function() {
        var value = this.getAttribute('data-value');
        var text = this.textContent;
        document.getElementById('workorder_name').value = text;
        document.getElementById('selectedWorkOrder').value = value;
        document.querySelector('.dropdown-container').classList.remove('show');
    });
});

document.addEventListener('click', function(event) {
    var isClickInside = document.querySelector('.dropdown-container').contains(event.target);
    if (!isClickInside) {
        document.querySelector('.dropdown-container').classList.remove('show');
    }
});

    function addNewGroup()
    {
        
        workOrderName = $("#workorder_name").val();
        var fd = new FormData();

        

        fd.append('workOrderName',workOrderName);

        

        fd.append('_token','{{csrf_token()}}');

        

        $.ajax({

             

            url: '{{ route('check_workordername') }}',

            type: 'post',

            data:fd,

            contentType: false,

            processData: false,

            success: function(response){

                if(response.result){

                    $('#inWorkOrderName').focus();

                 $('#username').prop('disabled', true);
            $('#status_code').prop('disabled', true);

            let workorderId = document.getElementById('selectedWorkOrder').value;

            if (parseInt(workorderId) === 0) {
                document.getElementById('workorder_error').innerHTML = 'Workorder should not be empty';
                document.getElementById('workorder_error').style.display = 'block';
            } else {
              
              

                confirmAndDelete(workorderId);
            }
        

                      

                  

                }else{

                    Swal.fire({

                    icon: 'warning',

                    title: '@lang('words.workorder')',

                    text: '@lang('words.pleaseentervalidworkordername')',

                    //html: '<div class="form-group"><label class="form-label">Please enter Work Order Name.</label></div>',

                    showCancelButton: false,

                    customClass: {

                    confirmButton: 'btn btn-success mx-2',

                    //cancelButton: 'btn btn-danger mx-2'

                    },

                    buttonsStyling: false

                    }).then(function (result) {



                    });

                }

                

            },

        });

        

           
    }
    function confirmAndDelete(workorderId) {
    // Show confirmation alert using SweetAlert
    Swal.fire({
        title: '@lang('words.sure')',
        text: '@lang('words.doyouwanttodeletetheworkorder')',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: '@lang('words.yesdelete')',
    }).then((result) => {
        if (result.isConfirmed) {
            deleteEntityDetails(workorderId);
        }
    });
}

    function deleteEntityDetails(workorderId) 
    {
        $('#workorder_name').prop('disabled', true);
        $.ajax({
            url: '{{ route("deleteEntityDetails") }}',  
            type: 'POST',
            data: {
                workorder_id: workorderId,
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                if (response.success) {
                Swal.fire({

                    icon: 'success',

                    title: '@lang('words.delete')',

                    text: response.message,

                    showCancelButton: false,

                    customClass: {

                        confirmButton: 'btn btn-success mx-2'

                    },

                    buttonsStyling: false

                    }).then(() => {
                   
                    window.location.href = '/home'; // Adjust the URL to your dashboard route
                });
                
                } else {
                    console.error('Failed to fetch work order details.');
                }
            },
            error: function(error) {
                console.error('Error fetching work order details:', error);
            }
        });
    }

     

        $("#selFieldGroupList").on("change",function() {

            

            groupListId = $("#selFieldGroupList").val();

            GetObjectFieldList(groupListId);

        }); 

        $(document).ready(function() {
     $('#workorder_name').change(function() {
        let workorderId = $(this).val();
        
        if (parseInt(workorderId) === 0) {
            $('#workorder_error').html('@lang('words.workordershouldnotbeempty')');
            $('#workorder_error').show();
            $('#divAddNewGroup').hide();
        } else {
            $('#workorder_error').hide();
           // fetchWorkOrderDetails(workorderId);
        }
    });
});
        function cancelEntry() {
            window.location.href = "/home_workflowchange";
      
    }
   

     $(document).ready(function() {
        $('#company_name').change(function() {
            $('#username').prop('disabled', false);
            let companyName = $(this).val();
            $.ajax({
                url: '{{ route("getUsersByCompany") }}',
                type: 'POST',
                data: {
                    company_name: companyName,
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.success) {
                        let users = response.users;
                        let userDropdown = $('#username');
                        userDropdown.empty();
                        $.each(users, function(index, user) {
                         userDropdown.append('<option value="' + user.username + '">' + user.username + '</option>');
                        });
                    } else {
                        console.error('Failed to fetch users.');
                    }
                },
                error: function(error) {
                    console.error('Error fetching users:', error);
                }
            });
        });
    });

    $(document).ready(function() {
        $('#process_step').change(function() {
            $('#status_code').prop('disabled', false);
            let processStep = $(this).val();
            $.ajax({
                url: '{{ route("getStatusCodesByProcessStep") }}',
                type: 'POST',
                data: {
                    process_step: processStep,
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    console.log("response not ");
                    if (response.success) {
                        console.log(response);
                        let status_code = response.statusCodes;
                        let status_codeDropdown = $('#status_code');
                        status_codeDropdown.empty();
                        $.each(status_code, function(index, status_code) {
                            status_codeDropdown.append('<option value="' + status_code.description + '">' + status_code.description + '</option>');
                        });
                    } else {
                        console.error('s to fetch users.');
                    }
                },
            
                error: function(error) {
                    console.error('Error fetching status codes:', error);
                }
            });
        });
    });


    function btnAddNewGroup()
    {
    

        if(parseInt(username) === 0)
        {
            $('#username_error').html('@lang('words.unsnbemt')');
            $('#username_error').show();
            return;
        }
        if($.trim(company_name) =="")

        {

            $('#company_name_error').html('@lang('words.cnsnbemt')');

            $('#company_name_error').show();

            return;

        }
        if($.trim(status_code) =="")

        {

            $('#status_code_error').html('@lang('words.statuscodeshouldnotbeempty')');

            $('#status_code_error').show();

            return;

        }
        if($.trim(process_step) =="")

        {

            $('#process_step_error').html('@lang('words.processstepshouldnotbeempty')');

            $('#process_step_error').show();

            return;

        }

        var workOrderId = $('#workorder_name').val();
        var processStep = $('#process_step').val();
        var statusCode = $('#status_code').val();
        var companyName= $('#company_name').val();
        var assignedToUserId =$('#username').val();

        var fd = new FormData();
        fd.append('workOrderId',workOrderId);
        fd.append('assignedToUserId',assignedToUserId);
        fd.append('processStep',processStep);
        fd.append('statusCode',statusCode);
        fd.append('companyName',companyName);

        fd.append('_token','{{csrf_token()}}');
            $.ajax({
                url: '{{route('updateWorkflow')}}',
                type: 'post',
                data:fd,
                contentType: false,
                processData: false,
                success: function(response){

                    if (response.success)
                    {
                        Swal.fire({
                                    icon: 'success',
                                    title: '@lang('words.workorder')',
                                    text: '@lang('words.workorderflowischange')' ,
                                    showCancelButton: false,
                                    customClass: {
                                        confirmButton: 'btn btn-success mx-2'
                                    },
                                    buttonsStyling: false
                                }).then(function (result) {
                                        window.location.href = "/home";
                                  });
                    }
                    else
                    {
                        Swal.fire({
                                icon: 'warning',
                                title: '@lang('words.workorder')',
                                text: response.message,
                                showCancelButton: false,
                                customClass: {
                                    confirmButton: 'btn btn-success mx-2'
                                },
                                buttonsStyling: false
                            });
                    }
                },
            });
    }



    document.getElementById('workorder_name').addEventListener('click', function() {
    document.querySelector('.dropdown-container').classList.add('show');
});

document.getElementById('workorder_name').addEventListener('keyup', function() {
    var filter = this.value.toLowerCase();
    var items = document.querySelectorAll('.dropdown-item');
    items.forEach(function(item) {
        var text = item.textContent.toLowerCase();
        if (text.indexOf(filter) > -1) {
            item.style.display = '';
        } else {
            item.style.display = 'none';
        }
    });
});

document.querySelectorAll('.dropdown-item').forEach(function(item) {
    item.addEventListener('click', function() {
        var value = this.getAttribute('data-value');
        var text = this.textContent;
        document.getElementById('workorder_name').value = text;
       document.getElementById('selectedWorkOrder').value = value;
        document.querySelector('.dropdown-container').classList.remove('show');
    });
});

document.addEventListener('click', function(event) {
    var isClickInside = document.querySelector('.dropdown-container').contains(event.target);
    if (!isClickInside) {
        document.querySelector('.dropdown-container').classList.remove('show');
    }
});
    </script>
@endpush