@extends('layouts.template')


@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="row">
            <div class="col-xl-12">
                <h6 class="text-muted">Post-Venta</h6>
                <div class="nav-align-top mb-4">
                    <ul id="myTabTask" class="nav nav-pills mb-3 nav-fill" role="tablist">
                        <li class="nav-item">
                            <button type="button" class="nav-link active" role="tab" data-bs-toggle="tab"
                                data-bs-target="#navs-pills-justified-nuevos" aria-controls="navs-pills-justified-home"
                                aria-selected="true">
                                <i class="tf-icons bx bx-bar-chart-alt-2 fa-2x me-1"></i> Nuevos
                            </button>
                        </li>
                        <li class="nav-item">
                            <button type="button" class="nav-link" role="tab" data-bs-toggle="tab"
                                data-bs-target="#navs-pills-justified-agendados"
                                aria-controls="navs-pills-justified-agendados" aria-selected="false">
                                <i class="tf-icons  bx bx-sort-alt-2 fa-2x me-1"></i> Agendados
                            </button>
                        </li>
                        <li class="nav-item">
                            <button type="button" class="nav-link" role="tab" data-bs-toggle="tab"
                                data-bs-target="#navs-pills-justified-reprogramados"
                                aria-controls="navs-pills-justified-reprogramados" aria-selected="false">
                                <i class="tf-icons bx bx-cog fa-2x me-1"></i> Reprogramación
                            </button>
                        </li>
                        <li class="nav-item">
                            <button type="button" class="nav-link" role="tab" data-bs-toggle="tab"
                                data-bs-target="#navs-pills-justified-rechazados"
                                aria-controls="navs-pills-justified-rechazados" aria-selected="false">
                                <i class="tf-icons bx bx-shield-x fa-2x me-1"></i> Rechazados
                            </button>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane fade show active" id="navs-pills-justified-nuevos" role="tabpanel">
                            <p>
                            <div class="card">
                                <h5 class="card-header">Busqueda Avanzada</h5>
                                <!--Search Form -->
                                <div class="card-body">
                                    <form class="dt_adv_search1" method="POST">
                                        <div class="row">
                                            <div class="col-12">
                                                <div class="row g-5">
                                                    <div class="col-3 col-sm-6 col-lg-3">
                                                        <label class="form-label">Tipo de
                                                            Gestión:</label>
                                                            <select name="managementtype" id="managementtype" class="form-control">
                                                                <option value="">Seleccione ...</option>
                                                                @foreach ($managementtypes as $managementtype)
                                                                    <option value="{{ $managementtype->id }}">
                                                                        {{ $managementtype->management }}
                                                                    </option>
                                                                @endforeach
                                                            </select>
                                                    </div>
                                                    <div class="col-3 col-sm-6 col-lg-3">
                                                        <label class="form-label">Fecha:</label>
                                                        <div class="mb-0">
                                                            <input type="date"
                                                                class="form-control dt-date flatpickr-range dt-input"
                                                                data-column="5" placeholder="StartDate to EndDate"
                                                                data-column-index="4" id="fecha" name="fecha" />
                                                        </div>
                                                    </div>
                                                    <div class="col-3 col-sm-6 col-lg-3">
                                                        <label class="form-label">Motorizado:</label>
                                                            <select name="motorized" id="motorized" class="form-control">
                                                                <option value="">Seleccione ...</option>
                                                                @foreach ($users as $user)
                                                                    <option value="{{ $user->id }}">
                                                                        {{ $user->fullname }}
                                                                    </option>
                                                                @endforeach
                                                            </select>
                                                    </div>
                                                    <div class="col-1 col-sm-2 col-lg-1 mt-6 pt-4" style="padding-top:1.5rem">
                                                        <button class="btn btn-danger" id ="btnConsultar">Consultar</button>
                                                    </div>
                                                    <div class="col-1 col-sm-2 col-lg-1 mt-6 pt-4" style="padding-top:1.5rem; padding-left:2.5rem">
                                                        <button class="btn btn-success" id="btnBorrar">Limpiar</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <hr class="mt-0" />
                                <div class="card-datatable table-responsive">
                                    <table id="tableBackDt" class="table border-top">
                                        <thead>
                                            <tr>
                                                <th></th>
                                                <th>Tipo Registro</th>
                                                <th>Documento</th>
                                                <th>Razón Social</th>
                                                <th>Tipo de Gestión</th>
                                                <th>Rango Horario</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                    </table>
                                </div>
                            </div>
                            </p>
                        </div>
                        <div class="tab-pane fade" id="navs-pills-justified-agendados" role="tabpanel">
                            <p>
                                <div class="card">
                                    <h5 class="card-header">Busqueda Avanzada</h5>
                                    <!--Search Form -->
                                    <div class="card-body">
                                        <form class="dt_adv_search2" method="POST">
                                            <div class="row">
                                                <div class="col-12">
                                                    <div class="row g-3">
                                                        <div class="col-4 col-sm-6 col-lg-4">
                                                            <label class="form-label">Fecha:</label>
                                                            <div class="mb-0">
                                                                <input type="text"
                                                                    class="form-control dt-date flatpickr-range dt-input"
                                                                    data-column="5" placeholder="StartDate to EndDate"
                                                                    data-column-index="4" name="dt_date" />
                                                                <input type="hidden"
                                                                    class="form-control dt-date start_date dt-input"
                                                                    data-column="5" data-column-index="4"
                                                                    name="value_from_start_date" />
                                                                <input type="hidden"
                                                                    class="form-control dt-date end_date dt-input"
                                                                    name="value_from_end_date" data-column="5"
                                                                    data-column-index="4" />
                                                            </div>
                                                        </div>
                                                        <div class="col-4 col-sm-6 col-lg-4">
                                                            <label class="form-label">Tipo de
                                                                Gestión:</label>
                                                            <input type="text" class="form-control dt-input dt-full-name"
                                                                data-column="1" placeholder="Alaric Beslier"
                                                                data-column-index="0" />
                                                        </div>
                                                        <div class="col-4 col-sm-6 col-lg-4">
                                                            <label class="form-label">Motorizado:</label>
                                                            <input type="text" class="form-control dt-input" data-column="2"
                                                                placeholder="demo@example.com" data-column-index="1" />
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                    <hr class="mt-0" />
                                    <div class="card-datatable table-responsive">
                                        <table id="tableBackDtAng" class="table border-top">
                                            <thead>
                                                <tr>
                                                    <th></th>
                                                    <th>Tipo Registro</th>
                                                    <th>Documento</th>
                                                    <th>Razón Social</th>
                                                    <th>Tipo de Gestión</th>
                                                    <th>Rango Horario</th>
                                                    <th>Action</th>
                                                </tr>
                                            </thead>
                                        </table>
                                    </div>
                                </div>
                                </p>
                        </div>
                        <div class="tab-pane fade" id="navs-pills-justified-reprogramacion" role="tabpanel">
                            <p>
                                <div class="card">
                                    <h5 class="card-header">Busqueda Avanzada</h5>
                                    <!--Search Form -->
                                    <div class="card-body">
                                        <form class="dt_adv_search3" method="POST">
                                            <div class="row">
                                                <div class="col-12">
                                                    <div class="row g-3">
                                                        <div class="col-4 col-sm-6 col-lg-4">
                                                            <label class="form-label">Fecha:</label>
                                                            <div class="mb-0">
                                                                <input type="text"
                                                                    class="form-control dt-date flatpickr-range dt-input"
                                                                    data-column="5" placeholder="StartDate to EndDate"
                                                                    data-column-index="4" name="dt_date" />
                                                                <input type="hidden"
                                                                    class="form-control dt-date start_date dt-input"
                                                                    data-column="5" data-column-index="4"
                                                                    name="value_from_start_date" />
                                                                <input type="hidden"
                                                                    class="form-control dt-date end_date dt-input"
                                                                    name="value_from_end_date" data-column="5"
                                                                    data-column-index="4" />
                                                            </div>
                                                        </div>
                                                        <div class="col-4 col-sm-6 col-lg-4">
                                                            <label class="form-label">Tipo de
                                                                Gestión:</label>
                                                            <input type="text" class="form-control dt-input dt-full-name"
                                                                data-column="1" placeholder="Alaric Beslier"
                                                                data-column-index="0" />
                                                        </div>
                                                        <div class="col-4 col-sm-6 col-lg-4">
                                                            <label class="form-label">Motorizado:</label>
                                                            <input type="text" class="form-control dt-input" data-column="2"
                                                                placeholder="demo@example.com" data-column-index="1" />
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                    <hr class="mt-0" />
                                    <div class="card-datatable table-responsive">
                                        <table id="tableBackDtPro" class="table border-top">
                                            <thead>
                                                <tr>
                                                    <th></th>
                                                    <th>Tipo Registro</th>
                                                    <th>Documento</th>
                                                    <th>Razón Social</th>
                                                    <th>Tipo de Gestión</th>
                                                    <th>Rango Horario</th>
                                                    <th>Action</th>
                                                </tr>
                                            </thead>
                                        </table>
                                    </div>
                                </div>
                                </p>
                        </div>
                        <div class="tab-pane fade" id="navs-pills-justified-rechazados" role="tabpanel">
                            <p>
                                <div class="card">
                                    <h5 class="card-header">Busqueda Avanzada</h5>
                                    <!--Search Form -->
                                    <div class="card-body">
                                        <form class="dt_adv_search4" method="POST">
                                            <div class="row">
                                                <div class="col-12">
                                                    <div class="row g-3">
                                                        <div class="col-4 col-sm-6 col-lg-4">
                                                            <label class="form-label">Fecha:</label>
                                                            <div class="mb-0">
                                                                <input type="text"
                                                                    class="form-control dt-date flatpickr-range dt-input"
                                                                    data-column="5" placeholder="StartDate to EndDate"
                                                                    data-column-index="4" name="dt_date" />
                                                                <input type="hidden"
                                                                    class="form-control dt-date start_date dt-input"
                                                                    data-column="5" data-column-index="4"
                                                                    name="value_from_start_date" />
                                                                <input type="hidden"
                                                                    class="form-control dt-date end_date dt-input"
                                                                    name="value_from_end_date" data-column="5"
                                                                    data-column-index="4" />
                                                            </div>
                                                        </div>
                                                        <div class="col-4 col-sm-6 col-lg-4">
                                                            <label class="form-label">Tipo de
                                                                Gestión:</label>
                                                            <input type="text" class="form-control dt-input dt-full-name"
                                                                data-column="1" placeholder="Alaric Beslier"
                                                                data-column-index="0" />
                                                        </div>
                                                        <div class="col-4 col-sm-6 col-lg-4">
                                                            <label class="form-label">Motorizado:</label>
                                                            <input type="text" class="form-control dt-input" data-column="2"
                                                                placeholder="demo@example.com" data-column-index="1" />
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                    <hr class="mt-0" />
                                    <div class="card-datatable table-responsive">
                                        <table id="tableBackDtRe" class="table border-top">
                                            <thead>
                                                <tr>
                                                    <th></th>
                                                    <th>Tipo Registro</th>
                                                    <th>Documento</th>
                                                    <th>Razón Social</th>
                                                    <th>Tipo de Gestión</th>
                                                    <th>Rango Horario</th>
                                                    <th>Action</th>
                                                </tr>
                                            </thead>
                                        </table>
                                    </div>
                                </div>
                                </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="postVentaModal" tabindex="-1" role="dialog" aria-labelledby="postVentaModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <!-- Contenido del Modal -->
                <div class="modal-header">
                    <h5 class="modal-title" id="postVentaModalLabel">Detalles de PostVenta</h5>
                    <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="container-xxl flex-grow-1 container-p-y">
                        <div class="row">
                            <div class="col-xl-12">
                                <div class="row">
                                    <div class="col-xxl">
                                        <div class="card mb-4">
                                            <div class="card-header d-flex align-items-center justify-content-between">
                                                <h5 class="mb-0">PostVenta</h5>
                                                <small class="text-muted float-end">Detalles del Formulario Post-Venta</small>
                                            </div>
                                            <div class="modal-body">
                                                <div class="row mb-3">
                                                    <div class="col-sm-3">
                                                        <label class="col-form-label fw-bold">Documento:</label>
                                                    </div>
                                                    <div class="col-sm-3">
                                                        <label class="col-form-label text-break" id="modalDocument"></label>
                                                    </div>

                                                    <div class="col-sm-3">
                                                        <label class="col-form-label fw-bold">Razón Social:</label>
                                                    </div>
                                                    <div class="col-sm-3">
                                                        <label class="col-form-label text-break" id="modalBusinessName"></label>
                                                    </div>
                                                </div>

                                                <div class="row mb-3">
                                                    <div class="col-sm-3">
                                                        <label class="col-form-label fw-bold">Contacto que recepciona:</label>
                                                    </div>
                                                    <div class="col-sm-3">
                                                        <label class="col-form-label text-break" id="modalReceivingPerson"></label>
                                                    </div>

                                                    <div class="col-sm-3">
                                                        <label class="col-form-label fw-bold">Email:</label>
                                                    </div>
                                                    <div class="col-sm-3">
                                                        <label class="col-form-label text-break" id="modalEmailCustomer"></label>
                                                    </div>
                                                </div>

                                                <div class="row mb-3">
                                                    <div class="col-sm-3">
                                                        <label class="col-form-label fw-bold">Celular del Titular:</label>
                                                    </div>
                                                    <div class="col-sm-3">
                                                        <label class="col-form-label text-break" id="modalTitularCellphone"></label>
                                                    </div>

                                                    <div class="col-sm-3">
                                                        <label class="col-form-label fw-bold">Dirección:</label>
                                                    </div>
                                                    <div class="col-sm-3">
                                                        <label class="col-form-label text-break" id="modalAddress"></label>
                                                    </div>
                                                </div>

                                                <div class="row mb-3">
                                                    <div class="col-sm-3">
                                                        <label class="col-form-label fw-bold">Referencia:</label>
                                                    </div>
                                                    <div class="col-sm-3">
                                                        <label class="col-form-label text-break" id="modalReference"></label>
                                                    </div>

                                                    <div class="col-sm-3">
                                                        <label class="col-form-label fw-bold">Fecha de Cambio:</label>
                                                    </div>
                                                    <div class="col-sm-3">
                                                        <label class="col-form-label text-break" id="modalChangeDate"></label>
                                                    </div>
                                                </div>

                                                <div class="row mb-3">
                                                    <div class="col-sm-3">
                                                        <label class="col-form-label fw-bold">Fecha de Recojo:</label>
                                                    </div>
                                                    <div class="col-sm-3">
                                                        <label class="col-form-label text-break" id="modalPickupDate"></label>
                                                    </div>

                                                    <div class="col-sm-3">
                                                        <label class="col-form-label fw-bold">Fecha de Soporte:</label>
                                                    </div>
                                                    <div class="col-sm-3">
                                                        <label class="col-form-label text-break" id="modalSupportDate"></label>
                                                    </div>
                                                </div>

                                                <div class="row mb-3">
                                                    <div class="col-sm-3">
                                                        <label class="col-form-label fw-bold">Fecha de Venta:</label>
                                                    </div>
                                                    <div class="col-sm-3">
                                                        <label class="col-form-label text-break" id="modalSaleDate"></label>
                                                    </div>

                                                    <div class="col-sm-3">
                                                        <label class="col-form-label fw-bold">Fecha de Encuesta:</label>
                                                    </div>
                                                    <div class="col-sm-3">
                                                        <label class="col-form-label text-break" id="modalSurveyDate"></label>
                                                    </div>
                                                </div>

                                                <div class="row mb-3">
                                                    <div class="col-sm-3">
                                                        <label class="col-form-label fw-bold">Encuesta:</label>
                                                    </div>
                                                    <div class="col-sm-3">
                                                        <label class="col-form-label text-break" id="modalSurveyText"></label>
                                                    </div>

                                                    <div class="col-sm-3">
                                                        <label class="col-form-label fw-bold">Rango Horario:</label>
                                                    </div>
                                                    <div class="col-sm-3">
                                                        <label class="col-form-label text-break" id="modalTimeRange"></label>
                                                    </div>
                                                </div>

                                                <div class="row mb-3">
                                                    <div class="col-sm-3">
                                                        <label class="col-form-label fw-bold">Modelo:</label>
                                                    </div>
                                                    <div class="col-sm-3">
                                                        <label class="col-form-label text-break" id="modalModelText"></label>
                                                    </div>

                                                    <div class="col-sm-3">
                                                        <label class="col-form-label fw-bold">Serie Antiguo:</label>
                                                    </div>
                                                    <div class="col-sm-3">
                                                        <label class="col-form-label text-break" id="modalOldSerial"></label>
                                                    </div>
                                                </div>

                                                <div class="row mb-3">
                                                    <div class="col-sm-3">
                                                        <label class="col-form-label fw-bold">Serie Nueva:</label>
                                                    </div>
                                                    <div class="col-sm-3">
                                                        <label class="col-form-label text-break" id="modalNewSerial"></label>
                                                    </div>

                                                    <div class="col-sm-3">
                                                        <label class="col-form-label fw-bold">Observaciones:</label>
                                                    </div>
                                                    <div class="col-sm-3">
                                                        <label class="col-form-label text-break" id="modalObservation"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('scripts')
    <script>

        function cargarDetallesTarea(id) {
                console.log(id);
                $.ajax({
                url: '/tasks/show/' + id,
                type: 'GET',
                success: function(response) {
                    var taskDetails = response.form_postsale;
                    console.log(taskDetails);
                    $('#modalDocument').text(taskDetails.document);
                    $('#modalBusinessName').text(taskDetails.business_name);
                    $('#modalReceivingPerson').text(taskDetails.receiving_person);
                    $('#modalEmailCustomer').text(taskDetails.email_customer);
                    $('#modalTitularCellphone').text(taskDetails.titular_cellphone);
                    $('#modalAddress').text(taskDetails.address);
                    $('#modalReference').text(taskDetails.reference);
                    $('#modalChangeDate').text(taskDetails.change_date);
                    $('#modalPickupDate').text(taskDetails.pickup_date);
                    $('#modalSupportDate').text(taskDetails.support_date);
                    $('#modalSaleDate').text(taskDetails.sale_date);
                    $('#modalSurveyDate').text(taskDetails.survey_date);
                    $('#modalSurveyText').text(taskDetails.survey_text);
                    $('#modalTimeRanges').text(taskDetails.description);
                    $('#modalModelText').text(taskDetails.model_text);
                    $('#modalOldSerial').text(taskDetails.old_serial);
                    $('#modalNewSerial').text(taskDetails.new_serial);
                    $('#modalObservation').text(taskDetails.observation);

                    $("#postVentaModal").modal('show');

                },
                error: function(error) {
                    console.error('Error al obtener los detalles de la tarea', error.responseJSON.error);
                }
            });


            }
        const tipoTab = "{{ $tipoTab }}";

        // Espera a que el documento esté listo
        document.addEventListener('DOMContentLoaded', () => {
            // Encuentra el elemento con el atributo data-bs-target correspondiente
            const targetSelector = `#navs-pills-justified-${tipoTab}`;
            const button = document.querySelector(`#myTabTask button[data-bs-target="${targetSelector}"]`);


            // Activa la pestaña correspondiente
            if (button) {
                button.click();
            }
        });

        var configParams = {
            columns: [
                {
                    data: 'id'
                },
                {
                    data: 'record_type'
                },
                {
                    data: 'document'
                },
                {
                    data: 'business_name'
                },
                {
                    data: 'management'
                },
                {
                    data: 'description'
                },
                {
                    data: '',
                    render: function (data, type, full, meta) {
                        var btnEliminarPostulante = '<a class="btn btn-sm btn-icon" href="/tasks/destroy/' + full['id'] + '" ><i class="bx bx-trash bx-sm"></i></a>'
                        var btnMostrarOffcanvasEditar = '<a class="btn btn-sm btn-icon" href="/tasks/edit/' + full['id'] + '"><i class="bx bx-edit bx-sm"></i></a>'
                        var btnMostrarDetallesUsuario = "<button  title='Mostrar Detalles de postVenta' onclick='cargarDetallesTarea(" + full['id'] + ");' type='button' class='btn btn-sm btn-icon'><i class='fa fa-eye'></i></i></button>"

                        // var btnMostrarDetallePostulante = '<button class="btn btn-sm btn-icon" onclick="mostrarDetallePostulante(' + full['idpostulante'] + ')"><i class="bx bx-detail bx-sm"></i></button>'
                        return (
                            '<div class="d-inline-block text-nowrap">' +
                            btnMostrarDetallesUsuario +
                            btnMostrarOffcanvasEditar +
                            btnEliminarPostulante +
                            // btnMostrarDetallePostulante +
                            '</div>'
                        );
                    }
                }
            ],
            exportButtons: [
                {
                    format: 'print',
                    text: 'Imprimir'
                },
                {
                    format: 'csv',
                    text: 'Exportar CSV'
                },
                {
                    format: 'excel',
                    text: 'Exportar Excel'
                },
                {
                    format: 'pdf',
                    text: 'Exportar PDF'
                },
                {
                    format: 'copy',
                    text: 'Copiar Portapapeles'
                }
            ],

            exportColumns: [1, 2], // Modificar las columnas para exportar
            ajaxURL: "{{ route('admin.get.tasks.data') }}",
            // showRouteParam: "tasks/show",
            // editRouteParam: "tasks/edit",
            // deleteRouteParam: "tasks/destroy",
            searching: false,
            createRoute: ""
        };

        var configParamsAgendados = {
            columns: [

                {
                    data: 'id'
                },
                {
                    data: 'record_type'
                },
                {
                    data: 'document'
                },
                {
                    data: 'business_name'
                },
                {
                    data: 'management'
                },
                {
                    data: 'description'
                },
                {
                    data: '',
                    render: function (data, type, full, meta) {
                        var btnEliminarPostulante = '<a class="btn btn-sm btn-icon" href="/tasks/destroy/' + full['id'] + '" ><i class="bx bx-trash bx-sm"></i></a>'
                        var btnMostrarOffcanvasEditar = '<a class="btn btn-sm btn-icon" href="/tasks/edit/' + full['id'] + '"><i class="bx bx-edit bx-sm"></i></a>'
                        var btnMostrarDetallesUsuario = "<button  title='Mostrar Detalles de postVenta' onclick='cargarDetallesTarea(" + full['id'] + ");' type='button' class='btn btn-sm btn-icon'><i class='fa fa-eye'></i></i></button>"

                        // var btnMostrarDetallePostulante = '<button class="btn btn-sm btn-icon" onclick="mostrarDetallePostulante(' + full['idpostulante'] + ')"><i class="bx bx-detail bx-sm"></i></button>'
                        return (
                            '<div class="d-inline-block text-nowrap">' +
                            btnMostrarDetallesUsuario +
                            btnMostrarOffcanvasEditar +
                            btnEliminarPostulante +
                            // btnMostrarDetallePostulante +
                            '</div>'
                        );
                    }
                }
            ],
            exportButtons: [{
                    format: 'print',
                    text: 'Imprimir'
                },
                {
                    format: 'csv',
                    text: 'Exportar CSV'
                },
                {
                    format: 'excel',
                    text: 'Exportar Excel'
                },
                {
                    format: 'pdf',
                    text: 'Exportar PDF'
                },
                {
                    format: 'copy',
                    text: 'Copiar Portapapeles'
                }
            ],

            exportColumns: [1, 2], // Modificar las columnas para exportar
            ajaxURL: "{{ route('admin.get.tasks.data.agendadas') }}",
            // showRouteParam: "tasks/show",
            // editRouteParam: "tasks/edit",
            // deleteRouteParam: "tasks/destroy",
            searching: false,
            createRoute: ""
        };

        var configParamsProgramadas = {
            columns: [

                {
                    data: 'id'
                },
                {
                    data: 'record_type'
                },
                {
                    data: 'document'
                },
                {
                    data: 'business_name'
                },
                {
                    data: 'management'
                },
                {
                    data: 'description'
                },
                {
                    data: '',
                    render: function (data, type, full, meta) {
                        var btnEliminarPostulante = '<a class="btn btn-sm btn-icon" href="/tasks/destroy/' + full['id'] + '" ><i class="bx bx-trash bx-sm"></i></a>'
                        var btnMostrarOffcanvasEditar = '<a class="btn btn-sm btn-icon" href="/tasks/edit/' + full['id'] + '"><i class="bx bx-edit bx-sm"></i></a>'
                        var btnMostrarDetallesUsuario = "<button  title='Mostrar Detalles de postVenta' onclick='cargarDetallesTarea(" + full['id'] + ");' type='button' class='btn btn-sm btn-icon'><i class='fa fa-eye'></i></i></button>"

                        // var btnMostrarDetallePostulante = '<button class="btn btn-sm btn-icon" onclick="mostrarDetallePostulante(' + full['idpostulante'] + ')"><i class="bx bx-detail bx-sm"></i></button>'
                        return (
                            '<div class="d-inline-block text-nowrap">' +
                            btnMostrarDetallesUsuario +
                            btnMostrarOffcanvasEditar +
                            btnEliminarPostulante +
                            // btnMostrarDetallePostulante +
                            '</div>'
                        );
                    }
                }
            ],
            exportButtons: [{
                    format: 'print',
                    text: 'Imprimir'
                },
                {
                    format: 'csv',
                    text: 'Exportar CSV'
                },
                {
                    format: 'excel',
                    text: 'Exportar Excel'
                },
                {
                    format: 'pdf',
                    text: 'Exportar PDF'
                },
                {
                    format: 'copy',
                    text: 'Copiar Portapapeles'
                }
            ],

            exportColumns: [1, 2], // Modificar las columnas para exportar
            ajaxURL: "{{ route('admin.get.tasks.data.programadas') }}",
            // showRouteParam: "tasks/show",
            // editRouteParam: "tasks/edit",
            // deleteRouteParam: "tasks/destroy",
            searching: false,
            createRoute: ""
        };

        var configParamsRechazadas = {
            columns: [
                {
                    data: 'id'
                },
                {
                    data: 'record_type'
                },
                {
                    data: 'document'
                },
                {
                    data: 'business_name'
                },
                {
                    data: 'management'
                },
                {
                    data: 'description'
                },
                {
                    data: '',
                    render: function (data, type, full, meta) {
                        var btnEliminarPostulante = '<a class="btn btn-sm btn-icon" href="/tasks/destroy/' + full['id'] + '" ><i class="bx bx-trash bx-sm"></i></a>'
                        var btnMostrarOffcanvasEditar = '<a class="btn btn-sm btn-icon" href="/tasks/edit/' + full['id'] + '"><i class="bx bx-edit bx-sm"></i></a>'
                        var btnMostrarDetallesUsuario = "<button  title='Mostrar Detalles de postVenta' onclick='cargarDetallesTarea(" + full['id'] + ");' type='button' class='btn btn-sm btn-icon'><i class='fa fa-eye'></i></i></button>"

                        // var btnMostrarDetallePostulante = '<button class="btn btn-sm btn-icon" onclick="mostrarDetallePostulante(' + full['idpostulante'] + ')"><i class="bx bx-detail bx-sm"></i></button>'
                        return (
                            '<div class="d-inline-block text-nowrap">' +
                            btnMostrarDetallesUsuario +
                            btnMostrarOffcanvasEditar +
                            btnEliminarPostulante +
                            // btnMostrarDetallePostulante +
                            '</div>'
                        );
                    }
                }
            ],
            exportButtons: [
                {
                    format: 'print',
                    text: 'Imprimir'
                },
                {
                    format: 'csv',
                    text: 'Exportar CSV'
                },
                {
                    format: 'excel',
                    text: 'Exportar Excel'
                },
                {
                    format: 'pdf',
                    text: 'Exportar PDF'
                },
                {
                    format: 'copy',
                    text: 'Copiar Portapapeles'
                }
            ],

            exportColumns: [1, 2], // Modificar las columnas para exportar
            ajaxURL: "{{ route('admin.get.tasks.data.rechazadas') }}",
            // showRouteParam: "tasks/show",
            // editRouteParam: "tasks/edit",
            // deleteRouteParam: "tasks/destroy",
            searching: false,
            createRoute: ""
        };
        // Llamar a createDataTableConfig con los parámetros
        var dataTableConfig = ExportHelper.createDataTableConfig(configParams);
        var dataTableConfigAgendados = ExportHelper.createDataTableConfig(configParamsAgendados);
        var dataTableConfigProgramadas = ExportHelper.createDataTableConfig(configParamsProgramadas);
        var dataTableConfigRechazadas = ExportHelper.createDataTableConfig(configParamsRechazadas);

        // Inicializar el DataTable en un elemento HTML específico (por ejemplo, con el ID "miDataTable")
        $('#tableBackDt').DataTable(dataTableConfig);
        $('#tableBackDtPro').DataTable(dataTableConfigProgramadas);
        $('#tableBackDtAng').DataTable(dataTableConfigAgendados);
        $('#tableBackDtRe').DataTable(dataTableConfigRechazadas);


    </script>
@endsection