@extends('layouts.app')

@push('plugin-styles')
    <link href="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.css') }}" rel="stylesheet"/>
    <link href="{{ asset('assets/plugins/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet"/>
@endpush

@section('content')
    <nav class="page-breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">...</a></li>
            <li class="breadcrumb-item active" aria-current="page">Medios comunicación</li>
        </ol>
    </nav>

    <div class="row">
        <div class="col-md-12 grid-margin stretch-card">
            <div class="card">
                <div class="card-body">
                        <div class="row mb-3">
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="f_ini" class="form-label">Fecha inicio</label>
                                    <input type="date" id="f_ini" name="f_ini" class="form-control">
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="f_fin" class="form-label">Fecha fin</label>
                                    <input type="date" id="f_fin" name="f_fin" class="form-control">
                                </div>
                            </div>

                            <div class="col-md-4">
                                <a href="javascript:void(0)" onclick="exportExcel()" class="btn btn-outline-success btn-icon">
                                    <i data-feather="download"></i> <!-- Feather icon (NobleUI usa Feather) -->
                                </a>
{{--                                <div class="btn-group">--}}
{{--                                    <button type="button" class="btn btn-primary" onclick="buscar()">--}}
{{--                                        <i data-feather="search" class="me-1"></i> Buscar--}}
{{--                                    </button>--}}
{{--                                    <button type="reset" class="btn btn-secondary btn-clear">--}}
{{--                                        <i data-feather="x-circle" class="me-1"></i> Limpiar--}}
{{--                                    </button>--}}
{{--                                </div>--}}
                            </div>
                        </div>


                    <div id="detail" class="mt-3" style="display: none;"></div>



                    <a href="{{route('medios.create')}}">
                        <button type="button" class="btn btn-primary btn-icon-text">
                            <i class="btn-icon-prepend" data-feather="plus-circle"></i>
                            Crear Medio
                        </button>
                    </a>
                    <br><br>


                    <div class="table-responsive">
                        <table id="dataTableExample" class="table">
                            <thead>
                            <tr>
                                <th>Nombre</th>
                                <th>Periodo</th>
                                <th>Link Compartido</th>
                                <th>Es para el home?? </th>
                                <th>Estatus</th>
                                <th>Opciones</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach ($medios as $item)
                                <tr>
                                    <td> {{$item->nombre_medio}}</td>
                                    <td> {{$item->fecha_inicio}} AL {{$item->fecha_fin}}</td>
                                    <td> {{$item->link}}</td>
                                    <td>
                                        @if($item->principal == 1)
                                            Home
                                        @else
                                            sitio de visita:<br> {{$item->link_lista}}
                                        @endif
                                    </td>


                                    <td>
                                        {{-- Campo oculto para enviar valor 0 si está apagado --}}
                                        {!! Form::hidden("estatus[{$item->id}]", 0) !!}

                                        <div class="form-check form-switch">
                                            {!! Form::checkbox("estatus[{$item->id}]", 1, $item->estatus == 1, [
                                                'class' => 'form-check-input estatus-switch',
                                                'id' => "estatus_{$item->id}",
                                                'data-id' => $item->id, // importante para identificar el item
                                            ]) !!}
                                            <label class="form-check-label" for="estatus_{{ $item->id }}">
                                                {{ $item->estatus == 1 ? 'Activo' : 'Inactivo' }}
                                            </label>
                                        </div>
                                    </td>
                                    <td>
                                        {!! Form::open(['route' => ['medios.destroy', $item->id], 'method'=>'DELETE', 'class' => 'd-inline form-delete']) !!}
                                        <a href="#" class="delete2" data-form="{{ $item->id }}">
                                            <i data-feather="trash-2"></i>
                                        </a>
                                        {!! Form::close() !!}
{{--                                        <button type="button" class="btn btn-sm btn-light">--}}
{{--                                            <i data-feather="trash-2"></i>--}}
{{--                                        </button>--}}
                                        <a href="{{route("medios.edit", $item->id)}}"
                                           class="btn btn-sm btn-light">
                                            <i data-feather="edit-2"></i>
                                        </a>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('plugin-scripts')
    <script src="{{ asset('assets/plugins/datatables-net/jquery.dataTables.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.js') }}"></script>
    <script src="{{ asset('assets/plugins/sweetalert2/sweetalert2.min.js') }}"></script>
@endpush

