@extends('admin.layouts.main')

@section('title')
Project - Documents
@endsection

@section('content')
<main>
    <div class="two-col">

        @include("admin.common.sidebar")

        <div class="right-sec">

            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('admin.project.index',['panel' => session('panel')])}}">{{ @trans('project::project.projects') }}</a></li>
                    @if(Session::has('editFromUrl'))
                    <li class="breadcrumb-item active" aria-current="page">{{ @trans('project::project.edit_project') }} </li>
                    @else
                    <li class="breadcrumb-item active" aria-current="page">{{ @trans('project::project.create_project') }} </li>
                    @endif
                </ol>
            </nav>

            <div class="form-sec">

                @include('project::modules.store.common.form-step')

                <div class="container">
                    <div class="row">
                        <div class="col-xl-8 offset-xl-2 col-lg-10 offset-lg-1">
                            <div class="step-box">
                                <form method="post" name="frmUploadDocuments" action="{{ route('admin.project.store_documents', ['panel' => session('panel')]) }}" id="frmUploadDocuments" autocomplete="off">
                                    @csrf

                                    <input type="hidden" name="id" value="{{ $id }}" />

                                    <div class="tab">
                                        <h2 class="form-sec-title">{{ @trans('project::project.documents') }}</h2>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="form-group file-upload">
                                                    <label class="control-label">{{ @trans('project::project.upload_documents') }}
                                                        <img src="{{asset('img/admin/ic_info_pm_tooltip.svg')}}" class="tooltip-popover project-tooltip-popover cursor-pointer" data-content="{{ @trans('project::project_tooltip.project_upload_documents') }}" tabindex="0">
                                                    </label>
                                                    <div class="custom-file">
                                                        <a class="btn btn-cncl" href="#attachModal" data-toggle="modal" data-target="#attachModal" data-project-id="{{ $id}}">
                                                            <img src="{{ asset('img/file-upload.svg') }}" alt="upload">Upload
                                                        </a>
                                                    </div>
                                                </div>
                                                <div class="clearfix"></div>
                                                <div class="row documentListRow">
                                                    @if(count($documents) > 0)
                                                    @foreach($documents as $document)
                                                    <div class="col-md-12 documentList">
                                                        <div class="form-group file-upload">
                                                            <label class="control-label">{{ $document->title }}</label>
                                                            <div class="file-act">
                                                                <a href="{{ $document->project_document_link }}" title="Download" target="_blank">
                                                                    <i class="material-icons">get_app</i>
                                                                </a>
                                                                <a href="javascript:void(0)" class="removeDocument ml-2" data-id="{{ $document->id }}" title="remove">
                                                                    <i class="material-icons">close</i>
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    @endforeach
                                                    @endif
                                                </div>
                                            </div>
                                            <div class="col-md-12 mt-2">
                                                <div class="form-group">
                                                    <label class="control-label">{{ @trans('project::project.private_remarks') }}
                                                        <span class="required">*</span>
                                                        <img src="{{asset('img/admin/ic_info_pm_tooltip.svg')}}" class="tooltip-popover project-tooltip-popover cursor-pointer" data-content="{{ @trans('project::project_tooltip.project_private_remarks') }}" tabindex="0">
                                                    </label>
                                                    <textarea name="private_remarks" id="private_remarks" class="form-control editor" placeholder="{{ @trans('project::project.private_remarks') }}">{{ $project->private_note ?? '' }}</textarea>
                                                    <span></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-btn">
                                        <div style="float: left;">
                                            @if(Session::has('editFromUrl') && (Session::get('editFromUrl') == 'detailsSingleStep' || Session::get('editFromUrl') == 'details'))
                                            <a class="btn btn-cncl" href="{{ route('admin.project.tabs', ['panel' => Session::get('panel'), 'id' => $project->id]) }}">{{ @trans('project::project.cancel') }}</a>
                                            @elseif ((Session::has('editFromUrl') && Session::get('editFromUrl') == 'kanbanView') || Session::get('addFromUrl') == 'kanbanView')
                                            <a class="btn btn-cncl" href="{{ route('admin.project.kanban_index',['panel' => session('panel')]) }}">{{ @trans('project::project.cancel') }}</a>
                                            @else
                                            <a class="btn btn-cncl" href="{{ route('admin.project.index', ['panel' => Session::get('panel')]) }}">{{ @trans('project::project.cancel') }}</a>
                                            @endif
                                        </div>
                                        <div style="float:right;">
                                            @if(request()->input('edit'))
                                            <a class="btn btn-cncl mr-3" href="{{ route('admin.project.dept_and_team', ['panel' => Session::get('panel'), 'id' => $id, 'edit' => 'true']) }}">{{ @trans('project::project.prev') }}</a>
                                            @elseif(!Session::has('editFromUrl'))
                                            <a class="btn btn-cncl mr-3" href="{{ route('admin.project.dept_and_team', ['panel' => Session::get('panel'), 'id' => $id]) }}">{{ @trans('project::project.prev') }}</a>
                                            @endif
                                            <button type="submit" id="nextBtn" class="btn step-btn submitDocumentBtn">{{ @trans('job.save') }}</button>
                                        </div>
                                    </div>
                                </form>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</main>
