@extends('adminlte::page')

@section('title', 'Dashboard')


@section('content')
    <div class="container mt-5">
        <h2 class="mb-4">Pagar Alquiler</h2>
        <form method="POST" action="{{ route('alquiler.store') }}" id="formVenta">
            @csrf
            <div class="row">
                <div class="col-md-12">
                    <div class="row" id="res"></div>
                    <div class="row mt-3">
                        <div class="col-md-1 d-none">
                            <label class="labels">ID_ARRENDATARIO</label>
                            <input type="text" id="idarrendatario" name="idarrendatario" class="form-control" readonly>
                        </div>
                        <div class="col-md-9">
                            <label class="labels">ARRENDATARIO</label>
                            <input type="text" id="arrendatario" name="arrendatario" class="form-control"
                                   placeholder="Buscar arrendatario">
                            <ul id="resultadosarrendatario" class="list-group" style="display: none;"></ul>
                        </div>
                        <div class="col-md-3">
                            <label class="labels">DNI</label>
                            <input type="text" id="dni" name="dni" class="form-control" readonly>
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-md-1 d-none">
                            <label class="labels">ID</label>
                            <input type="text" id="idinmueble" name="idinmueble" class="form-control">
                        </div>
                        <div class="col-md-7">
                            <label class="labels">INMUEBLE</label>
                            <input type="text" id="inmueble" name="inmueble" class="form-control"
                                   placeholder="Buscar inmueble">
                            <ul id="resultadosInmueble" class="list-group" style="display: none;"></ul>
                        </div>
                        <div class="col-md-2">
                            <label class="labels">PRECIO ALQUILER</label>
                            <input type="text" id="monto" name="monto" class="form-control">
                        </div>
                        <div class="col-md-3">
                            <label for="meses">Selecciona un mes:</label>
                            <select id="meses" name="meses" class="form-control">
                                <option value="Enero">Enero</option>
                                <option value="Febrero">Febrero</option>
                                <option value="Marzo">Marzo</option>
                                <option value="Abril">Abril</option>
                                <option value="Mayo">Mayo</option>
                                <option value="Junio">Junio</option>
                                <option value="Julio">Julio</option>
                                <option value="Agosto">Agosto</option>
                                <option value="Septiembre">Septiembre</option>
                                <option value="Octubre">Octubre</option>
                                <option value="Noviembre">Noviembre</option>
                                <option value="Diciembre">Diciembre</option>
                            </select>
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-md-12">
                            <label class="labels">&nbsp;</label>
                            <button class="btn btn-success btn-block" type="button" id="btnAgregar"><i
                                    class="fa fa-plus"></i> Agregar
                            </button>
                            <button class="btn btn-warning btn-block" type="button" id="btnLimpiar">
                                Limpiar
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </form> <!-- Fin del formulario principal -->
        <div class="form-group col-lg-3 col-md-3 col-sm-6 col-xs-12"></div>
        <div class="form-group col-lg-12 col-md-12 col-xs-12 mt-4">
            <table id="detallesVentaTemporal" class="table table-striped table-bordered table-hover">
                <thead class="thead-dark">
                <th>ID</th>
                <th>Inmueble</th>
                <th>Precio Alquiler</th>
                <th>Mes</th>
                <th>Total</th>
                <th>Acciones</th>
                </thead>
                <tbody></tbody>
                <tfoot>
                <tr>
                    <td colspan="4" class="text-right"><strong>SubTotal:</strong></td>
                    <td id="subtotal" class="text-center">0.00</td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan="4" class="text-right"><strong>Monto Total:</strong></td>
                    <td id="total" class="text-center">0.00</td>
                    <td></td>
                </tr>
                </tfoot>
            </table>
            <div class="form-group col-md-3 mx-auto">
                <button class="btn btn-primary btn-block" type="button" id="btnRealizarCobro">
                    <i class="fa fa-money-bill"></i> Realizar Cobro
                </button>
            </div>
            <div class="form-group col-md-3 mx-auto">
                <a href="{{ route('alquiler') }}"
                   class="btn btn-secondary btn-block">
                    Cancelar
                </a>
            </div>
        </div>
    </div>
@stop

@section('css')
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <style>
        body {
            background-color: #f8f9fa;
        }
        .btn-primary {
            background-color: #007bff;
            border-color: #007bff;
            border-radius: 5px;
        }
        .btn-secondary {
            background-color: #6c757d;
            border-color: #6c757d;
            border-radius: 5px;
        }
        .btn-success {
            background-color: #28a745;
            border-color: #28a745;
            border-radius: 5px;
        }
        .btn-warning {
            background-color: #ffc107;
            border-color: #ffc107;
            border-radius: 5px;
        }
        .form-control {
            border-radius: 5px;
        }
        .list-group-item {
            cursor: pointer;
        }
        .thead-dark {
            background-color: #343a40;
            color: white;
        }
        .btn-block {
            padding: 10px 0;
        }
    </style>
@stop

