@extends('layouts.admin')

@section('content')
    <div>
        <div>
            <div class="page-title">
                <div class="title_left">
                    {{ !empty($take_tickets_version) ? 'Editare' : 'Adăugare' }} Versiune aplicație</span>
                </div>

                <div class="title_right">
                    <div class="col-md-5 col-sm-5  form-group pull-right top_search">
                        <a href = "{{ route('categories.index') }}" class= "btn btn-primary float-right"><span
                                class="fa fa-chevron-left"></span> Înapoi</a>
                    </div>
                </div>
            </div>
            <div class="clearfix"></div>
            <div class="row">
                <div class="col-md-12 col-sm-12 ">
                    <div class="x_panel">
                        <div class="x_content">
                            @if ($errors->any())
                                <div class="alert alert-danger">
                                    <ul>
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif
                            <br />
                            <form method="POST" data-parsley-validate action="{{ route('take_tickets_version.save') }}"
                                id="uploadForm" class="form-horizontal form-label-left">
                                @csrf

                                <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                <input type="hidden" name="filename" id="filename" value="" required>
                                <input type="hidden" name="filepath" id="filepath" value="" required>
                                @if (!empty($take_tickets_version))
                                    <input type="hidden" name="id" value="{{ $take_tickets_version->id }}">
                                @endif

                                <div class="item form-group">
                                    <label class="col-form-label col-md-3 col-sm-3 label-align" for="version">Versiune<span
                                            class="required">*</span>
                                    </label>
                                    <div class="col-md-6 col-sm-6">
                                        <input type="text" id="version" name="version" class="form-control"
                                            value="{{ Request::old('version') }}" required autofocus>
                                        @error('name')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                </div>
                                <div class="item form-group">
                                    <label class="col-form-label col-md-3 col-sm-3 label-align" for="name_en">Descriere
                                    </label>
                                    <div class="col-md-6 col-sm-6">
                                        <input type="text" id="description" value="{{ Request::old('description') }}"
                                            name="description" class="form-control ">
                                        @error('description')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                </div>
                                <div class="item form-group">
                                    <label class="col-form-label col-md-3 col-sm-3 label-align" for="selectFile">Fișier
                                    </label>
                                    <div class="col-md-6 col-sm-6">
                                        <span class="input-group-btn">
                                            <a id="selectFile" class="btn btn-primary" href="#">Alege fișierul</a>
                                        </span>
                                        <div class="form-control" id="filelist">Your browser doesn't have HTML5 support.
                                        </div>
                                        <div id="container">
                                            <br>
                                            <div id="uploadProgressContainer" class="progress xs">
                                                <div id="uploadProgress" class="progress-bar progress-bar-green"
                                                    style="width: 0%;">
                                                </div>
                                            </div>
                                        </div>
                                        @error('selectFile')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                </div>
                                <div class="ln_solid"></div>
                                <div class="item form-group">
                                    <div class="col-md-6 col-sm-6 offset-md-3">
                                        <a href="{{ route('take_tickets_versions') }}">
                                            <button type="button" class="btn btn-danger">
                                                <i class="fa fa-close" aria-hidden="true"></i> Închide
                                            </button>
                                        </a>
                                        <button id="uploadFile" type="submit" class="btn btn-primary pull-right">Upload
                                            &amp;
                                            Salvează</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="{{ asset('admin/js/datatable.js') }}" type="text/javascript"></script>
    <script src="{{ asset('admin/js/datatables.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('admin/js/datatables.bootstrap.js') }}" type="text/javascript"></script>
    <script src="{{ asset('admin/vendors/plupload-2.3.9/js/plupload.full.min.js') }}"></script>
    <script>
        $("#uploadProgressContainer").hide();
        $(function() {
            var uploader = new plupload.Uploader({
                runtimes: 'html5',

                browse_button: 'selectFile',
                container: document.getElementById('container'),

                multi_selection: false,
                chunk_size: '2000kb',
                rename: false,
                url: "{{ route('take_tickets_version.uploadFile') }}",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                filters: {
                    max_file_size: '120mb',
                    mime_types: [{
                        title: "Zip files",
                        extensions: "zip"
                    }]
                },
                init: {
                    PostInit: function() {
                        document.getElementById('filelist').innerHTML = '';

                        document.getElementById('uploadFile').onclick = function() {
                            if ($('#version').val() == null || $('#version').val() == "")
                                return;

                            if ($('#description').val() == null || $('#description').val() == "")
                                return;

                            if (uploader.files.length == 0)
                                return;
                            $('#selectFile').hide();
                            $("#uploadProgressContainer").show();
                            $("#uploadFile").hide();
                            uploader.start();
                            return false;
                        };
                    },

                    FilesAdded: function(up, files) {
                        plupload.each(files, function(file) {
                            document.getElementById('filelist').innerHTML = '<div id="' + file
                                .id + '">' + file.name + ' (' + plupload.formatSize(file.size) +
                                ') <b></b></div>';
                        });
                    },

                    UploadProgress: function(up, file) {
                        $('#uploadProgress').width(file.percent + '%');
                    },
                    FileUploaded: function(up, file, res) {
                        try {
                            var result = JSON.parse(res.response);
                            if (result.result.status === 'success') {
                                $('#filepath').val(result.result.filepath);
                                $('#filename').val(result.result.filename);
                                $('#uploadForm').submit();
                            } else {
                                $('#infoModal .modal-body').text(
                                    'Error uploading file. Please try again.');
                                $('#infoModal').modal('show');
                            }
                        } catch (err) {
                            $('#infoModal .modal-body').text('Error uploading file. Please try again.');
                            $('#infoModal').modal('show');
                        }

                    },

                    Error: function(up, err) {
                        console.log("Error #" + err.code + ": " + err.message);
                    }
                }
            });
            uploader.init();
        });
    </script>
@endsection

@section('menuVariables')
    var menuItemName = "menuAppVersions";
    var submenuItemName = "";
@stop