@extends('layouts.master')

@section('title', 'Project Document')

@section('content')
    <div class="container-fluid" id="App">
        <!-- Page Header -->
        <div class="d-md-flex d-block align-items-center justify-content-between my-4 page-header-breadcrumb">
            <div class="my-auto">
                <!-- <h4 class="mb-0">{{ trans('pre_entry_training_scheduler.pre_entry_training_scheduler') }}</h4> -->
                <nav>
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item"><a href="javascript:void(0);">{{ trans('common.homepage') }}</a></li>
                        <!-- <li class="breadcrumb-item active" aria-current="page">
                            {{ trans('pre_entry_training_scheduler.pre_entry_training_scheduler') }}</li> -->
                    </ol>
                </nav>
            </div>
            <div class="d-flex my-xl-auto right-content align-items-center">
                <div>
                    @if ($type == 'edit')
                        <button type="button" class="btn btn-primary" id="submitEdit">{{ trans('label.save') }}</button>
                        <a href="{{ route('view.get_file_form.redirect_route', $fileId) }}/?iframe_mode=1" class="btn btn-light border">{{ trans('label.cancel') }}</a>
                    @else
                        <a href="{{ route('view.pre_entry_training_scheduler.index', ['file_id' => $fileId]) }}?iframe_mode={{ request()->iframe_mode }}" class="btn btn-primary-light btn--edit">{{ trans('label.edit') }}</a>
                        <!-- <a href="{{ route('view.pre_entry_training_scheduler.export', ['file_id' => $fileId, 'type' => 'xlsx']) }}" class="btn btn-success">{{ trans('project.export_excel') }}</a>
                        <a href="{{ route('view.pre_entry_training_scheduler.export', ['file_id' => $fileId, 'type' => 'pdf']) }}" class="btn btn-info">{{ trans('project.export_pdf') }}</a> -->
                    @endif
                </div>
            </div>
        </div>
        <form id="formEdit" action="{{ route('view.pre_entry_training_scheduler.update', ['file_id' => $fileId]) }}?iframe_mode={{ request()->iframe_mode }}" method="POST" enctype="multipart/form-data" class="container-fluid">
            @csrf
            <ul class="nav nav-tabs tab-style-1 d-sm-flex d-block" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" data-bs-toggle="tab" data-bs-target="#pre_entry_training_scheduler" aria-current="page"
                        href="#pre_entry_training_scheduler">{{ trans('pre_entry_training_scheduler.pre_entry_training_scheduler') }}</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="tab" data-bs-target="#pre_entry_training_scheduler_detail1" aria-current="page"
                        href="#pre_entry_training_scheduler_detail1">{{ trans('pre_entry_training_scheduler.pre_entry_training_scheduler_detail1') }}</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="tab" data-bs-target="#pre_entry_training_scheduler_detail2" aria-current="page"
                        href="#pre_entry_training_scheduler_detail2">{{ trans('pre_entry_training_scheduler.pre_entry_training_scheduler_detail2') }}</a>
                </li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane  p-0 border-0 active" id="pre_entry_training_scheduler" role="pre_entry_training_scheduler">
                    <div class="card-body">
                        @include('pages.pre_entry_training_scheduler.component.pre_entry_training_scheduler')
                    </div>
                </div>
                <div class="tab-pane  p-0 border-0" id="pre_entry_training_scheduler_detail1" role="pre_entry_training_scheduler_detail1">
                    <div class="card-body">
                        @include('pages.pre_entry_training_scheduler.component.pre_entry_training_scheduler_detail1')
                    </div>
                </div>
                <div class="tab-pane  p-0 border-0" id="pre_entry_training_scheduler_detail2" role="pre_entry_training_scheduler_detail2">
                    <div class="card-body">
                        @include('pages.pre_entry_training_scheduler.component.pre_entry_training_scheduler_detail2')
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection

