@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);
            }
        })

        function convert(event) {
            var id = parseInt(event.target.dataset.logId);
            var attachment_id = parseInt(event.target.dataset.attachmentId);
            var $this = this;

            var img_wrapper = $('#image_' + attachment_id);

            $.post("/logs/" + id + "/attachments/" + attachment_id + "/convert")
                .success(function(data) {
                    if (data.file.type === 'document') {
                        img_wrapper.addClass('LogImage-wrapper-docs')
                    } else {
                        img_wrapper.removeClass('LogImage-wrapper-docs')
                    }
                });
        }

        $('.LogImage-convert').on('click', convert)

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

        $('.CheckStatusBtn').on('click', function(event) {
            var customer = event.target.dataset.customer
            var $this = this

            $this.innerText = 'Loading...'

            var resetBtnText = function() {
                setTimeout(function() {
                    $this.innerText = 'Check Status'
                    $this.classList.remove('CheckStatusBtn-green', 'CheckStatusBtn-red');
                }, 5000)
            }

            $.get("/check-user-status/" + customer)
                .success(function(data) {
                    $this.classList.add(data.online ? 'CheckStatusBtn-green' : 'CheckStatusBtn-red');
                    $this.innerText = data.online ? "Online" : "Offline";
                    resetBtnText()
                })
                .error(function(data) {
                    $this.innerText = 'Error'
                    resetBtnText()
                })
        });

        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 input = $('<input type="hidden" name="attachments" value="' + response.id + '" class="LogImageCode" />');
                var loader = $('<div class="LogImage-loader">Loading...</div>')

                if (response.mime_type === 'application/pdf') {
                    var obj = $('<embed src="/proxy?code=' + response.code + '&mime_type=' + response.mime_type + '&original=1" width="204px" height="204px" />');
                    var open = $('<a href="/proxy?code=' + response.code + '&mime_type=' + response.mime_type + '&original=1" target="_blank" class="LogAttachment">open</a>');
                    wrapper.append(obj, open, input, loader);
                } else {
                    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);
                    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>
                    @if (!Auth::user()->isTechDetailsHidden())
                    <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">Max Bit Rate</th>
                    <th class="right">Network</th>
                    @endif
                    <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>
                    @if (!Auth::user()->isTechDetailsHidden())
                    <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->max_bit_rate ? $log->max_bit_rate : 0 }}</td>
                    <td class="right">{{ $log->net_speed }}</td>
                    @endif
                    <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 id="image_{{$attachment->id}}" class="LogImage-wrapper {{ $attachment->type === 'document' ? ($attachment->isArchived() ? 'LogImage-wrapper-archived' : 'LogImage-wrapper-docs') : '' }}">
                        @if($attachment->mime_type === 'application/pdf')
                        <embed src="/proxy?code={{$attachment->code}}&mime_type={{$attachment->mime_type}}&original=1" width="204px" height="204px" type="application/pdf" />
                        <a href="/proxy?code={{$attachment->code}}&mime_type={{$attachment->mime_type}}&original=1" target="_blank" class="LogAttachment">open</a>
                        @else
                        <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>
                        @endif
                        <input type="hidden" name="attachments" value="{{$attachment->id}}" class="LogImageCode" />
                    </div>
                </div>
                @if (Auth::user()->isOwner())
                <div class="LogImage-remove">Ukloni</div>
                @endif
                @if ($log->canEdit(Auth::user()))
                <div class="LogImage-convert" data-log-id="{{$log->id}}" data-attachment-id="{{$attachment->id}}">Konv.</div>
                @endif
            </div>
            @endforeach
        </div>
    </div>
    <div class="LogImagesControls">
        <a href="#back" class="back_to_logs">&larr; Back</a>
        @if ($log->canEdit(Auth::user()))
        <div class="LogImagesUploadFile">
            <button type="button" class="LogImageButton">Uploads Pics</button>
            <input type="file" class="LogImageInputFile" id="images" />
        </div>
        @endif
        <div class="LogImagesUploadFile">
            <button type="button" class="CheckStatusBtn" data-customer="{{ $log->customer }}">Check Status</button>
        </div>
        @if ($log->canEdit(Auth::user()))
        <div class="LogImagesUploadFile">
            <button type="button" class="LogImageButton LogImageButton-red">Upload Docs</button>
            <input type="file" class="LogImageInputFile" id="documents" />
        </div>
        @endif
    </div>
</div>
<div id="drop-zone" class="LogImageDropTarget">
    <div class="LogImageDropTargetText">Drop images here...</div>
</div>

@stop