@extends('layouts.app')

@section('content')
<main class="content">
    <div class="container-fluid p-0">

        <h1 class="h3 mb-3">Notificações</h1>

        <!-- <div class="text-end">
            <a href="{{ route('cadastrarBem') }}" class="btn btn-primary">
                <i class="align-middle" data-feather="plus-circle"></i> Cadastrar Bem
            </a>
        </div> -->

        <div class="row">
            <div class="col-12 p-3">
                <div class="card flex-fill table-responsive p-3">

                    <table class="table table-hover my-0" id="bens">
                        <thead>
                            <tr>
                                <th >Data</th>
                                <th>Destinatário</th>
                                <th >Título</th>
                                <th >Tipo</th>
                                <th >Ações</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($notificacoes as $notificacao)
                                <tr>
                                    <td >{{ \Carbon\Carbon::parse($notificacao->created_at)->locale('pt-br')->translatedFormat('d/m/Y H:i:s') }}</td>
                                    <td class="fw-bold" style="width: 5px;">{{ \App\Models\User::find($notificacao->usuario_id)->name ?? 'Todos' }}</td>
                                    <td class="fw-bold">{{ $notificacao->titulo }}</td>
                                    <td >{{ \App\Enums\Notificacoes\TipoNotificacaoEnum::from($notificacao->tipo)->label() }}</td>
                                    <td><a href="#" class="btn btn-sm text-primary bg-primary bg-opacity-10" onclick="DetalhesItem({{ json_encode($notificacao) }}, {{ json_encode(\App\Enums\Notificacoes\TipoNotificacaoEnum::from($notificacao->tipo)->label()) }})">Detalhes</a></td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>
</main>
@endsection

@section('scripts')
<script>
    function DetalhesItem(notificacao, tipo) {
        const data = new Date(notificacao.created_at);
        const dataFormatada = data.toLocaleDateString('pt-BR') + ' ' + data.toLocaleTimeString('pt-BR');

        let html = `
            <p><strong>Título:</strong> ${notificacao.titulo}</p>
            <p><strong>Tipo:</strong> ${tipo}</p>
            <p><strong>Data:</strong> ${dataFormatada}</p>
            <p><strong>Mensagem:</strong><br>${notificacao.mensagem ?? 'Sem mensagem'}</p>
        `;

        Swal.fire({
            title: 'Detalhes da Notificação',
            html: html,
            icon: 'info',
            cancelButtonText: 'Fechar',
            showCancelButton: true,
            showConfirmButton: false,
            customClass: {
                popup: 'text-start'
            }
        });
    }
</script>
<script>
    $(document).ready(function() {
        $('#bens').DataTable({
            "pageLength" : 10,
            "responsive": true,
            "language": {
                "url": "{{ asset('assets/js/datatables_translate.json') }}"
            },
            "columnDefs": [
                {
                    "targets": -1,
                    "orderable": false
                }
            ]
        });

    });
</script>
@endsection