@extends('layouts.main')

@section('title', 'Upload photos')

@section('css')

    <link rel="stylesheet" href="{{ asset('css/style.css', \App::environment() == 'production') }}">

@endsection

@section('nav')
    @include('layouts.nav')
@endsection

@section('content')

    <div class="main-body">
        <div class="page-wrapper">
            <div class="page-header">

                <div class="page-header-title">
                    <h3>Images</h3>
                </div>

                <div class="page-header-breadcrumb">
                    <ul class="breadcrumb-title">
                        <li class="breadcrumb-item">
                            <a href="{{ url('/') }}">
                                <i class="icofont icofont-home"></i>
                            </a>
                        </li>
                        <li class="breadcrumb-item"><a href="#!">Properties</a>
                        </li>
                        <li class="breadcrumb-item"><a href="#!">Photos</a>
                        </li>
                    </ul>
                </div>
                
            </div><!-- /.box-header -->



            <section class="content">
                <div class="container-fluid image-container">
                    <div class="panel panel-default">
                        <div class="panel-heading bg-info txt-white">
                            Upload Images for Rooms
                            <select class="pull-right form-control form-control-default select-room-type" name="room_id" id="selected_room">
                                @foreach($property->rooms as $key => $room)
                                    <option value="{{$room->id}}">{{$room->roomtype->name}}</option>
                                @endforeach
                            </select>



                        </div>

                        <div class="panel-body image-box">
                            <!-- Standar Form -->
                            {{--<h4>Select files from your computer</h4>--}}
                            <form action="" method="post" enctype="multipart/form-data" id="js-upload-form" style="display: none">
                                <div class="form-inline">
                                    <div class="form-group">
                                        <input type="file" accept='image/*' name="files[]" id="js-upload-files" multiple>
                                    </div>
                                    <button type="submit" class="btn btn-sm btn-primary" id="js-upload-submit">Upload files</button>
                                </div>
                            </form>

                            <!-- Drop Zone -->
                            <h4 class="upload-title">Drag and drop files below</h4>
                            <div class="upload-drop-zone" id="drop-zone">
                                <div class="drag_title">Just drag and drop files here</div>
                            </div>

                            <!-- Progress Bar -->
                            <div class="progress progress-striped active" style="display: none">
                                <div class="progress-bar progress-bar-success"  role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
                                    <span class="sr-only"></span>
                                </div>
                            </div>


                        </div>

                        <div class="panel-footer text-info">
                            <!-- Upload Finished -->
                            <div class="js-upload-finished">
                                <h4 class="upload-title">Processed files</h4>
                                <div class="list-group processed-files">

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



                    <div class="panel panel-default image-gallery">
                        <div class="panel-heading bg-info ">
                            Live Photos
                        </div>
                        <div class="panel-body">

                            @foreach( $property->rooms as $key => $room )


                                <div class="panel panel-default">
                                    <div class="panel-heading">{{ $room->roomtype->name }}</div>
                                    <div class="panel-body row">
                                        @foreach( $room->images as $image )
                                            <div class="cover-card col-sm-2" style="background: url({{imageUrl($image->image_name)}}) no-repeat center top;background-size:cover; height: 150px; margin-left: 5px; margin-bottom: 5px;">
                                                <p>
                                                    {{ $image->title }}
                                                </p>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>

                            @endforeach
                        </div>
                    </div>

                </div> <!-- /container -->
            </section>

        </div>
    </div>

@endsection

@section('scripts')

    <script>
        + function($) {
            'use strict';

            // UPLOAD CLASS DEFINITION
            // ======================

            var dropZone = document.getElementById('drop-zone');
            var uploadForm = document.getElementById('js-upload-form');

            var startUpload = function(files) {

                if ( validateFiles(files) ) {

                    for (var key in files) {

                        if (!files.hasOwnProperty(key)) continue;

                        $('.progress').css('display', 'block');

                        createImageBlocks(key, files[key]);

                        var _token = $('input[name="_token"]').val();
                        var room_id = $('#selected_room').val();
                        console.log(room_id);
                        var file_data = files[key];
                        var form_data = new FormData();
                        form_data.append('file', file_data);
                        form_data.append('_token', _token);
                        form_data.append('room_id', room_id);
                        $.ajax({
                            url: base_url + 'room/photos/upload', // point to server-side PHP script
                            dataType: 'text',  // what to expect back from the PHP script, if anything
                            cache: false,
                            contentType: false,
                            processData: false,
                            data: form_data,
                            type: 'post',
                            success: function (response) {
                                $('.progress').css('display', 'none');
//                            console.log(response); // display response from the PHP script, if any
                                $('.processed-files').append('<a href=# class="list-group-item list-group-item-success"><span class="badge alert-success pull-right">Success</span>' + response + '</a>');
                            }
                        });
                    }
                }else
                {
                    alert('Invalid image format!');
                }



            }

            function createImageBlocks(key, file) {
                $('.upload-drop-zone').append('<img class="droped-images" id=preview'+key+' src="#" />');

                var reader = new FileReader();
                reader.onload = function (e) {
                    $('#preview'+key).attr('src', e.target.result);
                }

                reader.readAsDataURL(file);
//
            }

            function validateFiles(files) {

                var success = true;

                for (var key in files) {
                    if( files[key].type === 'image/jpeg' )
                    {
                        success = true;
                    }else if( files[key].type === 'image/png' )
                    {
                        success = true;
                    }else if( files[key].type === 'image/jpg' )
                    {
                        success = true;
                    }else
                    {
                        success = false;
                    }

                    break;
                }

                return success;
            }

            uploadForm.addEventListener('submit', function(e) {
                var uploadFiles = document.getElementById('js-upload-files').files;
                e.preventDefault()

                startUpload(uploadFiles)
            })

            dropZone.ondrop = function(e) {
                e.preventDefault();
                this.className = 'upload-drop-zone';

                $('.drag_title').hide();

                startUpload(e.dataTransfer.files)
            }

            dropZone.ondragover = function() {
                this.className = 'upload-drop-zone drop';
                return false;
            }

            dropZone.ondragleave = function() {
                this.className = 'upload-drop-zone';
                return false;
            }

        }(jQuery);
    </script>

@endsection