@endsection

@push('pageModals')
<div class="modal fade" id="attachModal" style="z-index: 9999;" data-backdrop="static">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content">

            <form id="frmAttach" method="post" enctype="multipart/form-data" action="">@csrf
                <input type="hidden" name="projectId" id="projectId" value="{{ $id }}" />
                <!-- Modal Header -->
                <div class="modal-header new-light-bg border-0">
                    <h4 class="modal-title regular body-font-size">Attach</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <!-- Modal body -->
                <div class="modal-body">
                    <p class="mb-1 small-font-size title1">Upload your documents</p>
                    <p class="gray xs-font-size title2">You can upload upload multiple files at a time.</p>

                    <div class="set attach-list-row">
                        <div class="form-group mb-1 documentFileNameClass">
                            <label class="control-label">Upload File</label>
                            <div class="custom-file w-100 file-type-new">
                                <input type="file" class="custom-file-input w-100 fileInput" name="document[]">
                                <label class="custom-file-label bg-white form-control text-left d-flex">Choose
                                    file...</label>
                                <span class="attachment-bg"><img src="{{ asset('img/admin/ic-attachment-dark.svg') }}" alt="ic-attachment" /></span>
                            </div>
                            <span class="m-0 xs-font-size showDocumentFileName"></span>
                        </div>
                        <div class="align-items-start d-flex">
                            <div class="form-group mb-0 mr-2">
                                <label class="control-label">Document Name</label>
                                <input type="text" class="form-control titleInput" placeholder="Type here..." name="title[]" />
                            </div>
                            <a href="javascript:void(0)" class="mt-4 px-1 pt-3 pb-2 act text-center adder"><span class="material-icons gray">add</span></a>
                        </div>
                        <hr />
                    </div>


                </div>

                <!-- Modal footer -->
                <div class="modal-footer justify-content-center border-top-0 pt-0 pb-4">
                    <input type="submit" class="btn btn-em submitfrmAttach" value="Submit" />
                </div>

            </form>

        </div>
    </div>
</div>
<div class="modal" tabindex="-1" role="dialog" id="modalDeleteDocConfirm">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{ @trans('delete_modal.confirm') }}</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>{{ @trans('delete_modal.confirmation') }}?</p>
            </div>
            <div class="modal-footer d-flex justify-content-between">
                <button type="button" class="btn btn-cncl" data-dismiss="modal">{{ @trans('delete_modal.cancel')
                    }}</button>
                <button type="submit" class="btn btn-danger" @click="destroyDoc">{{ @trans('delete_modal.delete')
                    }}</button>
            </div>
        </div>
    </div>
</div>
@endpush

