@extends('index')
@section('estilos')
    <link rel="stylesheet" href="/files/calendario/css/bootstrap-datepicker.standalone.css?v={{ date('d-m-Y h:i:s') }}">
@endsection
@section('contenido')
    <div class="card" style="margin-top: -15px">
        <div class="card-header border shadow">
            <a href="{{ route('Reportes.index') }}"><i class="fas fa-arrow-left text-red"></i></a>
            <i class="fas fa-book text-green"></i>
            <font style="font-family:Cambria; font-size: 12pt; font-weight: bold">
                {{ $descripCaja }} <br>
            </font>
        </div>
        <div class="card-body border shadow">
            <form id="frmActualizar">
                <div class="row">
                    <div class="col-md-10"></div>
                    <div class="col-md-2 col-12">
                        <button type="submit" class=" form-control btn btn-primary">
                            <i class="fas fa-search"></i> Actualizar </button>
                    </div>
                </div>
            </form>
        </div>
        <div class="card-body border shadow">
            <div class="row">
                <div class="col-md-12">
                    <div class="row">
                        <div class="table-responsive">
                            <table class="table table-bordered table-sm table-striped">
                                <thead class="bg-black" style="font-family: Cambria; font-size: 10pt">
                                    <tr>
                                        <th class="text-center" style="width: 90px">DESCRIPCIÓN</th>
                                        <th class="text-center" style="width: 90px">CATEGORÍA</th>
                                        <th class="text-right" style="width: 80pt">ST.MÍN</th>
                                        <th class="text-right" style="width: 80pt">STOCK</th>
                                        <th class="text-center" style="width: 50px">ESTADO</th>
                                    </tr>
                                </thead>
                                                                <tbody style="font-family: Cambria; font-size: 9pt">
                                    @foreach ($datos as $c => $item)
                                        <tr>
                                            <td>{{ $item['INS_Descripcion'] }}</td>
                                            <td>{{ $item['CAT_Nombre'] }}</td>
                                            <td class="text-right">{{ number_format($item['INS_StockMinimo'], 2, '.', '') }}</td>
                                            <td class="text-right">{{ number_format($item['Stock'], 2, '.', '') }}</td>
                                            @if ($item['Stock'] == 0)
                                                <td class="text-center"><i class="fa fa-square text-red"></i> AGOTADO</td>
                                            @else
                                                <td class="text-center"><i class="fa fa-square text-orange"></i> POR AGOTARSE</td>
                                            @endif
                                        </tr>
                                                                            @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                    
                    <div class="row mt-2">
                        <label for="" style="color: blue; margin-top: 7px">TOTAL REGISTROS: {{ $n }}</label>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <br>
@endsection
@section('scripts')
    <script src="/files/calendario/js/bootstrap-datepicker.min.js?v={{ date('d-m-Y h:i:s') }}"></script>
    <script src="/files/calendario/locales/bootstrap-datepicker.es.min.js?v={{ date('d-m-Y h:i:s') }}"></script>
    <script>
        $(document).ready(function() {
            $('#desde').datepicker({
                orientation: "bottom"
            })
            
            $('#hasta').datepicker({
                orientation: "bottom"
            })
            
            var value = $("#nom").val();
            $("#nom").focus().val('').val(value);
        });

    </script>
@endsection