@extends('admin.layout.master')

@section('content')
<main>
    <!-- Breadcrumb Area -->
    <div class="breadcrumb-area">
        <h1>Dashboard</h1>
        <ol class="breadcrumb">
            <li><a href="{{ url('/admin') }}"><i class='bx bx-home-alt' style="font-size: 18px;color: #F31519;"></i></a></li>
            <li><a href="{{ url('/admin') }}">Principal </a></li>
            <li>&nbsp;&nbsp;/ Admin Reclamos</li>
        </ol>
    </div>
    <!-- End Breadcrumb Area -->

    <div class="card mb-30">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3>Lista de Soporte</h3>
        </div>
    
        <div class="card-body">
            <!-- Tabla de Reclamos -->
            <div class="table-responsive">
                <table id="tablaReclamos" class="table" cellspacing="0" cellpadding="0" width="100%">
                    <thead>
                        <tr>
                            <th>N.</th>
                            <th>Nombre</th>
                            <th>Email</th>
                            <th>Fecha de Registro</th>
                            <th>Asunto</th>
                            <th>Descripción</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($reclamaciones as $key => $reclamacion)
                        <tr>
                            <td>{{ $reclamacion->id ??'N/A'}}</td>
                            <td>{{ $reclamacion->name ??'N/A' }}</td>
                            <td>{{ $reclamacion->email??'N/A' }}</td>
                            <td>{{ \Carbon\Carbon::parse($reclamacion->created_at)->format('d/m/Y H:i') }}</td>
                            <td>{{ $reclamacion->subject ??'N/A'}}</td>
                            <td>{{ $reclamacion->message ??'N/A'}}</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <script type='text/javascript'>
        $(document).ready(function() {
            // Inicializar DataTable con botones de exportación
            $('#tablaReclamos').DataTable({
                "paging": true,
                "lengthChange": false,
                "searching": true,
                "ordering": true,
                "order": [[3, "desc"]],
                "info": true,
                "autoWidth": false,
                "responsive": true,
                "pageLength": 10,
                "dom": 'Bfrtip', // Define la posición de los botones
                "buttons": [
                    {
                        extend: 'excelHtml5',
                        text: 'Exportar a Excel',
                    }
                ]
            });  
        });
    </script>
</main>
@endsection