@push('pageJs')
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
{!! JsValidator::formRequest('Modules\Project\Http\Requests\Add\StoreUploadDocumentRequest', '#frmUploadDocuments') !!}
<script>
    $(document).ready(function() {

        var myForm = $('#frmUploadDocuments');
        $.data(myForm[0], 'validator').settings.ignore = "null";

        tinymce.init({
            selector: 'textarea.editor',
            height: 200,
            menubar: false,
            branding: false,
            browser_spellcheck: true,
            toolbar: 'undo redo | bold italic underline strikethrough | link | alignleft aligncenter alignright alignjustify | bullist numlist  | removeformat | preview',
            plugins: [
                'link preview wordcount lists paste autolink'
            ],
            paste_auto_cleanup_on_paste: true,
            paste_remove_styles: true,
            paste_remove_styles_if_webkit: true,
            paste_strip_class_attributes: true,
            setup: function(editor) {
                editor.on('keyUp', function() {
                    tinyMCE.triggerSave();

                    if (!$.isEmptyObject(myForm.validate().submitted))
                        myForm.validate().form();
                });
            },

        });

        $(document).on('click', '#frmAttach .adder', function() {

            var block = `<div class="set attach-list-row cloned">
                    <div class="form-group mb-1 documentFileNameClass">
                        <label class="control-label">Upload File</label>
                        <div class="custom-file w-100 file-type-new">
                            <input type="file" class="custom-file-input w-100 fileInput" name="document[]">
                            <label class="custom-file-label bg-white form-control text-left d-flex">Choose
                                file...</label>
                            <span class="attachment-bg"><img src="{{ asset('img/admin/ic-attachment-dark.svg') }}"
                                    alt="ic-attachment" /></span>
                        </div>
                        <span class="m-0 xs-font-size showDocumentFileName"></span>
                    </div>
                    <div class="align-items-start d-flex">
                        <div class="form-group mb-0 mr-2">
                            <label class="control-label">Document Name</label>
                            <input type="text" class="form-control titleInput" name="title[]" placeholder="Type here..." />
                        </div>
                        <a href="javascript:void(0)" class="mt-4 px-1 pt-3 pb-2 act text-center remover"><span
                                class="material-icons gray">clear</span></a>
                    </div>
                    <hr />
                </div>
                `;
            $(block).insertAfter($('#frmAttach').find('.attach-list-row:last'));
            reindex();
        });

        $(document).on('click', '#frmAttach .remover', function() {
            $(this).closest('.attach-list-row').remove();
            reindex();
        });

        function reindex() {
            var blocks = $('#frmAttach .attach-list-row');
            $.each(blocks, function(index, value) {
                $(value).find('.custom-file-input').attr('name', 'document[' + index + ']');
                $(value).find('.form-control').attr('name', 'title[' + index + ']');

                $.validator.messages.extension = 'Valid files are PDF, Word, Excel, Images (png/jpg)';
                $.validator.addClassRules("titleInput", {
                    required: true
                });

                $.validator.addClassRules("fileInput", {
                    required: true,
                    extension: 'doc|docx|odt|pdf|xls|xlsx|jpeg|jpg|png',
                    filesize: 25
                });

            });
        }

        $('#attachModal').on('hidden.bs.modal', function(e) {
            $('#frmAttach').find('.cloned').remove();
            $('#frmAttach').trigger('reset');
            $('#frmAttach').find('.invalid-feedback').remove();
            $('.showDocumentFileName').empty();
            $('#frmAttach').find('.custom-file-input').removeClass('is-invalid');
            $('#frmAttach').find('.form-control').removeClass('is-invalid');
        });

        $(document).on('change', '#frmAttach input[type="file"]', function(e) {
            $(this).parents('.documentFileNameClass').find('.showDocumentFileName').text(e.target.files[0].name);
        });

        $("#frmAttach").validate({
            rules: {
                'document[]': {
                    required: true,
                    extension: 'doc|docx|odt|pdf|xlsx|xls|jpeg|jpg|png',
                    filesize: 25
                },
                'title[]': {
                    required: true
                }
            },
            messages: {
                'document[]': {
                    required: "This field is required.",
                    extension: 'Valid files are PDF, Word, Excel, Images (png/jpg)',
                },
                title: {
                    required: 'This field is required.'
                }
            },
            errorElement: 'span',
            errorClass: 'invalid-feedback',
            errorPlacement: function(error, element) {
                if (element.type == 'input') {
                    error.insertAfter(element.sibling(a));
                } else {
                    if (element.prop('type') === 'file') {
                        error.appendTo(element.parent().parent());
                    } else {
                        if (element.is('#fb-userId')) {
                            el = $(".name-opt .dropdown-menu").parent();
                            error.insertAfter(el);
                        } else {
                            error.insertAfter(element);
                        }
                    }
                }
            }
        });

        $('#frmAttach').on('submit', function(e) {
            e.preventDefault();
            if ($('#frmAttach').valid()) {
                var formData = new FormData(this);

                $('#frmAttach .submitfrmAttach').attr('disabled', true);
                $('#frmAttach .submitfrmAttach').val('Uploading...');

                $.ajax({
                    type: 'POST',
                    url: "{{ route('admin.project.upload_document', ['panel'=> session('panel')]) }}",
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function(response) {
                        $('.showDocumentFileName').empty();
                        // var res = JSON.parse(response);
                        $.each(response, function(key, value) {
                            var html = '';
                            html += '<div class="col-md-12 documentList">';
                            html += '<div class="form-group file-upload">';
                            html += '<label class="control-label">' + value.title + '</label>';
                            html += '<div class="file-act">';
                            html += '<a href="javascript:void(0)" class="removeDocument" data-id="' + value.id + '" title="remove">';
                            html += '<i class="material-icons">close</i>';
                            html += '</a>';
                            html += '</div>';
                            html += '</div>';
                            html += '</div>';
                            $('.documentListRow').append(html);
                        });

                        $('#frmAttach .submitfrmAttach').attr('disabled', false);
                        $('#frmAttach .submitfrmAttach').val('Submit');
                        $('#frmAttach').find('.is-valid').removeClass('is-valid');
                        $("#frmAttach").trigger('reset');
                        $('#attachModal').modal('hide');
                    }
                });
            }
        });

        $(document).on('click', '.removeDocument', function() {

            let id = $(this).attr('data-id');
            let url = "{{ route('admin.project.delete_document', ['panel' => Session::get('panel')]) }}";
            let el = this;

            axios.post(url, {
                    id: id
                })
                .then(function(response) {
                    $(el).parents('.documentList').remove();
                })
                .catch(function(error) {
                    console.log(error);
                });
        });

        $(document).on('click', '.submitDocumentBtn', function() {

            if ($('#frmUploadDocuments').valid()) {
                $('.submitDocumentBtn').text('Please wait...');
                $('.submitDocumentBtn').attr('disabled', 'disabled');
                $('#frmUploadDocuments').submit();
            }
        });
    });
</script>
@endpush