@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.homeworkorderhistory')])
            <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="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.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>
                        @foreach ($workOrderHistorys as $workOrderHistory)
                            <tr class="mt-2">
                                <td class="text-sm text-center font-weight-normal text-middle">{{ $workOrderHistory->date }}</td>
                                <td class="text-sm text-center font-weight-normal text-middle">{{ $workOrderHistory->workordername }}</td>
                                <td class="text-sm text-center font-weight-normal text-middle">{{ $workOrderHistory->processname }}</td>
                                <td class="text-sm text-center font-weight-normal text-middle">{{ $workOrderHistory->description }}</td>
                                <td class="text-sm text-center font-weight-normal text-middle">{{ $workOrderHistory->remarks }}</td>
                                <td class="text-sm text-center font-weight-normal text-middle">{{ $workOrderHistory->assignedBy }}</td>
                                <td class="text-sm text-center font-weight-normal text-middle">{{ $workOrderHistory->assignedTo }}</td>                                      
                            </tr>
                        @endforeach
                    </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>
    function profileSetting(user) {
        window.location.href = "/profileView/" + user;
    }

    var dtWorkOrders;

    $(document).ready(function() {
        dtWorkOrders = $('#workOrderTable').DataTable({
            paging: true,
            pageLength: 10,
            searching: true,
            ordering: true,
            info: true,
            language: {
                emptyTable: '@lang('words.noworkorderavailable')'
            }
        });
    });

    $("#workorder_name").on("change", function() {
        // Handle change event
    });
    </script>
@endpush