@extends('layouts.metronic')

@section('content')
<div class="portlet light bordered">
    <div class="portlet-title">
        <div class="caption font-dark">            
            <span class="caption-subject bold uppercase"><i class="fa fa-edit"></i> {{ (!empty($banner))?'Editare':'Adăugare' }} Bener</span>
        </div>            
    </div>

    <div class="panel-body">
        @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
        @endif
        <div class="col-md-3"></div>
        <div class="col-md-6">
            <div class="row">
                <form method="POST" action="{{ route('banner.save') }}"> 
                    <input type="hidden" name="_token" value="{{ csrf_token() }}">                        
                    
                    @if (!empty($banner))    
                        <input type="hidden" name="id" value="{{ $banner->id }}">
                    @endif

                    <div class="form-group">
                        <label for="name">Nume</label>
                        <input type="text" class="form-control" id="name" name="name" value="{{ (!empty($banner))?$banner->name:'' }}" required autofocus>
                    </div>

                    <div class="form-group">
                        <label>Dată început</label>                    
                        <div class='input-group date' id='datetimepicker1'>
                            <input  id="start_date" name="start_date" type='text' class="form-control" value="{{ (!empty($banner))?\Carbon\Carbon::parse($banner->start_date)->format('d/m/Y'):'' }}" required autofocus/>
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-calendar"></span>
                            </span>
                        </div>
                    </div>  

                    <div class="form-group">
                        <div class="col-md-6">
                            <a href="{{ route('banners') }}">
                                <button type="button" class="btn btn-danger">                            
                                    <i class="fa fa-close" aria-hidden="true"></i> Închide
                                </button>
                            </a>
                        </div>

                        <div class="col-md-6">
                            <button type="submit" class="btn btn-primary pull-right"><i class="fa fa-save" aria-hidden="true"></i> Salvează</button>
                        </div>
                    </div>
                </form>
            </div>
         </div>   
        <div class="col-md-3"></div>
    </div>
</div>

@if (!empty($banner))
    <div class="tabbable-custom nav-justified">
        <ul class="nav nav-tabs nav-justified">
            <li class="active">
                <a href="#contentTab" data-toggle="tab"> <b> Conținut </b></a>
            </li>
            <li>
                <a href="#terminal_groupsTab" data-toggle="tab"> <b> Grupuri de terminale</b></a>
            </li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane active" id="contentTab">
                @include('banner_edit_content', ['title' => "conținut"])
            </div>
            <div class="tab-pane" id="terminal_groupsTab">
                @include('banner_edit_terminal_groups', ['title' => "grupuri"])
            </div>
        </div>
    </div>
@endif

<div id="myImageModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <img id="xxx" class="img-responsive" src="" />
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')  
<!-- <script src="//cdn.ckeditor.com/4.6.2/standard/ckeditor.js"></script> -->
<script src="/vendor/laravel-filemanager/js/lfm.js"></script>

<script>
    $('img').on('click', function () {        
        var image = $(this).attr('src');
         $('#myImageModal').on('show.bs.modal', function () {
             $(".img-responsive").attr("src", image);
         });
    });

    $('.nav-tabs a[href="#{{$open_tab}}Tab"]').tab('show');

    $("#datetimepicker1").datepicker({rtl:App.isRTL(),orientation:"bottom auto", autoclose:true, todayHighlight: true, language: "ro", format: "dd/mm/yyyy"});

    @if (!empty($banner))
        //Content
        var sortTable =  CreateTableForOrder($('#sortTable'));

        sortTable.on( 'row-reorder', function ( e, diff, edit ) {
            for ( var i=0, ien=diff.length ; i<ien ; i++ ) {
                var rowData = sortTable.row( diff[i].node ).data();
     
                $.post( "/banner_content.changeOrder/" + rowData[1] , { index: diff[i].newData, _token:"{{ csrf_token() }}"} )
                    .done(function( data ) {}
                );
            }
        });

        //Grupuri
        var nameItems = "grupuri";

        CreateTable($("#"+nameItems+"Table"));   
        var tableToAdd = CreateTableForSelect($("#"+nameItems+"TableToAdd"));
    
    
        $('#'+nameItems+'TableToAdd tbody').on( 'click', 'tr', function () {
            $(this).toggleClass('selected');
        } );

        $('#'+nameItems+'AddButton').click( function () {

            var itemsToAdd = [];

            tableToAdd.rows('.selected').every( function ( rowIdx, tableLoop, rowLoop ) {
                itemsToAdd.push(this.data()[0]);
            });

            $.get( "{{ route('banner.add.terminal_group', $banner->id) }}", { id: itemsToAdd }).done(function( data ) {    
                document.location.href="{!! route('banner.edit', [$banner->id, 'terminal_groups']); !!}";
            });
        });
        
    @endif

    $('#lfm').filemanager('images');

    //TinyMCE

     // var options = {
     //    filebrowserImageBrowseUrl: '/laravel-filemanager?type=Images',
     //    filebrowserImageUploadUrl: '/laravel-filemanager/upload?type=Images&_token=',
     //    filebrowserBrowseUrl: '/laravel-filemanager?type=Files',
     //    filebrowserUploadUrl: '/laravel-filemanager/upload?type=Files&_token='
     // };

     // CKEDITOR.replace('my-editor', options);
</script>
@endsection

@section('menuVariables')
    var menuItemName = "menuBanners";
    var submenuItemName = "";
@stop