@extends('layouts.publicador.default')

@section('content')

    <div class="container my-4 py-3">

        <h4 class="mb-4">
            @choice('labels.imagens', 0)
            <small class="text-muted">@lang('labels.acoes.alterar') @choice('labels.tamanhos', 1)</small>
        </h4>

        <div class="alert alert-danger col-6 ml-auto mr-auto mb-3" style="display: none"></div>
        <div class="alert alert-success col-6 ml-auto mr-auto mb-3" style="display: none"></div>

        {!! Form::model($model, ['route' => ['publicador.imagens.salvar_miniatura', $model->id], 'method' => 'post', 'files' => true, 'id' => 'form-thumbs']) !!}
        {{ Form::hidden('id') }}

        <div class="row">

            <div class="col-sm-6">
                <img id="imagem" class="img-fluid" src="{{ url($model->caminho_completo) }}">
            </div>

            <div class="col-sm-5 offset-sm-1">
                {{ Form::hidden('x', null, ['id' => 'x']) }}
                {{ Form::hidden('y', null, ['id' => 'y']) }}
                {{ Form::hidden('w', null, ['id' => 'w']) }}
                {{ Form::hidden('h', null, ['id' => 'h']) }}

                {{ Form::label('tamanhos', trans_choice('labels.tamanhos', 0)) }}
                <select name="tamanhos" id="tamanhos" class="form-control form-control-sm tamanhos">
                    @foreach($tamanhos as $key => $tamanho)
                        <option
                                value="{{ $key }}"
                                data-width="{{ $tamanho['w'] }}"
                                data-height="{{ $tamanho['h'] }}">{{ $tamanho['w'] }} x {{ $tamanho['h'] }} - {{ $tamanho['descricao'] }}</option>
                    @endforeach
                </select>

                <div class="preview border mt-2 p-2"></div>

                <br>

                <p class="text-center float-right">
                    <a href="{{ route('publicador.imagens.index') }}" class="btn btn-danger">@lang('labels.acoes.cancelar')</a>
                    {{ Form::button(__('labels.acoes.salvar'), ['id' => 'submit', 'class' => 'btn btn-success']) }}
                </p>

            </div>

        </div>

        {!! Form::close() !!}

    </div>

    <link  href="{{ asset('libs/cropperjs/css/index.min.css') }}" rel="stylesheet">
    <script src="{{ asset('libs/cropperjs/dist/cropper.min.js') }}"></script>
    <script src="{{ asset('libs/jquery-cropper/dist/jquery-cropper.js') }}"></script>

    <style type="text/css">
        .preview canvas {
            width: 100%;
        }
    </style>

    <script type="text/javascript">
        (function($){
            var $imagem = $('#imagem'),
                    tamanhos = $('.tamanhos'),
                    aspectRatio = tamanhos.children('option:selected').data('width') / tamanhos.children('option:selected').data('height')

            $imagem.cropper({
                aspectRatio: aspectRatio,
                dragMode: 'move',
                crop: function(event) {
                    $('#x').val(event.detail.x);
                    $('#y').val(event.detail.y);
                    $('#w').val(event.detail.width);
                    $('#h').val(event.detail.height);

                    $('.preview').html(cropper.getCroppedCanvas());
                }
            });

            var cropper = $imagem.data('cropper');

            $('#submit').click(function(){

                if(tamanhos.children('option:selected').val() == '')
                    return;

                $.post('{{ route('publicador.imagens.salvar_miniatura', ['id' => $model->id]) }}', $('#form-thumbs').serialize())
                        .done(function(r){
                            $('.alert-danger').hide();
                            $('.alert-success').html(r.msg).show();

                            setTimeout(function(){
                                $('.alert-success').hide();
                            }, 10000);
                        })
                        .fail(function(r){
                            $('.alert-success').hide();
                            $('.alert-danger').html(r.responseJSON.msg).show();

                            setTimeout(function(){
                                $('.alert-danger').hide();
                            }, 10000)
                        });
            });

            tamanhos.change(function(){
                var width = $(this).children('option:selected').data('width'),
                    height = $(this).children('option:selected').data('height');

                cropper.setAspectRatio(width / height);
            })
        })(jQuery);
    </script>

@endsection