{{-- Extends layout --}}
@extends(getThemeBasePath())

@section('page_title')
{{$page_title}}
@endsection

{{-- Content --}}
@section('content')
<div class="card shadow-sm">
    <!--begin::Header-->
    <div class="card-header flex-wrap border-0 pt-6 pb-0">
        <div class="card-title">
            <!--begin::Search-->
            <div class="d-flex align-items-center position-relative my-1">
                <input type="text" data-kt-customer-table-filter-custom="search" class="form-control form-control-solid w-250px ps-15" placeholder="Search" />
            </div>
            <!--end::Search-->
            <!--begin::Export buttons-->
            <div id="kt_datatable_example_1_export" class="d-none"></div>
            <!--end::Export buttons-->
        </div>
        <div class="card-toolbar">
            <div class="d-flex justify-content-end" data-kt-customer-table-toolbar="base">
                <!--end::Filter-->
                <!--begin::Export dropdown-->
                <button type="button" class="btn btn-light-primary me-5" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
                    <span class="svg-icon svg-icon-2">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <rect opacity="0.3" x="12.75" y="4.25" width="12" height="2" rx="1" transform="rotate(90 12.75 4.25)" fill="currentColor"></rect>
                            <path d="M12.0573 6.11875L13.5203 7.87435C13.9121 8.34457 14.6232 8.37683 15.056 7.94401C15.4457 7.5543 15.4641 6.92836 15.0979 6.51643L12.4974 3.59084C12.0996 3.14332 11.4004 3.14332 11.0026 3.59084L8.40206 6.51643C8.0359 6.92836 8.0543 7.5543 8.44401 7.94401C8.87683 8.37683 9.58785 8.34458 9.9797 7.87435L11.4427 6.11875C11.6026 5.92684 11.8974 5.92684 12.0573 6.11875Z" fill="currentColor"></path>
                            <path d="M18.75 8.25H17.75C17.1977 8.25 16.75 8.69772 16.75 9.25C16.75 9.80228 17.1977 10.25 17.75 10.25C18.3023 10.25 18.75 10.6977 18.75 11.25V18.25C18.75 18.8023 18.3023 19.25 17.75 19.25H5.75C5.19772 19.25 4.75 18.8023 4.75 18.25V11.25C4.75 10.6977 5.19771 10.25 5.75 10.25C6.30229 10.25 6.75 9.80228 6.75 9.25C6.75 8.69772 6.30229 8.25 5.75 8.25H4.75C3.64543 8.25 2.75 9.14543 2.75 10.25V19.25C2.75 20.3546 3.64543 21.25 4.75 21.25H18.75C19.8546 21.25 20.75 20.3546 20.75 19.25V10.25C20.75 9.14543 19.8546 8.25 18.75 8.25Z" fill="#C4C4C4"></path>
                        </svg>
                    </span>
                    Export
                </button>
                <!--begin::Menu-->
                <div id="kt_datatable_example_1_export_menu" class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-bold fs-7 w-200px py-4" data-kt-menu="true">
                    <!--begin::Menu item-->
                    <div class="menu-item px-3">
                        <a href="#" class="menu-link px-3" data-kt-export="copy">
                            Copy to clipboard
                        </a>
                    </div>
                    <!--end::Menu item-->
                    <!--begin::Menu item-->
                    <div class="menu-item px-3">
                        <a href="#" class="menu-link px-3" data-kt-export="excel">
                            Export as Excel
                        </a>
                    </div>
                    <!--end::Menu item-->
                    <!--begin::Menu item-->
                    <div class="menu-item px-3">
                        <a href="#" class="menu-link px-3" data-kt-export="csv">
                            Export as CSV
                        </a>
                    </div>
                    <!--end::Menu item-->
                    <!--begin::Menu item-->
                    <div class="menu-item px-3">
                        <a href="#" class="menu-link px-3" data-kt-export="pdf">
                            Export as PDF
                        </a>
                    </div>
                    <!--end::Menu item-->
                </div>
                <!--end::Menu-->
                <!--end::Export dropdown-->
            </div>
        </div>
    </div>
    <!--end::Header-->
    <!--begin::Body-->
    <div class="card-body">
        @include("backend.alerts")
        <div class="row mb-10">
            <div class="col-xl-4 col-lg-4 col-md-8 col-sm-12 col-xs-12">
                <select name="category_id" class="form-control form-control-solid input-user-group filter-date form-select">
                    <option value="">Select Training Category</option>
                    @foreach($tcData??[] as $cId => $cName)
                    <option value="{{$cId}}" {{$category == $cId ? "selected": ""}}>{{$cName}}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                @if(!empty($activeTraining))
                <div class="table-responsive">
                    <table class="table align-middle table-row-dashed fs-6 gy-5 table-bordered dataTable no-footer" id="tbl_goals">
                        <thead class="text-start text-gray-400 fw-bolder fs-7 text-uppercase gs-0">
                            <tr>
                                <th scope="col"></th>
                                @foreach($activeTraining as $tName)
                                <th scope="col">{{$tName}}</th>
                                @endforeach
                            </tr>
                        </thead>
                        @if(!empty($activeTraining))
                        <tbody>
                            @foreach($usersNames as $id => $name)
                            <tr class="min-w-125px">
                                <th>{{$name}}</th>
                                @foreach($activeTraining as $tid => $tName)
                                @php
                                $assigned = $userStatus[$id][$tid]??"";
                                $result = $userResult[$id][$tid]??"";
                                @endphp
                                <td>
                                    @if($assigned!="")
                                    @if($assigned=="started" || $assigned=="pending")
                                    A
                                    @endif
                                    @if($assigned=="finished")
                                    @if($result=="Fail")
                                    <strong> <span style="color:red;">A/C {{$result}} </span></strong>
                                    @endif
                                    @if($result=="Pass")
                                    <strong><span style="color:Green;">A/C {{$result}} </span></strong>
                                    @endif
                                    @endif
                                    @endif
                                </td>
                                @endforeach
                            </tr>
                            @endforeach
                        </tbody>
                        @endif
                    </table>
                </div>
                @else
                No Result Found!
                @endif
            </div>
        </div>
    </div>
    <!--end::Body-->
