@extends('layouts.master')

@section('script')
@if (Auth::user()->isOwner())
<script>var adminSession = true</script>
@else
<script>var adminSession = false</script>
@endif
<script>
$(document).ready(function() {
    var logImagesList = $('.LogImagesList');

    var field = $('#images');
    var fieldDocs = $('#documents');
    var upload_collections = [];

    field.on('change', function () {
        var files = this.files;

        for (var i = 0; i < files.length; i++) {
            uploadFile(files[i]);
        }
    });

    fieldDocs.on('change', function () {
        var files = this.files;

        for (var i = 0; i < files.length; i++) {
            uploadFile(files[i], true);
        }
    });

    $('.LogImage-remove').on('click', function () {
        if (confirm("Are you shure want to delete image?")) {
            $(this).closest('.LogImage').remove();
            setTimeout(saveUploadedFiles, 300);
        }
    })

    $('.back_to_logs').on('click', function (event) {
        event.preventDefault();
        window.history.back();
    })

    function saveUploadedFiles() {
        var attachments = [];

        $('.LogImageCode').each(function() {
            attachments.push($(this).val());
        });

        $.ajax("/logs/{{$log->id}}/attachments", {
            method: "POST",
            data: {
                attachments: attachments
            },
            success: function (data) {
                $('.LogImage-loader').remove();
            },
            error: function (data) {
                if (data.status === 401) {
                    window.location = '/login';
                } else {
                    setTimeout(saveUploadedFiles, 300);
                }
            }
        });
    }

    function renderUploadProgress(id, percentage, done, total) {
        var list = logImagesList.find('div.LogImagesList-container');
        var logImage = list.find('div.LogImage#' + id);

        if (!logImage.length) {
            logImage = $('<div class="LogImage" id="' + id + '"></div>');
            list.prepend(logImage);

            var logImageId = $('<div class="LogImage-id"></div>');
            logImage.append(logImageId);
            var logImageContainer = $('<div class="LogImage-container"></div>');
            logImage.append(logImageContainer);

            var logImageUploadingPercentage = $('<dic class="LogImageUploadingPercentage"></div>');
            logImageContainer.append(logImageUploadingPercentage);

            if (adminSession) {
                var logImageRemove = $('<div class="LogImage-remove"><span>Ukloni</span></div>');
                logImage.append(logImageRemove);

                logImageRemove.on('click', function () {
                    if (confirm("Are you shure want to delete image?")) {
                        logImage.remove();
                        setTimeout(saveUploadedFiles, 300)
                    }
                })
            }
        }

        logImage.find('.LogImageUploadingPercentage').empty().append(percentage + '%');
    }

    function renderUploadedImage(id, response) {
        var list = logImagesList.find('div.LogImagesList-container');
        var item = list.find('div.LogImage#' + id);

        if (item.length) {
            var additionalClass = response.type === 'document' ? 'LogImage-wrapper-docs' : '';
            var wrapper = $('<div class="LogImage-wrapper ' + additionalClass + '" />')
            var link = $('<a href="/proxy?code=' + response.code + '&mime_type=' + response.mime_type + '&original=1" target="_blank">');
            var image = $('<img src="/proxy?code=' + response.code + '&width=204&mime_type=' + response.mime_type + '" alt="image">');
            link.append(image)
            var input = $('<input type="hidden" name="attachments" value="' + response.id + '" class="LogImageCode" />');
            var loader = $('<div class="LogImage-loader">Loading...</div>')

            wrapper.append(link, input, loader);
            item.find('.LogImage-container').empty().append(wrapper);
            item.find('.LogImage-id').empty().append(response.id);
        }
    }

    function uploadFile(file, isDocument = false) {
        var id = Math.floor(Math.random() * 26) + Date.now();
        var xml_http = new XMLHttpRequest();

        var progressCallback = function (e) {
            var total = e.total || e.totalSize;

            if (total) {
                var done = e.loaded || e.position;
                var percentage = parseInt(Math.floor(done / total * 1000) / 10);

                renderUploadProgress(id, percentage, done, total);
            }
        };

        if (xml_http.upload) {
            xml_http.upload.onprogress = progressCallback;
        } else {
            xml_http.addEventListener('progress', progressCallback, false);
        }

        xml_http.onreadystatechange = function () {
            if (xml_http.readyState != 4) return true;

            if (xml_http.status != 200 && xml_http.status != 304) {
              window.location = '/login';
            } else {
              renderUploadedImage(id, JSON.parse(xml_http.responseText));
              setTimeout(saveUploadedFiles, 300)
            };
        };

        var form_data = new FormData();

        var url = isDocument
            ? "{{ URL::action('UploadsController@uploadDocument') }}"
            : "{{ URL::action('UploadsController@upload') }}"

        xml_http.open('post', url, true);

        form_data.append('files[]', file);
        xml_http.setRequestHeader('Accept', 'application/json');

        xml_http.send(form_data);
    }

    var dropZone = document.getElementById('drop-zone');
    var lastTarget;

    window.addEventListener('dragenter', highlight);
    window.addEventListener('dragover', function(e) {
        e.preventDefault()
    });

    window.addEventListener('dragleave', unhighlight);

    function highlight(e) {
        e.preventDefault();
        if (isFile(e)) {
            lastTarget = e.target;
            dropZone.classList.add('highlight');
        }
    }

    function unhighlight(e) {
        e.preventDefault();
        if (e.target === lastTarget || e.target === document) {
            dropZone.classList.remove('highlight');
        }
    }

    window.addEventListener('drop', handleDrop);

    function handleDrop(e) {
        e.preventDefault();
        dropZone.classList.remove('highlight');

        var dt = e.dataTransfer;
        var files = dt.files;

        handleFiles(files);
    }

    function handleFiles(files) {
        for (var i = 0; i < files.length; i++) {
            console.log(files[i]);
            uploadFile(files[i]);
        }
    }

    function isFile(evt) {
        var dt = evt.dataTransfer;

        for (var i = 0; i < dt.types.length; i++) {
            if (dt.types[i] === "Files") {
                return true;
            }
        }
        return false;
    }
});
</script>
@stop

