@extends('layouts.cms')

@section('content')

<div class="section-heading clearfix">
    <h2 class="section-title"><i class="fas fa-clone"></i> Banners</h2>
    <a href="javascript:;" id="btn-new-banner" class="btn btn-primary right">Agregar Banner</a>
</div>

<div class="panel-content">
    <h2 class="heading">Imagenes Cargadas</h2>
    <div class="row">
        <div class="container js-grid sortable grid clearfix">
            @foreach ($banners as $banner)
                <div class="img-container col-sm-6 col-md-4 col-lg-3" data-id="{{ $banner->id }}" data-priority="{{ $banner->priority }}" data-visible="{{ $banner->visible }}" ondragend="dragEnd(event)">
                    <img src="{{ $banner->image }}" class="img-thumbnail" alt="Images">
                    <a class="delete" href="javascript:;" data-id="{{ $banner->id }}">x</a>
                </div>
            @endforeach
        </div>
    </div>
</div>


<div class="modal fade" id="modal-new-banner" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h5 class="modal-title">Agregar Banner</h5>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="">Url de la Imagen</label>
                        <input type="text" name="url" id="input-url" class="form-control" placeholder="https://image">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                <button type="button" id="btn-save-img" class="btn btn-primary">Guardar</button>
            </div>
        </div>
    </div>
</div>

@endsection

@section('footer')
<script>

    sortable('.js-grid', {
        forcePlaceholderSize: true,
        placeholderClass: 'col col-3 border border-blue',
    });

    function dragEnd(event) {
        update();
    }

    $('#btn-new-banner').click(function(){
        $('#modal-new-banner').modal();
    });

    $('#btn-save-img').click(function(){
        var url = $('#input-url').val();
        if(url != ''){
            $.post('/admin/cms/banners', {account: "{{ $account }}", url: url, _token: "{{ csrf_token() }}"}, function(response){
                if(response.msg){
                    $('#modal-new-banner').modal('toggle');
                    alert(response.msg);
                    window.location.reload();
                }else{
                    console.log(response);
                    alert('Error, validar consola de desarrollo,')
                }
            }).fail(function(err){
                console.log(err);
            });
        }else{
            alert('Por favor llenar campo con url de la imagen.');
        }
    });

    $('.delete').click(function(){
        var id = $(this).attr('data-id');
        
        $.post('/admin/cms/banners/remove', {_token: "{{ csrf_token() }}", id: id }, function( response ) {
            if(response.msg){
                alert(response.msg);
                window.location.reload();
            }else{
                console.log(response);
                alert('Error, validar consola de desarrollo,')
            }
        }).fail(function(err){
            console.log(err);
        });
        setTimeout(function(){ 
            update();
        }, 1000);
    });
        
    var update = function(){
        var data = [];
        var list = $('.sortable').find('.img-container');
        console.log(list);
        $.each(list, function(index, input){
            banner = {
                'id': $(input).attr('data-id'),
                'image': $(input).children().attr('src'),
                'priority': $(input).attr('data-priority'),
                'visible': $(input).attr('data-visible')
            };
            data.push(banner);
        });
        $.each(data, function(index, value){
            priority = index + 1;
            $.post('/admin/cms/banners/change-order', {_token: "{{ csrf_token() }}", id: value.id, account: "{{ $account }}", image: value.image, order: priority }, function( response ) {
                console.log(response);
            });
        });
    };
</script>
@endsection