@extends('layout.layout')
@section('title')
    Mensagens
@endsection
@section('breadcrumb')
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="/">Home</a></li>
        <li class="breadcrumb-item active">Mensagens</li>
    </ol>
@endsection
@section('content')
    <div class="card">
        <div class="card-body">
            <div class="row">
                <div class="col-md-12  table-responsive">
                    <table class="table table-hover" id="table">
                        <thead>
                        <tr>
                            @if(!\Auth::user()->isRevenda())
                                <th>Cliente</th>
                            @endif
                            <th>Data e Hora</th>
                            <th>Remetente</th>
                            <th>E-mail</th>
                            <th>Telefone</th>
                            <th>Anuncio</th>
                            <th>Ações</th>
                        </tr>
                        </thead>
                        <tbody>
                        @if(count($mensagens))
                            @foreach($mensagens as $men)
                                <tr>
                                    @if(!\Auth::user()->isRevenda())
                                        <td>{{$men->cliente->nome}}</td>
                                    @endif
                                    <td>{{date('d/m/Y H:i:s', strtotime($men->created_at))}}</td>
                                    <td>{{$men->remetente}}</td>
                                    <td>{{$men->email}}</td>
                                    <td>{{$men->telefone}}</td>
                                    <td>{{ isset($men->anuncio) ? $men->anuncio->titulo : ''  }}</td>
                                    <td class="text-center">
                                        <a class="mr-2" href="#"  style="color: #4e91ff" onclick="verMensagem({{$men->id}})" data-toggle="tooltip" title="Visualizar Mensagem">
                                            <i class="fa fa-eye"></i>
                                        </a>
                                        <a href="#" style="color: #ff2b2b" onclick="excluirMensagem({{$men->id}})"  data-toggle="tooltip" title="Excluir Mensagem">
                                            <i class="fa fa-trash"></i>
                                        </a>
                                    </td>
                                </tr>
                            @endforeach
                        @else
                            <tr>
                                <td colspan="7" class="text-center">
                                    Não há mensagens
                                </td>
                            </tr>
                        @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

@endsection
@section('modals')

    <div class="modal in" id="modalMensagem" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <span class="text-uppercase font-weight-light">
                                Mensagem recebida em<br>
                                <span id="dataHora" class="font-weight-bold"></span>
                            </span>
                        </div>
                        <div class="col-md-12">
                            <span class="text-uppercase font-weight-light">
                                Enviada por<br>
                                <span id="remetente" class="font-weight-bold"></span>
                            </span>
                        </div>
                        <div class="col-md-6">
                            <span class="text-uppercase font-weight-light">
                                E-mail<br>
                                <span id="email" class="font-weight-bold"></span>
                            </span>
                        </div>
                        <div class="col-md-6">
                            <span class="text-uppercase font-weight-light">
                                Telefone/Celular<br>
                                <span id="telefone" class="font-weight-bold"></span>
                            </span>
                        </div>
                        <div class="col-md-12">
                            <span class="text-uppercase font-weight-light">
                                Interessado no anúncio<br>
                                <span id="anuncio" class="font-weight-bold"></span>
                            </span>
                        </div>
                        <div class="col-md-12">
                            <span class="text-uppercase font-weight-light">
                                Mensagem
                            </span>
                            <p id="mensagem">

                            </p>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-danger" data-dismiss="modal">Fechar</button>
                </div>
            </div>
        </div>
    </div>

@endsection
@section('javascript')
    <script type="text/javascript">
        $(document).ready(function() {
            $('#table').DataTable({
                language: {
                    url: 'https://cdn.datatables.net/plug-ins/1.10.21/i18n/Portuguese-Brasil.json'
                }
            });
        });

        function verMensagem(id){
            axios.get('/painel/mensagens/'+id).then((response) => {
                if(response.data.success){
                    $('#dataHora').html(moment(response.data.data.created_at).format('DD/MM/YYYY HH:MM:SS'))
                    $('#remetente').html(response.data.data.remetente)
                    $('#email').html(response.data.data.email)
                    $('#telefone').html(response.data.data.telefone)
                    $('#anuncio').html(response.data.data.anuncio['titulo'])
                    $('#mensagem').html(response.data.data.mensagem)
                    $('#modalMensagem').modal('show')
                } else {
                    $('#modalMensagem').modal('hide')
                }
            })
        }
        function excluirMensagem(id){
            new duDialog("Cuidado!", "Fazer isso irá <strong>APAGAR PERMANENTEMENTE</strong> a mensangem do servidor.", duDialog.OK_CANCEL, {
                okText: 'Remover',
                cancelText: 'Fechar',
                callbacks: {
                    okClick: function () {
                        $('.loadingModal').fadeIn();
                        axios.delete('/painel/mensagens/'+id).then((response) => {
                            window.location.href = '/painel/mensagens'
                        })
                        this.hide();
                    },
                    cancelClick: function () {
                        this.hide();
                    }
                }
            });

        }
    </script>
@endsection