@extends('front.layouts.main')

@section('title') Consultant Registration - Step 2 @endsection

@section('content')

<main class="consultant-steps-page">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8 col-md-10">
                <div class="main-content">

                    <form class="form-steps" id="frmStep2" method="post"
                        action="{{ route('consultant.storeRegister2',['plan' => Request::get('plan')]) }}">
                        @csrf

                        <ul class="steps d-flex justify-content-center">
                            <li class="text-center active" id="personal-details"><span
                                    class="bold small-font-size">1</span>
                                <p class="xs-font-size">Personal Details</p>
                            </li>
                            <li class="text-center active" id="consultant-profile"><span
                                    class="bold small-font-size">2</span>
                                <p class="xs-font-size">Consultant Profile</p>
                            </li>
                            <li class="text-center" id="payment"><span class="bold small-font-size">3</span>
                                <p class="xs-font-size">Payment</p>
                            </li>
                        </ul>

                        <fieldset class="text-center">

                            <div class="box white form-card text-left" id="skills-box">
                                @include ('front.modules.consultant.register.sections.skills')
                            </div>

                            @include ('front.modules.consultant.register.sections.experience_level')

                            @include ('front.modules.consultant.register.sections.tools')

                            @include ('front.modules.consultant.register.sections.remuneration')

                            @include ('front.modules.consultant.register.sections.mobilisation')

                            <div id="documents-box">
                                @include ('front.modules.consultant.register.sections.docs')
                            </div>

                            <a class="previous action-button btn btn-transparent m-1"
                                href="{{ route('consultant.register1') }}">Previous</a>
                            <input type="submit" name="next" class="action-button btn btn-em m-1 submit"
                                value="Save & Next" />
                        </fieldset>

                    </form>
                </div>
            </div>
        </div>
    </div>
</main>
@endsection

@push('pageCss')
<script>
    var storeSkillsUrl = "{{ route('consultant.storeSkills') }}";
    var userSkillsUrl = "{{ route('consultant.userSkills') }}?consultant_id={{ $user->id }}";
</script>

@endpush

@push('pageJs')

