@extends('layouts.admin')
@section('breadcrumb')
    @include('admin.partials.crumb', [
        'crumbs' => [
            route('admin.dashboard') => __('default.dashboard'),
            route('admin.student.sessions') => 'Acara',
            '#' => isset($pageTitle) ? $pageTitle : '',
        ],
    ])
@endsection
@section('content')
    <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="card">
            <div class="card-header">
                <h4>Data Acara</h4>
                <div class="card-header-action">
                    <a href="#" onclick="$('#sessionform').submit()" class="btn btn-primary">
                        <i class="fa fa-save"></i> {{ __lang('save') }}
                    </a>
                </div>
            </div>
            <div class="card-body">
                <form id="sessionform" class="form-horizontal" role="form" method="post" action="{{ $action }}">
                    @csrf
                    <!-- Smart Wizard -->
                    <p>{!! __lang('fill-each-section') !!} </p>
                    <div id="course_wizard" class="form_wizard wizard_horizontal">
                        <ul class="wizard_steps">
                            <li>
                                <a href="#step-1">
                                    <span class="step_no">1</span>
                                    <span class="step_descr">
                                        {{ __lang('info') }}<br />
                                        {{-- <small>{{ __lang('basic-course-data') }}</small> --}}
                                    </span>
                                </a>
                            </li>
                            {{-- <li>
                                <a href="#step-2">
                                    <span class="step_no">2</span>
                                    <span class="step_descr">Data<br />
                                        <small>{{ __lang('course-options') }}</small>
                                    </span>
                                </a>
                            </li> --}}
                            <li>
                                <a href="#step-2">
                                    <span class="step_no">2</span>
                                    <span class="step_descr">
                                        {{ __lang('scheduling') }}<br />
                                        {{-- <small>{{ __lang('start-end-dates') }}</small> --}}
                                    </span>
                                </a>
                            </li>
                            {{-- <li>
                                <a href="#step-4">
                                    <span class="step_no">4</span>
                                    <span class="step_descr">
                                        {{ __lang('instructors') }}<br />
                                        <small>{{ __lang('course-instructors') }}</small>
                                    </span>
                                </a>
                            </li> --}}
                        </ul>
                        <div id="step-1">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <div>
                                            <label for="password1" class="control-label"><span
                                                    class="required">*</span>Nama Acara</label>
                                        </div>
                                        <div>
                                            {{ formElement($form->get('session_name')) }}
                                            <p class="help-block">{{ formElementErrors($form->get('session_name')) }}</p>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div>
                                            <label for="password1" class="control-label">{{ __lang('status') }}</label>
                                        </div>
                                        <div>
                                            {{ formElement($form->get('session_status')) }}
                                            <p class="help-block">{{ formElementErrors($form->get('session_status')) }}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="form-group">
                                        <label for="password1" class="control-label">Kategory Acara</label>
                                        <div>
                                            {{ formElement($form->get('session_category_id[]')) }}
                                            <p class="help-block">
                                                {{ formElementErrors($form->get('session_category_id[]')) }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="form-group">
                                        <div>
                                            <label for="password1" class="control-label"><span
                                                    class="required">*</span>{{ __lang('short-description') }}</label>
                                        </div>
                                        <div>
                                            {{ formElement($form->get('short_description')) }}
                                            <p class="help-block">{{ formElementErrors($form->get('short_description')) }}
                                            </p>
                                            <div>
                                                <span class="chars-remaining"></span> {{ __lang('characters-remaining') }}
                                                (<span class="chars-max"></span> {{ strtolower(__lang('maximum')) }})
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {{-- <div class="row">
                                <div class="col-sm-12">
                                    <div class="form-group">
                                        <div>
                                            <label for="password1"
                                                class="control-label">{{ __lang('course-description') }}</label>
                                        </div>
                                        <div>
                                            {{ formElement($form->get('description')) }}
                                            <p class="help-block">{{ formElementErrors($form->get('description')) }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="form-group">
                                        <div>
                                            <label for="password1"
                                                class="control-label">{{ __lang('introduction') }}</label>
                                        </div>
                                        <div>
                                            {{ formElement($form->get('introduction')) }}
                                            <p class="help-block">{{ formElementErrors($form->get('introduction')) }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div> --}}
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group" style="margin-bottom:10px">
                                        <div class="col-lg-4 col-md-4">
                                            <label for="image" class="control-label">{{ __lang('cover-image') }}
                                                ({{ __lang('optional') }})</label><br />
                                        </div>
                                        <div>
                                            <div class="image"><img data-name="image" src="{{ $display_image }}"
                                                    alt="" id="thumb" /><br />
                                                {{ formElement($form->get('picture')) }}
                                                <a class="pointer" href="#"
                                                    onclick="image_upload('image', 'thumb');">{{ __lang('browse') }}</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a
                                                    href="javascript:;" class="pointer"
                                                    onclick="$('#thumb').attr('src', '{{ $no_image }}'); $('#image').attr('value', '');">{{ __lang('clear') }}</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {{-- <div id="step-2" class="container">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <div>
                                            <label for="password1"
                                                class="control-label">{{ __lang('payment-required') }}</label>
                                        </div>
                                        <div>
                                            {{ formElement($form->get('payment_required')) }}
                                            <p class="help-block">{{ formElementErrors($form->get('payment_required')) }}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <div>
                                            <label for="password1" class="control-label">{{ __lang('course-fee') }}</label>
                                        </div>
                                        <div>
                                            {{ formElement($form->get('amount')) }}
                                            <p class="help-block">{{ formElementErrors($form->get('amount')) }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <div>
                                            <label for="password1" class="control-label">{{ __lang('effort') }}</label>
                                        </div>
                                        <div>
                                            {{ formElement($form->get('effort')) }}
                                            <p class="help-block">{{ formElementErrors($form->get('effort')) }}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <div>
                                            <label for="password1" class="control-label">{{ __lang('length') }}</label>
                                        </div>
                                        <div>
                                            {{ formElement($form->get('length')) }}
                                            <p class="help-block">{{ formElementErrors($form->get('length')) }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <div>
                                            <label for="password1" class="control-label">{{ __lang('status') }}</label>
                                        </div>
                                        <div>
                                            {{ formElement($form->get('session_status')) }}
                                            <p class="help-block">{{ formElementErrors($form->get('session_status')) }}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <div>
                                            <label for="enable_discussion"
                                                class="control-label">{{ __lang('enable-discussions') }}</label>
                                        </div>
                                        <div>
                                            {{ formElement($form->get('enable_discussion')) }}
                                            <p class="help-block">{{ formElementErrors($form->get('enable_discussion')) }}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <div>
                                            <label for="password1"
                                                class="control-label">{{ formLabel($form->get('enable_chat')) }}</label>
                                        </div>
                                        <div>
                                            {{ formElement($form->get('enable_chat')) }}
                                            <p class="help-block">{{ formElementErrors($form->get('enable_chat')) }}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <div>
                                            <label for="enable_discussion"
                                                class="control-label">{{ formLabel($form->get('enforce_order')) }}</label>
                                        </div>
                                        <div>
                                            {{ formElement($form->get('enforce_order')) }}
                                            <p class="help-block">{{ formElementErrors($form->get('enforce_order')) }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <div>
                                            <label for="enable_discussion"
                                                class="control-label">{{ __lang('enable-forum') }}</label>
                                        </div>
                                        <div>
                                            {{ formElement($form->get('enable_forum')) }}
                                            <p class="help-block">{{ formElementErrors($form->get('enable_forum')) }}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <div>
                                            <label for="enable_discussion"
                                                class="control-label">{{ __lang('capacity') }}</label>
                                        </div>
                                        <div>
                                            {{ formElement($form->get('capacity')) }}
                                            <p class="help-block">{{ formElementErrors($form->get('capacity')) }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <div>
                                            <label for="enable_discussion"
                                                class="control-label">{{ __lang('enforce-capacity') }}</label>
                                        </div>
                                        <div>
                                            {{ formElement($form->get('enforce_capacity')) }}
                                            <p class="help-block">{{ formElementErrors($form->get('enforce_capacity')) }}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div> --}}
                        <div id="step-2">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <div>
                                            <label for="password1"
                                                class="control-label">Tanggal Mulai</label>
                                        </div>
                                        <div>
                                            {{ formElement($form->get('session_date')) }}
                                            <p class="help-block">{{ formElementErrors($form->get('session_date')) }}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <div>
                                            <label for="password1" class="control-label">Tanggal Selesai</label>
                                        </div>
                                        <div>
                                            {{ formElement($form->get('session_end_date')) }}
                                            <p class="help-block">{{ formElementErrors($form->get('session_end_date')) }}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {{-- <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <div>
                                            <label for="password1"
                                                class="control-label">{{ __lang('enrollment-closes') }}
                                                ({{ __lang('optional') }})</label>
                                        </div>
                                        <div>
                                            {{ formElement($form->get('enrollment_closes')) }}
                                            <p class="help-block">{{ formElementErrors($form->get('enrollment_closes')) }}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div> --}}
                        </div>
                        {{-- <div id="step-4">
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="form-group">
                                        <label for="password1" class="control-label">{{ __lang('course-instructors') }}
                                            ({{ __lang('optional') }})</label>
                                        {{ formElement($form->get('session_instructor_id[]')) }}
                                        <p class="help-block">
                                            {{ formElementErrors($form->get('session_instructor_id[]')) }}</p>
                                    </div>
                                </div>
                            </div>
                        </div> --}}
                    </div>
                    <!-- End SmartWizard Content -->
                </form>
            </div>
        </div>
    </div>
@endsection
@section('footer')
    <script type="text/javascript" src="{{ basePath() . '/client/vendor/ckeditor/ckeditor.js' }}"></script>
    <script type="text/javascript" src="{{ basePath() . '/client/vendor/datatables/media/js/jquery.dataTables.min.js' }}">
    </script>
    <script type="text/javascript" src="{{ basePath() . '/client/vendor/stupidtable/stupidtable.min.js' }}"></script>
    <!-- FastClick -->
    <script src="{{ basePath() }}/client/themes/cpanel/vendors/fastclick/lib/fastclick.js"></script>
    <!-- NProgress -->
    <script src="{{ basePath() }}/client/themes/cpanel/vendors/nprogress/nprogress.js"></script>
    <!-- jQuery Smart Wizard -->
    <script src="{{ basePath() }}/client/themes/cpanel/vendors/jQuery-Smart-Wizard/js/jquery.smartWizard.js"></script>
    <script>
        $('#course_wizard').smartWizard({
            enableAllSteps: true,
            enableFinishButton: true,
            labelNext: '{{ __lang('Next') }}', // label for Next button
            labelPrevious: '{{ __lang('Previous') }}', // label for Previous button
            labelFinish: '{{ __lang('Finish') }}' // label for Finish button
        });
        CKEDITOR.on('instanceReady', function() {
            $('#course_wizard').smartWizard('fixHeight');
        });
    </script>
    <script type="text/javascript" src="{{ basePath() }}/client/vendor/pickadate/picker.js"></script>
    <script type="text/javascript" src="{{ basePath() }}/client/vendor/pickadate/picker.date.js"></script>
    <script type="text/javascript" src="{{ basePath() }}/client/vendor/pickadate/picker.time.js"></script>
    <script type="text/javascript" src="{{ basePath() }}/client/vendor/pickadate/legacy.js"></script>
    <script type="text/javascript">
        <!--
        function sortTable() {
            console.log('table sorted');
            $("#selectedTable").stupidtable();
            var $th_to_sort = $("#selectedTable").find("thead th").eq(1);
            $th_to_sort.stupidsort();
            $th_to_sort.stupidsort('asc');
        }
        var table;
        function initializeTable() {
            var dtOptions = {
                "ordering": true,
                columnDefs: [{
                        orderable: false,
                        targets: "no-sort"
                    },
                    {
                        "targets": [2],
                        "visible": false
                    }
                ]
            };
            if (!$.fn.dataTable.isDataTable('#datatable')) {
                table = $('#datatable').DataTable(dtOptions);
            }
            $('.dataTables_filter input').attr("placeholder", "Class or Group name");
            showList();
            jQuery(function() {
                $('.date').pickadate({
                    format: 'yyyy-mm-dd'
                });
                table.$('.date').pickadate({
                    format: 'yyyy-mm-dd'
                });
                table.$('.time').pickatime({
                    interval: 15
                });
            });
            $("#select_all").change(function() { //"select all" change
                var status = this.checked; // "select all" checked status
                table.$('.cbox').each(function() { //iterate all listed checkbox items
                    this.checked = status; //change ".checkbox" checked status
                });
                initializeTable(table);
                showList();
            });
            function showList() {
                $('#selectedlist').text('');
                table.$('.cbox').each(function() { //iterate all listed checkbox items
                    if (this.checked) {
                        var id = $(this).val();
                        //$('#selectedlist').prepend('<li>'+table.$('#lesson_name_'+id).text()+' (position : '+table.$('input[name=sort_order_'+id+']').val()+')</li>');
                        $('#selectedlist').append('<tr class="sort_row" data-id="' + id + '"><td>' + table.$(
                            '#lesson_name_' + id).text() + '</td><td class="sort_cell">' + table.$(
                            'input[name=sort_order_' + id + ']').val() + '</td><td>' + table.$(
                            'input[name=lesson_date_' + id + ']').val() + '</td></tr>');
                    } //change ".checkbox" checked status
                });
                sortTable();
            }
            table.$('input').change(function() { //".checkbox" change
                showList();
            });
            table.$('.cbox').change(function() { //".checkbox" change
                //uncheck "select all", if one of the listed checkbox item is unchecked
                if (this.checked == false) { //if this item is unchecked
                    $("#select_all")[0].checked = false; //change "select all" checked status to false
                }
                //check "select all" if all checkbox items are checked
                if (table.$('.cbox:checked').length == table.$('.cbox').length) {
                    $("#select_all")[0].checked = true; //change "select all" checked status to true
                }
                showList();
            });
        }
        initializeTable();
        //
        -->
    </script>
    {{-- <script type="text/javascript">
        CKEDITOR.replace('description', {
            filebrowserBrowseUrl: '{{ basePath() }}/admin/filemanager',
            filebrowserImageBrowseUrl: '{{ basePath() }}/admin/filemanager',
            filebrowserFlashBrowseUrl: '{{ basePath() }}/admin/filemanager'
        });
        CKEDITOR.replace('introduction', {
            filebrowserBrowseUrl: '{{ basePath() }}/admin/filemanager',
            filebrowserImageBrowseUrl: '{{ basePath() }}/admin/filemanager',
            filebrowserFlashBrowseUrl: '{{ basePath() }}/admin/filemanager'
        });
    </script> --}}
    <script>
        function image_upload(field, thumb) {
            console.log('image upload');
            $('#dialog').remove();
            $('#content').prepend(
                '<div id="dialog" style="padding: 3px 0px 0px 0px;"><iframe src="{{ basePath() }}/admin/filemanager?&token=true&field=' +
                encodeURIComponent(field) +
                '" style="padding:0; margin: 0; display: block; width: 100%; height: 100%;" frameborder="no" scrolling="auto"></iframe></div>'
                );
            $('#dialog').dialog({
                title: '{{ addslashes(__lang('Image Manager')) }}',
                close: function(event, ui) {
                    if ($('#' + field).attr('value')) {
                        $.ajax({
                            url: '{{ basePath() }}/admin/filemanager/image?&image=' +
                                encodeURIComponent($('#' + field).val()),
                            dataType: 'text',
                            success: function(data) {
                                $('#' + thumb).replaceWith('<img src="' + data + '" alt="" id="' +
                                    thumb + '" />');
                            }
                        });
                    }
                },
                bgiframe: false,
                width: 800,
                height: 570,
                resizable: true,
                modal: false,
                position: "center"
            });
        };
        $(function() {
            //     $('textarea[name=short_description]').maxlength({max: 300,feedbackText:'{r} {{ __lang('characters-remaining') }} ({m} {{ __lang('maximum') }})'});
            $('textarea[name=short_description]').maxLength();
            $('#sessionform').submit(function(e) {
                e.preventDefault();
                table.destroy();
                $(this).unbind('submit');
                $(this).submit();
            });
            $('#addClassForm').submit(function(e) {
                $('#addClassBtn').text('{{ __lang('saving') }}...');
                e.preventDefault();
                $.post($(this).attr('action'), $(this).serialize(), function(data) {
                    table.destroy();
                    $("#classes").prepend(data);
                    $('#addClassBtn').text('{{ __lang('Save Changes') }}');
                    $('#addClassModal').modal('hide');
                    $('#addClassForm').find("input[type=text], textarea").val("");
                    jQuery('.date').pickadate({
                        format: 'yyyy-mm-dd'
                    });
                    jQuery('.time').pickatime({
                        interval: 15
                    });
                    //table= $('#datatable').DataTable(dtOptions);
                    initializeTable();
                });
            })
            $("#selectedTable tbody").sortable({
                opacity: 0.6,
                update: function() {
                    var counter = 1;
                    //console.log(order);
                    $('.sort_row').each(function() {
                        $(this).find('.sort_cell').text(counter);
                        //update field
                        var id = $(this).attr('data-id');
                        $('input[name=sort_order_' + id + ']').val(counter);
                        counter++;
                    })
                }
            });
        });
        $('div.actionBar a.buttonNext,div.actionBar a.buttonPrevious').on('click', function() {
            $([document.documentElement, document.body]).animate({
                scrollTop: $("#course_wizard").offset().top
            }, 200);
        });
    </script>
    <style>
        #selectedTable tr {
            cursor: grabbing;
        }
    </style>
@endsection
@section('header')
    <link rel="stylesheet" href="{{ basePath() . '/client/vendor/pickadate/themes/default.date.css' }}">
    <link rel="stylesheet" href="{{ basePath() . '/client/vendor/pickadate/themes/default.time.css' }}">
    <link rel="stylesheet" href="{{ basePath() . '/client/vendor/pickadate/themes/default.css' }}">
    <link rel="stylesheet" href="{{ basePath() . '/client/vendor/datatables/media/css/jquery.dataTables.min.css' }}">
    <link href="{{ asset('client/css/wizard.css') }}" rel="stylesheet">
    <style>
        span.required {
            color: red;
            font-weight: bold;
        }
    </style>
    <script type="text/javascript" src="{{ asset('client/vendor/limit-characters-maxlength/jquery.maxlength.min.js') }}">
    </script>
@endsection