@extends('layouts.app')
@section('content')
    <div class="container">
        @if (Session::has('Mensaje'))
        <div class="alert alert-success" role="alert">
            {{ Session::get('Mensaje') }}
        </div>
        @endif
        <p><b><h4 style="float: right">Materiales Vendidos</h4></b></p>
        <br><br>

        <div class="input-group col-md-6 mb-3" style="padding:0;">
            <input type="text" class="form-control" placeholder="Buscar..." id="search" name="search">
            <span type="submit" class="input-group-text border-0" id="search-addon">
            <i class="fas fa-search"></i>
            </span>
        </div>
        
        <div class="table-responsive">
        <table class="table table-light">
            <thead class="thead-dark">
                <tr style="text-align: center">
                    <th>#</th>
                    <th>Código de Material</th>
                    <th>Nombre de Material</th>
                    <th>precio $</th>
                    <th>Personal</th>
                    <th>Fecha de Venta</th>
                    <th>Cantidad</th>
                    <th>Total $</th>
                </tr>
            </thead>
            <tbody class="generaldata">
                @foreach ($datos as $dato)
                    <tr style="text-align: center">
                        <td>{{ $loop->iteration }}</td>
                        <td>{{ $dato->codigo }}</td>
                        <td>{{ $dato->nombre }}</td>
                        <td>{{ $dato->precio }}</td>
                        <td>{{ $dato->id_personal }}</td>
                        <td>{{ Carbon\Carbon::parse($dato->fecha_venta)->format('d-m-Y') }}</td>
                        <td>{{ $dato->cantidadV }}</td>
                        <td>${{ $dato->precio_venta }}</td>
                    </tr>
                @endforeach
            </tbody>
            <tbody id="content" class="ajaxdata"></tbody>
        </table>
        <div class="paginate_gnraldata">{{ $datos->links() }}</div>
        </div>

    <script>
        $(function(){
            $(document).on('keyup', '#search', function(){
                $value = $(this).val();
                if($value)
                {
                    $('.generaldata').hide();
                    $('.paginate_gnraldata').hide();
                    $('.ajaxdata').show();
                }
                else
                {
                    $('.generaldata').show();
                    $('.ajaxdata').hide();
                    $('.paginate_gnraldata').show();
                }
                $.ajax({
                    type:"GET",
                    url:"{{ url('SearchDetVent') }}",
                    data:{'search':$value},
                    success:function(data){
                        $('#content').html(data);
                    }
                });
            });
        });
    </script>
    </div>
@endsection