@extends('adminlte::page')

@section('content_header')
    <h1><b>Ventas/Registro de una nueva venta</b></h1>
    <hr>
@stop

@section('content')
    <div class="row">
        <div class="col-md-12">
            <div class="card card-outline card-primary">
                <div class="card-header">
                    <h3 class="card-title">Ingrese los datos</h3>
                </div>
                <div class="card-body">
                    <form action="{{url('/admin/ventas/create')}}" id="form_venta" method="post">
                        @csrf
                        <div class="row">
                            <div class="col-md-8">
                                <div class="row">
                                    <div class="col-md-2">
                                        <div class="form-group">
                                            <label for="cantidad">Cantidad</label><b> *</b>
                                            <input type="number" style="text-align: center;background-color: #ebe7ae" class="form-control" id="cantidad" value="1" required>
                                            @error('cantidad')
                                            <small style="color: red;">{{$message}}</small>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="">Codigo</label>
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text"><i class="fas fa-barcode"></i></span>
                                            </div>
                                            <input id="codigo" type="text" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <div style="height: 32px"></div>
                                            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"><i class="fas fa-search"></i></button>
                                            <!-- Modal -->
                                            <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                                <div class="modal-dialog modal-lg">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h5 class="modal-title" id="exampleModalLabel">Listado de productos</h5>
                                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                                <span aria-hidden="true">&times;</span>
                                                            </button>
                                                        </div>
                                                        <div class="modal-body">
                                                            <table id="mitabla" class="table table-striped table-bordered table-hover table-sm table-responsive">
                                                                <thead class="thead-light">
                                                                <tr>
                                                                    <th scope="col" style="text-align: center">Nro</th>
                                                                    <th scope="col" style="text-align: center">Acción</th>
                                                                    <th scope="col">Categoría</th>
                                                                    <th scope="col">Código</th>
                                                                    <th scope="col">Nombre</th>
                                                                    <th scope="col">Descripción</th>
                                                                    <th scope="col">Descuento (%)</th>
                                                                    <th scope="col">Stock</th>
                                                                    <th scope="col">Precio venta</th>
                                                                    <th scope="col">Imagen</th>
                                                                </tr>
                                                                </thead>
                                                                <tbody>
                                                                                                                                @foreach($productos as $producto)
                                                                    <tr>
                                                                        <td style="text-align: center;vertical-align: middle">{{$contador++}}</td>
                                                                        <td style="text-align: center;vertical-align: middle">
                                                                            <button type="button" class="btn btn-info seleccionar-btn" data-id="{{$producto->codigo}}">Seleccionar</button>
                                                                        </td>
                                                                        <td style="vertical-align: middle">{{$producto->categoria->nombre}}</td>
                                                                        <td style="vertical-align: middle">{{$producto->codigo}}</td>
                                                                        <td style="vertical-align: middle">{{$producto->nombre}}</td>
                                                                        <td style="vertical-align: middle">{{$producto->descripcion}}</td>
                                                                        <td style="vertical-align: middle">{{$producto->descuento}}</td>
                                                                        <td style="text-align: center;vertical-align: middle;background-color: rgba(233,231,16,0.15)">{{$producto->stock}}</td>
                                                                        <td style="text-align: center;vertical-align: middle">{{$producto->precio_venta}}</td>
                                                                        <td style="text-align: center">
                                                                            <img src="{{asset('storage/'.$producto->imagen)}}" width="80px" alt="imagen">
                                                                        </td>
                                                                    </tr>
                                                                @endforeach
                                                                </tbody>
                                                            </table>
                                                        </div>
                                                        <div class="modal-footer">
                                                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <a href="{{url('/admin/productos/create')}}" type="button" class="btn btn-success"><i class="fas fa-plus"></i></a>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <table class="table table-sm table-striped table-bordered table-hover">
                                        <thead>
                                        <tr style="background-color: #cccccc">
                                            <th>Nro</th>
                                            <th>Codígo</th>
                                            <th>Cantidad</th>
                                            <th>Nombre</th>
                                            <th>Descuento (%)</th>
                                            <th>Costo</th>
                                            <th>Total</th>
                                            <th>Acción</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                                                                @foreach($tmp_ventas as $tmp_venta)
                                            <tr>
                                                <td style="text-align: center">{{$cont++}}</td>
                                                <td style="text-align: center">{{$tmp_venta->producto->codigo}}</td>
                                                <td style="text-align: center">{{$tmp_venta->cantidad}}</td>
                                                <td>{{$tmp_venta->producto->nombre}}</td>
                                                <!-- Descuento mostrado en porcentaje -->
                                                <td style="text-align: center">{{$tmp_venta->producto->descuento}}%</td>
                                                <td style="text-align: center">{{$tmp_venta->producto->precio_venta}}</td>
                                                <td style="text-align: center">{{ $costo = $tmp_venta->cantidad * ($tmp_venta->producto->precio_venta * (1 - $tmp_venta->producto->descuento / 100)) }}</td>
                                                <td style="text-align: center">
                                                    <button type="button" class="btn btn-danger btn-sm delete-btn" data-id="{{$tmp_venta->id}}"><i class="fas fa-trash"></i></button>
                                                </td>
                                            </tr>
                                            @php
                                                $total_cantidad += $tmp_venta->cantidad;
                                                $total_venta += $costo;
                                            @endphp
                                        @endforeach
                                        </tbody>
                                        <tfooter>
                                            <tr>
                                                <td colspan="2" style="text-align: right"><b>Total cantidad</b></td>
                                                <td style="text-align: center"><b>{{$total_cantidad}}</b></td>
                                                <td colspan="2" style="text-align: right"><b>Total venta</b></td>
                                                <td style="text-align: center"><b>{{$total_venta}}</b></td>
                                            </tr>
                                        </tfooter>
                                    </table>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="row">
                                    <div class="col-md-6">
                                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal_cliente"><i class="fas fa-search"></i> Buscar cliente</button>
                                        <button type="button" class="btn btn-success" data-toggle="modal" data-target="#exampleModal_crear_cliente"><i class="fas fa-plus"></i></button>
                                        <!-- Modal -->
                                        <div class="modal fade" id="exampleModal_cliente" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                            <div class="modal-dialog modal-lg">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title" id="exampleModalLabel">Listado de clientes</h5>
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                            <span aria-hidden="true">&times;</span>
                                                        </button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <table id="mitabla2" class="table table-striped table-bordered table-hover table-sm table-responsive">
                                                            <thead class="thead-light">
                                                            <tr>
                                                                <th scope="col" style="text-align: center; font-size: 14px; padding: 10px; width: 60px;">Nro</th>
                                                                <th scope="col" style="text-align: center; font-size: 14px; padding: 10px; width: 100px;">Acción</th>
                                                                <th scope="col" style="font-size: 14px; padding: 10px; width: 200px;">Nombre del cliente</th>
                                                                <th scope="col" style="font-size: 14px; padding: 10px; width: 180px;">N°Cedula/Código</th>
                                                                <th scope="col" style="font-size: 14px; padding: 10px; width: 150px;">Teléfono</th>
                                                                <th scope="col" style="font-size: 14px; padding: 10px; width: 200px;">Email</th>
                                                            </tr>

                                                            </thead>
                                                            <tbody>
                                                                                                                        @foreach($clientes as $cliente)
                                                                <tr>
                                                                    <td style="text-align: center;vertical-align: middle">{{$contador++}}</td>
                                                                    <td style="text-align: center;vertical-align: middle">
                                                                        <button type="button" class="btn btn-info seleccionar-btn-cliente" data-id="{{$cliente->id}}" data-nit="{{$cliente->nit_codigo}}" data-nombrecliente="{{$cliente->nombre_cliente}}">Seleccionar</button>
                                                                    </td>
                                                                    <td style="vertical-align: middle">{{$cliente->nombre_cliente}}</td>
                                                                    <td style="vertical-align: middle">{{$cliente->nit_codigo}}</td>
                                                                    <td style="vertical-align: middle">{{$cliente->telefono}}</td>
                                                                    <td style="vertical-align: middle">{{$cliente->email}}</td>
                                                                </tr>
                                                            @endforeach
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="modal fade" id="exampleModal_crear_cliente" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                            <div class="modal-dialog modal-lg">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title" id="exampleModalLabel">Registrar nuevo cliente</h5>
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                            <span aria-hidden="true">&times;</span>
                                                        </button>
                                                    </div>
                                                    <div class="modal-body">
                                                            <div class="row">
                                                                <div class="col-md-6">
                                                                    <div class="form-group">
                                                                        <label for="name">Nombre del cliente</label>
                                                                        <input type="text" class="form-control" value="{{old('nombre_cliente')}}" id="nombre_cliente">
                                                                        @error('nombre_cliente')
                                                                        <small style="color: red;">{{$message}}</small>
                                                                        @enderror
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <div class="form-group">
                                                                        <label for="name">N°Cedula/código del cliente</label>
                                                                        <input type="text" class="form-control" value="{{old('nit_codigo')}}" id="nit_codigo">
                                                                        @error('nit_codigo')
                                                                        <small style="color: red;">{{$message}}</small>
                                                                        @enderror
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="row">
                                                                <div class="col-md-6">
                                                                    <div class="form-group">
                                                                        <label for="name">Teléfono</label>
                                                                        <input type="text" class="form-control" value="{{old('telefono')}}" id="telefono">
                                                                        @error('telefono')
                                                                        <small style="color: red;">{{$message}}</small>
                                                                        @enderror
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <div class="form-group">
                                                                        <label for="name">Email</label>
                                                                        <input type="email" class="form-control" value="{{old('email')}}" id="email">
                                                                        @error('email')
                                                                        <small style="color: red;">{{$message}}</small>
                                                                        @enderror
                                                                    </div>
                                                                </div>
                                                            </div>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                                                        <button type="button" onclick="guardar_cliente()" class="btn btn-primary"><i class="fas fa-save"></i> Registrar</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <hr>
                                <div class="row">
                                    <div class="col-md-6">
                                        <label for="">Nombre del cliente</label>
                                        <input type="text" class="form-control" id="nombre_cliente_select" value="S/N">
                                        <input type="text" class="form-control" id="id_cliente" name="cliente_id" hidden>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="">N°Cedula/Código</label>
                                        <input type="text" class="form-control" id="nit_cliente_select" value="0">
                                    </div>
                                </div>
                                <hr>
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="fecha">Fecha de venta</label><b> *</b>
                                            <input type="date" class="form-control" value="{{old('fecha', date('Y-m-d'))}}" name="fecha">
                                            @error('fecha')
                                            <small style="color: red;">{{$message}}</small>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="fecha">Precio total</label><b> *</b>
                                            <input type="text" style="text-align: center;background-color: #e9e710" class="form-control" value="{{$total_venta}}" name="precio_total">
                                            @error('precio_total')
                                            <small style="color: red;">{{$message}}</small>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <hr>
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <button type="submit" class="btn btn-primary btn-lg btn-block"><i class="fas fa-save"></i> Registrar venta</button>
                                        </div>
                                    </div>
                                </div>
                            </div>



                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@stop

