@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.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>
                <li class="nav-item px-3 d-flex align-items-center">
                    <a href="#" onclick='profileSetting({{ auth()->user()->id }});'>
                        <i class="fa fa-user me-sm-0" style="color: white;"></i>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<div class="card mx-1 my-1 mt-1 pt-1 custom-card-height" style="min-height: 650px;" id="basic-info">
    <!-- <div class="card-header mt-1 pt-1">
        <h5>@lang('words.modelflowchange')</h5>
    </div> -->

    <div class="card-body mt-1 pt-1">
        <form>
            <div class="row justify-content-center">
                <div class="col-6">
                    <label for="workarea_id" class="form-label fw-bold fs-6">@lang('words.work_area')</label>
                    <select class="form-select form-select-lg" id="workarea_id" name="workarea_id" required>
                        <option value="" disabled selected>@lang('words.selectworkarea')</option>
                        @foreach ($workareas as $workArea)
                            <option value="{{ $workArea->workarea_id }}">{{ $workArea->workarea_name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-6">
                    <label for="model_area_id" class="form-label fw-bold fs-6">@lang('words.modelarea')</label>
                    <select class="form-select form-select-lg" id="model_area_id" name="model_area_id" required>
                        <option value="" disabled selected>@lang('words.selectmodelarea')</option>
                          
                    </select>
                </div>
            </div>

            <div class="row justify-content-center mt-3">
                <div class="col-6">
                    <label for="workorder_id" class="form-label fw-bold fs-6">@lang('words.modelareaworkorder')</label>
                    <select class="form-select" id="workorder_id" name="workorder_id" required>
                        <option value="">@lang('words.selectworkorder')</option>
                    </select>
                </div>
            </div>
        </form>

        <div id="status-details-container" style="display:none;" class="mt-4">
             
            <form id="updateForm" enctype="multipart/form-data">
             @csrf

                 
           <input type="hidden" name="workorder_id" id="workorder_id" value="{{ $workOrder->id ?? '' }}">


              <div class="row justify-content-center text-center">
                    <div class="col-md-5">
                        <label class="form-label text-start d-block">@lang('words.pstep')</label>
                        <select class="form-control" name="process_step" id="process_step">
                            <option value="5" selected>Model Creation</option>
                        </select>
                        <p id="process_step_error" class="text-danger text-xs pt-1 errmsg"></p>
                    </div>

                    <div class="col-md-5">
                        <label class="form-label text-start d-block">@lang('words.status')</label>
                        <select class="form-control" name="status_code" id="status_code">
                            <option value="">@lang('words.selectstatus')</option>
                        </select>
                        <p id="status_code_error" class="text-danger text-xs pt-1 errmsg"></p>
                    </div>
                </div>

                <!-- Second Row: Company Name & Username -->
                <div class="row justify-content-center text-center mt-3">
                    <div class="col-md-5">
                        <label class="form-label text-start d-block">@lang('words.cname')</label>
                        <select class="form-control" name="company_name" id="company_name">
                            @foreach ($companyName as $company_name)
                                <option value="{{ $company_name->company_name }}">{{ $company_name->company_name }}</option>
                            @endforeach
                        </select>
                        <p id="company_name_error" class="text-danger text-xs pt-1 errmsg"></p>
                    </div>

                    <div class="col-md-5">
                        <label class="form-label text-start d-block">@lang('words.username')</label>
                        <select class="form-control" name="assign_username" id="assign_username">
                            <option value="">@lang('words.selectuser')</option>
                        </select>
                        <p id="username_error" class="text-danger text-xs pt-1 errmsg"></p>
                    </div>
                </div>
        

                <div class="row mt-4 justify-content-center">
                        <div class="col-auto">
                            <button type="submit" class="btn btn-primary">@lang('words.update')</button>
                            <a href="" class="btn btn-secondary ms-2">@lang('words.close')</a>
                        </div>
                    </div>
            </form>
                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul class="mb-0">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
            
        </div>   
    </div>
</div>
<meta name="csrf-token" content="{{ csrf_token() }}">
@endsection
@push('css')
<style>
    #status-details-container select {
        font-size: 0.95rem;
        padding: 8px;
    }

    #status-details-container label {
        font-weight: bold;
    }

    #status-details-container .col-md-3 {
        margin-top: 20px;
    }
