@extends('layouts.app')

@section('title', 'Campañas')

@section('content')
<div class="card">
    <div class="row card-header mx-0 px-2">
        <div class="d-md-flex justify-content-between align-items-center dt-layout-start col-md-auto me-auto">
            <h5 class="card-title mb-0 text-md-start text-center">Campañas</h5>
        </div>
        <div class="d-md-flex justify-content-between align-items-center dt-layout-end col-md-auto mt-0">
            <div class="dt-buttons btn-group flex-wrap">
                <a class="btn create-new btn-primary" href="{{ route($type.'.create') }}">
                    <span class="d-flex align-items-center">
                        <i class="icon-base ri ri-add-circle-fill icon-18px me-sm-1"></i>
                        <span class="d-none d-sm-inline-block">Crear Registro</span>
                    </span>
                </a>
            </div>
        </div>
    </div>

    <div class="card-datatable text-nowrap pt-0">
        <table class="datatables-basic table table-bordered table-striped align-middle" id="tabla_registros">
            <thead class="table-light">
                <tr>
                    <th>ID</th>
                    <th>Nombre</th>
                    <th>Mensaje</th>
                    <th>Fecha</th>
                    <th>Adjunto</th>
                    <th>Estatus</th>
                    <th>Acciones</th>
                </tr>
            </thead>
        </table>
    </div>
</div>

<style>
    div.dt-container div.dt-length select {
        margin-inline: .5rem;
        width: auto;
    }

    .table td {
        vertical-align: middle;
    }

    .tabla-botones i {
        color: white !important;
        display: inline-flex;
    }

    table.dataTable td {
        white-space: normal !important;
        word-break: break-word !important;
        vertical-align: top;
    }
</style>

<script>
    $(document).ready(function() {
        $('#tabla_registros').DataTable({
            processing: true,
            serverSide: true,
            responsive: true,
            ajax: '{{ route("$type.index") }}',
            columns: [{
                    data: 'id',
                    name: 'id',
                    width: '5%'
                },
                {
                    data: 'nombre',
                    name: 'nombre',
                    width: '15%'
                },
                {
                    data: 'mensaje',
                    name: 'mensaje',
                    width: '35%',
                    render: function(data) {
                        // Mostrar todo el mensaje, permitiendo salto de línea si es largo
                        return `<div style="white-space: normal; word-wrap: break-word;">${data ?? ''}</div>`;
                    }
                },
                {
                    data: 'fecha',
                    name: 'fecha',
                    width: '10%',
                    render: function(data) {
                        if (!data) return '';
                        // Convertir formato ISO a 'YYYY-MM-DD HH:mm:ss'
                        const date = new Date(data);
                        const y = date.getFullYear();
                        const m = String(date.getMonth() + 1).padStart(2, '0');
                        const d = String(date.getDate()).padStart(2, '0');
                        const h = String(date.getHours()).padStart(2, '0');
                        const min = String(date.getMinutes()).padStart(2, '0');
                        const s = String(date.getSeconds()).padStart(2, '0');
                        return `${y}-${m}-${d} ${h}:${min}:${s}`;
                    }
                },
                {
                    data: 'adjunto',
                    name: 'adjunto',
                    width: '10%',
                    render: function(data) {
                        if (data) {
                            return `<a href="/storage/${data}" target="_blank">Ver archivo</a>`;
                        } else {
                            return 'Sin archivo';
                        }
                    }
                },
                {
                    data: 'estatus',
                    name: 'estatus',
                    width: '10%',
                    render: function(data) {
                        const color = data === 'Activo' ? 'success' : 'secondary';
                        return `<span class="badge bg-${color}">${data}</span>`;
                    }
                },
                {
                    data: 'action',
                    name: 'action',
                    width: '15%',
                    orderable: false,
                    searchable: false
                }
            ],
            language: {
                url: "{{ asset('js/dataTables.spanish.json') }}",
            },
            initComplete: function() {
                $('#tabla_registros_wrapper').addClass('mx-2');
                $('.card-header').after('<hr class="my-0">');
            }
        });
    });
</script>
@endsection