</div>
<!--end::Card-->
@endsection

{{-- Scripts Section --}}
@section('scripts')

<script type="text/javascript">
    $('#kt_header_menu_wrapper').attr('style', 'visibility:hidden;');
    var DTtable;
    $(document).ready(function() {
        DTtable = $('#tbl_goals').DataTable({
            "aLengthMenu": [
                [25, 50, 75, -1],
                [25, 50, 75, "All"]
            ],
            // dom: 'lBfrtip',
            buttons: [{
                extend: 'excel',
                className: 'btn-success'
            }],
            "Paginate": true,
            "drawCallback": function(settings) {
                KTDatatablesButtonsCustom.init();
            }
        });

        var filterSearchCustom = document.querySelector('[data-kt-customer-table-filter-custom="search"]');
        if(filterSearchCustom){
            filterSearchCustom.addEventListener('keyup', function (e) {
                DTtable.search(e.target.value).draw();
            });
        }
    });
    $(document).on('change', '.filter-date', function() {
        var filterVal = $(this).val();
        var link = "{{route('training_report.index')}}";
        if (filterVal) {
            link += "?category=" + filterVal;
        }
        window.location = link;
    });

    

    // Export Datatable Buttons
    var KTDatatablesButtonsCustom = function() {
        // Hook export buttons
        var exportButtons = () => {
            const documentTitle = 'Customer Orders Report';
            var buttons = new $.fn.dataTable.Buttons(table, {
                buttons: [{
                        extend: 'copyHtml5',
                        // title: documentTitle
                    },
                    {
                        extend: 'excelHtml5',
                        // title: documentTitle, 
                        'className': 'btn-success',
                        'text': '<i class="fa fa-file-excel">&nbsp;&nbsp;Excel</i>'
                    },
                    {
                        extend: 'csvHtml5',
                        // title: documentTitle
                    },
                    {
                        extend: 'pdfHtml5',
                        // title: documentTitle,
                        'className': 'btn-danger',
                        'text': '<i class="fa fa-file-pdf">&nbsp;&nbsp;Pdf</i>',
                        'pageSize': 'A4',
                        'margin': '[0, 0, 0, 12]',
                        'orientation': 'landscape'
                    }
                ]
            }).container().appendTo($('#kt_datatable_example_1_export'));

            // Hook dropdown menu click event to datatable export buttons
            const exportButtons = document.querySelectorAll('#kt_datatable_example_1_export_menu [data-kt-export]');
            exportButtons.forEach(exportButton => {
                exportButton.addEventListener('click', e => {
                    e.preventDefault();

                    // Get clicked export value
                    const exportValue = e.target.getAttribute('data-kt-export');
                    const target = document.querySelector('.dt-buttons .buttons-' + exportValue);

                    // Trigger click event on hidden datatable export buttons
                    target.click();
                });
            });
        }

        // Public methods
        return {
            init: function() {
                table = document.querySelector("#tbl_goals");
                if (!table) {
                    return;
                }
                exportButtons();
            }
        };
    }();
</script>
@endsection