@extends('admin.master')
@section('content')
    <section id="dashboard-content">
        <div class="panel panel-default">
            <div class="panel-heading">
                @if(session()->has('message'))
                    <div class="alert alert-success">
                        {{session()->get('message')}}
                    </div>
                @endif
                <h4 class="panel-title" style="padding-left: 15px;">Vouchers</h4>
            </div>
            <div class="panel-body" id="rla-content">
                <div class="card">
                    <div class="card-block">
                        <div class="row">
                            <div class="col-xs-12">
                                <button type="button" class="btn btn-default btn-sm" data-toggle="modal"
                                        data-target="#modal-new-voucher">
                                    Novo
                                </button>
                            </div>
                        </div>
                        <br>
                        <div class="row">
                            <div class="col-xs-12">
                                <table class="table table-condensed table-hover" id="tabelaVouchers">
                                    <thead>
                                    <tr>
                                        <th>Código</th>
                                        <th>Produto</th>
                                        <th>Limite de uso</th>
                                        <th>Situação</th>
                                        <th>Data de Criação</th>
                                        <th>Ações</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @if(count($vouchers) > 0)
                                        @foreach($vouchers as $voucher)
                                            <tr class="linha">
                                                <td>{{$voucher->code}}</td>
                                                <td>{{$voucher->product->name}}</td>
                                                <td>{{$voucher->usage_limit}}</td>
                                                <td>{{$voucher->situacao}}</td>
                                                <td>{{$voucher->created_at->format('d/m/Y H:i:s')}}</td>
                                                <td>
                                                    <a href="{{route('admin.products.vouchers.edit', $voucher->id)}}" class="btn btn-xs btn-default"><span class="fa fa-pencil"></span></a>
                                                </td>
                                            </tr>
                                        @endforeach
                                    @endif
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Modal Novo Voucher -->
    <div class="modal fade" id="modal-new-voucher" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <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">Novo voucher</h4>
                </div>
                <form class="form form-horizontal" method="POST" id="frmVoucher"
                      action="{{route('admin.products.vouchers.new')}}">
                    <div class="modal-body">

                        {{csrf_field()}}
                        <div class="form-group">
                            <label for="code" class="control-label col-xs-2">Código:</label>
                            <div class="col-xs-9">
                                <input type="text" name="code" class="form-control" id="code" disabled
                                       placeholder="Código gerado automaticamente">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="product_id" class="control-label col-xs-2">Produto:</label>
                            <div class="col-xs-9">
                                <select id="product_id" name="product_id" class="form-control">
                                    <option value=""> - Selecione -</option>
                                    @if(!empty($products))
                                        @foreach($products as $product)
                                            <option value="{{$product->id}}">{{$product->name}}</option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="usage_limit" class="control-label col-xs-2">Limite de uso:</label>
                            <div class="col-xs-9">
                                <input type="text" disabled class="form-control" id="usage_limit" value="1">
                            </div>
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
                        <button type="submit" class="btn btn-primary">Enviar</button>
                    </div>
                </form>

            </div>
        </div>
    </div>
@endsection
@section('scripts')
    <script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
    <script src="//cdn.datatables.net/plug-ins/1.10.12/sorting/datetime-moment.js"></script>
    <script>
        $(document).ready(function() {

            $.fn.dataTable.moment( "DD/MM/YYYY H:m:s" );

            var tabelaVouchers = $("#tabelaVouchers").DataTable({
                language: {
                    search:         "Procurar",
                    lengthMenu:    "Exibir _MENU_ registros",
                    info:           "Exibindo de _START_ até _END_ de _TOTAL_ registros",
                    infoEmpty:      "Exibindo de 0 até 0 de um total de 0 registros",
                    infoFiltered:   "(filtrado de _MAX_ registros no total)",
                    infoPostFix:    "",
                    paginate: {
                        first:      "Primeira",
                        previous:   "Anterior",
                        next:       "Próxima",
                        last:       "Última"
                    },
                    aria: {
                        sortAscending:  ": clique para ordenar de forma crescente",
                        sortDescending: ": clique para ordenar de forma decrescente"
                    }
                }
            });
        });
    </script>
@endsection
@section('css')
    <link rel="stylesheet" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
@endsection