@extends('admin.admin_dashboard_hipotecario') 
@section('content')
				

     <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">Bitácora de Inducción</h2>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- [ breadcrumb ] end -->
        <div class="row">

          <!-- DOM/Jquery table start -->
          <div class="col-sm-12">
            <div class="card"> 
              <div class="card-body">
                <div class="text-end p-4 pb-0"> 
 
                <a  href="{{ route('bitacora/tareas')}}"  class="btn btn-primary">Agregar</a>

                       </div>
                <div class="table-responsive dt-responsive">
                 <table id="datatable_tabletools" class="table table-striped table-bordered table-hover" width="100%">
                  <thead>                     
                    <tr>
                      <th data-class="expand"><i class="fa fa-fw fa-user text-muted hidden-md hidden-sm hidden-xs"></i> ID</th>
                      <!--<th data-hide="phone,tablet">Nombre</th>            
                      <th data-hide="phone,tablet">Correo Electrónico</th>-->               
                      <th data-hide="expand">Nombre de Franquicia</th>
                      <th data-hide="expand">Franquiciatario</th>
                      <th data-hide="expand">Email Franquiciatario</th>
                      <th data-hide="expand">Fecha de inicio</th> 
                      <th data-hide="expand">Tareas</th>  
                      <th data-hide="expand">Avance</th>  
                      <th data-hide="expand">Status</th>   
                    </tr>
                  </thead>
                  <tbody>
                    @foreach($agendadigital as $agendadigital)                    
                    <tr>
                      <td><a href="#" class="dialog_link" iduser="{{ $agendadigital->id }}">{{ $agendadigital->id }}</a></td>                                                                 
                      <td>{{ $agendadigital->nombre_franquicia}}</td>    
                      <td>{{ $agendadigital->nombre_franquiciatario}}</td>    
                      <td>{{ $agendadigital->email_franquiciatario}}</td>   
                      <td class="text-align-center">{{ $agendadigital->fecha_ini}}</td>   
                      <td class="text-align-center"><strong> 
                      {{$agendadigital->total_tareas_finalizadas}} / {{$agendadigital->total_tareas}}
                    </strong></td>      
                      <td><strong> {{round(($agendadigital->total_tareas_finalizadas / $agendadigital->total_tareas)*100)}} % </strong> 
                      </td>    
                      @if ($agendadigital->total_tareas_finalizadas == $agendadigital->total_tareas)
                      <td class="text-align-center" style="background-color: green; color: white"> 
                        <span class='text-align-center' >Finalizado</span>
                      @else 
                      <td class="text-align-center" style="background-color: orange; color: black"> 
                        <span class='label label-warning text-align-center'>En proceso</span> 
                      @endif  
                      </td>   
                        <td> </td>
                    @endforeach
                  </tbody>  
                </table>
                </div>
              </div>
            </div>
          </div>
 
 </div>
</div>
</section>

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

    <!-- datatable Js --> 
 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="{{ URL::asset('js/plugins/jquery.dataTables.min.js')}}"></script>
    <script src="{{ URL::asset('js/plugins/dataTables.bootstrap5.min.js')}}"></script>
    <script src="{{ URL::asset('js/plugins/dataTables.responsive.min.js')}}"></script>
    <script src="{{ URL::asset('js/plugins/responsive.bootstrap5.min.js')}}"></script>

    <script>
      // [ DOM/jquery ] 
 $(document).ready(function()
            {
     // [ Configuration Option ]
      $('#table-inventory-cat').dataTable(
                {
                    responsive: true,
                    fixedHeader: true, 
                    select: 'single',
                    ordering: false, 
                    dom: "<'row mb-3'<'col-sm-12 col-md-6 d-flex align-items-right justify-content-start'f><'col-sm-12 col-md-6 d-flex align-items-left justify-content-end'B>>" +
                        "<'row'<'col-sm-12'tr>>" +
                        "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
                    buttons: [
                        {
                            extend: 'colvis',
                            text: 'Column Visibility',
                            titleAttr: 'Col visibility',
                            className: 'btn-outline-default'
                        },
                        {
                            extend: 'csvHtml5',
                            text: 'CSV',
                            titleAttr: 'Generate CSV',
                            className: 'btn-outline-default'
                        },
                        {
                            extend: 'copyHtml5',
                            text: 'Copy',
                            titleAttr: 'Copy to clipboard',
                            className: 'btn-outline-default'
                        },
                        {
                            extend: 'print',
                            text: '<i class="fal fa-print"></i>',
                            titleAttr: 'Print Table',
                            className: 'btn-outline-default'
                        }

                    ], 

                    

                }); // FIN DE TABLA
                
    }); // FIN DE TABLA
 
    </script>

@endsection