@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.model_area_mapping')])
            <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.model_area_mapping')</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="model_area_id" required>
                            <option value="">@lang('words.modelarea')</option>
                           
                        </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>
                <div class="text-center mt-3">
                    <button type="submit" class="btn btn-success px-5 py-2">@lang('words.add')</button>
                </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.work_area')</th>
                                <th class="text-sm text-center">@lang('words.modelarea')</th>
                                <th class="text-sm text-center">@lang('words.workorder')</th>
                                <th class="text-sm text-center">@lang('words.action')</th>
                            </tr>
                        </thead>

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

    <!-- Edit Modal -->
    <div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <form id="editForm">
                @csrf
                <input type="hidden" name="id" id="edit_id">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">@lang('words.edit_record')</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label">@lang('words.work_area')</label>
                            <input type="text" class="form-control" id="edit_workarea" name="workarea_id" readonly>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">@lang('words.modelarea')</label>
                            <input type="text" class="form-control" id="edit_modelarea" name="model_area_id" readonly>
                        </div>
                        <div class="mb-3">
                            <label for="edit_workorder" class="form-label">@lang('words.workorder')</label>
                            <select class="form-select" id="edit_workorder" name="workorder_id" required>
                                <option value="">@lang('words.workorder')</option>
                                
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">@lang('words.update')</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">@lang('words.cancel')</button>
                    </div>
                </div>
            </form>
        </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>
            let table;

            $(document).ready(function() {
                table = $('#workOrderTable').DataTable({
                    paging: true,  
                    pageLength: 50,     
                    searching: true,     
                    ordering: true,     
                    info: true  
                });
            });

            document.getElementById("model_area_id").addEventListener("change", function () {
                const modelareaId = this.value;
                const workareaId = document.getElementById("workarea_id").value;
                //console.log("modelarea ID :: "+modelareaId+"workareaId :: "+workareaId);
                const formData = new FormData();
                formData.append('workarea_id', workareaId);
                formData.append('modelarea_id', modelareaId);

                $.ajax({
                    url: '/log_ids',
                    type: 'POST',
                    data: {
                        workarea_id: workareaId,
                        modelarea_id: modelareaId
                    },
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    },
                    success: function (data) {
                        //console.log(data);

                        // Destroy current instance before updating the table
                        table.clear().destroy();

                        // Clear and repopulate the tbody
                        $('#tableBody').empty();
                        data.data.forEach(item => {
                            $('#tableBody').append(`
                                <tr>
                                    <td class="text-sm text-center">${item.workarea_name}</td>
                                    <td class="text-sm text-center">${item.modelarea_name}</td>
                                    <td class="text-sm text-center">${item.workorder_name}</td>
                                    <td class="text-sm text-center font-weight-normal pt-3">
                                        
                                        <button type="button" class="btn btn-icon btn-danger mb-0 me-1 delete-btn"
                                            data-id="${item.id}">
                                            <i class="fas fa-trash-alt"></i>
                                        </button>
                                    </td>
                                </tr>
                            `);
                        });

                        // Reinitialize DataTable
                        table = $('#workOrderTable').DataTable({
                            paging: true,
                            pageLength: 50,
                            searching: true,
                            ordering: true,
                            info: true
                        });
                    },
                    error: function (xhr) {
                        console.error(xhr.responseText);
                    }
                });
            });
            
            

            $(document).ready(function () {

                $('#workarea_id').on('change', function () {
                    var workareaId = $(this).val();
                    $('#model_area_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("model_area.get_by_workarea") }}',
                            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) {
                                        $('#model_area_id').append('<option value="' + ma.id + '">' + ma.modelarea_name + '</option>');
                                    });
                                } 
                                else {
                                    $('#model_area_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);
                            }
                        });
                    }
                });
              
                $('#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("get_unmapped_workorders") }}',
                            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.unmappedWorkorders.forEach(function (work) {
                                    $('#workorder_id').append('<option value="' + work.id + '">'+ work.workorder_name + '</option>');
                                });
                            },
                            error: function (xhr) {
                                //console.log('Error:', xhr.responseText);
                            }
                        });
                    }
                });
            });
            

        // Form submission via AJAX
        $('#modelAreaMappingForm').on('submit', function (e) {
            e.preventDefault();

            $.ajax({
                url: '{{ route("model_area_mapping.stores") }}',
                type: 'POST',
                data: $(this).serialize(),
                success: function (response) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Success',
                        text: response.message ,
                        confirmButtonColor: '#28a745'
                    });
                    $('#modelAreaMappingForm')[0].reset(); // Clear form
                },
                error: function (xhr) {
                    let message = 'Something went wrong.';

                    // Handle custom error messages like duplicate mapping
                    if (xhr.status === 409 && xhr.responseJSON?.message) {
                        message = xhr.responseJSON.message;
                    } else if (xhr.responseJSON?.errors) {
                        // Handle validation errors
                        message = Object.values(xhr.responseJSON.errors).flat().join('\n');
                    }

                    Swal.fire({
                        icon: 'info',
                        title: 'Duplicate',
                        text: message,
                    });
                }
            });
        });


        // Delete Record
        $(document).on('click', '.delete-btn', function () {
            let id = $(this).data('id');
            let workareaId = $
            Swal.fire({
                title: '@lang('words.sure')',
                text: '@lang('words.confirmdelete')',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: '@lang('words.yesdelete')'
            }).then(result => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: '/model-area/' + id,
                        type: 'DELETE',
                        data: {
                            _token: '{{ csrf_token() }}',
                        },
                        success: res => {
                            Swal.fire('@lang('words.deleted')', res.message, 'success').then(() => {
                                location.reload();
                            });
                        },
                        error: () => {
                            Swal.fire('@lang('words.err')', '@lang('words.faileddeletema')', 'error');
                        }
                    });
                }
            });
        });

        // Show Edit Modal
        $(document).on('click', '.edit-btn', function () {
            let id = $(this).data('id');
            let workareaId = $(this).data('workarea-id');
            let modelareaId = $(this).data('modelarea-id');
            let workorderId = $(this).data('workorder-id');
            let workareaname = $(this).data('workarea-name');
            let modelareaname = $(this).data('modelarea-name');

            $('#edit_id').val(id);
            $('#edit_workarea').val(workareaname);
            $('#edit_modelarea').val(modelareaname);
            //console.log("Hi"+workareaId+" - "+modelareaId+" - "+workorderId+"Workarea Name : "+workareaname+"Modelarea Name : "+modelareaname);
            $('#edit_workorder').empty().append('<option value="">Loading...</option>');

            $.ajax({
                url: '{{ route("get_unmapped_workorders") }}',
                type: 'GET',
                data: {
                    workarea_id: workareaId,
                    modelarea_id: modelareaId,
                    current_workorder_id: workorderId
                },
                success: function (response) {
                    $('#edit_workorder').empty().append('<option value="">Select Work Order</option>');

                    response.unmappedWorkorders.forEach(function (work) {
                        
                        let selected = (work.id == workorderId) ? 'selected' : '';
                        $('#edit_workorder').append(
                            `<option value="${work.id}" ${selected}>${work.workorder_name}</option>`
                        );
                    });
                },
                error: function (xhr) {
                    //console.log('Error:', xhr.responseText);
                    $('#edit_workorder').empty().append('<option value="">Error loading workorders</option>');
                }
            });

            new bootstrap.Modal(document.getElementById('editModal')).show();
        });


        // Update Record
        $('#editForm').submit(function (e) {
            e.preventDefault();
            let formData = $(this).serialize();
            let id = $('#edit_id').val();

            $.ajax({
                url: '/model-area/' + id,
                type: 'POST',
                data: formData + '&_method=PUT',
                success: function (res) {
                    Swal.fire('@lang('words.success')', res.message, 'success').then(() => {
                        location.reload();
                    });
                },
                error: function () {
                    Swal.fire('@lang('words.err')', '@lang('words.failedtoupdate')', 'error');
                }
            });
        });
    </script>
@endsection