<script type="text/javascript" src="{{ asset('js/front/profile/consultant_skills.js') }}"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script>
    $(document).ready(function() {

        $('.submit').click(function() {
            if ($('#frmStep2').valid()) {
                $(".submit").attr("disabled", true).val("Please Wait...");
                $('#frmStep2').submit();
            }
        });

        $('#frmStep2').validate({
            rules: {
                LevelofExperience: {
                    required: true
                },
                TypeofConsultant: {
                    required: true
                },
                AbilitytoInvoice: {
                    required: true
                },
                "availabilities[]": {
                    required: true
                },
                hourly_rate: {
                    required: true
                },
                daily_rate: {
                    required: true
                },
                noOfSkills: {
                    required: true
                },
                noOfBusinessDocs: {
                    required: {
                        depends: function(element) {
                            return ($('.consultantType:checked').val() == 'business');
                        }
                    }
                }
            },
            messages: {
                LevelofExperience: 'Experience Level is required',
                noOfSkills: 'You must select atleast one skill',
                noOfBusinessDocs: 'Please upload atleast one business proof'
            },
            ignore: [],
            errorElement: 'span',
            errorClass: 'invalid-feedback',
            errorPlacement: function(error, element) {
                if (element.hasClass('consultantType') || element.hasClass('canInvoice')) {
                    error.insertAfter(element.parents('.radio-wrapper'));
                } else if (element.type == 'input') {
                    error.insertAfter(element.sibling(a));
                } else {
                    if (element.hasClass('select-two')) {
                        error.insertAfter(element.next('.select2-container'));
                    } else {
                        if (element.is('#fb-userId')) {
                            el = $(".name-opt .dropdown-menu").parent();
                            error.insertAfter(el);
                        } else {
                            error.insertAfter(element);
                        }
                    }
                }
            },
            invalidHandler: function(event, validator) {

                if (validator.errorList[0].element.name == 'noOfBusinessDocs') {
                    var offset = $('#noBusinessDoc').offset().top;
                } else {
                    var offset = $(validator.errorList[0].element).offset().top;
                }
                $('html, body').animate({
                    scrollTop: offset - 200
                }, 100);
            }
        });
    });

    // Documents
    $('#attachModal').on('show.bs.modal', function(e) {
        var consultantId = $(e.relatedTarget).attr('data-consultant-id');
        var docTypeId = $(e.relatedTarget).attr('data-doc-type-id');
        $('#frmAttach #consultantId').val(consultantId);
        $('#frmAttach #docTypeId').val(docTypeId);

        if ($(e.relatedTarget).attr('data-doc-type-id') == 'consultant-business-proof') {
            $('#frmAttach .title1').text('Upload your business proof document');
            $('#frmAttach .title2').text(
                'Valid files are PDF, Word, Images (png/jpg)'
            );
        } else if ($(e.relatedTarget).attr('data-doc-type-id') == 'consultant-certificate') {
            $('#frmAttach .title1').text('Upload your certificate document');
            $('#frmAttach .title2').text(
                'Valid files are Images (png/jpg)'
            );
        } else if ($(e.relatedTarget).attr('data-doc-type-id') == 'consultant-portfolio') {
            $('#frmAttach .title1').text('Upload your portfolio item');
            $('#frmAttach .title2').text(
                'Valid files are Images (png/jpg)'
            );
        } else if ($(e.relatedTarget).attr('data-doc-type-id') == 'consultant-sample-work') {
            $('#frmAttach .title1').text('Upload your sample work item');
            $('#frmAttach .title2').text(
                'Valid files are Images (png/jpg)'
            );
        } else if ($(e.relatedTarget).attr('data-doc-type-id') == 'consultant-custom') {
            $('#frmAttach .title1').text('Upload your additional docs');
            $('#frmAttach .title2').text(
                'Valid files are PDF, Word, Images (png/jpg)'
            );
        }
    });

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

    $(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: function(element) {
                    if ($('#attachModal #docTypeId').val() == 'consultant-business-proof' || $(
                            '#attachModal #docTypeId').val() == 'consultant-custom')
                        return 'doc|docx|odt|pdf|jpeg|jpg|png';
                    else
                        return 'jpeg|jpg|png';
                },
                filesize: 25
            },
            'title[]': {
                required: true
            }
        },
        messages: {
            'document[]': {
                required: "This field is required.",
                extension: function(element) {
                    if ($('#attachModal #docTypeId').val() == 'consultant-business-proof' || $(
                            '#attachModal #docTypeId').val() == 'consultant-custom')
                        return 'Valid files are PDF, Word, Images (png/jpg)';
                    else
                        return 'Valid files are Images (png/jpg)';
                },
                filesize: 25,
            },
            title: {
                required: 'This field is required.'
            }
        },
        errorElement: 'span',
        errorClass: 'invalid-feedback',
    });

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

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

            $.ajax({
                type: 'POST',
                url: "{{ route('consultant.storeDocuments') }}",
                data: formData,
                cache: false,
                contentType: false,
                processData: false,
                beforeSend: function() {
                    //showLoader();
                },
                success: function(response) {
                    $('#documents-box').empty();
                    $('#documents-box').html(response);
                    $('#attachModal').modal('hide');
                }
            });
        }
    });

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

        var img = "{{ asset('img/admin/ic-attachment-dark.svg') }}";
        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="' + img + '" 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, Images(png/jpg)';
            $.validator.addClassRules("titleInput", {
                required: true
            });

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

        });
    }

    // edit attachment methods
    $('#editAttachModal').on('hidden.bs.modal', function(e) {
        $('#editFrmAttach').trigger('reset');
        $('#editFrmAttach').find('.invalid-feedback').remove('span');
        $('#editFrmAttach').find('.custom-file-input').removeClass('is-invalid');
        $('#editFrmAttach').find('.form-control').removeClass('is-invalid');
    });

    $('#editAttachModal').on('show.bs.modal', function(e) {
        var consultantId = $(e.relatedTarget).attr('data-consultant-id');
        var docTypeId = $(e.relatedTarget).attr('data-doc-type-id');
        var uploadId = $(e.relatedTarget).attr('upload-id');
        $('#editFrmAttach #consultantId').val(consultantId);
        $('#editFrmAttach #docTypeId').val(docTypeId);
        $('#editFrmAttach #uploadId').val(uploadId);

        var filename = $(e.relatedTarget).attr('data-filename');
        var title = $(e.relatedTarget).attr('data-title');

        $('#editFrmAttach .documentFileName').text(filename);
        $('#editFrmAttach .editTitleInput').val(title);

        if ($(e.relatedTarget).attr('data-doc-type-id') == 'consultant-business-proof') {
            $('#editFrmAttach .title1').text('Upload your business proof document');
            $('#editFrmAttach .title2').text(
                'Valid files are PDF, Word, Images (png/jpg)'
            );
        } else if ($(e.relatedTarget).attr('data-doc-type-id') == 'consultant-certificate') {
            $('#editFrmAttach .title1').text('Upload your certificate document');
            $('#editFrmAttach .title2').text(
                'Valid files are Images (png/jpg)'
            );
        } else if ($(e.relatedTarget).attr('data-doc-type-id') == 'consultant-portfolio') {
            $('#editFrmAttach .title1').text('Upload your portfolio item');
            $('#editFrmAttach .title2').text(
                'Valid files are Images (png/jpg)'
            );
        } else if ($(e.relatedTarget).attr('data-doc-type-id') == 'consultant-sample-work') {
            $('#editFrmAttach .title1').text('Upload your sample work item');
            $('#editFrmAttach .title2').text(
                'Valid files are Images (png/jpg)'
            );
        } else if ($(e.relatedTarget).attr('data-doc-type-id') == 'consultant-custom') {
            $('#editFrmAttach .title1').text('Upload your additional docs');
            $('#editFrmAttach .title2').text(
                'Valid files are PDF, Word, Images (png/jpg)'
            );
        }
    });

    $("#editFrmAttach").validate({
        rules: {
            'document[]': {
                extension: function(element) {
                    if ($('#editFrmAttach #docTypeId').val() == 'consultant-business-proof' || $(
                            '#editFrmAttach #docTypeId').val() == 'consultant-custom')
                        return 'doc|docx|odt|pdf|jpeg|jpg|png';
                    else
                        return 'jpeg|jpg|png';
                },
                filesize: 25,
            },
            'title[]': {
                required: true
            }
        },
        messages: {
            'document[]': {
                extension: function(element) {
                    if ($('#editFrmAttach #docTypeId').val() == 'consultant-business-proof' || $(
                            '#editFrmAttach #docTypeId').val() == 'consultant-custom')
                        return 'Valid files are PDF, Word, Images (png/jpg)';
                    else
                        return 'Valid files are Images (png/jpg)';
                }
            },
            'title[]': {
                required: 'This field is required'
            }
        },
        errorElement: 'span',
        errorClass: 'invalid-feedback'
    });

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

    $('#editFrmAttach').on('submit', function(e) {
        e.preventDefault();
        if ($('#editFrmAttach').valid()) {

            var formData = new FormData(this);
            var docId = $('#editFrmAttach #docTypeId').val()
            var consultantId = $('#editFrmAttach #consultantId').val()
            var uploadId = $('#editFrmAttach #uploadId').val()

            $('#editFrmAttach .submitfrmEditAttach').attr('disabled', true);
            $('#editFrmAttach .submitfrmEditAttach').val('Uploading...');

            $.ajax({
                type: 'POST',
                url: "{{ route('consultant.storeDocuments') }}",
                data: formData,
                cache: false,
                contentType: false,
                processData: false,
                beforeSend: function() {
                    //showLoader();
                },
                success: function(response) {
                    $('.showDocumentFileName').empty();

                    $('#documents-box').empty();
                    $('#documents-box').html(response);
                    $('#attachModal').modal('hide');

                    $('#editFrmAttach .submitfrmEditAttach').attr('disabled', false);
                    $('#editFrmAttach .submitfrmEditAttach').val('Submit');
                    $("#editFrmAttach").trigger('reset');
                    $('#editAttachModal').modal('hide');
                    //hideLoder();
                }
            });
        }
    });

    // delete docs
    $('.destroy').click(function(e) {

        $('.destroy').attr('disabled', true).html('Please Wait...');
        var uploadId = $(e.target).attr('upload-id');
        var url = "{{ route('consultant.delete_document') }}";
        axios.post(url, {
                id: uploadId
            })
            .then(function(response) {
                $('#documents-box').empty();
                $('#documents-box').html(response.data);
                $('#modalDeleteConfirm').modal('hide');
                $('.destroy').attr('disabled', false).html('Delete');
                Snackbar.show({
                    pos: 'bottom-right',
                    text: 'Document removed successfully',
                    actionText: 'Okay'
                });
            })
            .catch(function(error) {});
    });

    $(document).on('click', '.deleteButton', function(e) {
        var uploadId = $(e.target).parent('a').attr('upload-id');
        $('.destroy').attr('upload-id', uploadId);
        $('#modalDeleteConfirm').modal('show');
    });
