@extends('layouts.metronic')

@section('content')
    <div class="portlet light bordered">
        <div class="portlet-title">
            <div class="caption font-dark">
                <i class="fa fa-table"></i>
                <span class="caption-subject bold uppercase">Puncte de contact</span>
            </div>
        </div>
        <div class="portlet-body">
            <div class="table-toolbar">
                <div class="row">
                    <div class="col-md-6">
                        <div class="btn-group">
                            <a href="{{ route('contact_poi.add') }}">
                                <button class="btn sbold green"> Adaugă punct
                                    <i class="fa fa-plus"></i>
                                </button>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <table class="table table-striped table-bordered table-hover order-column" id="mainTable">
                <thead>
                    <tr>
                        <th width="1px"></th>
                        <th>Nume</th>
                        <th>Adresă</th>
                        <th>Latitudine</th>
                        <th>Longitudine</th>
                        <!-- <th>Program</th> -->
                        <!-- <th>Icon</th> -->
                        <th width="1"></th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($contact_pois as $contact_poi)
                        <tr class="gradeX odd" role="row">
                            <td></td>
                            <td> <a href="{{ route('contact_poi.edit', [$contact_poi->id]) }}">{{ $contact_poi->name }}</a>
                            </td>
                            <td> {{ $contact_poi->address }}</td>
                            <td> {{ $contact_poi->latitude }}</td>
                            <td> {{ $contact_poi->longitude }}</td>
                            <!-- <td> {{ $contact_poi->scheduler }}</td> -->
                            <!-- <td> {{ $contact_poi->icon }}</td> -->
                            <td>
                                <a class="btn btn-sm black" data-singleton="true" data-popout="true" data-placement="left"
                                    data-toggle="confirmation" data-btn-ok-label="Da" data-btn-cancel-label="Nu"
                                    data-title="Sunteți sigur ?"
                                    href="{{ route('contact_poi.delete', $contact_poi->id) }}"><span
                                        class="glyphicon glyphicon-trash"></span></a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>

            <form method="POST" action="{{ route('contact_poi.parseFile') }}" id="uploadForm">
                <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>
                <div class="form-group">
                    <label for="name">Încarcă fișier pentru parsare</label>
                    <div class="input-group">
                        <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>

                    <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>

                </div>


            </form>

            <div class="row">
                <button id="uploadFile" type="submit" class="btn sbold green">Urcă fișierul și încarcă datele</button>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="{{ asset('js/plupload.full.min.js') }}"></script>
    <script>
        CreateTable($("#mainTable"));

        $("#uploadProgressContainer").hide();

        var uploader = new plupload.Uploader({
            runtimes: 'html5',

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

            multi_selection: false,
    chunk_size: '1000000kb',
            rename: false,
            url: "{{ route('app_version.uploadFile') }}",
    method: 'POST',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },

            init: {
                PostInit: function() {
                    document.getElementById('filelist').innerHTML = '';

                    document.getElementById('uploadFile').onclick = function() {
                        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);
                        console.log(result);
                        if (result.status === 'success') {
                            $('#filepath').val(result.filepath);
                            $('#filename').val(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 = "menuContactPois";
    var submenuItemName = "";
@stop