@extends('layouts.adminLayouts')

@section('head')
    <link href="{{url('/assets/imagedrag/fileinput.css')}}" media="all"
          rel="stylesheet" type="text/css"/>
    <style type="text/css">
        .fileinput-remove,
        .fileinput-upload {
            display: none;
        }
    </style>

    <style type="text/css">
        .gallery {
            display: inline-block;
            margin-top: 20px;
        }

        .close-icon {
            border-radius: 50%;
            position: absolute;
            right: 5px;
            top: -10px;
            padding: 5px 8px;
        }

        .form-image-upload {
            background: #e8e8e8 none repeat scroll 0 0;
            padding: 15px;
        }
    </style>

    <style>

        .progress { position:relative; width:100%; border: 1px solid #7F98B2; padding: 1px; border-radius: 3px; }

        .bar { background-color: #B4F5B4; width:0%; height:25px; border-radius: 3px; }

        .percent { position:absolute; display:inline-block; top:3px; left:48%; color: #7F98B2;}

    </style>
@stop

@section('content-header')
    <section class="content-header">
        <h1>
            مدیریت فایل ها
        </h1>

        {{ Breadcrumbs::render('files.index') }}


    </section>
@stop

@section('content')

<div class="box">
    <div class="box-body">
        <div class="col-lg-12 col-sm-12 col-11 main-section">
            <form method="POST" action="{{ url('admin/files')}}" enctype="multipart/form-data">
                @csrf
                <div class="form-group">
                    <input name="name" type="text" class="form-control" placeholder="نام فایل را درج نمایید...">
                </div>

                <div class="form-group">
                    <input name="file" id="poster" type="file" class="form-control"><br/>
                    <div class="progress">
                        <div class="bar"></div>
                        <div class="percent">0%</div>
                    </div>
                    <input type="submit" value="ارسال" class="btn btn-success">
                </div>
            </form>

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

<div class="box">
    <div class="box-body">
        <ul class="list-group" id="files-list">
            @include('admin.file.files')
        </ul>
    </div>
</div>

@stop

@section('footer')
    <script src="{{url('/assets/js/jquery.form.js')}}"></script>
    <script type="text/javascript">

        function validate(formData, jqForm, options) {
            var form = jqForm[0];
            if (!form.file.value) {
                alert('File not found');
                return false;
            }
        }

        (function() {

            var bar = $('.bar');
            var percent = $('.percent');
            var status = $('#status');

            $('form').ajaxForm({
                beforeSubmit: validate,
                beforeSend: function() {
                    status.empty();
                    var percentVal = '0%';
                    var posterValue = $('input[name=file]').fieldValue();
                    bar.width(percentVal)
                    percent.html(percentVal);
                },
                uploadProgress: function(event, position, total, percentComplete) {
                    var percentVal = percentComplete + '%';
                    bar.width(percentVal)
                    percent.html(percentVal);
                },
                success: function(response) {
                    var percentVal = 'صبر کنید, در حال ذخیره...';
                    bar.width(percentVal)
                    percent.html(percentVal);
                    $('#files-list').empty().html(response.html);
                },
                complete: function(xhr) {
                    status.html(xhr.responseText);
                    toastr.success('با موفقیت ذخیره گردید.');
                }
            });

        })();
    </script>

    <script>
        function deleteUploadedFile(fileNumber, filePath) {
            Swal.fire({
                title: 'هشدار',
                type: 'warning',
                text: 'آیا از حذف این فایل اطمینان دارید؟',
                showCancelButton: true,
                confirmButtonColor: '#00a018',
                cancelButtonColor: '#d33',
                confirmButtonText: 'بله',
                cancelButtonText: 'خیر'
            }).then((result) => {
                if (result.value) {
                    $.ajax({
                        type: 'POST',
                        container: '#manual-update-app',
                        url: '{{url('admin/delete-file')}}',
                        data: {"_token": "{{ csrf_token() }}", filePath: filePath},
                        messagePosition: "toastr",
                        success: function (response) {
                            $('#file-' + fileNumber).remove();
                        }
                    });
                }
            });
        }
    </script>
    <!-- clipboard -->
    <script src="{{url('/assets/js/plugins/clipboard.min.js')}}"></script>

    <script>
        var clipboard = new ClipboardJS('.btn-copy');

        clipboard.on('success', function(e) {
            console.info('Action:', e.action);
            console.info('Text:', e.text);
            console.info('Trigger:', e.trigger);
            toastr.success('کپی شد');
            e.clearSelection();
        });

        clipboard.on('error', function(e) {
            console.error('Action:', e.action);
            console.error('Trigger:', e.trigger);
        });
    </script>

@stop