@extends('admin.layout.master')

@section('content')
<main>
    <!-- Breadcrumb Area -->
    <div class="breadcrumb-area">
        <h1>Dashboard</h1>
        <ol class="breadcrumb">
            MIS VENTAS
        </ol>
    </div>
    <style>
        .select2-container {
            width: 100% !important;
            /* Asegura que Select2 use el 100% del contenedor */
        }

        .select2-selection {
            min-height: 40px;
            /* Ajusta la altura mínima */
            padding: 10px;
            /* Espaciado interno */
            font-size: 16px;
            /* Tamaño de texto adecuado */
        }
    </style>

    <div class="card mb-30">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3>Lista de Ventas</h3>
            <a href="javascript:void(0)" class="btn btn-info rounded-pill" id="newSaleButton">
                <i class='bx bxs-pencil'></i> Nueva Venta Manual
            </a>
        </div>
    
        <div class="card-body">
            <!-- Tabla de Ventas -->
            <div class="table-responsive">
                <table id="tablaVentas" class="table" cellspacing="0" cellpadding="0" width="100%">
                    <thead>
                        <tr>
                            <th>N.</th>
                            <th>Usuario</th>
                            <th>correo</th>
                            <th>Publicación</th>
                            <th>Monto</th>
                            <th>Moneda</th>
                            <th>Método Pago</th>
                            <th>Fecha Pago</th>
                            <th>Estado</th>
                            <th>Voucher</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($ventas as $key => $venta)
                        <tr>
                            <td>{{ $venta->id}}</td>
                            <td>{{ $venta->user->nombre ??''}}</td>
                            <td>{{ $venta->user->email??''}}</td>
                            <td>{{ $venta->publicacion->nombre??'' }}</td>
                            <td>{{ $venta->monto??'' }}</td>
                            <td>{{ $venta->moneda??'' }}</td>
                            <td>{{ $venta->metodo_pago??'Manual' }}</td>
                            <td>{{ $venta->created_at->format('d/m/Y')??''}}</td>
                            <td>{{ $venta->estado??'' }}</td>
                            <td>
                                @if ($venta->voucher)
                                <a href="{{ asset('vouchers/'.$venta->voucher) }}" target="_blank" class="btn btn-primary btn-xs">Ver</a>
                                @else
                                Pago Pasarela
                                @endif
                            </td>
                            <td>
                                <button type="button" class="btn btn-primary btn-xs" onclick="editarVenta({{ $venta->id }})">
                                    <span class='bx bx-pencil'></span>
                                </button>
                                <button type="button" class="btn btn-danger btn-xs" onclick="eliminarVenta({{ $venta->id }})">
                                    <span class='bx bx-trash'></span>
                                </button>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    
        <!-- Modal para Crear/Editar Venta -->
        <div id="ventaFormModal" class="modal fade" role="dialog">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Registrar Nueva Venta Manual</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <div class="modal-body">
                        <form id="ventaForm" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" id="venta_id" name="venta_id">

                            <div class="form-group">
                                <label for="user_id">Usuario:</label>
                                <select name="user_id" id="user_id" class="form-control select2" style="width: 100%;" required multiple>
                                    @foreach ($usuarios as $suscrito)
                                        <option value="{{ $suscrito->id }}">{{ $suscrito->nombre }} - {{ $suscrito->email }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <!-- Select para publicaciones -->
                            <div class="form-group">
                                <label for="publicacion_id">Publicación:</label>
                                <select class="form-control select2" id="publicacion_id" name="publicacion_id" required multiple >
                                    @foreach($publicaciones as $publicacion)
                                        <option value="{{ $publicacion->id }}">{{ $publicacion->nombre }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="monto">Monto:</label>
                                <input type="number" class="form-control" id="monto" name="monto" required>
                            </div>
                            <div class="form-group">
                                <label for="moneda">Moneda:</label>
                                <select class="form-control" id="moneda" name="moneda">
                                    <option value="PEN">PEN</option>
                                    <option value="USD">USD</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="voucher">Voucher (Solo Ventas Manuales):</label>
                                <input type="file" class="form-control" id="voucher" name="voucher" accept="image/*,application/pdf">
                            </div>
                            <div class="form-group">
                                <label for="estado">Estado:</label>
                                <select class="form-control" id="estado" name="estado">
                                    <option value="completado">Completado</option>
                                    <option value="pendiente">Pendiente</option>
                                </select>
                            </div>
                            <button type="button" class="btn btn-success" id="guardarVentaBtn">Guardar Venta</button>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            // Inicializar DataTable con botones de exportación
            $('#tablaVentas').DataTable({
                "paging": true,
                "lengthChange": false,
                "searching": true,
                "ordering": true,
                "order": [[0, "desc"]], 
                "info": true,
                "autoWidth": false,
                "responsive": true,
                "pageLength": 10,
                "dom": 'Bfrtip',
                "buttons": [
                    'excel', 
                ]
            });

            // Inicializar Select2
            $('#user_id').select2({
            placeholder: 'Seleccione un usuario',
            allowClear: true,
            width: '100%',
        });
        $('#publicacion_id').select2({
            placeholder: 'Seleccione una publicación',
            allowClear: true,
            width: '100%',
            minimumResultsForSearch: Infinity
        });
            // Mostrar formulario de nueva venta manual
            $('#newSaleButton').on('click', function() {
                $('#ventaForm')[0].reset();
                $('#venta_id').val('');
                $('#ventaFormModal').modal('show');
            });

            // Guardar venta manual
            $('#guardarVentaBtn').on('click', function() {
                let formData = new FormData($('#ventaForm')[0]);
                let url = '{{ route("ventas.store") }}';

                $.ajax({
                    url: url,
                    type: 'POST',
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function(response) {
                        if (response.state === '0') {
                            alert('Venta guardada exitosamente.');
                            $('#ventaFormModal').modal('hide');
                            location.reload();
                        } else {
                            alert('Error: ' + response.mensaje);
                        }
                    },
                    error: function(response) {
                        alert('Error al guardar la venta.');
                    }
                });
            });
        });

        // Función para editar venta
        function editarVenta(id) {
            $.ajax({
                url: '{{ url("/admin/ventas/editar") }}/' + id,
                type: 'GET',
                success: function(response) {
                    $('#venta_id').val(response.id);
                    $('#user_id').val(response.user_id).trigger('change');
                    $('#publicacion_id').val(response.publicacion_id).trigger('change');
                    $('#monto').val(response.monto).attr('disabled',true);
                    $('#moneda').val(response.moneda);
                    $('#estado').val(response.estado);
                    $('#ventaFormModal').modal('show');
                },
                error: function(response) {
                    alert('Error al obtener los datos de la venta.');
                }
            });
        }

        // Función para eliminar venta
        function eliminarVenta(id) {
            if (confirm('¿Estás seguro de eliminar esta venta?')) {
                $.ajax({
                    url: '{{ url("/admin/ventas/eliminar") }}/' + id,
                    type: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                    },
                    success: function(response) {
                        location.reload();
                        alert('Venta eliminada exitosamente.');
                    },
                    error: function(response) {
                        alert('Error al eliminar la venta.');
                    }
                });
            }
        }
    </script>
</main>
@endsection