@extends('obiekt.master')
@section('pageTitle', 'Tworzenie przyrządu')
@push('styles')
<link rel="stylesheet" href="{{asset('css/croppie.css')}}">
@endpush
@section('content')
    <div id="app">
    <div class="container-fluid">
        <div class="row header-page">
            <div class="container">
                <div class="col-xs-12 header-page-inner">
                    <a href="{{ route('tool.index')}}" class="btn btn-info pull-right">Powrót</a>
                    <p class="text-muted text-center">Dodawanie przyrządów do obiektu <strong>{{ $user->first_name }}</strong></p>
                </div>
            </div>
        </div>
    </div>
    <form action="{{ route('tool.zapisz') }}" method="POST" novalidate enctype="multipart/form-data">
        {{ csrf_field() }}
        <div class="form-group @if ($errors->has('przyrzad')) has-error @endif">
            <label for="przyrzad">Nazwa przyrządu</label>
            <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-paint-brush"></i></span>
                <input type="text" name="przyrzad" class="form-control" placeholder="Nazwa przyrzadu" value="{{old('przyrzad')}}" autofocus>
            </div>
            @if ($errors->has('przyrzad')) <p class="help-block">{{ $errors->first('przyrzad') }}</p> @endif
        </div>
        <div class="form-group @if($errors->has('part')) has-error @endif">
            {!! Form::label('part','Część ciała:')!!}
            {!! Form::select('part[]',$parts->pluck('name','id'),null ,['class' => 'form-control cs-select cs-skin-slide select2-multi','multiple','style="width: 100%;"'])!!}
            @if ($errors->has('part')) <p class="help-block">{{ $errors->first('part') }}</p> @endif
        </div>
        <div id="upload-into"></div>
        <div class="form-group @if ($errors->has('photo')) has-error @endif">
            <div id="upload-demo" style="width:350px"></div>
            <label for="photo">Wrzuć zdjęcie</label>
            <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-paint-brush"></i></span>
                <input type="file" name="photo" class="form-control" placeholder="Wrzuć zdjęcie" id="uploading">
            </div>
            @if ($errors->has('photo')) <p class="help-block">{{ $errors->first('photo') }}</p> @endif
        </div>
        <div class="form-group @if ($errors->has('ilosc')) has-error @endif">
            <label for="ilosc">Liczba przyrządów</label>
            <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-paint-brush"></i></span>
                <input type="text" name="ilosc" class="form-control" placeholder="Wpisz liczbę" value="{{old('ilosc')}}">
            </div>
            @if ($errors->has('ilosc')) <p class="help-block">{{ $errors->first('ilosc') }}</p> @endif
        </div>
        <div class="form-group">
            <input type="submit" value="Dodaj Przyrząd" class="btn btn-success pull-right upload-result">
        </div>
        <div>
            <div id="upload-demo-i" style="background:#e1e1e1;width:300px;padding:30px;height:300px;margin-top:30px"></div>
        </div>
    </form>
        </div>
@endsection
@push('scripts')
<script src="{{asset('js/select2.min.js')}}"></script>
<script src="{{asset('js/croppie.js')}}"></script>
<script>
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $uploadCrop = $('#upload-into').croppie({
        viewport: {
            width: 200,
            height: 200,
            type: 'square'
        },
        boundary: {
            width: 300,
            height: 300
        },
        enableExif: true
    });

    $('#uploading').on('change', function () {
        var reader = new FileReader();
        reader.onload = function (e) {
            $uploadCrop.croppie('bind', {
                url: e.target.result
            }).then(function(){
                console.log('jQuery bind complete');
            });
        }
        reader.readAsDataURL(this.files[0]);
    });
    $('.upload-result').on('click', function (ev) {
        $uploadCrop.croppie('result', {
            type: 'canvas',
            size: 'viewport'
        }).then(function (resp) {
            console.log(resp);
            $.ajax({
                url: "/przyrządy/zapisz",
                type: "POST",
                data: {"image":resp},
                success: function (data) {
                    html = '<img src="' + resp + '" />';
                    $("#upload-demo-i").html(html);
                }
            });
        });
    });
    $('.select2-multi').select2({
        placeholder: 'Wybierz część ciała',
        allowClear: true,
        language: "pl"
    });
</script>
@endpush