@section('js')
    <script> console.log("Hi, I'm using the Laravel-AdminLTE package!");

    const arrendatario = {!! json_encode($arrendatario) !!};

    document.getElementById('arrendatario').addEventListener('input', function() {
        buscarArrendatarioEnTiempoReal(this.value);
    });

    function buscarArrendatarioEnTiempoReal(query) {
        const resultadosarrendatario = document.getElementById('resultadosarrendatario');
        resultadosarrendatario.innerHTML = '';

        const resultadosFiltrados = arrendatario.filter(arrendatario => arrendatario.nombre.toLowerCase().includes(query.toLowerCase()));

        resultadosFiltrados.forEach(arrendatario => {
            const listItem = document.createElement('li');
            listItem.className = 'list-group-item';
            listItem.textContent = arrendatario.nombre;

            listItem.addEventListener('click', function() {
                document.getElementById('arrendatario').value = arrendatario.nombre;
                document.getElementById('dni').value = arrendatario.dni || 'documento no disponible';
                document.getElementById('idarrendatario').value = arrendatario.id || 'id no disponible';
                resultadosarrendatario.style.display = 'none';
            });

            resultadosarrendatario.appendChild(listItem);
        });

        resultadosarrendatario.style.display = resultadosFiltrados.length > 0 ? 'block' : 'none';
    }

    // Supongamos que $inmueble contiene los datos de productos disponibles en la vista
    const inmueble = {!! json_encode($inmueble) !!};

document.getElementById('inmueble').addEventListener('input', function() {
    buscarInmuebleEnTiempoReal(this.value);
});

function buscarInmuebleEnTiempoReal(query) {
    const resultadosInmueble = document.getElementById('resultadosInmueble');
    resultadosInmueble.innerHTML = '';

    const resultadosFiltrados = inmueble.filter(inmueble => inmueble.direccion.toLowerCase().includes(query.toLowerCase()));

    resultadosFiltrados.forEach(inmueble => {
        const listItem = document.createElement('li');
        listItem.className = 'list-group-item';
        listItem.textContent = inmueble.direccion;

        listItem.addEventListener('click', function() {
            // Llenar los campos correspondientes al hacer clic en el resultado
            document.getElementById('idinmueble').value = inmueble.id;
            document.getElementById('inmueble').value = inmueble.direccion || 'dirección no disponible';
            // Ocultar la lista de resultados después de la selección
            resultadosInmueble.style.display = 'none';
        });

        resultadosInmueble.appendChild(listItem);
    });

    resultadosInmueble.style.display = resultadosFiltrados.length > 0 ? 'block' : 'none';
}
    </script>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#btnAgregar').on('click', function () {
                agregarItem();
            });
            $('#btnLimpiar').on('click', function () {
                clearInputs();
            });
            $('#btnRealizarCobro').on('click', function () {
                realizarCobro();
            });
            $(document).on('click', '.btnEliminar', function () {
                $(this).closest('tr').remove();
                actualizarTotal();
            });
        });

        function agregarItem() {
            var id_inmueble = parseInt($('#idinmueble').val());
            var inmueble = $('#inmueble').val();
            var monto = parseFloat($('#monto').val());
            var meses = $('#meses').val();

            if (inmueble === '' || isNaN(monto) || monto <= 0 || isNaN(monto)) {
                alert('Completa los campos correctamente.');
                return;
            }

            var mesesExistente = false;
            $('#detallesVentaTemporal tbody tr').each(function () {
                var mesesEnTabla = $(this).find('td:eq(3)').text().trim();
                if (mesesEnTabla === meses) {
                    mesesExistente = true;
                    return false;
                }
            });

            if (mesesExistente) {
                alert('El mes ya está en la lista.');
                return;
            }

            var newRow = "<tr>" +
                "<td>" + id_inmueble + "</td>" +
                "<td>" + inmueble + "</td>" +
                "<td>" + monto + "</td>" +
                "<td>" + meses + "</td>" +
                "<td>" + monto + "</td>" +
                "<td><button class='btn btn-danger btn-sm btnEliminar'>Eliminar</button></td>" +
                "</tr>";

            $('#detallesVentaTemporal tbody').append(newRow);
            actualizarTotal();
            clearInputs();
        }

        function actualizarTotal() {
            var subtotal = 0;
            $('#detallesVentaTemporal tbody tr').each(function () {
                subtotal += parseFloat($(this).find('td:eq(4)').text());
            });
            $('#subtotal').text(subtotal.toFixed(2));
            var total = subtotal;
            $('#total').text(total.toFixed(2));
        }

        function realizarCobro() {
            var idarrendatario = $('#idarrendatario').val();
            if (idarrendatario === '') {
                alert('Selecciona un arrendatario válido.');
                return;
            }

            if ($('#detallesVentaTemporal tbody tr').length === 0) {
                alert('Agrega al menos un ítem al detalle.');
                return;
            }

            var detallesAlquiler = [];
            $('#detallesVentaTemporal tbody tr').each(function () {
                var id = parseInt($(this).find('td:eq(0)').text());
                var inmueble = $(this).find('td:eq(1)').text();
                var monto = parseInt($(this).find('td:eq(2)').text());
                var meses = $(this).find('td:eq(3)').text();
                var total = parseFloat($(this).find('td:eq(4)').text());

                detallesAlquiler.push({
                    id: id,
                    inmueble: inmueble,
                    monto: monto,
                    meses: meses,
                    total: total
                });
            });

            var subtotal = parseFloat($('#subtotal').text());
            var total = parseFloat($('#total').text());

            $.ajax({
                url: 'https://beneficenciaguadalupe.com/sistemanichos/public/alquiler/store',
                method: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    idarrendatario: idarrendatario,
                    detallesAlquiler: detallesAlquiler,
                    subtotal: subtotal,
                    total: total
                },
                success: function (response) {
                    if (response.success) {
                        const id_alquiler = response.alquiler_id;
                        const url = '{{ route("alquiler.export", ":id") }}'.replace(':id', id_alquiler);
                        window.open(url, '_blank');
                        window.location.href = 'https://beneficenciaguadalupe.com/sistemanichos/public/alquiler';
                    } else {
                        alert('Error al realizar el alquiler');
                    }
                },
                error: function () {
                    alert('Error de conexión');
                }
            });
        }

        function clearInputs() {
            $('#monto').val('');
        }
    </script>
@stop