@extends('layout.app_706')
@section('title','Form Manual Upload Attachment Permohonan')

@section('content')

    <!--begin::Subheader-->
    <div class="subheader py-2 py-lg-4  subheader-solid " id="kt_subheader">
        <div class=" container-fluid  d-flex align-items-center justify-content-between flex-wrap flex-sm-nowrap">
            <!--begin::Info-->
            <div class="d-flex align-items-center flex-wrap mr-2">
                <!--begin::Page Title-->
                <h5 class="text-dark font-weight-bold mt-2 mb-2 mr-5">
                    @yield('title')
                </h5>
                <!--end::Page Title-->
            </div>
            <!--end::Info-->
        </div>
    </div>
    <!--end::Subheader-->

    <!--begin::Entry-->
    <div class="d-flex flex-column-fluid">
        <!--begin::Container-->
        <div class=" container ">            
        <div class="row">
            <div class="col-md-12">
                <!--begin::Portlet-->
                <div class="card card-custom gutter-b m-portlet m-portlet--tab">
                    <div class="card-body m-portlet__body">
                        <div class="alert alert-custom alert-warning fade show d-none" role="alert" id="form-alert">
                            <div class="alert-icon"><i class="flaticon-warning"></i></div>
                            <div class="alert-text"></div>
                        </div>
                        <form method="post" id="manual-upload" enctype="multipart/form-data">
                            @csrf
                            <div class="form-group m-form__group">
                                <label for="data_recid" class="control-label">TASK ID</label>
                                <input required class="form-control m-input m-input--air" required id="data_recid" name="data_recid" value="{{old('data_recid')}}" placeholder="TASK ID">
                            </div>
                            <div class="form-group m-form__group">
                                <label for="fileName" class="control-label font-weight-bold">File Upload</label>
                                <div>
                                    <div id="file-link"></div>
                                    <div id="file-attachment">
                                        <div class="file-loading">							
                                            <input type="file" name="attachment[]" class="fileinput" data-show-upload="false" data-show-caption="false" data-theme="fa" data-msg-placeholder="Upload File" data-min-file-count="0" multiple>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="card-footer">
                        <div class="m-form__actions">
                            <button type="submit" class="btn btn-primary" form="manual-upload">Upload lampiran</button>
                        </div>
                    </div>
                </div>
                <!--end::Portlet-->
            </div>
        </div>
        </div>
        <!--end::Container-->
    </div>
    <!--end::Entry-->    
@endsection

@section('css')
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.8/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" /> 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.8/themes/explorer/theme.min.css" media="all" rel="stylesheet" type="text/css" />
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" media="all" rel="stylesheet" type="text/css" />
    
    <style>
        #t-bodi .ck-editor__editable { min-height: 75px !important }
    </style>
@endsection

@section('js')
<script src="{{ asset('global_assets/js/plugins/forms/validation/validate.min.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.8/js/plugins/piexif.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.8/js/plugins/purify.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.8/js/fileinput.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-fileinput@5.0.8/themes/fa/theme.js"></script>    

<script src="{{asset('assets_7.0.6/plugins/custom/ckeditor/ckeditor-classic.bundle.js?v=7.0.6')}}" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function () {
        $('#manual-upload').on('submit', function (e) {
            e.preventDefault();

            $.ajax({
                url: "{{ route('manual-upload.handle') }}",
                type: 'POST',
                dataType: "JSON",
                data: new FormData(this),
                processData: false,
                contentType: false,
                beforeSend: function () {
                    $('button[form=manual-upload]').prop('disabled', true).html('Processing upload ...');
                    $('#form-alert').addClass('d-none').find('.alert-text').empty();
                },
                success: function (res) {
                    console.log(res);

                    if (res.success !== true) {
                        $.each(res.message, function (prefix, value) {
                            $('#form-alert').removeClass('d-none').find('.alert-text').html(value[0]);
                        });

                        $('button[form=manual-upload]').prop('disabled', false).html('Upload lampiran');
                    }

                    if (res.success) {
                        $("body").fadeOut(500, function() {
                            window.location.href = res.redirect;
                        });
                    }
                }
            });
        });

        $("input.fileinput").fileinput({
            enableResumableUpload: true,
            // uploadUrl: "{{ route('attach.upload') }}",
            // deleteUrl: "{{ route('attach.delete') }}",
            append: true,
			overwriteInitial : false,
            maxFileCount: 5,
            theme: "fa",
            //rtl: true,
            showCaption: false, 
            dropZoneEnabled: false,
            'showUpload': false,
            allowedFileExtensions: ["jpeg", "jpg", "png", "gif","pdf","xlsx","xls","doc","docx","ppt","pptx"],
            fileActionSettings: {
                removeIcon: '<i class="fa fa-trash"></i>',
                uploadIcon: '<i class="fa fa-upload"></i>',
                uploadRetryIcon: '<i class="fa fa-repeat"></i>',
                downloadIcon: '<i class="fa fa-download"></i>',
                zoomIcon: '<i class="fa fa-search-plus"></i>',
                dragIcon: '<i class="fa fa-arrows"></i>',
                indicatorNew: '<i class="fa fa-plus-circle text-warning"></i>',
                indicatorSuccess: '<i class="fa fa-check-circle text-success"></i>',
                indicatorError: '<i class="fa fa-exclamation-circle text-danger"></i>',
                indicatorLoading: '<i class="fa fa-hourglass text-muted"></i>',
                indicatorPaused: '<i class="fa fa-pause text-info"></i>',
                showZoom: function(config) {
                    if (config.type === 'pdf' || config.type === 'image') {
                        return true;
                    }
                    return false;
                }
            },
            layoutTemplates: {
                fileIcon: '<i class="fa fa-file kv-caption-icon"></i> '
            },
            previewZoomButtonIcons: {
                prev: '<i class="fa fa-caret-left fa-lg"></i>',
                next: '<i class="fa fa-caret-right fa-lg"></i>',
                toggleheader: '<i class="fa fa-fw fa-arrows-v"></i>',
                fullscreen: '<i class="fa fa-fw fa-arrows-alt"></i>',
                borderless: '<i class="fa fa-fw fa-external-link"></i>',
                close: '<i class="fa fa-fw fa-remove"></i>'
            },
            previewFileIcon: '<i class="fa fa-file mr-2"></i>',
            browseIcon: '<i class="fa fa-folder-open mr-2"></i>',
            removeIcon: '<i class="fa fa-trash mr-2"></i>',
            cancelIcon: '<i class="fa fa-ban mr-2"></i>',
            pauseIcon: '<i class="fa fa-pause mr-2"></i>',
            uploadIcon: '<i class="fa fa-upload mr-2"></i>',
            msgValidationErrorIcon: '<i class="fa fa-exclamation-circle mr-2"></i> '
        });
	});	
</script>
@endsection