{{-- Extends layout --}}
@extends(getThemeBasePath())
@section('page_title')
{{$page_title}}
@endsection
<link href="{{asset('backend/plugins/custom/multiselect/css/multi-select.css')}}" media="screen" rel="stylesheet" type="text/css">
<style>
    .ms-container {
        width: 100%;
    }
</style>

{{-- Content --}}
@section('content')
<!--begin::Card-->
<form class="form" method="post" action="{{$action}}" id="manage_form" enctype="multipart/form-data">
    @if(!empty($data['id']))
    @method('PUT')
    @endif
    @csrf
    <div class="card shadow-sm">
        <!--begin::Card header-->
        <div class="card-header card-header-tabs-line nav-tabs-line-3x">
            <!--begin::Toolbar-->
            <div class="card-toolbar">
                <ul class="nav nav-tabs nav-line-tabs nav-stretch fs-6 border-0">
                    <!--begin::Item-->
                    <li class="nav-item mr-3">
                        <a class="nav-link active" data-toggle="tab" href="#kt_user_edit_tab_1">
                            <span class="nav-icon">
                                <i class="fa fa-user"></i>
                            </span>
                            <span class="nav-text font-size-lg">{{$page_title}}</span>
                        </a>
                    </li>
                </ul>
            </div>
            <!--end::Toolbar-->
        </div>
        <!--end::Card header-->
        <!--begin::Card body-->
        <div class="card-body">

            <div class="tab-content">
                <!--begin::Tab-->
                <div class="tab-pane show active" id="kt_user_edit_tab_1" role="tabpanel">
                    <!--begin::Row-->
                    <div class="row">
                        @include('backend.alerts')
                    </div>
                    <div class="row">
                        <div class="col-xl-10">
                            <!--begin::Group-->
                            <div class="form-group row mb-5">
                                <div class="col-3 text-right">
                                    <label class="col-form-label text-right">Category</label>
                                </div>                                
                                <div class="col-9">
                                    <a href="javascript:;"><button type="button" class="btn btn-primary mb-5 me-2" onclick="selectAll(this)">Select All</button></a>
                                    <a href="javascript:;"><button type="button" class="btn btn-secondary mb-5" onclick="deSelectAll(this)">Reset</button></a>
                                </div>
                                <div class="col-xl-3 col-md-3 col-lg-3"></div>
                                <div class="col-xl-9 col-md-9 col-lg-9">
                                    <select class="form-control form-control-lg form-control-solid optgroup" name="category_id[]" multiple required>
                                        @foreach($tcData as $categoryName => $tcDataChild)
                                        <optgroup label='{{$categoryName}}'>
                                            @foreach($tcDataChild as $tc)
                                            <option value="{{$tc['id']}}">{{$tc['name']}}</option>
                                            @endforeach
                                        </optgroup>
                                        @endforeach
                                    </select>
                                    <span class="text-muted">Expired trainings will not be shown here.</span>
                                </div>
                            </div>
                            <!--end::Group-->
                            <div class="form-group row my-5">
                                <div class="col-xl-3"></div>
                                <div class="col-xl-9"><hr></div>
                            </div>
                            <!--begin::Group-->
                            <div class="form-group row mb-5">
                                <div class="col-3 text-right">
                                    <label class="col-form-label text-right">Staff</label>
                                </div>                                
                                <div class="col-9">
                                    <a href="javascript:;"><button type="button" class="btn btn-primary mb-5 me-2" onclick="selectAll(this)">Select All</button></a>
                                    <a href="javascript:;"><button type="button" class="btn btn-secondary mb-5" onclick="deSelectAll(this)">Reset</button></a>
                                </div>
                                <div class="col-xl-3 col-md-3 col-lg-3"></div>
                                <div class="col-xl-9 col-md-9 col-lg-9">
                                    <select class="form-control form-control-lg form-control-solid optgroup" style="height: 250px;" name="user_id[]" multiple required>
                                        @foreach($status_list as $rname => $users)
                                        <optgroup label='{{$rname}}'>
                                            @foreach($users as $userId => $userName)
                                            <option value='{{$userId}}'>{{$userName}}</option>
                                            @endforeach
                                        </optgroup>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--end::Row-->
                </div>
                <!--end::Tab-->
            </div>
        </div>
        <!--begin::Card body-->
        <div class="card-footer text-right">
            <button type="submit" class="btn btn-primary me-2 btn-hover-rise" onclick="$('#manage_form').submit();">Submit</button>
            <a href="{{route('training.index')}}"><button type="button" class="btn btn-secondary btn-hover-rise">Cancel</button></a>
        </div>
    </div>
    <!--end::Card-->
</form>
@endsection
{{-- Scripts Section --}}
@section('scripts')
<script src="{{ asset('backend/plugins/custom/multiselect/js/jquery.multi-select.js') }}"></script>
<script src="{{ asset('backend/plugins/custom/multiselect/js/jquery.quicksearch.js') }}"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#manage_form').validate({
            // ignore: [],
            invalidHandler: function(form, validator) {
                var errors = validator.numberOfInvalids();
                if (errors && errors == 1) {
                    console.log(validator.errorList)
                }
            }
        });

        $('.optgroup').multiSelect({
            selectableOptgroup: true,
            selectableHeader: "<input type='text' class='search-input form-control form-control-lg' autocomplete='off' placeholder='Search'>",
            selectionHeader: "<input type='text' class='search-input form-control form-control-lg' autocomplete='off' placeholder='Search'>",
            afterInit: function(ms) {
                var that = this,
                    $selectableSearch = that.$selectableUl.prev(),
                    $selectionSearch = that.$selectionUl.prev(),
                    selectableSearchString = '#' + that.$container.attr('id') + ' .ms-elem-selectable:not(.ms-selected)',
                    selectionSearchString = '#' + that.$container.attr('id') + ' .ms-elem-selection.ms-selected';

                that.qs1 = $selectableSearch.quicksearch(selectableSearchString)
                    .on('keydown', function(e) {
                        if (e.which === 40) {
                            that.$selectableUl.focus();
                            return false;
                        }
                    });

                that.qs2 = $selectionSearch.quicksearch(selectionSearchString)
                    .on('keydown', function(e) {
                        if (e.which == 40) {
                            that.$selectionUl.focus();
                            return false;
                        }
                    });
            },
            afterSelect: function() {
                this.qs1.cache();
                this.qs2.cache();
            },
            afterDeselect: function() {
                this.qs1.cache();
                this.qs2.cache();
            }
        });
    });

    function selectAll(ele) {
        $(ele).parents('.form-group:first').find('.optgroup').multiSelect('select_all');
    }
    function deSelectAll(ele){
        $(ele).parents('.form-group:first').find('.optgroup').multiSelect('deselect_all');
    }
</script>
@endsection