@section('content')

<div class="LogImagesUpload">
    <div class="LogImagesList">
        <table class="admin-table">
            <thead>
                <tr>
                    <th>Operater</th>
                    <th>Img</th>
                    <th>Ticket</th>
                    <th>Customer</th>
                    <th>MAC</th>
                    <th>Device</th>
                    <th>SSID</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><a href="{{ URL::action('LogsController@view', ['id' => $log->id]) }}">{{$log->username}}</a></td>
                    <td>{{$log->attachmentsDescOrder()->count()}}</td>
                    <td><a href="http://ticket.hallsys.net:81/Home/VratiTiketDetalji/{{$log->ticket_id}}" target="_blank">{{$log->ticket_id}}</a></td>
                    <td><a href="http://racun.hallsys.net/admin.php?cont=edit_user&username={{$log->customer}}" target="_blank" class="lnk">{{ $log->customer }}</a></td>
                    <td><a href="http://racun.hallsys.net/admin.php?cont=traffic_report&listmode=month&username=%&fromdate=2015&framedip=%&stationid={{$log->mac}}&nasid=&apid=" target="_blank" class="lnk">{{ $log->mac }}</a></td>
                    <td>{{ $log->device_type }}</td>
                    <td>{{ $log->ssid }}{{ $log->apoint ? " - (" . $log->apoint->polarizacija . ")" : "" }}</td>
                </tr>
            </tbody>
        </table>
        <table class="admin-table">
            <thead>
                <tr>
                    <th>Kod</th>
                    <th class="right">CCQ</th>
                    <th class="right">Signal</th>
                    <th class="right">Distance</th>
                    <th class="right">Noise</th>
                    <th class="right">Bit Rate</th>
                    <th class="right">Network</th>
                    <th class="right">Speed</th>
                    <th class="right">Grant</th>
                    <th class="right">Updated On</th>
                    <th class="center">Map</th>
                    @if (Auth::user()->isOwner())
                    <th class="center"></th>
                    @endif
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>{{ $log->apoint ? $log->apoint->site->kod : "" }}</td>
                    <td class="right">{{ $log->link_quality }}</td>
                    <td class="right">{{ $log->signal_level }}</td>
                    <td class="right">{{ $log->distance }}</td>
                    <td class="right">{{ $log->noise_level }}</td>
                    <td class="right">{{ $log->bit_rate }}</td>
                    <td class="right">{{ $log->net_speed }}</td>
                    <td class="right">{{ $log->speed_test }}</td>
                    <td class="right">{{ $log->dlburstlimit / 1024 / 1024 }}</td>
                    <td class="right">{{ date('d F Y', strtotime($log->updated_at)) }} @ {{ date('H:i', strtotime($log->updated_at)) }}</td>
                    <td class="center">
                        @if ($log->latitude != null && $log->longitude != null && $log->accuracy != null)
                        <a href="http://maps.google.com/maps?z=18&q={{$log->latitude}},{{$log->longitude}}" target="_blank" class="lnk">show ({{number_format($log->accuracy)}}m)</a>
                        @endif
                    </td>
                    @if (Auth::user()->isOwner())
                    <td class="center">
                        <a href="{{ URL::action('LogsController@delete', ['id' => $log->id]) }}">del</a>
                    </td>
                    @endif
                </tr>
            </tbody>
        </table>
        <div class="LogImagesList-container">
        @foreach ($log->attachmentsDescOrder()->get() as $attachment)
            <div class="LogImage" id="{{ $attachment->id }}">
                <div class="LogImage-id">{{ $attachment->id }}</div>
                <div class="LogImage-container">
                    <div class="LogImage-wrapper {{ $attachment->type === 'document' ? 'LogImage-wrapper-docs' : '' }}">
                        <a href="/proxy?code={{$attachment->code}}&mime_type={{$attachment->mime_type}}&original=1" target="_blank">
                            <img src="/proxy?code={{$attachment->code}}&width=204&mime_type={{$attachment->mime_type}}" alt="image">
                        </a>
                        <input type="hidden" name="attachments" value="{{$attachment->id}}" class="LogImageCode" />
                    </div>
                </div>
                @if (Auth::user()->isOwner())
                <div class="LogImage-remove">
                    <span>Ukloni</span>
                </div>
                @endif
            </div>
        @endforeach
        </div>
    </div>
    <div class="LogImagesControls">
        <a href="#back" class="back_to_logs">&larr; Back</a>
        <div class="LogImagesUploadFile">
            <button type="button" class="LogImageButton">Uploads Pics</button>
            <input type="file" class="LogImageInputFile" id="images" />
        </div>
        <div class="LogImagesUploadFile">
            <button type="button" class="LogImageButton LogImageButton-red">Upload Docs</button>
            <input type="file" class="LogImageInputFile" id="documents" />
        </div>
    </div>
</div>
<div id="drop-zone" class="LogImageDropTarget">
    <div class="LogImageDropTargetText">Drop images here...</div>
</div>

@stop