<div class="table-responsive" style="margin-top: 25px">
    <table id="sd-bonuspunkte-plugin" class="table table-striped table-bordered table-hover">
        <thead>
        <tr>
            <th style="vertical-align: top">ID</th>
            <th style="vertical-align: top">Kunde</th>
            <th style="vertical-align: top">Email</th>
            <th width="145" style="vertical-align: top">Verf&uuml;gbare Bonuspunkte</th>
            <th width="145" style="vertical-align: top">Bonuspunkte in Euro</th>
            <th width="145" style="vertical-align: top">Offene Bonuspunkte</th>
            <th width="145" style="vertical-align: top">Offene Bonuspunkte in Euro</th>
            <th width="77"></th>
        </tr>
        </thead>
        <tbody>
        {foreach from=$bonuses item=bonus name=bonusForeach}
            <tr data-id="{$bonus->id}" data-sum="{$bonus->sum}" data-customer="{$bonus->kunde->kKunde}">
                <td>{$bonus->kunde->kKunde}</td>
                <td class="name">{$bonus->kunde->cVorname} {$bonus->kunde->cNachname}</td>
                <td class="email">{$bonus->kunde->cMail}</td>
                <td>{$bonus->sum}</td>
                <td>{$bonus->sumLocalized}</td>
                <td>{$bonus->sumPending}</td>
                <td>{$bonus->sumPendingLocalized}</td>
                <td class="text-right">
                    <div class="btn-group">
                        <a href="#" class="btn btn-small btn-success add-bonus" data-target="#modal-add"><i
                                    class="fa fa-plus"></i></a>
                        <a href="#" class="btn btn-small btn-warning remove-bonus" data-target="#modal-add"><i
                                    class="fa fa-minus"></i></a>
                    </div>
                </td>
            </tr>
        {/foreach}
        </tbody>
        <tfoot>
        <tr>
            <th style="vertical-align: top">ID</th>
            <th style="vertical-align: top">Kunde</th>
            <th style="vertical-align: top">Email</th>
            <th style="vertical-align: top">Verf&uuml;gbare Bonuspunkte</th>
            <th style="vertical-align: top">Bonuspunkte in Euro</th>
            <th style="vertical-align: top">Offene Bonuspunkte</th>
            <th style="vertical-align: top">Offene Bonuspunkte in Euro</th>
            <th></th>
        </tr>
        </tfoot>
    </table>
</div>
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <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>
                <h4 class="modal-title" id="myModalLabel">History</h4>
            </div>
            <div class="modal-body">
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modal-add" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <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>
                <h4 class="modal-title" id="myModalLabel">Bonusm&uuml;nzen f&uuml;r <span class="user"></span> hinzuf&uuml;gen
                </h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-12">
                        <form action="{$actionUrl}" method="post">
                            <div class="form-group">
                                <label for="bonus_value">Value</label>
                                <input type="text" class="form-control" id="bonus_value" name="bonus_value"
                                       pattern="[0-9]{ldelim}1,{rdelim}([.][0-9]{ldelim}0,2{rdelim})?"/>
                            </div>
                            <input type="hidden" name="bonus_id"/>
                            <input type="hidden" name="customer_id"/>
                            <button type="submit" class="btn btn-success" name="add_bonus">Add</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modal-remove" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <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>
                <h4 class="modal-title" id="myModalLabel">Bonusm&uuml;nzen f&uuml;r <span class="user"></span> abziehen
                </h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-12">
                        <form action="{$actionUrl}" method="post">
                            <div class="form-group">
                                <label for="bonus_value">Value</label>
                                <input type="text" pattern="[0-9]{ldelim}1,{rdelim}([.][0-9]{ldelim}0,2{rdelim})?"
                                       class="form-control" id="bonus_value" name="bonus_value"/>
                            </div>
                            <input type="hidden" name="bonus_id"/>
                            <input type="hidden" name="customer_id"/>
                            <button type="submit" class="btn btn-warning" name="reduce_bonus">Reduce</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<style>
    @media screen and (min-width: 768px) {
        .backend-wrapper.container {
            width: auto;
            max-width: 98%;
        }
    }
</style>
