@extends('layouts.app')

@section('content')
    <nav class="navbar navbar-main navbar-expand-lg px-0 mx-1 shadow-none border-radius-xl mt-0 bg-primary">
        <div class="container-fluid py-1 px-3">
            @include('layouts.navbars.auth.topnav', ['title' => trans('words.modelworkorderhistory')])
            <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 }});'>
                                <i class="fa fa-user me-sm-0" style="color: white;"></i>
                            </a>
                        </li>
                    @endif
                </ul>
            </div>
        </div>
    </nav>

    <div class="container-fluid py-1 d-flex justify-content-center align-items-start" style="min-height: calc(100vh - 70px);">
        <div class="card mt-0 pt-0 w-100" id="basic-info">
            <!-- <div class="card-header mt-0 pt-3">
                <h5 class="mb-0 text-dark">@lang('words.modelworkorderhistory')</h5>
            </div> -->

            <form id="modelAreaMappingForm">
                @csrf
                <div class="row justify-content-center pt-3">
                    <div class="form-group col-md-5">
                        <label for="workarea_id" class="form-label fw-bold">@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.work_area')</option>
                            @foreach ($workAreas as $workArea)
                                <option value="{{ $workArea->id }}">{{ $workArea->workarea_name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-5">
                        <label for="model_area_id" class="form-label">@lang('words.modelarea')</label>
                        <select class="form-select form-select-lg" id="model_area_id" name="modelarea_id" required>
                            <option value="">@lang('words.modelarea')</option>
                            <!-- Dynamic content will be added here -->
                        </select>
                    </div>

                    <div class="col-md-5">
                        <label for="workorder_id" class="form-label">@lang('words.workorder')</label>
                        <select class="form-select form-select-lg" id="workorder_id" name="workorder_id" required>
                            <option value="">@lang('words.workorder')</option>
                            <!-- Dynamic content will be added here -->
                        </select>
                    </div>
                </div>
            </form>
            <div class="card-body pt-0">
                <div class="table-responsive">
                    <table class="table table-striped" id="workOrderTable">
                        <thead class="bg-dark text-white">
                            <tr>
                                <th class="text-sm text-center">@lang('words.date')</th>
                                <th class="text-sm text-center">@lang('words.woname')</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.pname')</th>
                                <th class="text-sm text-center">@lang('words.status')</th>
                                <th class="text-sm text-center">@lang('words.remark')</th>
                                <th class="text-sm text-center">@lang('words.assignedby')</th>
                                <th class="text-sm text-center">@lang('words.assignedto')</th>
                            </tr>
                        </thead>

                        <tbody id="tableBody">
                           
                        </tbody>
                    </table>
                </div>
            </div>  
        </div>
    </div>
    

    {{-- jQuery and SweetAlert --}}
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> -->
    <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>
        

        


        $(document).ready(function () {
            // Fetch model areas and work orders based on selected work area
            $('#workarea_id').on('change', function () {
                var workareaId = $(this).val();
                if (workareaId) {
                    $.ajax({
                        url: '{{ route("getModelAreaAndWorkOrdersByWorkArea") }}',
                        type: 'GET',
                        data: { workarea_id: workareaId },
                        success: function (response) {
                            // Clear previous options
                            $('#model_area_id').empty().append('<option value="">@lang('words.modelarea')</option>');
                           

                            // Populate model areas
                            response.modelAreas.forEach(function (area) {
                                $('#model_area_id').append('<option value="' + area.id + '">' + area.name + '</option>');
                            });
                            
                        },
                        error: function (xhr) {
                            //console.log('Error:', xhr.responseText);
                        }
                    });
                }
            });

            $(document).ready(function () {
              
                $('#model_area_id').on('change', function () {
                    var workareaId = $('#workarea_id').val(); // Make sure this value is available at page load
                    //console.log("Testing :::: "+workareaId);
                    var modelareaId = $(this).val();
                    // //console.log("Testing :::: "+workareaId+":"+modelareaId);
                    if (modelareaId && workareaId) {
                        $.ajax({
                            url: '{{ route("getWorkorders") }}',
                            type: 'GET',
                            data: {
                                workarea_id: workareaId,
                                modelarea_id: modelareaId
                            },
                            success: function (response) {
                                $('#workorder_id').empty().append('<option value="">@lang('words.workorder')</option>');

                                // ✅ Use correct key: response.unmappedWorkorders
                                response.workorders.forEach(function (work) {
                                    $('#workorder_id').append('<option value="' + work.id + '">' + work.name + '</option>');
                                });
                            },
                            error: function (xhr) {
                                //console.log('Error:', xhr.responseText);
                            }
                        });
                    }
                });
            });

            let table = $('#workOrderTable').DataTable();

            $(document).ready(function () {
                $('#workorder_id').on('change', function () {
                    const workOrderId = this.value;
                    const workAreaId = $('#workarea_id').val();;
                    const modelAreaId = $('#modelarea_id').val();;
                    //console.log("workOrderId ::: " + workOrderId);
                    if (!workOrderId) return;

                    const formData = new FormData();
                    formData.append('workorder_id', workOrderId);
                    formData.append('workarea_id', workOrderId);
                    formData.append('modelarea_id', workOrderId);

                    $.ajax({
                        url: '/workorderIds',
                        type: 'POST',
                        data: formData,
                        contentType: false,
                        processData: false,
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function (data) {
                            //console.log(data);

                            if ($.fn.DataTable.isDataTable('#workOrderTable')) {
                                $('#workOrderTable').DataTable().clear().destroy();
                            }

                            $('#tableBody').empty();
                            data.data.forEach(item => {
                                $('#tableBody').append(`
                                    <tr>
                                        <td class="text-center">${item.date ?? ''}</td>
                                        <td class="text-center">${item.workordername ?? ''}</td>
                                        <td class="text-center">${item.workarea_name ?? ''}</td>
                                        <td class="text-center">${item.modelarea_name ?? ''}</td>
                                        <td class="text-center">${item.processname ?? ''}</td>
                                        <td class="text-center">${item.description ?? ''}</td>
                                        <td class="text-center">${item.remarks ?? ''}</td>
                                        <td class="text-center">${item.assignedBy ?? ''}</td>
                                        <td class="text-center">${item.assignedTo ?? ''}</td>
                                    </tr>
                                `);
                            });

                            $('#workOrderTable').DataTable({
                                paging: true,
                                pageLength: 50,
                                searching: true,
                                ordering: true,
                                info: true
                            });
                        },
                        error: function (xhr) {
                            console.error(xhr.responseText);
                        }
                    });
                });
            });
            
        });
    </script>
@endsection