</style>
@endpush('css')
@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;
}

$(document).ready(function () {
    $('#workarea_id').on('change', function () {
        var workareaId = $(this).val();
        var currentUserId = "{{ auth()->user()->id }}";

        if (workareaId) {
            $.ajax({
                url: '{{ route("groupModelarea") }}',
                type: 'GET',
                data: { workarea_id: workareaId,current_userid: currentUserId },
                success: function (response) {
                    var $modelArea = $('#model_area_id');
                    $modelArea.empty();
                    $modelArea.append('<option value="" disabled selected>@lang('words.selectmodelarea')</option>');
                    response.modelarea.forEach(function (area) {
                        $modelArea.append('<option value="' + area.modelareaId + '">' + area.modelareaName + '</option>');
                    });
                },
                error: function (xhr) {
                    //console.log('Error loading model areas:', xhr.responseText);
                }
            });
        }
    });

     $(document).ready(function () {
                // Fetch model areas and work orders based on selected work area
                $('#model_area_id').on('change', function () {
                    var modelareaId = $(this).val() || ''; // default to empty string if null
                    var workareaId = $('#workarea_id').val();

                    $('#workorder_id').empty().append('<option value="">@lang("words.selectworkorder")</option>');
                    
                    //console.log("modelareaId :: " + modelareaId + " | workareaId :: " + workareaId);
                    var currentUserId = "{{ auth()->user()->id }}";
                    $('#workOrderTable').hide();

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

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

            });

        $('#workorder_id').on('change', function () {
           let modelareaId = parseInt($('#model_area_id').val());

            let formData = new FormData();
            formData.append('workorder_id', $('#workorder_id').val());
            formData.append('workarea_id', $('#workarea_id').val());
            formData.append('modelarea_id', modelareaId);
            formData.append('_token', $('meta[name="csrf-token"]').attr('content'));


            $.ajax({
                url: '/get-model-status',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function (response) {
                    const data = response.data;
                    const statusOptions = response.status_options;
                    const userList = response.user_list;

                    // console.log("Status Data:", data.status_code);
                    //console.log("Status Options:", statusOptions);
                    //console.log("User List:", userList);

                    if (data) {
                        // 🟢 Clear & update the process_step if needed
                        // $('#process_step').val(''); // You can assign value if needed

                        // 🟢 Set company name
                        $('#company_name').val(data.company_name ?? '');
                        // $('#company_name').prop('disabled', true);
                       
                        // 🟢 Populate Status Code dropdown
                        statusOptions.forEach(function (item) {
                            const isSelected = item.status_code === data.status_code ? 'selected' : '';
                            // console.log("Data Status Code :::: "+data.status_code+" |||| "+item.status_code+" ||| "+isSelected);
                            $('#status_code').append(
                                `<option value="${item.status_code}" ${isSelected}>${item.status_description}</option>`
                            );
                        });
                        // 🟢 Populate Assign User dropdown
                        $('#assign_username').empty().append('<option value="">@lang("words.selectuser")</option>');
                        userList.forEach(function (item) {
                            $('#assign_username').append(
                                `<option value="${item.user_id}">${item.user_name}</option>`
                            );
                        });
                        $('#assign_username').val(data.assigned_to_user_id ?? '');
                        // $('#assign_username').prop('disabled', true);

                        // 🟢 Show the status container
                        $('#status-details-container').show();
                    } else {
                        alert("No status data found.");
                        $('#status-details-container').hide();
                    }
                },
                error: function (xhr) {
                    console.error("AJAX Error:", xhr.responseText);
                }
            });
        });


    $('#process_step').on('change', function () {
        var stepName = $(this).val();
        var workorderId = $('#workorder_id').val();

        if (stepName) {
            $.ajax({
                url: '{{ route("get.modelstatus.code") }}',
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    process_step: stepName,
                    workorder_id: workorderId
                },
                success: function (response) {
                    var statusList = response.statusDescription;
                    var selectedCode = response.selected_status_code;
                    var $statusSelect = $('#status_code');
                    $('#company_name').prop('disabled', false);
                    $('#status_code').prop('disabled', false);
                    $('#assign_username').prop('disabled', false);
                    $statusSelect.empty().append('<option value="">@lang('words.selectstatus')</option>');
                    statusList.forEach(function (item) {
                        $statusSelect.append(
                            `<option value="${item.status_code}">${item.status_description}</option>`
                        );
                    });

                    $statusSelect.val(selectedCode ?? '');
                },
                error: function () {
                    $('#status_code').html('<option value="">Error loading status</option>');
                }
            });
        } else {
            $('#status_code').html('<option value="">@lang('words.selectstatus')</option>');
        }
    });

    $('#company_name').on('change', function () {
        var companyName = $(this).val();
        var workorderId = $('#workorder_id').val();
        //console.log("company::::",companyName+"workorder::::",workorderId);
        if (companyName) {
            $.ajax({
                url: '{{ route("get-modeluser") }}',
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    company_name: companyName,
                    workorder_id: workorderId
                },
                success: function (response) {
                    var userList = response.companydescription;
                    var selectedUserId = response.assigned_user_id;
                    var $userSelect = $('#assign_username');

                    $userSelect.empty().append('<option value="">@lang('words.selectuser')</option>');
                    userList.forEach(function (item) {
                        $userSelect.append(
                            `<option value="${item.user_id}">${item.user_name}</option>`
                        );
                    });

                    $userSelect.val(selectedUserId ?? '');
                },
                error: function () {
                    $('#assign_username').html('<option value="">Error loading users</option>');
                }
            });
        } else {
            $('#assign_username').html('<option value="">@lang('words.selectuser')</option>');
        }
    });
});


