{% extends 'admin/base.html.twig' %}

{% block title %}Create new Notification{% endblock %}
{% block breadcrumb_title %}Create new Notification{% endblock %}
{% block breadcrumb_subtitle %}Notification{% endblock %}

{% block body %}
    <div ng-app="app" ng-cloak ng-controller="CreateNotificationController">
        <div class="ibox">
            <div class="ibox-title">
                <h5>{{ "message.add_necesary_info" | trans }}</h5>
            </div>

            <div class="ibox-content">
                <div class="row">
                    <div class="col-xs-12">
                        <form action="" class="form-horizontal">
                            {#<div class="form-group">#}
                            {#<label class="col-sm-2">Title</label>#}
                            {#<div class="col-sm-10">#}
                            {#<input type="text" class="form-control" ng-model="notification.title">#}
                            {#</div>#}
                            {#</div>#}

                            <div class="form-group">
                                <label class="col-sm-2">Notification content</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" ng-model="notification.body">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2">Promote what?</label>
                                <div class="col-sm-10">
                                    <select class="form-control"  ng-model="notification.type">
                                        <option value="">Choose type</option>
                                        <option value="business">Business</option>
                                        <option value="product">Product</option>
                                        <option value="promotion">Promotion</option>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group" ng-if="notification.type">
                                <label class="col-sm-2">Choose business</label>
                                <div class="col-sm-10">
                                    <input
                                            type="text"
                                            ng-model="businessToPromote.model"
                                            uib-typeahead="businessToPromote as businessToPromote.name for businessToPromote in searchForBusinessToPromote($viewValue)"
                                            typeahead-on-select="onSelectBusinessToPromote($item, $model, $label)"
                                            class="form-control"
                                    >
                                    <br>
                                    <span class="badge badge-primary" ng-if="notification.selected_business_to_promote">
                                    [[ notification.selected_business_to_promote.name ]]
                                    <i class="fa fa-close" ng-click="clearSelectedBusinessToPromote()"></i>
                                </span>
                                </div>
                            </div>

                            <div class="form-group" ng-if="notification.type == 'product'">
                                <label class="col-sm-2">Choose product to promote</label>
                                <div class="col-sm-10">
                                    <input
                                            type="text"
                                            ng-disabled="!notification.selected_business_to_promote"
                                            ng-model="productToPromote.model"
                                            uib-typeahead="productToPromote as productToPromote.name for productToPromote in searchForProductToPromote($viewValue)"
                                            typeahead-on-select="onSelectProductToPromote($item, $model, $label)"
                                            class="form-control"
                                    >
                                    <br>
                                    <span class="badge badge-primary" ng-if="notification.selected_product_to_promote">
                                    [[ notification.selected_product_to_promote.name ]]
                                    <i class="fa fa-close" ng-click="clearSelectedProductToPromote()"></i>
                                </span>
                                </div>
                            </div>

                            <div class="form-group" ng-if="notification.type == 'promotion'">
                                <label class="col-sm-2">Choose promotion to promote</label>
                                <div class="col-sm-10">
                                    <input
                                            type="text"
                                            ng-disabled="!notification.selected_business_to_promote"
                                            ng-model="promotionToPromote.model"
                                            uib-typeahead="promotionToPromote as promotionToPromote.name for promotionToPromote in searchForPromotionToPromote($viewValue)"
                                            typeahead-on-select="onSelectPromotionToPromote($item, $model, $label)"
                                            class="form-control"
                                    >
                                    <br>
                                    <span class="badge badge-primary" ng-if="notification.selected_promotion_to_promote">
                                    [[ notification.selected_promotion_to_promote.name ]]
                                    <i class="fa fa-close" ng-click="clearSelectedPromotionToPromote()"></i>
                                </span>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-xs-12">
                                    <a class="btn btn-sm btn-success pull-right" ng-click="save()" ng-disabled="notification.sending">Save</a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="ibox">
            <div class="ibox-title">
                <h5>{{ "message.notifications_list" | trans }}</h5>
            </div>

            <div class="ibox-content">
                <div class="row">
                    <div class="col-xs-12">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>Notification content</th>
                                    <th>Business</th>
                                    <th>Product</th>
                                    <th>Promotion</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="customNotification in notifications">
                                    <td>[[ customNotification.content ]]</td>
                                    <td>
                                        <a href="/admin/business/[[ customNotification.business.id ]]" ng-if="customNotification.business">[[ customNotification.business.name ]]</a>
                                    </td>
                                    <td>
                                        <a href="/admin/product/[[ customNotification.product.id ]]" ng-if="customNotification.product">[[ customNotification.product.name ]]</a>
                                    </td>
                                    <td>
                                        <a href="/admin/promotion/[[ customNotification.promotion.id ]]/edit" ng-if="customNotification.promotion">[[ customNotification.promotion.product.name ]]</a>
                                    </td>
                                </tr>

                                <tr ng-if="notifications.length == 0">
                                    <td colspan="5" class="text-center">No results found</td>
                                </tr>
                            </tbody>
                            <tfoot>
                            <tr>
                                <td colspan="2" class="text-left">
                                    <span>[[ config.total_results ]] results</span>
                                </td>
                                <td colspan="3" class="text-right">
                                    <div class="btn-group btn-group-sm">
                                        <button class="btn btn-sm btn-default" ng-disabled="config.page == 0" ng-click="goBack()">
                                            <i class="fa fa-arrow-left"></i>
                                        </button>

                                        <button class="btn btn-sm btn-default" disabled>[[config.page+1]]/[[config.total_pages]]</button>

                                        <button class="btn btn-sm btn-default" ng-disabled="(page + 1) == config.total_pages" ng-click="goForward()">
                                            <i class="fa fa-arrow-right"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}

    <script src="{{ asset('vendor/angularjs/angular.min.js') }}"></script>
    <script src="{{ asset('vendor/angularjs/angular-route.min.js') }}"></script>
    <script src="{{ asset('vendor/angularjs/ui-bootstrap-tpls-2.5.0.min.js') }}"></script>
    <script src="{{ asset('admin/angularjs/notifications/app.js') }}"></script>
{% endblock %}