@extends($base)
@section('page_title') Create Audience @stop
@push('styles')
    <link rel="stylesheet" href="{{ asset('lib/jstree/dist/themes/default/style.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('lib/bs-multiselect/dist/css/bootstrap-multiselect.css') }}" />
    <link rel="stylesheet" href="{{ asset('lib/tagsinput/dist/bootstrap-tagsinput.css') }}" />
    <style>
        .form-group { margin-bottom: 10px;}
        .page-content {  background: #fff;}
    </style>
@endpush
@section('page_content')
    <div class="page-content container-fluid" style="padding-bottom: 5px;">
        <form class="form-horizontal" id="ads" method="POST">
            @if(count($errors)>0)
                <div class="alert alert-danger">
                    <ul>@foreach($errors->all() as $error) <li>{{$error}}</li> @endforeach</ul>
                </div>
            @endif
            @csrf
            <div class="row">
                <h5>NEW AUDIENCE</h5>
                <div class="col-md-5">
                    <div class="form-group">
                        <label for="name" class="col-sm-4 control-label form-label req">Set Name</label>
                        <div class="col-sm-7">
                            @php $_name = !empty(old('name')) ? old('name') : null @endphp
                            <input type="text" class="form-control" name="name" id="name" placeholder="Enter Name" value="{{ $_name }}">
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="name" class="col-sm-4 control-label form-label req">Filter Mode</label>
                        <div class="col-sm-8">
                            @php $_mod = !empty(old('mode')) ? old('mode') : null @endphp
                            <select name="mode" class="form-control chosen">
                                <option value="MATCH_ANY" {{ $_mod == 'MATCH_ANY' ? 'selected' : '' }}>Match Any</option>
                                <option value="MATCH_EXACT" {{ $_mod == 'MATCH_EXACT' ? 'selected' : '' }}>Match Exactly</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="col-md-3" style="text-align: right">
                    <a id="cancelBtn" href="{{ route($index) }}" class="btn btn-danger mr-5"><i class="fa fa-times-circle"></i> <b>CANCEL</b></a>
                    <button type="submit" id="saveBtn" class="btn btn-success"><i class="fa fa-save"></i> <b>SAVE</b></button>
                </div>
            </div>
            <hr style="margin: 5px auto;" />
            <div class="row">
                <div class="col-md-9" style="border-right: 1px solid #ccc;">
                    <h5>Location:</h5>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="region" class="col-sm-4 control-label form-label">State / Region</label>
                                <div class="col-sm-8">
                                    @php $_reg = !empty(old('region')) ? old('region') : [] @endphp
                                    <select name="region[]" id="region" class="form-control ms" multiple="multiple">
                                        @foreach($regions as $reg)
                                            <option value="{{ $reg }}">{{ $reg }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="city" class="col-sm-4 control-label form-label">City / Town</label>
                                <div class="col-sm-8">
                                    @php $_city = !empty(old('city')) ? old('city') : null @endphp
                                    <input type="text" class="tags form-control" name="city" placeholder="[ press comma OR enter to add ]" value="{{ $_city }}">
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr style="margin: 5px auto;" />
                    <h5>Bio:</h5>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="age_from" class="col-sm-4 control-label form-label">Age From</label>
                                <div class="col-sm-8">
                                    @php $age1 = !empty(old('age_from')) ? old('age_from') : '13' @endphp
                                    <select name="age_from" id="age_from" class="form-control chosen">
                                        @for($i = 13; $i <= 65; $i++)
                                            <option value="{{ $i != 65 ? $i : $i .'+' }}" {{ $age1 == $i ? 'selected' : '' }}>{{ $i != 65 ? $i : $i .'+' }}</option>
                                        @endfor
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="age_to" class="col-sm-4 control-label form-label">Age To</label>
                                <div class="col-sm-8">
                                    @php $age2 = !empty(old('age_to')) ? old('age_to') : '65+' @endphp
                                    <select name="age_to" id="age_to" class="form-control chosen">
                                        @for($i = 13; $i <= 65; $i++)
                                            <option value="{{ $i != 65 ? $i : $i .'+' }}" {{ $age2 == $i ? 'selected' : '' }}>{{ $i != 65 ? $i : $i .'+' }}</option>
                                        @endfor
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="gender" class="col-sm-4 control-label form-label">Gender</label>
                                <div class="col-sm-8">
                                    @php $_gen = !empty(old('gender')) ? old('gender') : null @endphp
                                    <select name="gender[]" id="gender" class="form-control ms" multiple="multiple">
                                        <option value="female" {{ $_gen == 'female' ? 'selected' : '' }}>Female</option>
                                        <option value="male" {{ $_gen == 'male' ? 'selected' : '' }}>Male</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="language" class="col-sm-4 control-label form-label">Languages</label>
                                <div class="col-sm-8">
                                    @php $_lang = !empty(old('language')) ? old('language') : null @endphp
                                    <select name="language[]" id="language" class="form-control ms" multiple="multiple">
                                        @foreach($languages as $lang)
                                            <option value="{{ $lang->name }}" {{ $_lang == $lang->name ? 'selected' : '' }}>{{ $lang->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr style="margin: 5px auto;" />
                    <h5>Detailed Targeting:</h5>
                    <div class="form-group">
                        <div class="col-sm-12">
                            <input type="hidden" name="tree" value="" />
                            <input type="hidden" name="nodes" value="" />
                            <div id="grid" style="height: 200px; border: 1px solid #ccc; background: #fff; overflow-y: scroll"></div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="row" style="background: #fff; padding-bottom: 20px;">
                        <div class="col-md-12">
                            <h5>AUDIENCE SIZE</h5>
                            <div id="target-size"></div>

                            <hr style="margin: 5px auto;" />
                            <div style="text-align: justify;">
                                <small><b>Potential Reach:</b> <span id="count" style="font-weight: 600;">1</span> People!</small>
                            </div>
                        </div>
                    </div>
                    <div class="row" style="background: #fff; padding-bottom: 20px;"></div>

                    <hr style="margin: 5px auto;" />

                    <h5>Estimated daily results</h5>
                    <div style="text-align: justify;">
                        <small>
                            The accuracy of estimates is based on factors such as past campaign data, the budget you've entered and market data.
                            Numbers are provided to give you an idea of performance for your budget, but are only estimates and don't guarantee results.
                        </small>
                    </div>
                </div>
            </div>
            <hr style="margin: 5px auto 15px auto;" />
        </form>
    </div>
@stop
@push('scripts')
    <script src="{{ asset('lib/jstree/dist/jstree.min.js') }}"></script>
    <script src="{{ asset('lib/justgage/raphael-2.1.4.min.js') }}"></script>
    <script src="{{ asset('lib/justgage/justgage.js') }}"></script>
    <script src="{{ asset('lib/bs-multiselect/dist/js/bootstrap-multiselect.js') }}"></script>
    <script src="{{ asset('lib/tagsinput/dist/bootstrap-tagsinput.min.js') }}"></script>
    <script>
        $('.ms').multiselect({
            enableFiltering: true,
            includeSelectAllOption: true,
            maxHeight: 250,
            buttonWidth: '100%',
            buttonText: function(options, select) {
                return options.length === 0 ? '-- SELECT AN OPTION --' : '(' +options.length + ') SELECTED';
            }
        });
        $('.tags').width('100%').tagsinput({
            confirmKeys: [13, 44],
            trimValue: true,
            freeInput: true,
            cancelConfirmKeysOnEmpty: false,
            maxTags: 5
        });
        $(function() {
            $('#grid').jstree({
                'core' : {
                    'data' : {
                        "url" : "/target/fetch.json/?lazy",
                        "data" : function (node) {
                            return {id : 'ds'};
                        }
                    },
                    "themes": {"url": true, "icons": true, "dots": true},
                    'check_callback': true
                },
                'checkbox': {three_state: true, cascade: 'up'},
                'plugins': ['html_data', 'themes', 'checkbox', 'sort', 'wholerow']
            });

            var grid = new JustGage({
                id: "target-size",
                value: 0.00,
                min: 0,
                max: 100,
                label: "percent",
                decimals: 2,
                levelColorsGradient: false
            });

            $('#grid').on('changed.jstree', function (e, data) {update(grid);}).jstree();
            // form change
            $('#ads').on('keyup change', 'input, select, textarea', function() {
                var name = $(this).attr('name');
                if (name !== "name") {update(grid);}
            });
            update(grid);
        });

        function update(grid) {
            var count = $('#count'),
                node  = $('[name="nodes"]'),
                tree  = $('[name="tree"]'),
                model = {}, gdata = grid_data();

            model._token    = token;
            model.region    = $('#region').val();
            model.city      = $('[name="city"]').val();
            model.age_from  = $('[name="age_from"]').val();
            model.age_to    = $('[name="age_to"]').val();
            model.gender    = $('#gender').val();
            model.language  = $('#language').val();
            model.mode      = $('[name="mode"]').val();
            model.tree      = gdata.tree;
            model.nodes     = gdata.nodes;

            node.val(JSON.stringify(gdata.nodes));
            tree.val(JSON.stringify(model.tree));

            // send request
            xhtml(model, grid, count)
        }

        // post to api
        function xhtml(data, grid, count) {
            $.ajax({
                type:'POST',
                url:'/target/filter.json',
                data: data,
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                success: function(res) {
                    // update graph & result
                    grid.refresh(res.share, null);
                    count.html(res.reach.toLocaleString());
                }
            });
            return data;
        }

        // retrieve grid data
        function grid_data() {
            var data = {}, selected = $("#grid").jstree("get_selected", true);
            var tree = [], nodes = [];

            $.each(selected, function (i, node) {
                if (node.children.length === 0) {
                    var item = {
                        id: node.id,
                        text: node.text,
                        parent: node.parent,
                        state: {opened: true, selected: true}
                    };
                    nodes.push(item.id);
                    tree.push(item);
                }
            });
            data.nodes = nodes; data.tree = tree;
            return data;
        }
    </script>
@endpush