@extends('layouts.admin')

@section('content')
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('home') }}"><i class="fas fa-home"></i> Home</a></li>
            <li class="breadcrumb-item"><a href="{{ route('contatos.index') }}">Contatos</a></li>
            <li class="breadcrumb-item active" aria-current="page">Visualizar Contatos {{ $username }}</li>
        </ol>
    </nav>

    <div class="container-fluid">
        <div class="card">
            {{-- Messagem de Sucesso --}}
            @if(session('mensagem'))
                <div class="row">
                    <div class="col-md-12">
                        <div style="margin-bottom: 0px!important;" class="alert alert-success text-center">
                            <p style="margin-bottom: 0px!important;">{{ session('mensagem') }}</p>
                        </div>
                    </div>
                </div>
            @endif

            <div class="card-body">
                <fieldset class="border rounded p-3">
                    <legend style="width: auto!important;" class="text-primary">Usuário {{ $username }}</legend>
                    <div class="row">
                        <div class="col-12 text-right mb-2">
                            <a href="#" data-toggle="modal" data-target="#criarContatosModal"
                               class="btn btn-primary btn-sm text-white">
                                <i class="fas fa-plus"></i>&nbsp;Contato
                            </a>
                        </div>
                        <div class="col-md-12">
                            <div class="table-responsive">
                                <table class="table table-sm table-striped table-hover" id="exibirContatos">
                                    <thead class="text-primary">
                                    <th>#</th>
                                    <th>{{ ('Nome') }}</th>
                                    <th>{{ ('Email') }}</th>
                                    <th>{{ ('Ações') }}</th>
                                    </thead>
                                    <tbody>

                                    @foreach($contatos as $key => $d)
                                        <tr>
                                            <td class='align-middle' style='white-space: nowrap'>
                                                {{ $key + 1 }}
                                            </td>
                                            <td><i class="far fa-id-badge"></i> {{ $d->name }}</td>
                                            <td>{{ $d->email }}</td>
                                            <td class="text-right align-middle">
                                                <div class="btn-group" role="group"
                                                     aria-label="Grupo de botões com dropdown aninhado">
                                                    <div class="btn-group" role="group">
                                                        <button id="btnGroupDrop1" type="button"
                                                                class="btn btn-xs btn-primary dropdown-toggle"
                                                                data-toggle="dropdown" aria-haspopup="true"
                                                                aria-expanded="false">
                                                            Ações
                                                        </button>
                                                        <div class="dropdown-menu p-1" aria-labelledby="btnGroupDrop1">
                                                            <form
                                                                action="{{ route('contatos.destroy', $d->contact_id) }}"
                                                                method="post">
                                                                @csrf
                                                                @method('delete')
                                                                {{-- Visualziar --}}
                                                                <a class="btn btn-block btn-info btn-xs"
                                                                   href="#" data-toggle="modal"
                                                                   data-target="#editarContatosModal{{ $key }}">
                                                                    <i class="fas fa-pencil-alt"></i>
                                                                    Editar
                                                                </a>

                                                                {{-- Excluir --}}
                                                                <button type="button"
                                                                        class="btn btn-block btn-danger btn-xs"
                                                                        data-original-title="" title=""
                                                                        onclick="confirm('{{ __("Você tem certeza que deseja apagar este registro?") }}') ? this.parentElement.submit() : ''">
                                                                    <i class="fas fa-times"></i>
                                                                    Excluir
                                                                </button>
                                                            </form>
                                                        </div>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>

                                        <!-- Modal -->
                                        <div class="modal fade" id="editarContatosModal{{ $key }}" tabindex="-1"
                                             role="dialog" aria-labelledby="editarContatosModalLabel{{ $key }}"
                                             aria-hidden="true">
                                            <div class="modal-dialog" role="document">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title"
                                                            id="editarContatosModalLabel{{ $key }}"><i
                                                                class="far fa-id-badge"></i> {{ $d->name }}</h5>
                                                        <button type="button" class="close" data-dismiss="modal"
                                                                aria-label="Close">
                                                            <span aria-hidden="true">×</span>
                                                        </button>
                                                    </div>
                                                    <form action="{{ route('contatos.update', $d->contact_id) }}"
                                                          method="POST">
                                                        @csrf
                                                        @method('PUT')
                                                        <input type="hidden" name="user_id" value="{{ $d->user_id }}">
                                                        <div class="modal-body">
                                                            <div class="row">
                                                                <div class="form-group col-md-12">
                                                                    <label for="name">Nome*</label>
                                                                    <input name="name" id="name" class="form-control"
                                                                           value="{{ $d->name }}" required>
                                                                </div>
                                                                <div class="form-group col-md-12">
                                                                    <label for="email">Email*</label>
                                                                    <input name="email" id="email" class="form-control"
                                                                           value="{{ $d->email }}" required>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="modal-footer">
                                                            <button type="button" class="btn btn-secondary"
                                                                    data-dismiss="modal">Fechar
                                                            </button>
                                                            <button type="submit" class="btn btn-primary">Editar
                                                            </button>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>

                    </div>
                </fieldset>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="criarContatosModal" tabindex="-1"
         role="dialog" aria-labelledby="criarContatosModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"
                        id="criarContatosModalLabel"><i class="far fa-id-badge"></i> Novo Contato</h5>
                    <button type="button" class="close" data-dismiss="modal"
                            aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <form action="{{ route('contatos.store') }}"
                      method="POST">
                    @csrf
                    <input type="hidden" name="user_id" value="{{ $user->pluck('user_id')->first() }}">
                    <input type="hidden" name="username" value="{{ $user->pluck('username')->first() }}">
                    <div class="modal-body">
                        <div class="row">
                            <div class="form-group col-md-12">
                                <label for="name">Nome*</label>
                                <input name="name" id="name" class="form-control" required>
                            </div>
                            <div class="form-group col-md-12">
                                <label for="email">Email*</label>
                                <input name="email" id="email" class="form-control" required>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary"
                                data-dismiss="modal">Fechar
                        </button>
                        <button type="submit" class="btn btn-primary">Salvar
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function ($) {
            $('#exibirContatos').DataTable({
                "language": {
                    "url": "https://cdn.datatables.net/plug-ins/1.10.12/i18n/Portuguese-Brasil.json"
                },
                "order": [[0, "desc"]],
                "bFilter": true,
                "bInfo": true,
                "bSort": false,
                "bPaginate": true,
                dom: 'Bfrtip',
                buttons: {
                    buttons: [
                        {
                            extend: 'copy',
                            text: 'Copiar',
                        },
                        {
                            extend: 'csv',
                            text: 'CSV',
                        },
                        {
                            extend: 'excel',
                            text: 'Excel',
                        },
                        {
                            extend: 'pdf',
                            text: 'PDF',
                        },
                        {
                            extend: 'print',
                            text: 'Imprimir',
                        }
                    ],
                    dom: {
                        button: {
                            tag: "button",
                            className: "btn btn-primary text-xs",
                        },
                        buttonLiner: {
                            tag: null
                        }
                    }
                }
            });
        });
    </script>


@endsection