@section('script-footer')

    <!-- Chartjs Chart JS -->
    <!-- <script src="{{ asset('assets/js/index.js') }}"></script> -->

    <script src="{{ asset('assets/js/prism-custom.js') }}"></script>

    <script src="{{ asset('assets/js/custom-switcher.min.js') }}"></script>
    <!-- Custom JS -->
    <script src="{{ asset('assets/js/custom.js') }}"></script>


    <!-- Lodash -->
     
    <script src="https://cdn.ckeditor.com/ckeditor5/41.1.0/classic/ckeditor.js"></script>



    <script type="text/javascript">
        var CSRF_TOKEN = jQuery('meta[name="csrf-token"]').attr('content');
        var S_HYPEN = "-";
        var options = {
            maxNotifications: 5,
            durations: {
                alert: 9000,
                warning: 9000,
                success: 9000,
            },
            labels: {
                alert: '',
                warning: '',
                success: '',
            },
            icons: {
                enabled: false
            },
        }
        var notifier = new AWN(options);

        ClassicEditor
            .create(document.querySelector('#document_template_body'))
            .then(editor => {
                const editorElement = editor.ui.view.editable.element;
                editor.ui.view.editable.element.style.minHeight = '200px';
                editorElement.style.resize = 'vertical';
            })
            .catch(error => {
                console.error(error);
            });

        new Vue({
            el: '#pre_entry_training_scheduler_detail1',
            data: {
            sortDirection: 'desc',
            sortBy: 'id',
            count: 0,//total page
            page: 1, //pagination: curent page
            perPage: "{{$default_records_per_page}}", // pagination: records per page
                total: 0, //pagination: total records
                pageRange: 3, // pagination:controls nearby page display. currenpage counted
                from:1,
                to:10,
            list: [],
            candidateStatus: [],
            conditionSearch: '',
            listPage: [],
            showCount: 10,
            trainingScheduler: [],
        },
        delimiters: ["((", "))"],
        mounted() {
            const that = this;
            this.onLoadPagination();
        },
        computed: {},

        methods: {
           sort: function(s) {
                if (s === this.sortBy) {
                    this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
                }
                this.sortBy = s;
            },
            onPerPageChange(perPage) {
                this.page = 1;
                this.perPage = perPage;
                console.log('perpage', this.perPage);
                this.onLoadPagination();
            },
            onPageChange(_p) {
                this.page = _p;
                this.onLoadPagination();
            },
            onPrePage() {
                if (this.page > 1) {
                    this.page = this.page - 1;
                }
                this.onLoadPagination();
            },
            onNextPage() {
                if (this.page < this.count) {
                    this.page = this.page + 1;
                }
                this.onLoadPagination();
            },
            onLoadPagination() {
                const that = this;
                @foreach($trainingScheduler as $item)
                    that.trainingScheduler.push({
                        action: 'update',
                        id: '{{ $item->id }}',
                        content: '{{ $item->content }}',
                        school_name: '{{ $item->school_name }}',
                        ext_teacher: '{{ $item->ext_teacher }}',
                        school_address: '{{ $item->school_address }}',
                        learn_from: '{{ $item->learn_from }}',
                        learn_to: '{{ $item->learn_to }}',
                        learn_time: '{{ $item->learn_time }}',
                    });
                @endforeach
            },
            deleteTrainingScheduler(item) {
                item.action = 'delete';
            },
            addTrainingScheduler() {
                this.trainingScheduler.push({
                    action: 'add',
                    id: '',
                    content: '',
                    school_name: '',
                    ext_teacher: '',
                    school_address: '',
                    learn_from: '',
                    learn_to: '',
                    learn_time: '',
                });
            }
        },
    });

    new Vue({
            el: '#pre_entry_training_scheduler_detail2',
            data: {
            sortDirection: 'desc',
            sortBy: 'id',
            count: 0,//total page
            page: 1, //pagination: curent page
            perPage: "{{$default_records_per_page}}", // pagination: records per page
                total: 0, //pagination: total records
                pageRange: 3, // pagination:controls nearby page display. currenpage counted
                from:1,
                to:10,
            list: [],
            candidateStatus: [],
            conditionSearch: '',
            listPage: [],
            showCount: 10,
            trainingScheduler2: [],
        },
        delimiters: ["((", "))"],
        mounted() {
            const that = this;
            this.onLoadPagination();
        },
        computed: {},

        methods: {
           sort: function(s) {
                if (s === this.sortBy) {
                    this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
                }
                this.sortBy = s;
            },
            onPerPageChange(perPage) {
                this.page = 1;
                this.perPage = perPage;
                console.log('perpage', this.perPage);
                this.onLoadPagination();
            },
            onPageChange(_p) {
                this.page = _p;
                this.onLoadPagination();
            },
            onPrePage() {
                if (this.page > 1) {
                    this.page = this.page - 1;
                }
                this.onLoadPagination();
            },
            onNextPage() {
                if (this.page < this.count) {
                    this.page = this.page + 1;
                }
                this.onLoadPagination();
            },
            onLoadPagination() {
                const that = this;
                @foreach($trainingScheduler2 as $item)
                    that.trainingScheduler2.push({
                        action: 'update',
                        id: '{{ $item->id }}',
                        content : '{{ $item->content }}',
                        school_name : '{{ $item->school_name }}',
                        school_type : '{{ $item->school_type }}',
                        school_address : '{{ $item->school_address }}',
                        learn_from : '{{ $item->learn_from }}',
                        learn_to : '{{ $item->learn_to }}',
                        learn_time : '{{ $item->learn_time }}',
                    });
                @endforeach
            },
            deleteTrainingScheduler(item) {
                item.action = 'delete';
            },
            addTrainingScheduler() {
                this.trainingScheduler2.push({
                    action: 'add',
                    id: '',
                    content: '',
                    school_name: '',
                    school_type: '',
                    school_address: '',
                    learn_from: '',
                    learn_to: '',
                    learn_time: '',
                });
            }
        },
    });

    $('#submitEdit').click(function() {
        $('#formEdit').submit();
    });


    $('input[type=radio][name=content_category]').change(function() {
        if (this.value == '4') {
            $('#div_content_category_note').removeClass('d-none');
            $('#content_category_note').val('');
        } else {
            $('#div_content_category_note').addClass('d-none');
            $('#content_category_note').val('');
        }
    });


    </script>

    @if (session('changePasswordAlert'))
        <script>
            notifier.warning(`{{ session('changePasswordAlert') }}`);
        </script>
    @endif

    @if ($errors->any())
        <script>
            let alertMessage = `
    @foreach ($errors->all() as $error)
    <br>
        {{ $error }}
    @endforeach
    `
            notifier.alert(alertMessage);
        </script>
    @endif

    @if (session('error'))
        <script>
            notifier.alert(`{{ session('error') }}`);
        </script>
    @endif

    @if (session('success'))
        <script>
            notifier.success(`{{ session('success') }}`);
        </script>
    @endif

@endsection