@extends('adminlte::page')

@section('title', 'DASHBOARD')


@section('content_header')
<div class="fl text-center">
<div class="pyramid-loader pyramid-loader2">
  <div class="wrapper">
    <span class="side side1"></span>
    <span class="side side2"></span>
    <span class="side side3"></span>
    <span class="side side4"></span>
    <span class="shadow"></span>
  </div>  
</div>
<h1>ALFA DASHBOARD</h1>
    <div class="pyramid-loader" >
            <div class="wrapper">
                <span class="side side1"></span>
                <span class="side side2"></span>
                <span class="side side3"></span>
                <span class="side side4"></span>
                <span class="shadow"></span>
            </div>  
    </div>
</div>
    
    



@stop


@section('css')
    {{-- Add here extra stylesheets --}}
    {{-- <link rel="stylesheet" href="/css/admin_custom.css"> --}}
   <link rel="stylesheet" href="{{ asset('css/index.css') }}">
   @vite(['resources/sass/app.scss'])

@stop

@section('content')




@can('ver producto')
<div class="row">
    <div class="col-md-3 col-sm-6 col-12">
            <div class="small-box bg-info">
                <div class="inner">
                    <h3>{{$total_productos}}</h3>
                    <p>Productos</p>
                </div>
            <div class="icon">
                <i class="fas fa-shopping-cart"></i>
            </div>
                <a href="{{route('productos.index')}}" class="small-box-footer">Más información <i class="fas fa-arrow-circle-right"></i></a>
            </div>
        
    </div>
    <div class="col-md-3 col-sm-6 col-12">
            <div class="small-box bg-light">
            <div class="inner">
            <h3>{{$total_inventarioingresos}}</h3>
            <p>Ordenes de compra</p>
            </div>
            <div class="icon">
            <i class="fas fa-tasks"></i>
            </div>
            <a href="{{route('inventarioingresos.index')}}" class="small-box-footer">Más información <i class="fas fa-arrow-circle-right"></i></a>
            
        </div>
        
    </div>

    <div class="col-md-3 col-sm-6 col-12">
            <div class="small-box bg-warning">
            <div class="inner">
            <h3>{{$total_inventariosalidas}}</h3>
            <p>Requerimientos</p>
            </div>
            <div class="icon">
            <i class="fas fa-envelope"></i>
            </div>
            <a href="{{route('inventariosalidas.index')}}" class="small-box-footer">Más información <i class="fas fa-arrow-circle-right"></i></a>
            
            </div>
        
    </div>

    <div class="col-md-3 col-sm-6 col-12">
            <div class="small-box bg-success">
            <div class="inner">
            <h3>{{$total_proveedores}}</h3>
            <p>Proveedores</p>
            </div>
            <div class="icon">
            <i class="fas fa-credit-card"></i>
            </div>
            <a href="{{route('proveedores.index')}}" class="small-box-footer">Más información <i class="fas fa-arrow-circle-right"></i></a>
            
            </div>
        
    </div>
</div>
@endcan
@stop



@section('js')
<script src="https://cdn.jsdelivr.net/gh/habibmhamadi/multi-select-tag@2.0.1/dist/js/multi-select-tag.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <script>
        $(document).ready(function() {
            function isRucOrDni(value) {
                return value.length === 8 || value.length === 11;
            }

            function buscarDocumento(url, inputId, datosId) {
                var inputValue = $(inputId).val();
                var tipoDocumento = inputValue.length === 8 ? 'dni' : 'ruc';

                // Realizar la solicitud AJAX al controlador
                $.ajax({
                    url: url,
                    type: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        documento: inputValue,
                        tipo_documento: tipoDocumento
                    },
                    success: function(response) {
                        console.log('API Response:', response);
                        // Manejar la respuesta del controlador
                        if (tipoDocumento === 'dni') {
                            $(datosId).val(response.nombres + ' ' + response.apellidoPaterno + ' ' +
                                response.apellidoMaterno);
                        } else {
                            $(datosId).val(response.razonSocial);
                        }

                        $(datosId).removeClass('is-invalid').addClass('is-valid');
                    },
                    error: function(xhr, status, error) {
                        // Manejar el error de la solicitud
                        console.log(xhr.responseText);
                        $(datosId).val('');
                        $(datosId).removeClass('is-valid').addClass('is-invalid');
                    }
                });
            }

            $('#buscar_cliente_btn').click(function() {
                buscarDocumento('{{ route('buscar.documento') }}', '#documento_cliente', '#datos_cliente');
            });

            $('#buscar_conductor_btn').click(function() {
                buscarDocumento('{{ route('buscar.documento') }}', '#documento_conductor',
                    '#datos_conductor');
            });

            $('#buscar_balanza_btn').click(function() {
                buscarDocumento('{{ route('buscar.documento') }}', '#documento_balanza', '#datos_balanza');
            });

            $('#buscar_socio_btn').click(function() {
                buscarDocumento('{{ route('buscar.documento') }}', '#documento_socio', '#datos_socio');
            });
            $('#buscar_trabajador_btn').click(function() {
                buscarDocumento('{{ route('buscar.documento') }}', '#documento_trabajador',
                    '#datos_trabajador');
            });

            $('#buscar_proveedor_btn').click(function() {
                buscarDocumento('{{ route('buscar.documento') }}', '#documento_proveedor',
                    '#datos_proveedor');
            });


            $('#buscar_solicitante_btn').click(function() {
                buscarDocumento('{{ route('buscar.documento') }}', '#documento_solicitante',
                    '#nombre_solicitante');
            });

            $('#buscar_responsable_btn').click(function() {
                buscarDocumento('{{ route('buscar.documento') }}', '#documento_responsable',
                    '#nombre_responsable');
            });

            // Validar ruc o dni y cambiar el borde a verde al llenar los campos
            $('.documento-input').on('input', function() {
                var value = $(this).val();
                var isValid = isRucOrDni(value);

                $(this).toggleClass('is-valid', isValid);
                $(this).toggleClass('is-invalid', !isValid);
            });

            // Cambiar el borde a verde cuando se llenen los campos datos_cliente
            $('.datos-input').on('input', function() {
                var value = $(this).val();
                $(this).toggleClass('is-valid', value.trim().length > 0);
                $(this).toggleClass('is-invalid', value.trim().length === 0);
            });
        });
    </script>

@stop