@extends('admin.admin_dashboard')
@section('content')
			<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.bootstrap5.min.css">


     <section class="pc-container">
      <div class="pc-content">
        <!-- [ breadcrumb ] start -->
        <div class="page-header">
          <div class="page-block">
            <div class="row align-items-center"> 
              <div class="col-md-12">
                <div class="page-header-title">
                  <h2 class="mb-0">Dashboard</h2>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- [ breadcrumb ] end -->
<div class="row">
          <!-- [ sample-page ] start -->


        <div class="col-lg-3 col-md-4">
            <div class="card">
              <div class="card-body" style="background-color: #FED8B1">
              <a href="{{ route('index_salidas')}}" class="pc-link">
                <div class="row align-items-center">
                  <div class="col-8">
                    <h3 class="mb-1"></h3>
                    <p class="text-muted mb-0">Salidas</p>
                  </div>
                  <div class="col-4 text-end">
                    <i class="ti ti-calendar-event text-danger f-36"></i>
                  </div>
                </div>
              </a>
              </div>
            </div>
          </div>

           <div class="col-lg-3 col-md-4">
            <div class="card">
              <div class="card-body">
              <a href="#" class="pc-link">
                <div class="row align-items-center">
                  <div class="col-8">
                    <h3 class="mb-1"></h3>
                    <p class="text-muted mb-0">Entradas</p>
                  </div>
                  <div class="col-4 text-end">
                    <i class="ti ti-calendar-event text-danger f-36"></i>
                  </div>
                </div>
              </a>
              </div>
            </div>
          </div>

        <div class="col-lg-3 col-md-4">
            <div class="card">
              <div class="card-body" >
          <a href="{{ route('index_devoluciones')}}" class="pc-link">
                <div class="row align-items-center">
                  <div class="col-8">
                    <h3 class="mb-1"></h3>
                    <p class="text-muted mb-0">Devoluciones</p>
                  </div>
                  <div class="col-4 text-end">
                    <i class="ti ti-calendar-event text-danger f-36"></i>
                  </div>
                </div>
              </a>
              </div>
            </div>
          </div>


          <div class="col-lg-3 col-md-4">
            <div class="card">
              <div class="card-body">
              <a href="{{ route('index_inventario')}}" class="pc-link">
                <div class="row align-items-center">
                  <div class="col-8">
                    <h3 class="mb-1"></h3>
                    <p class="text-muted mb-0">Mov. Inventario Manuales</p>
                  </div>
                  <div class="col-4 text-end">
                    <i class="ti ti-calendar-event text-danger f-36"></i>
                  </div>
                </div>
              </a>
              </div>
            </div>
          </div>


          

    </div>


        <div class="row">

        <div class="row">
                <div class="col-xl-12">
                  <div class="card"> 
                    <div class="card-header"> 
                    <div class="row">
                    <div class="col-lg-10 col-md-4">
                      
                      <div class="media align-items-center"> 
                        <div class="ms-0">
                          <h4 class="mb-0">Salidas Generadas</h4> 
                        </div>
                      </div> 
                    </div>
                    <div class="col-lg-2 " >  
                      <div class="media align-items-right"> 
                      <a href="{{ route('req_salidas_dashboard/add')}}" class="btn btn-primary">Crear Salida</a>
                      </div> 
                    </div>

                    </div> 
 
                    <div class="card-body">
                      <div class="table-responsive">
              
 
                    <div class="col-xl-12 col-12" >
                <table id="table-requisicion"
       class="table table-striped table-bordered table-fixed">
                    <thead>
                      <tr>   
                        <th>Salida</th> 
                        <th>Fecha Creación</th> 
                        <th class="col-descripcion">Descripción</th>
                        <th style="text-align: center ">Categoría</th> 
                        <th style="text-align: center">Unidad</th> 
                        <th style="text-align: center">Cantidad de Salida.</th> 
                      </tr>
                    </thead>
                    <tbody>
                    @foreach($requisiciones_salidas_detalle as $requisiciones_salidas_detalle)                   

                      <tr>    

                      <td style="
                      @if(($requisiciones_salidas_detalle->categoria=='HERRAMIENTA')&&($requisiciones_salidas_detalle->cantidad_devuelta<$requisiciones_salidas_detalle->cantidad))
                      background-color: lemonchiffon;
                      @elseif(($requisiciones_salidas_detalle->categoria=='HERRAMIENTA')&&($requisiciones_salidas_detalle->cantidad_devuelta==$requisiciones_salidas_detalle->cantidad))
                      background-color: #D1FFBD;
                      @endif
                      ">
                      <a href="req_salidas/nueva/{{$requisiciones_salidas_detalle->id_requisicion_salida}}">
                         

                      SALIDA-2606-{{ $requisiciones_salidas_detalle->iniciales}}-{{ $requisiciones_salidas_detalle->id_requisicion_salida}}
                      </a>
                       </td> 

                      <td style="
                      @if(($requisiciones_salidas_detalle->categoria=='HERRAMIENTA')&&($requisiciones_salidas_detalle->cantidad_devuelta<$requisiciones_salidas_detalle->cantidad))
                      background-color: lemonchiffon;
                      @elseif(($requisiciones_salidas_detalle->categoria=='HERRAMIENTA')&&($requisiciones_salidas_detalle->cantidad_devuelta==$requisiciones_salidas_detalle->cantidad))
                      background-color: #D1FFBD;
                      @endif
                      ">{{ $requisiciones_salidas_detalle->created_at}} </td> 

                       <td class="col-descripcion"
    style="text-align:center;
    @if(($requisiciones_salidas_detalle->categoria=='HERRAMIENTA')&&
    ($requisiciones_salidas_detalle->cantidad_devuelta<$requisiciones_salidas_detalle->cantidad))
        background-color: lemonchiffon;
    @elseif(($requisiciones_salidas_detalle->categoria=='HERRAMIENTA')&&
    ($requisiciones_salidas_detalle->cantidad_devuelta==$requisiciones_salidas_detalle->cantidad))
        background-color: #D1FFBD;
    @endif">
    {{ $requisiciones_salidas_detalle->descripcion }}