@push('page-scripts')
    <script type="text/javascript">
        function buscar(){
            console.log("holaaaa")
            let fecha_ini = $('#f_ini').val();
            let fecha_fin = $('#f_fin').val();
            $.ajax({
                url: "{{ url('reportevisitas') }}",
                type: 'get',
                data: {fecha_ini,fecha_fin},
                success: function(response) {
                    $("#data-table-row-groupinges").dataTable().fnDestroy();
                    $("#detail").html(response);
                    var table = $("#data-table-row-groupinges").DataTable(
                        {
                            "processing": true,
                            "pageLength": 5,
                            "dom": 'lBfrtip',
                            "buttons": [{
                                extend: 'collection',
                                text: 'Export',
                                buttons: [
                                    'copy',
                                    'excel',
                                    'csv',
                                    'pdf',
                                    'print'
                                ]
                            }],
                            "language": {
                                "sProcessing":    "Procesando...",
                                "sLengthMenu":    "Mostrar _MENU_ registros",
                                "sZeroRecords":   "No se encontraron resultados",
                                "sEmptyTable":    "Ningún dato disponible en esta tabla",
                                "sInfo":          "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
                                "sInfoEmpty":     "Mostrando registros del 0 al 0 de un total de 0 registros",
                                "sInfoFiltered":  "(filtrado de un total de _MAX_ registros)",
                                "sInfoPostFix":   "",
                                "sSearch":        "Buscar:",
                                "sUrl":           "",
                                "sInfoThousands":  ",",
                                "sLoadingRecords": "Cargando...",
                                "oPaginate": {
                                    "sFirst":    "Primero",
                                    "sLast":    "Último",
                                    "sNext":    "Siguiente",
                                    "sPrevious": "Anterior"
                                },
                                "oAria": {
                                    "sSortAscending":  ": Activar para ordenar la columna de manera ascendente",
                                    "sSortDescending": ": Activar para ordenar la columna de manera descendente"
                                }
                            },
                            "button": "csv"

                        }
                    );
                    $("#detail").show();


                },
                error: function(xhr, status, error) {
                    alert('Falló con exito');

                }
            })
        }

        $(document).on('change', '.estatus-switch', function() {
            console.log("holaaa")
            let checkbox = $(this);
            let id = checkbox.data('id');
            let estatus = checkbox.is(':checked') ? 1 : 0;

            $.ajax({
                url: "{{ route('items.updateEstatus') }}", // Ruta definida en web.php
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    id: id,
                    estatus: estatus
                },
                success: function(response) {
                    let label = checkbox.closest('td').find('label');
                    label.text(estatus ? 'Activo' : 'Inactivo');

                    Swal.fire({
                        title: '¡Actualizado!',
                        text: response.message ?? 'Estatus actualizado correctamente.',
                        icon: 'success',
                        confirmButtonColor: '#3085d6',
                        confirmButtonText: 'OK',
                        timer: 2000,
                        timerProgressBar: true
                    });
                },
                error: function() {
                    checkbox.prop('checked', !estatus);

                    Swal.fire({
                        title: 'Error',
                        text: 'Ocurrió un error al actualizar el estatus.',
                        icon: 'error',
                        confirmButtonColor: '#d33',
                        confirmButtonText: 'Cerrar'
                    });
                }
            });
        });

        function exportExcel(){
            let fecha_ini = $('#f_ini').val();
            let fecha_fin = $('#f_fin').val();


                $.ajax({
                    url: "{{ url('imprimirvisitas') }}",
                    type: 'GET',
                    data: {fecha_ini,fecha_fin},
                    xhrFields: {
                        responseType: 'blob'
                    },
                    beforeSend: function() {

                    },
                    success: function(response) {
                        var blob = new Blob([response]);

                        var link = document.createElement('a');
                        link.href = window.URL.createObjectURL(blob);
                        link.download = "ReporteVisitas.xlsx";
                        link.click();


                    },
                    error: function(error) {
                        console.log(error);
                    }
                })
        }
        $(document).ready(function () {
            $('#dataTableExample').DataTable({
                "aLengthMenu": [
                    [10, 30, 50, -1],
                    [10, 30, 50, "All"]
                ],
                "iDisplayLength": 10,
                "language": {
                    search: "Buscar"
                },
                "order": [0, "desc"]
            });
            $(".delete2").click(function (e) {
                e.preventDefault();
                let formId = $(this).data("form");
                let form = $(this).closest(".form-delete");

                swal.fire({
                    title: "¿Está seguro?",
                    text: "Al oprimir el botón de aceptar se eliminará el registro",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Aceptar'
                }).then((result) => {
                    if (result.value) {
                        console.log("Enviando formulario de eliminación para ID:", formId);
                        form.submit();
                    }
                });
            });
            //
            // $(".delete").click(function (e) {
            //     e.preventDefault();
            //     swal.fire({
            //         title: "¿Está seguro?",
            //         text: "Al oprimir el botón de aceptar se eliminará el registro",
            //         icon: 'warning',
            //         showCancelButton: true,
            //         confirmButtonColor: '#3085d6',
            //         cancelButtonColor: '#d33',
            //         confirmButtonText: 'Aceptar'
            //     }).then((result) => {
            //
            //         if (result.value) {
            //             console.log("si entro");
            //             $("#formdelete").submit();
            //         }
            //     });
            // });
            @if (session('created') == 'success')
            Swal.fire({
                position: 'top-end',
                icon: 'success',
                title: 'Exito',
                text: 'Se ha guardado correctamente!',
                showConfirmButton: false,
                timer: 1500
            })
            @endif
            @if (session('edit') == 'ok')
            Swal.fire({
                position: 'top-end',
                icon: 'success',
                title: 'Se ha modificado correctamente el registro.',
                showConfirmButton: false,
                timer: 1500
            })
            @endif
        });
        @if(session('delete') == 'ok')
        swal.fire({
            title: 'Eliminado',
            text: 'Registro eliminado correctamente',
            icon: 'success',
        })
        @endif

    </script>
@endpush