$(document).on('submit', '#updateForm', function (e) {
    e.preventDefault();

    // Collect values
    var workorderId = $('#workorder_id').val();
    var modelareaId = $('#model_area_id').val();
    var workareaId = $('#workarea_id').val();
    var statusCode = $('#status_code').val();
    var companyName = $('#company_name').val();
    var userName = $('#assign_username').val();
    var processId = $('#process_step').val();

    // Add values to FormData
    var fd = new FormData();
    fd.append('workorderId', workorderId);
    fd.append('modelareaId', modelareaId);
    fd.append('workareaId', workareaId);
    fd.append('statusCode', statusCode);
    fd.append('companyName', companyName);
    fd.append('userName', userName);
    fd.append('processId', processId);
    fd.append('_token', $('meta[name="csrf-token"]').attr('content')); // Ensure CSRF token is included

    // AJAX Request
    $.ajax({
        url: '{{ route("model.update") }}', // Route in web.php
        type: 'POST',
        data: fd,
        processData: false,
        contentType: false,
        success: function (response) {
            if (response.success) {
                Swal.fire({
                    icon: 'success',
                    title: 'Updated',
                    text: response.message,
                    confirmButtonText: 'OK'
                }).then(() => {
                    window.location.reload();
                });
            } else {
                Swal.fire({
                    icon: 'info',
                    title: 'No Change',
                    text: response.message,
                    confirmButtonText: 'OK'
                });
            }
        },
        error: function (xhr) {
            if (xhr.status === 422) {
                let errors = xhr.responseJSON.errors;
                let errorMsg = Object.values(errors).map(err => err[0]).join('\n');
                Swal.fire({
                    icon: 'error',
                    title: 'Validation Error',
                    text: errorMsg
                });
            } else {
                Swal.fire({
                    icon: 'error',
                    title: 'AJAX Error',
                    text: xhr.responseJSON.message || 'Something went wrong.'
                });
            }
        }
    });
});



</script>
@endpush('js')