@section('css')
@stop

@section('js')
    <script>

        function guardar_cliente(){
            const data = {
                nombre_cliente: $('#nombre_cliente').val(),
                nit_codigo: $('#nit_codigo').val(),
                telefono: $('#telefono').val(),
                email: $('#email').val(),
                _token: '{{csrf_token()}}'
            };

            $.ajax({
                url: '{{route("admin.ventas.cliente.store")}}',
                type: 'POST',
                data: data,
                success:function (response) {
                    if(response.success){
                        Swal.fire({
                            position: "top-end",
                            icon: "success",
                            title: "Se agrego al cliente",
                            showConfirmButton: false,
                            timer: 1500
                        });
                        location.reload();
                    }else{
                        alert('Error no se pudo eliminar el producto');
                    }
                },
                error: function (xhr, status, error) {
                    alert('error, no se pudo registrar al cliente');
                }
            });
        }

        $('.seleccionar-btn-cliente').click(function () {
            var id_cliente = $(this).data('id');
            var nombre_cliente = $(this).data('nombrecliente');
            var nit_codigo = $(this).data('nit');
            //alert(nombre_cliente);
            $('#nombre_cliente_select').val(nombre_cliente);
            $('#nit_cliente_select').val(nit_codigo);
            $('#id_cliente').val(id_cliente);
            $('#exampleModal_cliente').modal('hide');
        });

        $('.seleccionar-btn').click(function () {
            var id_producto = $(this).data('id');
            $('#codigo').val(id_producto);
            $('#exampleModal').modal('hide');
            $('#exampleModal').on('hidden.bs.modal', function () {
                $('#codigo').focus();
            });
        });

        $('.delete-btn').click(function () {
            var id = $(this).data('id');
            if(id){
                $.ajax({
                    url: "{{url('/admin/ventas/create/tmp')}}/"+id,
                    type: 'POST',
                    data: {
                        _token:'{{csrf_token()}}',
                        _method:'DELETE'
                    },
                    success:function (response) {
                        if(response.success){
                            Swal.fire({
                                position: "top-end",
                                icon: "success",
                                title: "Se elimino el producto",
                                showConfirmButton: false,
                                timer: 1500
                            });
                            location.reload();
                        }else{
                            alert('Error no se pudo eliminar el producto');
                        }
                    },
                    error:function (error) {
                        alert(error);
                    }
                });
            }
        });

        $('#codigo').focus();
        $('#form_venta').on('keypress',function (e) {
            if(e.keyCode === 13){
                e.preventDefault();
            }
        });

        $('#codigo').on('keyup',function (e) {
            if(e.which === 13){
                var codigo = $(this).val();
                var cantidad = $('#cantidad').val();

                if(codigo.length > 0){
                    $.ajax({
                        url: "{{route('admin.ventas.tmp_ventas')}}",
                        method: 'POST',
                        data: {
                            _token:'{{csrf_token()}}',
                            codigo: codigo,
                            cantidad: cantidad
                        },
                        success:function (response) {
                            if(response.success){
                                Swal.fire({
                                    position: "top-end",
                                    icon: "success",
                                    title: response.message,
                                    showConfirmButton: false,
                                    timer: 1500
                                });
                                location.reload();
                            }else{
                                alert(response.message);
                            }
                        },
                        error:function (error) {
                            alert(response.message + error);
                        }
                    });
                }
            }
        });
    </script>
    <script>
        $('#mitabla').DataTable({
            "pageLength": 5,
            "language": {
                "emptyTable": "No hay información",
                "info": "Mostrando _START_ a _END_ de _TOTAL_ Productos",
                "infoEmpty": "Mostrando 0 a 0 de 0 Productos",
                "infoFiltered": "(Filtrado de _MAX_ total Productos)",
                "infoPostFix": "",
                "thousands": ",",
                "lengthMenu": "Mostrar _MENU_ Productos",
                "loadingRecords": "Cargando...",
                "processing": "Procesando...",
                "search": "Buscador:",
                "zeroRecords": "Sin resultados encontrados",
                "paginate": {
                    "first": "Primero",
                    "last": "Ultimo",
                    "next": "Siguiente",
                    "previous": "Anterior"
                }
            },
        });

        $('#mitabla2').DataTable({
            "pageLength": 5,
            "language": {
                "emptyTable": "No hay información",
                "info": "Mostrando _START_ a _END_ de _TOTAL_ Clientes",
                "infoEmpty": "Mostrando 0 a 0 de 0 Clientes",
                "infoFiltered": "(Filtrado de _MAX_ total Clientes)",
                "infoPostFix": "",
                "thousands": ",",
                "lengthMenu": "Mostrar _MENU_ Clientes",
                "loadingRecords": "Cargando...",
                "processing": "Procesando...",
                "search": "Buscador:",
                "zeroRecords": "Sin resultados encontrados",
                "paginate": {
                    "first": "Primero",
                    "last": "Ultimo",
                    "next": "Siguiente",
                    "previous": "Anterior"
                }
            },
        });
    </script>
@stop