@extends('layouts.app')

@section('content')
<nav class="navbar navbar-main navbar-expand-lg px-0 mx-1 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.3d')])
        <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>
                @if(auth()->user()->id != 1)
                <li class="nav-item px-3 d-flex align-items-center">
                    <a href="#" onclick='profileSetting({{ auth()->user()->id }});'>
                        <span>
                            <i class="fa fa-user me-sm-0" style="color: white;"></i>
                        </span>
                    </a>
                </li>
                @endif
            </ul>
        </div>
    </div>
</nav>

<div class="card" id="basic-info">
    <div class="card-body">
            <div class="row g-3 mb-3">
                <div class="col-md-4">
                    <label for="workarea_id" class="form-label fw-bold">@lang('words.work_area')</label>
                    <select class="form-select" id="workarea_id">
                        <option value="">@lang('words.selectworkarea')</option>
                        @foreach($workareas1 as $workarea)
                            <option value="{{ $workarea->id }}">{{ $workarea->workarea_name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-4">
                    <label for="modelarea_id" class="form-label fw-bold">@lang('words.modelarea')</label>
                    <select class="form-select" id="modelarea_id" name="modelarea_id">
                        <option value="">@lang('words.selectmodelarea')</option>
                    </select>
                </div>
                 <div class="col-md-4">
                    <label for="workorder_id" class="form-label fw-bold">@lang('words.workorder')</label>
                    <select class="form-select" id="workorder_id">
                        <option value="">@lang('words.selectworkorder')</option>
                        
                    </select>
                </div>
            </div>

            <div class="table-responsive mt-4">
                <table id="workOrderTable" class="table table-bordered table-striped table-hover align-middle" style="display: none;">
                    <thead class="bg-dark text-white" style="background-color: #343a40; color: white;">
                        <tr>
                            <th class="text-sm text-center">@lang('words.date')</th>
                            <th class="text-sm text-center">@lang('words.woarea')</th>
                            <th class="text-sm text-center">@lang('words.modelarea')</th>
                            <th class="text-sm text-center">@lang('words.woname')</th>
                            <th class="text-sm text-center">@lang('words.pname')</th>
                            <th class="text-sm text-center">@lang('words.status')</th>
                            <th class="text-sm text-center">@lang('words.assignedby')</th>
                            <th class="text-sm text-center">@lang('words.assignedto')</th>
                            <th class="text-sm text-center">@lang('words.remark')</th>
                        </tr>
                    </thead>
                    <tbody id="result-body"></tbody>
                </table>
            </div>
    </div>
</div>
@endsection

@push('css')
<style>
    .choices {
        margin-bottom: 0;
    }
    
    .text-middle {
        vertical-align: middle;
    }
</style>
@endpush
@push('js')
<script src="/assets/js/plugins/choices.min.js"></script>
<script src="/assets/js/core/jquery.min.js"></script>
<script src="/assets/js/plugins/sweetalert.min.js"></script>

<script>
    function profileSetting(user) {
        window.location.href = "/profileView/" + user;
    }

    $(document).ready(function () {
        // On workarea change
        $('#workarea_id').on('change', function () {
            var workareaId = $(this).val();
            $('#modelarea_id').empty().append('<option value="">@lang("words.selectmodelarea")</option>');
            $('#workorder_id').empty().append('<option value="">@lang("words.selectworkorder")</option>');

            var currentUserId = "{{ auth()->user()->id }}";

            //console.log("#workarea_id changed. Current User ID: " + currentUserId + ", Workarea ID: " + workareaId);

            if (workareaId) {
                $.ajax({
                    // url: '{{ route("getModelArea1") }}',
                    url: '{{ route("groupModelarea1") }}',
                    type: 'GET',
                    data: {
                        workarea_id: workareaId,
                        current_userid: currentUserId
                    },
                    success: function (response) {
                        //console.log("AJAX Response:", response);
                        
                        // Populate modelarea_id dropdown
                        if (response.modelarea && response.modelarea.length > 0) {
                            response.modelarea.forEach(function (ma) {
                                $('#modelarea_id').append('<option value="' + ma.modelarea_id + '">' + ma.modelarea_name + '</option>');
                            });
                        } 
                        // else {
                        //     $('#modelarea_id').append('<option value="">@lang("words.no_modelarea")</option>');
                        // }

                        // Populate workorder_id dropdown
                        // if (response.workorders && response.workorders.length > 0) {
                        //     response.workorders.forEach(function (workorder) {
                        //         $('#workorder_id').append('<option value="' + workorder.id + '">' + workorder.name + '</option>');
                        //     });
                        // } else {
                        //     $('#workorder_id').append('<option value="">@lang("words.noworkorderfound")</option>');
                        // }
                    },
                    error: function (xhr) {
                        console.error('Error fetching data:', xhr.responseText);
                    }
                });
            }
        });

        // On workorder change
        $('#modelarea_id').on('change', function () {
            var modelareaId = $(this).val() || ''; // default to empty string if null
            var workareaId = $('#workarea_id').val();

            var currentUserId = "{{ auth()->user()->id }}";
            //console.log("modelareaId :: " + modelareaId + " | workareaId :: " + workareaId);

            $('#workOrderTable').hide();

            // Always fire AJAX even if modelareaId is empty
            if (workareaId) {
                $.ajax({
                    // url: '{{ route("getModelArea1") }}',
                    url: '{{ route("groupwos1") }}',
                    type: 'GET',
                    data: {
                        workarea_id: workareaId,
                        modelarea_id: modelareaId,
                        current_userid: currentUserId
                    },
                    success: function (response) {
                        //console.log("Model Areas Response :: " + JSON.stringify(response));

                        $('#workorder_id').empty().append('<option value="0">@lang('words.selectworkorder')</option>');

                        response.workorders.forEach(function (area) {
                            $('#workorder_id').append('<option value="' + area.workorder_id + '">' + area.workorderName + '</option>');
                        });
                    },
                    error: function (xhr) {
                        //console.log('Error fetching model areas:', xhr.responseText);
                    }
                });
            }
        });

        // On any filter change
        let dtWorkOrders = null;

        $('#workarea_id, #modelarea_id').on('change', function () {
            var workarea_id = $('#workarea_id').val();
            var modelarea_id = $('#modelarea_id').val(); // can be empty
            var workorder_id = $('#workorder_id').val();

            //console.log("workarea_id :: " + workarea_id + " modelarea_id :: " + modelarea_id + " workorder_id :: " + workorder_id);

            // If workorder_id is empty, hide everything
            if (!workorder_id) {
                if (dtWorkOrders) {
                    dtWorkOrders.destroy();
                    dtWorkOrders = null;
                }
                $('#result-body').empty();
                $('#workOrderTable').hide();
                return;
            }

            $('#workOrderTable').hide();

            if (workarea_id && workorder_id) {
                $.ajax({
                    url: "{{ route('fetch.modelareahistory.data') }}",
                    method: "GET",
                    data: {
                        workarea_id: workarea_id,
                        modelarea_id: modelarea_id, // will be sent even if null
                        workorder_id: workorder_id
                    },
                    success: function (response) {
                        //console.log("History Response ::", response);

                        if (dtWorkOrders) {
                            dtWorkOrders.destroy();
                            dtWorkOrders = null;
                        }

                        $('#result-body').empty();

                        if (response.historyData && response.historyData.length > 0) {
                            $.each(response.historyData, function (index, item) {
                                $('#result-body').append(
                                    '<tr>' +
                                        '<td class="text-sm text-center">' + item.date + '</td>' +
                                        '<td class="text-sm text-center">' + item.workarea_name + '</td>' +
                                        '<td class="text-sm text-center">' + (item.modelarea_name || 'NA') + '</td>' +
                                        '<td class="text-sm text-center">' + item.workordername + '</td>' +
                                        '<td class="text-sm text-center">' + item.processname + '</td>' +
                                        '<td class="text-sm text-center">' + item.description + '</td>' +
                                        '<td class="text-sm text-center">' + item.assignedBy + '</td>' +
                                        '<td class="text-sm text-center">' + item.assignedTo + '</td>' +
                                        '<td class="text-sm text-center">' + item.remarks + '</td>' +
                                    '</tr>'
                                );
                            });
                            $('#workOrderTable').show();
                            dtWorkOrders = $('#workOrderTable').DataTable({
                                paging: true,
                                pageLength: 50,
                                searching: true,
                                ordering: true,
                                info: true,
                                language: {
                                    emptyTable: '@lang("words.noworkorderavailable")'
                                }
                            });
                        } else {
                            $('#workOrderTable').show();
                            $('#result-body').html('<tr><td class="text-sm text-center" colspan="9">@lang("words.norecordfound")</td></tr>');
                        }
                    },
                    error: function (xhr) {
                        //console.log("Error fetching history:", xhr.responseText);
                    }
                });
            }
        });

                $('#workarea_id, #modelarea_id, #workorder_id').on('change', function () {
            var workarea_id = $('#workarea_id').val();
            var modelarea_id = $('#modelarea_id').val(); // can be empty
            // var workorder_id = $('#workorder_id').val();

            //console.log("workarea_id :: " + workarea_id + " modelarea_id :: " + modelarea_id + " workorder_id :: " + workorder_id);

            // If workorder_id is empty, hide everything
            // if (!workorder_id) {
            //     if (dtWorkOrders) {
            //         dtWorkOrders.destroy();
            //         dtWorkOrders = null;
            //     }
            //     $('#result-body').empty();
            //     $('#workOrderTable').hide();
            //     return;
            // }

            $('#workOrderTable').hide();

            if (workarea_id && modelarea_id) {
                $.ajax({
                    url: "{{ route('fetch.modelareahistory.data1') }}",
                    method: "GET",
                    data: {
                        workarea_id: workarea_id,
                        modelarea_id: modelarea_id, // will be sent even if null
                        // workorder_id: workorder_id
                    },
                    success: function (response) {
                        //console.log("History Response ::", response);

                        if (dtWorkOrders) {
                            dtWorkOrders.destroy();
                            dtWorkOrders = null;
                        }

                        $('#result-body').empty();

                        if (response.historyData && response.historyData.length > 0) {
                            $.each(response.historyData, function (index, item) {
                                $('#result-body').append(
                                    '<tr>' +
                                        '<td class="text-sm text-center">' + item.date + '</td>' +
                                        '<td class="text-sm text-center">' + item.workarea_name + '</td>' +
                                        '<td class="text-sm text-center">' + (item.modelarea_name || 'NA') + '</td>' +
                                        '<td class="text-sm text-center">' + item.workordername + '</td>' +
                                        '<td class="text-sm text-center">' + item.processname + '</td>' +
                                        '<td class="text-sm text-center">' + item.description + '</td>' +
                                        '<td class="text-sm text-center">' + item.assignedBy + '</td>' +
                                        '<td class="text-sm text-center">' + item.assignedTo + '</td>' +
                                        '<td class="text-sm text-center">' + item.remarks + '</td>' +
                                    '</tr>'
                                );
                            });
                            $('#workOrderTable').show();
                            dtWorkOrders = $('#workOrderTable').DataTable({
                                paging: true,
                                pageLength: 50,
                                searching: true,
                                ordering: true,
                                info: true,
                                language: {
                                    emptyTable: '@lang("words.noworkorderavailable")'
                                }
                            });
                        } else {
                            $('#workOrderTable').show();
                            $('#result-body').html('<tr><td class="text-sm text-center" colspan="9">@lang("words.norecordfound")</td></tr>');
                        }
                    },
                    error: function (xhr) {
                        //console.log("Error fetching history:", xhr.responseText);
                    }
                });
            }
        });



        // Optional: handle workorder name change (no logic provided)
        $("#workorder_name").on("change", function () {
            //console.log("workorder_name changed:", $(this).val());
        });
    });
</script>

@endpush