@extends('layouts.master')

@section('title', 'Project Document Certificate')
@section('content')
    <!-- 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('label.project_doc_certificate') }}</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"><a href="javascript:void(0);">{{ trans('label.project_doc_certificate') }}</a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">{{ trans('label.update') }}
                    </li>
                </ol>
            </nav>
        </div>
        <div class="d-flex my-xl-auto right-content align-items-center">
            @if ($type == 'edit')
                <div>
                    <button type="button" id="btnSubmit" class="btn btn-primary ">{{ trans('project.submit') }}</button>
                    <a href="{{ route('et_project_document.detail', ['id' => $projectDocument->id]) }}"
                        class="btn btn-danger">{{ trans('project.edit_cancel') }}</a>
                </div>
            @else
                <div>
                    <a href="{{ route('view.project_doc_certificate.edit', ['id' => $projectDocument->id]) }}"
                        class="btn btn-primary">{{ trans('project.edit') }}</a>
                    <a href="{{ route('view.project_doc_certificate.zip_file', ['id' => $projectDocument->id]) }}"
                        class="btn btn-primary">{{ trans('project.zip_file') }}</a>
                </div>
            @endif


        </div>
    </div>
    <!-- End Page Header -->
    @if ($errors->any())
        @foreach ($errors->all() as $error)
            <div class="alert alert-danger mx-2" role="alert">
                {{ $error }}
            </div>
        @endforeach
    @endif
    <div class="card custom-card pt-4">
        <div class="card-body">
            <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="#project_doc_certificate_infor"
                        aria-current="page" href="#project_doc_certificate_infor">基本情報</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="tab" data-bs-target="#project_training" aria-current="page"
                        href="#project_training">{{ trans('trainee.trainee') }}</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="tab" data-bs-target="#et_file" aria-current="page"
                        href="#et_file">{{ trans('document_certificate.et_file') }}</a>
                </li>
            </ul>
            <form id="formEdit" method="post"
                action="{{ route('view.project_doc_certificate.update', ['id' => $projectDocument->id]) }}"
                enctype="multipart/form-data" class="container-fluid">
                <div class="tab-content">
                    <div class="tab-pane active" id="project_doc_certificate_infor" role="project_doc_certificate_infor">
                        @method('POST')
                        @csrf
                        @include('pages.project_doc_certificate.component.project_doc_cerficate_infor')
                    </div>
                    <div class="tab-pane" id="project_training" role="project_training">
                        @include('pages.project_doc_certificate.component.project_training')
                    </div>
                    <div class="tab-pane" id="et_file" role="et_file">
                        @include('pages.project_doc_certificate.component.et_file')
                    </div>
                </div>
            </form>
        </div>
    </div>
    <!-- row -->


@endsection

@section('script-footer')
    <script src="https://cdn.ckeditor.com/ckeditor5/41.1.0/classic/ckeditor.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>

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

        new Vue({
            el: '#project_training',
            data: {
                sortDirection: 'desc',
                sortBy: 'trainee_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
                list: [],
                candidateStatus: [],
                conditionSearch: '',
                listPage: [],
                showCount: 10,
                projectTrainee: [],
                projectId: '{{ $projectDocument->project_id }}'
            },
            delimiters: ["((", "))"],
            mounted() {
                const that = this;
                console.log(that.projectId);
                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 ($projectTrainee as $item)
                        that.projectTrainee.push({
                            action: 'update',
                            trainee_id: '{{ $item->trainee_id }}',
                            name: '{{ $item->name }}',
                            name_kana: '{{ $item->name_kana }}',
                            name_kanji: '{{ $item->name_kanji }}',
                            birthday: '{{ $item->birthday }}',
                            sex: '{{ $item->sex }}',
                            project_id: that.projectId
                        });
                    @endforeach
                },
                deleteTrainee(item) {
                    item.action = 'delete';
                },
                addTrainee() {
                    const that = this;
                    that.projectTrainee.push({
                        action: 'add',
                        trainee_id: '',
                        name: '',
                        name_kana: '',
                        name_kanji: '',
                        birthday: '',
                        sex: '',
                        project_id: that.projectId
                    });
                }
            },
        });

        new Vue({
            el: '#et_file',
            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
                list: [],
                candidateStatus: [],
                conditionSearch: '',
                listPage: [],
                showCount: 10,
                documentFile: [],
                document_id: '{{ $projectDocument->id }}'
            },
            delimiters: ["((", "))"],
            mounted() {
                const that = this;
                console.log(that.projectId);
                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;
                    let conditionSearch = '?page=' + this.page;
                    conditionSearch += '&perPage=' + this.perPage;
                    conditionSearch += '&showcount=' + this.showCount;
                    conditionSearch += '&document_id=' + this.document_id;
                    this.conditionSearch = conditionSearch;
                    jQuery.ajax({
                        type: 'GET',
                        url: "{{ route('api.project_doc_certificate.et_file') }}" + conditionSearch,
                        success: function(data) {
                            const list = data.result.data;
                            that.documentFile = [];
                            list.forEach(v => {
                                that.documentFile.push({
                                    action: 'update',
                                    file_id: v.file_id,
                                    name: v.name,
                                    path: v.path,
                                    file_template: v.file_template,
                                    file_template_id: v.file_template_id
                                });
                            });
                            console.log(that.documentFile);
                            that.count = data.result.last_page;
                            that.from = data.result.from;
                            that.to = data.result.to;
                            that.total = data.result.total;
                            let pageArr = [];
                            if (that.page - 2 > 0) {
                                pageArr.push(that.page - 2);
                            }
                            if (that.page - 1 > 0) {
                                pageArr.push(that.page - 1);
                            }
                            pageArr.push(that.page);
                            if (that.page + 1 <= that.count) {
                                pageArr.push(that.page + 1);
                            }
                            if (that.page + 2 <= that.count) {
                                pageArr.push(that.page + 2);
                            }
                            that.listPage = pageArr;
                            console.log(that.list);
                        },
                        error: function(xhr, textStatus, error) {
                            notifier.warning('システムエラーが発生しました。 大変お手数ですが、サイト管理者までご連絡ください');
                        }
                    });

                },
                deleteFile(item) {
                    item.action = 'delete';
                },
                addFile() {
                    const that = this;
                    that.documentFile.push({
                        action: 'add',
                        file_id: '',
                        name: '',
                        path: '',
                        file_template_id: ''
                    });
                }
            },
        });
    </script>
    <script>
        $('#btnSubmit').click(function() {
            $('#formEdit').submit();
        });
    </script>
    @if (session('success'))
        <script>
            notifier.success(`{{ session('success') }}`);
        </script>
    @endif
    @if (session('error'))
        <script>
            notifier.alert(`{{ session('error') }}`);
        </script>
    @endif
@endsection