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

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

{{-- Content --}}
@section('content')
<!--begin::Card-->
<div class="card shadow-sm">
    <!--begin::Header-->
    <div class="card-header flex-wrap border-0 pt-6 pb-0">
        <div class="card-title">
        <input type="text" data-kt-customer-table-filter="search" class="form-control form-control-solid w-250px ps-15" placeholder="Search" />
        </div>
        <div class="card-toolbar">
            <!--begin::Button-->
            <button class="btn btn-primary complete_training me-5">Complete Training</button>
            <input type="hidden" id="training_module_id_record_id" value="{{$training_module_id}}">

            {!!Helper::getListAddBtn(route("training_module_description.index",$training_module_id),"Back","back")!!}
            <!--end::Button-->
        </div>
    </div>
    <!--end::Header-->
    <!--begin::Body-->
    <div class="card-body">
        @include("backend.alerts")
        <!--begin: Datatable-->
       
            @csrf
            {!! $html->table() !!}
       
        <!--end: Datatable-->
    </div>
    <!--end::Body-->
</div>
<!--end::Card-->

<!-- Complete Training Modal -->
<div class="modal fade" id="completeTrainingModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Complete Training</h5>
                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="completeTrainingForm">
                    <div class="form-group">
                        <label for="completion_date">Completion Date</label>
                        <input type="text" class="form-control datepicker" id="completion_date" name="completion_date" max="{{ date('d-m-Y H:i:s') }}" readonly>
                        <span class="text-danger completion_date_error"></span>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="confirmCompleteTraining">Confirm</button>
            </div>
        </div>
    </div>
</div>
@endsection

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

{!! $html->scripts() !!}
<script type="text/javascript">
    function actionDelete(ele) {
        var row = $(ele).parents('tr:first');
        if (row) {
            var id = row.attr('id');
            if (id) {
                Swal.fire(deleteAlert).then(function(result) {
                    if (result.value) {
                        $.ajax({
                            type: 'POST',
                            dataType: 'json',
                            data: {
                                id: id,
                                "_token": "{{ csrf_token() }}",
                                _method: 'DELETE'
                            },
                            url: "{!! route('training_assigns_pending_user.destroy',1) !!}",
                            success: function(data) {
                                if (data.status) {
                                    Swal.fire(deleteSuccessAlert);
                                    window.LaravelDataTables["dataTableBuilder"].ajax.reload();
                                }
                            }
                        });
                    }
                });
            }
        }
    }

    $(document).on('change', '.select_all_pending_training_users_checkbox', function() {
        if ($(this).prop('checked')) {
            $('.select_pending_training_users_checkbox').attr('checked', true);
        } else {
            $('.select_pending_training_users_checkbox').removeAttr('checked');
        }
    });


    $('.complete_training').on('click', function() {

        if ($('.select_pending_training_users_checkbox:checked').length == 0) {
            Swal.fire({
                "text": 'Please choose at least one user to complete training!',
                "icon": "info",
                "showCancelButton": false
            });
        } else {
            $('#completion_date').val('');
            $('.completion_date_error').text('');
            initDatePicker();
            $('#completeTrainingModal').modal('show');
        }
    });

    $('#confirmCompleteTraining').on('click', function() {

        var completionDate = $('#completion_date').val();

        if (!completionDate) {
            $('.completion_date_error').text('Please select a completion date!');
            return;
        }
        $('.completion_date_error').text('');

        var userIds = [];
        var training_module_id_record_id = $('#training_module_id_record_id').val();
        $('.select_pending_training_users_checkbox:checked').each(function() {
            userIds.push($(this).val());
        });

        $.ajax({
            type: 'POST',
            dataType: 'json',
            data: {
                "userIds": userIds,
                "training_module_id": training_module_id_record_id,
                "completion_date": completionDate,
                "_token": "{{ csrf_token() }}",
            },
            url: "{!! route('training_assigns_pending_user.complete_pending_trainings') !!}",
            success: function(data) {

                $('#completeTrainingModal').modal('hide');

                if (data.status) {
                    Swal.fire({
                        "text": data.message,
                        "icon": "success",
                        "showCancelButton": false
                    });
                } else {
                    Swal.fire({
                        "text": data.message,
                        "icon": "error",
                        "showCancelButton": false
                    });
                }
                window.LaravelDataTables["dataTableBuilder"].ajax.reload();
            },
        });
    });
    
</script>
@endsection