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

@section('page_title')
    {{ $page_title }}
@endsection
{{-- Content --}}
@section('content')
<link href="{{asset('backend/plugins/custom/multiselect/css/multi-select.css')}}" media="screen" rel="stylesheet" type="text/css">
    <!--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">
                <!--begin::Switch-->
                <label class="form-check form-switch form-check-custom form-check-solid">
                    <input class="form-check-input" type="checkbox" name="option_all" id="show" checked />
                    <span class="form-check-label fw-bold text-muted">
                        Category View
                    </span>
                </label>
                <!--end::Switch-->
            </div>
            {{-- <div class="d-flex align-items-center position-relative my-1 search-bar d-none">
                <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-->
            <a href="javascript:;" id="modify_expiry_date" class="btn btn-primary font-weight-bolder btn-hover-rise mx-3">
                <!--begin::Svg Icon | path: /var/www/preview.keenthemes.com/keenthemes/metronic/docs/core/html/src/media/icons/duotune/general/gen014.svg-->
                <span class="svg-icon svg-icon-muted icon-size-1"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path opacity="0.3" d="M21 22H3C2.4 22 2 21.6 2 21V5C2 4.4 2.4 4 3 4H21C21.6 4 22 4.4 22 5V21C22 21.6 21.6 22 21 22Z" fill="currentColor"/>
                <path d="M6 6C5.4 6 5 5.6 5 5V3C5 2.4 5.4 2 6 2C6.6 2 7 2.4 7 3V5C7 5.6 6.6 6 6 6ZM11 5V3C11 2.4 10.6 2 10 2C9.4 2 9 2.4 9 3V5C9 5.6 9.4 6 10 6C10.6 6 11 5.6 11 5ZM15 5V3C15 2.4 14.6 2 14 2C13.4 2 13 2.4 13 3V5C13 5.6 13.4 6 14 6C14.6 6 15 5.6 15 5ZM19 5V3C19 2.4 18.6 2 18 2C17.4 2 17 2.4 17 3V5C17 5.6 17.4 6 18 6C18.6 6 19 5.6 19 5Z" fill="currentColor"/>
                <path d="M8.8 13.1C9.2 13.1 9.5 13 9.7 12.8C9.9 12.6 10.1 12.3 10.1 11.9C10.1 11.6 10 11.3 9.8 11.1C9.6 10.9 9.3 10.8 9 10.8C8.8 10.8 8.59999 10.8 8.39999 10.9C8.19999 11 8.1 11.1 8 11.2C7.9 11.3 7.8 11.4 7.7 11.6C7.6 11.8 7.5 11.9 7.5 12.1C7.5 12.2 7.4 12.2 7.3 12.3C7.2 12.4 7.09999 12.4 6.89999 12.4C6.69999 12.4 6.6 12.3 6.5 12.2C6.4 12.1 6.3 11.9 6.3 11.7C6.3 11.5 6.4 11.3 6.5 11.1C6.6 10.9 6.8 10.7 7 10.5C7.2 10.3 7.49999 10.1 7.89999 10C8.29999 9.90003 8.60001 9.80003 9.10001 9.80003C9.50001 9.80003 9.80001 9.90003 10.1 10C10.4 10.1 10.7 10.3 10.9 10.4C11.1 10.5 11.3 10.8 11.4 11.1C11.5 11.4 11.6 11.6 11.6 11.9C11.6 12.3 11.5 12.6 11.3 12.9C11.1 13.2 10.9 13.5 10.6 13.7C10.9 13.9 11.2 14.1 11.4 14.3C11.6 14.5 11.8 14.7 11.9 15C12 15.3 12.1 15.5 12.1 15.8C12.1 16.2 12 16.5 11.9 16.8C11.8 17.1 11.5 17.4 11.3 17.7C11.1 18 10.7 18.2 10.3 18.3C9.9 18.4 9.5 18.5 9 18.5C8.5 18.5 8.1 18.4 7.7 18.2C7.3 18 7 17.8 6.8 17.6C6.6 17.4 6.4 17.1 6.3 16.8C6.2 16.5 6.10001 16.3 6.10001 16.1C6.10001 15.9 6.2 15.7 6.3 15.6C6.4 15.5 6.6 15.4 6.8 15.4C6.9 15.4 7.00001 15.4 7.10001 15.5C7.20001 15.6 7.3 15.6 7.3 15.7C7.5 16.2 7.7 16.6 8 16.9C8.3 17.2 8.6 17.3 9 17.3C9.2 17.3 9.5 17.2 9.7 17.1C9.9 17 10.1 16.8 10.3 16.6C10.5 16.4 10.5 16.1 10.5 15.8C10.5 15.3 10.4 15 10.1 14.7C9.80001 14.4 9.50001 14.3 9.10001 14.3C9.00001 14.3 8.9 14.3 8.7 14.3C8.5 14.3 8.39999 14.3 8.39999 14.3C8.19999 14.3 7.99999 14.2 7.89999 14.1C7.79999 14 7.7 13.8 7.7 13.7C7.7 13.5 7.79999 13.4 7.89999 13.2C7.99999 13 8.2 13 8.5 13H8.8V13.1ZM15.3 17.5V12.2C14.3 13 13.6 13.3 13.3 13.3C13.1 13.3 13 13.2 12.9 13.1C12.8 13 12.7 12.8 12.7 12.6C12.7 12.4 12.8 12.3 12.9 12.2C13 12.1 13.2 12 13.6 11.8C14.1 11.6 14.5 11.3 14.7 11.1C14.9 10.9 15.2 10.6 15.5 10.3C15.8 10 15.9 9.80003 15.9 9.70003C15.9 9.60003 16.1 9.60004 16.3 9.60004C16.5 9.60004 16.7 9.70003 16.8 9.80003C16.9 9.90003 17 10.2 17 10.5V17.2C17 18 16.7 18.4 16.2 18.4C16 18.4 15.8 18.3 15.6 18.2C15.4 18.1 15.3 17.8 15.3 17.5Z" fill="currentColor"/>
                </svg>
                </span>
                <!--end::Svg Icon-->
                Modify Deadline Date</a>

                
                <!--begin::Button-->
                {!! Helper::getListAddBtn(route('training.create'), 'Add Category') !!}
                <!--end::Button-->
            </div>
        </div>
        <div class="card-header flex-wrap border-0 pt-6 pb-0">
            <div class="d-flex align-items-center position-relative my-1 search-bar d-none">
                <input type="text" data-kt-customer-table-filter="search" class="form-control form-control-solid w-250px ps-15" placeholder="Search" />
            </div>
        </div>
        <!--end::Header-->
        <!--begin::Body-->
        <div class="card-body">
            @include('backend.alerts')
            <div id="div1" style="display:none">
                <div class="row">
                    @foreach ($tcData??[] as $i => $catData)
                        <!--begin::Col-->
                        <div class="col-xl-4 col-lg-6 col-md-6 col-sm-6 mb-5">
                            <!--begin::Card-->
                            <div class="box shadow-sm gutter-b">
                                <br>
                                <!--begin::Card Header-->
                                <div class="box-header d-flex d-wrap px-3 justify-content-center">
                                    <h3 class="box-title">{{ $catData->category_name??"" }}</h3>
                                </div>
                                <hr>
                                <!--end::Card Header-->
                                <!--begin::Body-->
                                <div class="box-body pt-4" style="padding: 2rem 1.25rem;">
                                    <!--begin::Chart-->
                                    <div class="d-flex justify-content-center w-100">
                                        <div class="mixed-widget-training-chart" id="training-chart-{{ $i }}"
                                            data-kt-chart-color="primary" style="height: 200px;"></div>
                                    </div>
                                    <!--end::Chart-->
                                    <!--begin::Content-->
                                    <div class="text-center w-100 position-relative z-index-1 mt-n130">
                                        <!--begin::Action-->
                                        <div class="mb-9 mb-xxl-1">
                                            <a href="{{ route('module.index', $catData->id) }}" class="btn btn-primary py-4">{!! Helper::getSvgIconHelper('graphs/gra004.svg', 'svg-icon svg-icon-1') !!} Manage</a>
                                        </div>
                                        <!--end::Action-->
                                    </div>
                                    <!--end::Content-->
                                </div>
                                <!--end::Body-->
                            </div>
                            <!--end::Card-->
                        </div>
                        <!--end::Col-->
                    @endforeach
                </div>
            </div>
            <div id="div2">
                <!--begin: Datatable-->
                {!! $html->table() !!}
                <!--end: Datatable-->
            </div>
        </div>
        <!--end::Body-->
    </div>
    <!--end::Card-->

<div class="modal fade" id="client_referral_modal" tabindex="-1" role="dialog" aria-labelledby="client_referral_modal_label" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="client_referral_modal_label">Modify Deadline Date</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 action="javascript:;" id="modify_date_form">
                    <!--begin::Group-->
                        <div class="form-group row required mb-3">
                            <label class="col-form-label col-3 text-lg-right text-left mb-3">Training Name</label>
                            <div class="col-9 mb-3">
                                <a href="javascript:;"><button type="button" class="btn btn-primary mb-5" onclick="selectAll()">Select All</button></a>
                                <a href="javascript:;"><button type="button" class="btn btn-secondary mb-5" onclick="deSelectAll()">Reset</button></a>
                                <br />
                                <select id="category_id" class="form-control form-control-lg form-control-solid optgroup" name="category_id[]" multiple required>
                                    @foreach($tcDataCat as $categoryName => $tcDataChild)
                                    <optgroup label='{{$categoryName}}'>
                                        @foreach($tcDataChild as $tc)
                                        <option value="{{$tc['id']}}">{{$tc['name']}}</option>
                                        @endforeach
                                    </optgroup>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <!--end::Group-->
                        
                        <div class="form-group row required mt-3">
                            <label class="col-form-label col-3 text-lg-right text-left">New Deadline Date</label>
                            <div class="col-9">
                                <div class="input-group input-group-solid">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">
                                            <i class="la la-calendar"></i>
                                        </span>
                                    </div>
                                    <input
                                        class="form-control form-control-sm form-control-solid datepicker required"
                                        type="text" name="date" id="date" value="{{$data['date']??''}}"
                                        autocomplete="off" />
                                </div>
                            </div>
                        </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="submit-form">Send</button>
            </div>
        </div>
    </div>
</div>
@endsection

{{-- Scripts Section --}}
@section('scripts')
<script src="{{asset('backend/scripts/user/list-datatable.js')}}"></script>
<script src="{{asset('backend/plugins/custom/multiselect/js/jquery.multi-select.js')}}" type="text/javascript"></script>
<script src="{{asset('backend/plugins/custom/multiselect/js/jquery.quicksearch.js')}}" type="text/javascript"></script>
{!! $html->scripts() !!}

<script>
        $(document).ready(function () {
            $('#modify_date_form').validate();

            $('#submit-form').on('click', function () {
                if ($('#modify_date_form').valid()) {
                    $(this).prop('disabled', true);
                    showLoader('#client_referral_modal .modal-content');

                    $.ajax({
                        url: "{{ route('training.modify_deadline_date') }}", // <- apna route yaha lagao
                        type: 'POST',
                        dataType: 'json',
                        data: {
                            category_id: $('#category_id').val(), // multiple select values
                            date: $('#date').val(),
                            "_token": "{{ csrf_token() }}",
                        },
                        success: function (data) {
                            hideLoader('#client_referral_modal .modal-content');
                            $('#submit-form').prop('disabled', false);

                            if (data.status) {
                                Swal.fire({
                                    text: "Deadline updated successfully!",
                                    icon: "success",
                                    showCancelButton: false
                                });
                                $('#modify_date_form')[0].reset();
                                $('#category_id').multiSelect('deselect_all');
                                $('#client_referral_modal').modal('hide');
                                // window.LaravelDataTables["dataTableBuilder"].ajax.reload();
                            } else {
                                Swal.fire({
                                    text: data.message,
                                    icon: "error",
                                    showCancelButton: false
                                });
                            }
                        },
                        error: function (xhr) {
                            hideLoader('#client_referral_modal .modal-content');
                            if (xhr.status === 400) {
                                var response = xhr.responseJSON;
                                Swal.fire({
                                    text: response.message,
                                    icon: "error",
                                    showCancelButton: false
                                });
                            } else {
                                $('#submit-form').prop('disabled', false);
                                Swal.fire({
                                    text: 'An error occurred. Please try again.',
                                    icon: "error",
                                    showCancelButton: false
                                });
                            }
                        },
                        complete: function () {
                            $('#submit-form').prop('disabled', false);
                        }
                    });
                }
            });
        });

</script>
    <script type="text/javascript">
        $(function () {
            const $showCheckbox = $('#show');
            const $div1 = $('#div1');
            const $div2 = $('#div2');
            const $searchBar = $('.search-bar');

            function toggleVisibility() {
                if ($showCheckbox.is(':checked')) {
                    $div1.show();
                    $div2.hide();
                    $searchBar.addClass('d-none');
                } else {
                    LaravelDataTables.dataTableBuilder.ajax.reload();
                    $div1.hide();
                    $div2.show();
                    $searchBar.removeClass('d-none');
                }
            }

            $showCheckbox.on('change', toggleVisibility);
            toggleVisibility();
        });

        function actionDelete(ele) {
            var row = $(ele).parents('tr:first');
            if (row) {
                var id = row.attr('id');
                if (id) {
                    var alertText = jQuery.extend({}, deleteAlert);
                    alertText['text'] =
                        "Are you sure you want to delete training category? If you delete it all training data with this category will be deleted."
                    Swal.fire(alertText).then(function(result) {
                        if (result.value) {
                            $.ajax({
                                type: 'POST',
                                dataType: 'json',
                                data: {
                                    id: id,
                                    "_token": "{{ csrf_token() }}",
                                    _method: 'DELETE'
                                },
                                url: "{!! route('training.destroy', 1) !!}",
                                success: function(data) {
                                    if (data.status) {
                                        Swal.fire(deleteSuccessAlert);
                                        window.LaravelDataTables["dataTableBuilder"].ajax.reload();
                                    }
                                }
                            });
                        }
                    });
                }
            }
        }
    </script>
    <script>
        $(document).ready(function() {
            @foreach ($tcData as $i => $catData)
                var id = '{{ $i }}';
                var training_count = '{{ $tcDataModules[$catData->id] ?? 0 }}';
                var total_training_count = '{{ array_sum($tcDataModules) }}';
                var percentage = (training_count / total_training_count) * 100;
                initMixedWidget17(id, percentage, training_count);
            @endforeach
        });

        function initMixedWidget17(id, percentage, training_count) {
            var charts = document.querySelectorAll('#training-chart-' + id);

            [].slice.call(charts).map(function(element) {
                var height = parseInt(KTUtil.css(element, 'height'));

                if (!element) {
                    return;
                }

                var color = element.getAttribute('data-kt-chart-color');

                var options = {
                    labels: ["Total Training"],
                    series: [percentage],
                    chart: {
                        fontFamily: 'inherit',
                        height: 250,
                        type: 'radialBar',
                        offsetY: 0
                    },
                    plotOptions: {
                        radialBar: {
                            startAngle: -90,
                            endAngle: 90,
                            hollow: {
                                margin: 0,
                                size: "55%"
                            },
                            dataLabels: {
                                showOn: "always",
                                name: {
                                    show: true,
                                    fontSize: "12px",
                                    fontWeight: "700",
                                    offsetY: -5,
                                    color: KTUtil.getCssVariableValue('--bs-gray-750')
                                },
                                value: {
                                    color: KTUtil.getCssVariableValue('--bs-gray-900'),
                                    fontSize: "24px",
                                    fontWeight: "600",
                                    offsetY: -40,
                                    show: true,
                                    formatter: function(value) {
                                        return training_count;
                                    }
                                }
                            },
                            track: {
                                background: KTUtil.getCssVariableValue('--bs-gray-300'),
                                strokeWidth: '100%'
                            }
                        }
                    },
                    colors: [KTUtil.getCssVariableValue('--bs-' + color)],
                    stroke: {
                        lineCap: "round",
                    }
                };

                var chart = new ApexCharts(element, options);
                chart.render();
            });
        }
    </script>

    <script type="text/javascript">

    $(document).ready(function() {
        $('.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();
            }
        });
        // optGroupMultiSelect();
    });
    function optGroupMultiSelect() {
        $('#category_id').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() {
        $('#category_id').multiSelect('select_all');
    }

    function deSelectAll() {
        $('#category_id').multiSelect('deselect_all');
    }

    $('#modify_expiry_date').click(function(){
        initDatePicker();
        if ($('#category_id').data('multiselect')) {
            $('#category_id').multiSelect('destroy');
        }
        optGroupMultiSelect();
        deSelectAll();
        $('#date').val('');
        $('#client_referral_modal').modal('show');
    });
    $(function() {
        $("#show").click(function() {
            hideShow(this);
        });

        $(document).ready(function() {
            hideShow($("#show"));
        })
    });

    function hideShow(ele) {
        if ($(ele).is(":checked")) {
            $("#div1").show();
            $("#div2").hide();
        } else {
            LaravelDataTables.dataTableBuilder.ajax.reload();
            $("#div1").hide();
            $("#div2").show();
        }
    }
</script>
@endsection