@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.homemodelareaassignment')])
            <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 class=''>
                            <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-6">
                    <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-6">
                    <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>
                         <!-- <option value="0">@lang('words.no_modelarea')</option> -->
                    </select>
                </div>
            </div>

            <div class="card-body">
                <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.work_area')
                                </th>
                                <th class="text-sm text-center">
                                @lang('words.modelarea')
                                </th>
                                <th class="text-sm text-left">
                                @lang('words.woname')
                                </th>
                                
                                
                            </tr>
                        </thead>
                        <tbody id="result-body">
                            
                        </tbody>

                    </table>
                </div>
                <div id="noDataMessage" class="container justify-content-center text-center" style="display: none;">
                @lang('words.nmresultsfound')
                </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>
    var dtWorkOrders;
    var isBaseMapDownloaded = false;
    var isSurveyMapDownloaded = false;

    $('#workarea_id, #modelarea_id').on('change', function () {
        var workarea_id = $('#workarea_id').val();
        var modelarea_id = $('#modelarea_id').val();

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

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

        if (workarea_id) {
            $.ajax({
                url: "{{ route('home_mapattribute') }}",
                method: "GET",
                data: {
                    workarea_id: workarea_id,
                    modelarea_id: modelarea_id
                },
                success: function (response) {
                    const grouped = response.groupedWorkOrders;

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

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

                    if (Object.keys(grouped).length === 0) {
                        $('#workOrderTable').show();
                        $('#result-body').html('<tr><td colspan="4" class="text-center">@lang("words.norecordfound")</td></tr>');
                        return;
                    }

                    $.each(grouped, function (key, workOrders) {
                        const modelareaParts = key.split("||");
                        const workareaName = modelareaParts[0];
                        const modelareaName = modelareaParts[1];

                        let workorderBtns = '';
                        workOrders.forEach(function (wo) {
                           
                            workorderBtns += `
                                <button
                                    class='btn btn-success disabled'>
                                    <span class='btn-inner--icon'>${wo.workordername}</span>
                                </button>
                            `;
                        });

                        $('#result-body').append(`
                            <tr>
                                <td class="text-sm text-center font-weight-normal text-middle">${workareaName}</td>
                                <td class="text-sm text-center font-weight-normal text-middle">${modelareaName}</td>
                                <td class="text-sm text-left font-weight-normal text-middle">${workorderBtns}</td>
                            </tr>
                        `);
                    });

                    $('#workOrderTable').show();
                    dtWorkOrders = $('#workOrderTable').DataTable({
                        paging: true,
                        pageLength: 50,
                        searching: true,
                        ordering: true,
                        info: true,
                        language: {
                            emptyTable: '@lang("words.noworkorderavailable")'
                        }
                    });
                },
                error: function (xhr) {
                    //console.log("Error fetching work orders:", xhr.responseText);
                }
            });
        }
    });



    $('#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("getModelArea2") }}',
                type: 'GET',
                data: {
                    workarea_id: workareaId,
                    current_userid: currentUserId
                },
                success: function (response) {
                    //console.log("432 AJAX Response:", response);
                    // $('#workorder_id').append('<option value="">@lang("words.noworkorderfound")</option>');
                    // 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.workorderid + '">' + workorder.workordername + '</option>');
                    //     });
                    // }
                },
                error: function (xhr) {
                    console.error('Error fetching data:', xhr.responseText);
                }
            });
        }
    });

    function processClick(modelareaId,workorderId,status_code)
    {
       //console.log(workorderId +"," +status_code+","+modelareaId);
       window.location.href = '/assignToMapAttribute/' + modelareaId + '/' + workorderId ;   
    }
    </script>
@endpush