@extends('admin.layout')

@section('content')

    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <div class="x_panel">
            <div class="x_title">Създаване на справка</div>
            <div class="x_content">
                <div class="alert alert-warning">
                    <span class="glyphicon glyphicon-warning-sign"></span> <span class="bold">Внимание!</span>
                    <p>Редакторът за справки не се препоръчва за справки, които съдържат голям брой колони, голямо
                        количество данни, или сложни филтри!</p>
                </div>
                <form action="{{url('admin/reports/builder/build')}}" method="post" class="form-horizontal">
                    <div class="form-group">
                        <label class="col-md-4 control-label" for="entity">Избор на единица</label>
                        <div class="col-md-4">
                            <select id="entity" name="entity" class="form-control input-md">
                                <option value="">Изберете...</option>
                                @foreach(\App\CustomTraits\Reportable::$entities as $className=>$title)
                                    <option value="{{str_replace('\\','-',$className)}}">{{$title}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="form-group" id="groupColumns" style="display: none;">
                        <label class="col-md-4 control-label" for="columns">Колони на справката</label>
                        <div class="col-md-4">
                            <select id="columns" name="columns[]" multiple="multiple" class="form-control select2-mul"
                                    style="width:100%;" data-reorder="1">

                            </select>
                            <span class="help-block">Изберете данните, които ще се включат в справката. Можете да избирате повече от един атрибут. Даден атрибут може да присъства само веднъж. Колоните ще се покажат в поредността, в която са избрани.</span>
                        </div>
                    </div>
                    <div class="form-group" id="groupFilters" style="display: none;">
                        <label class="col-md-4 control-label" for="filters">Филтри</label>
                        <div class="col-md-4">
                            <select id="filters" name="filters" multiple="multiple" class="form-control select2-mul"
                                    style="width:100%;" data-reorder="1">

                            </select>
                            <span class="help-block">Изберете данните, по които ще се филтрира справката. По-късно ще можете да зададете стойностите им.</span>
                        </div>
                    </div>
                    <div id="filterContainer">

                    </div>
                    <div id="formControls" style="display: none;">
                        <div class="form-group">
                            <label class="col-md-4 control-label" for="name">Име на справката</label>
                            <div class="col-md-4">
                                <input id="name" name="name" type="text" placeholder="Пример: Докторанти от факултет ЕЕА"
                                       class="form-control input-md">
                                <span class="help-block">Разпознаваемо и описателно име на справката, както ще се показва в списъка на справките.</span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-4 control-label" for="singlebutton"></label>
                            <div class="col-md-4">
                                {{csrf_field()}}
                                <input type="submit" id="submitBtn" name="submit" class="btn btn-primary"
                                       value="Създаване на справката">
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@stop

@section('localjs')
    <script type="text/javascript">
        var ge;
        $(function () {

            $('#entity').change(function () {
                if ($(this).val().length > 1) {
                    var req = $.ajax({
                        url: '{{url('admin/reports/builder/getcolumns')}}/' + $('#entity').val()
                    });

                    req.done(function (data) {
                        $('#columns').html('');
                        $.each(data, function (key, val) {
                            $('#columns').append('<option value="' + key + '">' + val + '</option>');
                        });
                        $('#groupColumns').fadeIn(300);
                    });

                    req = $.ajax({
                        url: '{{url('admin/reports/builder/getfilters')}}/' + $('#entity').val()
                    });

                    req.done(function (data) {
                        $('#filters').html('');
                        $.each(data, function (key, val) {
                            $('#filters').append('<option value="' + key + '">' + val + '</option>');
                        });
                        $('#filters').select2();
                        $('#groupFilters').fadeIn(300);
                        $('#formControls').fadeIn(300);
                    });

                } else {
                    $('#groupColumns').fadeOut(300);
                    $('#groupFilters').fadeOut(300);
                    $('#formControls').fadeOut(300);
                }

            });

            $('#filters').on("select2:select", function (e) {
                var req = $.ajax({
                    url: '{{url('admin/reports/builder/getfilter')}}/' + $('#entity').val() + '/' + e.params.data.id
                });

                req.done(function (filter) {

                    switch (filter.type) {
                        default:
                            break;

                        case 'simple':
                            $('#filterContainer').append(formGroup('<input type="text" class="form-control" name="filters[' + filter.name + ']" id="filter_' + filter.name + '">', 'filterContainer_' + filter.name, filter.displayName, 'filter_' + filter.name, 'filter[' + filter.name + ']'));
                            break;

                        case 'select':
                            $('#filterContainer').append(formGroup('<select class="form-control" name="filters[' + filter.name + ']" id="filter_' + filter.name + '">', 'filterContainer_' + filter.name, filter.displayName, 'filter_' + filter.name, 'filter[' + filter.name + ']'));
                            $.each(filter.values, function (key, value) {
                                $('#filter_' + filter.name).append('<option value="' + key + '">' + value + '</option>')
                            });
                            break;
                    }


                });


                //$('#filterContainer').append(formGroup("<input type='text' class='form-control'>",'filter','Филтър','filter1','filter1'))
            });

            $('#filters').on("select2:unselect", function (e) {
                $('#filterContainer_' + e.params.data.id).remove();
            });

            jQuery(".select2-mul").each(function () {
                $this = jQuery(this);
                if ($this.attr('data-reorder')) {
                    $this.on('select2:select', function (e) {
                        var elm = e.params.data.element;
                        $elm = jQuery(elm);
                        $t = jQuery(this);
                        $t.append($elm);
                        $t.trigger('change.select2');
                    });
                }
                $this.select2();
            });
        });


        function loadAttributes(reportableName) {

        }

        function formGroup(content, id, label, fieldId, fieldName) {
            return '<div class="form-group" id="' + id + '"><label class="col-md-4 control-label" for="' + fieldName + '">' + label + '</label><div class="col-md-4">' + content + '</div>';
        }

    </script>
@stop