</td>

                        <td style="text-align: center;@if(($requisiciones_salidas_detalle->categoria=='HERRAMIENTA')&&($requisiciones_salidas_detalle->cantidad_devuelta<$requisiciones_salidas_detalle->cantidad))
                      background-color: lemonchiffon;
                      @elseif(($requisiciones_salidas_detalle->categoria=='HERRAMIENTA')&&($requisiciones_salidas_detalle->cantidad_devuelta==$requisiciones_salidas_detalle->cantidad))
                      background-color: #D1FFBD;
                      @endif">{{ $requisiciones_salidas_detalle->categoria}}</td>  
                        <td style="text-align: center;@if(($requisiciones_salidas_detalle->categoria=='HERRAMIENTA')&&($requisiciones_salidas_detalle->cantidad_devuelta<$requisiciones_salidas_detalle->cantidad))
                      background-color: lemonchiffon;
                      @elseif(($requisiciones_salidas_detalle->categoria=='HERRAMIENTA')&&($requisiciones_salidas_detalle->cantidad_devuelta==$requisiciones_salidas_detalle->cantidad))
                      background-color: #D1FFBD;
                      @endif">PZA</td>    
                        <td style="text-align: center;@if(($requisiciones_salidas_detalle->categoria=='HERRAMIENTA')&&($requisiciones_salidas_detalle->cantidad_devuelta<$requisiciones_salidas_detalle->cantidad))
                      background-color: lemonchiffon;
                      @elseif(($requisiciones_salidas_detalle->categoria=='HERRAMIENTA')&&($requisiciones_salidas_detalle->cantidad_devuelta==$requisiciones_salidas_detalle->cantidad))
                      background-color: #D1FFBD;
                      @endif">{{number_format($requisiciones_salidas_detalle->cantidad , 0, '.', ',')}}</td>  

                      
 
                        </tr>
                      @endforeach

                        </tbody> 
                        </table>
                      </div>
                   
             
                      </div>
                    </div>

                  </div>
                </div> 
              </div>


          <!-- DOM/Jquery table start -->
          <div class="col-sm-12">
            <div class="card"> 
              <div class="card-body"> 
                <div class="table-responsive dt-responsive">
                  
                </div>
              </div>
            </div>
          </div>
 
 </div>
</div>
</section>

          <!-- DOM/Jquery table end -->
<!--main--> 

    <!-- datatable Js --> 
 
<style>
/* Fuerza ancho fijo en columnas */
.table-fixed {
    table-layout: fixed;
    width: 100%;
}

/* Columna descripción */
.col-descripcion {
    width: 300px;          /* AJUSTA AQUÍ */
    max-width: 300px;
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: break-word;
    vertical-align: top;
}

/* Evita que DataTables fuerce nowrap */
table.dataTable td {
    white-space: normal !important;
}
</style>

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- DataTables core -->
<script src="{{ URL::asset('js/plugins/jquery.dataTables.min.js')}}"></script>
<script src="{{ URL::asset('js/plugins/dataTables.bootstrap5.min.js')}}"></script>

<!-- DataTables Buttons -->
<script src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.bootstrap5.min.js"></script>

<!-- Export Excel -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.html5.min.js"></script>


    <script>
      // [ DOM/jquery ] 
 $(document).ready(function()
            {
     // [ Configuration Option ]
$('#table-requisicion').DataTable({
        responsive: true,
        autoWidth: false,
        ordering: false,
        dom:
            "<'row mb-3'<'col-md-6'f><'col-md-6 text-end'B>>" +
            "<'row'<'col-md-12'tr>>" +
            "<'row'<'col-md-5'i><'col-md-7'p>>",
        buttons: [
            {
                extend: 'excelHtml5',
                text: '<i class="ti ti-file-spreadsheet"></i> Exportar a Excel',
                className: 'btn btn-success',
                title: 'Salidas_Generadas',
                exportOptions: {
                    columns: ':visible'
                }
            }
        ]
    });
                
    }); // FIN DE TABLA
 
    </script>

@endsection