@extends('layouts.publicador.novo_padrao')

@section('content')
    <div class="container my-4 py-3">

        <h4 class="mb-4">
            @lang('labels.geracao_atitude') / @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>
        {{ html()->modelForm($model, 'POST')->acceptsFiles()->attribute('id', 'form-thumbs')->route('publicador.geracao.imagens.salvar_miniatura', [$model->id])->class([])->open() }}
        {{ html()->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">
                {{ html()->hidden('x', null)->attribute('id', 'x') }}
                {{ html()->hidden('y', null)->attribute('id', 'y') }}
                {{ html()->hidden('w', null)->attribute('id', 'w') }}
                {{ html()->hidden('h', null)->attribute('id', 'h') }}

                {{ html()->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'] }}</option>
                    @endforeach
                </select>

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

                <br>

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

            </div>

        </div>

        {{ html()->closeModelForm() }}
    </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.geracao.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