@extends('layouts.master')

@section('title', 'Project')

@section('content')
<style>
    .toggle-table {
        cursor: pointer;
    }
</style>
<div 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('label.project_discus_case') }}</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_discus_case') }}</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">
            <div>
                @if ($project->is_transfer != 1)
                <a href="{{route('project-discus-case.transfer', ['id' => $project->project_id])}}" class="btn btn-info">
                    <i class="fe fe-plus">{{ trans('label.transfer') }}</i></a>
                @endif
                <a href="{{ route('view.project-discus-case.edit', ['id' => $project->project_id]) }}" class="btn btn-primary ">{{ trans('project.submit_view') }}</a>
            </div>
        </div>
    </div>
    <!-- End Page Header -->
    <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_info" aria-current="page" href="#project_info"> {{trans('project.project_info')}}</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="tab" data-bs-target="#et_comment" href="#et_comment">{{trans('project.et_comment')}}</a>
                </li>
            </ul>
            <form id="formEdit" action="{{route('view.project-discus-case.update', ['id' => $project->project_id])}}" method="post" enctype="multipart/form-data" class="container-fluid">
                <div class="tab-content">
                    <div class="tab-pane active" id="project_info" role="project_info">
                        @method('POST')
                        @csrf
                        @include('pages.project-discus-case.component.project_info_edit')
                    </div>
                    <div class="tab-pane" id="et_comment" role="et_comment">
                        @include('pages.project-discus-case.component.et_comment')
                    </div>
                </div>
            </form>
        </div>
    </div>
    <!-- row -->
</div>

@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);

    ClassicEditor
        .create(document.querySelector('#mail_body'))
        .catch(error => {
            console.error( error );
        });

    // $('#btnSendMail').on('click', function() {
    //    $('#formSendMail').submit(); 
    // });
</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);

    ClassicEditor
        .create(document.querySelector('#note_field'))
        .catch(error => {
            console.error( error );
        });

        new Vue({
        el: '#et_comment',
        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
                from:1,
                to:10,
            list: [],
            candidateStatus: [],
            conditionSearch: '',
            listPage: [],
            showCount: 10,
            listComment: [],
        },
        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($listComment as $item)
                    that.listComment.push({
                        action: 'update',
                        status: '{{ $item->status }}',
                        date: '{{ $item->date }}',
                        title: '{{ $item->title }}',
                        content: '{{ $item->content }}',
                        created_at: '{{ $item->created_at }}',
                        created_by_id: '{{ $item->created_by_id }}',
                    });
                @endforeach
            },
            deleteTrainee(item) {
                item.action = 'delete';
            },
            addTrainee() {
                this.listComment.push({
                    action: 'add',
                    status: '',
                    date: '',
                    title: '',
                    content: '',
                    table_record_id: '',
                    table_name: '',
                });
            }
        },
    });
</script>
<script>
    $( "input" ).prop( "disabled", true );
    $( "#company_id" ).prop( "disabled", true );
    $( "#customer_staff_id" ).prop( "disabled", true );
    $( ".form-control" ).prop( "disabled", true );
    $( "#note_field" ).prop( "disabled", true );
    $('#btnCopyContract').click(function() {
        $('#formCopyContract').submit();
    });
    $('#formCopyContract').find('input').prop('disabled', false);
    $('#formCopyTraineeDoc').find('input').prop('disabled', false);
    // Click ẩn hiện table
    $('.toggle-table').on('click', function() {
        var tableId = $(this).data('table');
        if (!$(`.${tableId}`).hasClass('d-none')) {
            $(`.${tableId}`).addClass('d-none');
        } else {
            $(`.${tableId}`).removeClass('d-none');
        }
    });
    $('.add-btn').addClass('d-none');
    $('.btn-check').prop('disabled', true)

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