</script>
@endpush

@push('pageModals')
<div class="modal fade" id="attachModal" data-backdrop="static">
    <div class="modal-dialog modal-md modal-dialog-centered">
        <div class="modal-content">

            <form id="frmAttach" method="post" enctype="multipart/form-data" action="">

                <input type="hidden" name="consultantId" id="consultantId" value="" />
                <input type="hidden" name="docTypeId" id="docTypeId" value="" />

                @csrf

                <!-- 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 fade" id="editAttachModal" data-backdrop="static">
    <div class="modal-dialog modal-md modal-dialog-centered">
        <div class="modal-content">

            <form id="editFrmAttach" method="post" enctype="multipart/form-data" action="">

                <input type="hidden" name="uploadId" id="uploadId" value="" />
                <input type="hidden" name="consultantId" id="consultantId" value="" />
                <input type="hidden" name="docTypeId" id="docTypeId" value="" />
                @csrf

                <!-- Modal Header -->
                <div class="modal-header new-light-bg">
                    <h4 class="modal-title regular body-font-size">Edit File</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">Edit your documents</p>
                    <p class="gray xs-font-size title2">Valid files are PDF, Word, Images(png/jpg).</p>

                    <div class="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" 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/ic-attachment-dark.svg') }}"
                                        alt="ic-attachment"></span>
                            </div>
                            <span class="m-0 xs-font-size documentFileName"></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 editTitleInput" id="document_title"
                                    name="title[]" placeholder="Type here...">
                            </div>
                        </div>
                    </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 submitfrmEditAttach" value="Submit" />
                </div>

            </form>

        </div>
    </div>
</div>
<div class="modal" tabindex="-1" role="dialog" id="modalDeleteConfirm">
    <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="button" class="btn btn-danger destroy">{{ @trans('delete_modal.delete') }}</button>
            </div>

        </div>
    </div>
</div>
@endpush