@extends(config('manager.views.layouts.master'))

@section('content')

    @include('manager::partials.breadcrumb', [
        'pages' => ['Contatos']
    ])

    <div class="page-header clearfix">
        <h2>Contatos</h2>
    </div>

    @include('manager::partials.messages')

    <table class="table table-bordered table-striped table-hover">
        <thead>
            <tr>
                <th>Nome</th>
                <th>E-mail</th>
                <th>Telefone</th>
                <th width="150">Ações</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($contacts as $contact)
                <tr>
                    <td>{{ $contact->name }}</td>
                    <td>{{ $contact->email }}</td>
                    <td>{{ $contact->phone }}</td>
                    <td>
                        <div class="btn-group btn-group-sm">
                            <a href="{{ route('manager.contacts.show', $contact->id) }}" data-show class="btn btn-default" title="Editar">
                                <span class="glyphicon glyphicon-search"></span> ver
                            </a>

                            <a href="{{ route('manager.contacts.destroy', $contact->id) }}" class="btn btn-default" data-delete="true" title="Excluir">
                                <span class="glyphicon glyphicon-trash"></span> excluir
                            </a>
                        </div><!-- .btn-group -->
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table><!-- .table -->

    @if ($contacts->count() === 0)
        <h3 class="text-center">Nenhum contato encontrado.</h3>
    @endif

    {!! $contacts->appends(request()->except('page'))->render() !!}

    <div class="modal fade" id="modal-contact">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <dl class="dl-horizontal">
                        <dt>Nome</dt>
                        <dd class="js-name"></dd>

                        <dt>Empresa</dt>
                        <dd class="js-company"></dd>

                        <dt>Telefone</dt>
                        <dd class="js-phone"></dd>

                        <dt>E-mail</dt>
                        <dd class="js-email"></dd>

                        <dt>Cidade</dt>
                        <dd class="js-city"></dd>

                        <dt>Data que foi enviado</dt>
                        <dd class="js-created_at"></dd>
                    </dl>
                </div><!-- .modal-body -->

                <div class="modal-footer">
                    <button type="button" class="btn btn-sm btn-default" data-dismiss="modal">Fechar</button>
                </div><!-- .modal-footer -->
            </div><!-- .modal-content -->
        </div><!-- .modal-dialog -->
    </div><!-- .modal -->
@stop

@section('scripts')
    @parent
    <script>
    (function() {
        window.App = window.App || {};

        App.ContactShow = {
            init: function() {
                this.fetchElements();
                this.bindUIEvents();
            },

            fetchElements: function() {
                this.$btnShow = $('[data-show]');
                this.$modal   = $('#modal-contact');
            },

            bindUIEvents: function() {
                var _this = this;

                this.$btnShow.on('click', function(e) {
                    e.preventDefault();
                    _this.show($(this));
                });
            },

            show: function($btn) {
                var _this = this;

                $.ajax({
                    url: $btn.prop('href'),
                    beforeSend: function() {
                        $btn.prop('disabled', true);
                    }
                })
                    .success(function(contact) {
                        _this.$modal.find('.js-name').text(contact.name);
                        _this.$modal.find('.js-company').text(contact.company);
                        _this.$modal.find('.js-phone').text(contact.phone);
                        _this.$modal.find('.js-email').text(contact.email);
                        _this.$modal.find('.js-city').text(contact.city);
                        _this.$modal.find('.js-created_at').text(contact.created_at_formated);
                        _this.$modal.modal('show');
                    })
                    .always(function() {
                        $btn.prop('disabled', false);
                    });
            }
        };

        App.ContactShow.init();
    })();
    </script>
@stop