@extends('base')
@section('title')
detalle de facturación
@endsection

@section('extracss')
   <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
   <link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap4.min.css">
@endsection
@section('extrajs')
   <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
   <script>
       $(document).ready(function() {
          $('#cliente-select').select2();
          document.querySelector('#cliente-select').parentElement.querySelector('span.select2-container').style.width="100%"
         });
         function onNewDocumentTypeChange(list) {
         let tipo_select = document.querySelector('#ccf-form-container');
         let prov = document.querySelector('#new_doc_proveedor');
         tipo_select.querySelector('select').disabled = !list.value==4;
         prov.querySelector('select').disabled = list.value==4;
         list.value == 4?
         tipo_select.classList.remove('d-none')
         :
         tipo_select.classList.add('d-none');
         list.value == 4?
         prov.classList.add('d-none')
         :
         prov.classList.remove('d-none');


          /*   tipo_select.querySelector('select').disabled = !list.value==10;
             prov.querySelector('select').disabled = list.value==10;
             list.value == 10?
                 tipo_select.classList.remove('d-none')
                 :
                 tipo_select.classList.add('d-none');
             list.value == 10?
                 prov.classList.add('d-none')
                 :
                 prov.classList.remove('d-none');*/

      }
   </script>
   <script src="//cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
   <script src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap4.min.js"></script>
   <script>
       $(document).ready(function(){
           $('#docs').DataTable({
               "language": {
                   "lengthMenu": "Mostrar _MENU_ Documentos por página",
                   "zeroRecords": "No hay files",
                   "info": "Mostrando _PAGE_ de _PAGES_ páginas",
                   "infoEmpty": "No hya páginas",
                   "infoFiltered": "(filtered from _MAX_ total records)",
                   'search':"Buscar:",
                   "paginate": {
                       "first":      "Primero",
                       "last":       "Ultimo",
                       "next":       "Siguiente",
                       "previous":   "Atrás"
                   },
               }
           });
       });
   </script>
@endsection
@section('content')
<!-- Mensaje ocupado -->
@if(session('ocupado'))
<div class="alert alert-danger">
    <button type="button" class="close" data-dismiss="alert">×</button>
    {{ session('ocupado') }}
</div>
@endif


<nav aria-label="breadcrumb">
   <ol class="breadcrumb">
       <li class="breadcrumb-item"><a href="{{ route('compra.facturacion') }}">Listado de Files</a></li>
       <li class="breadcrumb-item active" aria-current="page">Detalle de Facturación</li>
   </ol>
</nav>
<div style="text-align: center;">
    <H3>Documentos para el file {{ $file->file_code }}</H3>
</div>
<!-- Boton agregar cotizacion modal -->
<!--can('CotizacionInicial.store')-->
<div class="d-sm-flex align-items-center justify-content-between mb-4">
   <button type="button" class="btn btn-primary" onclick="limpiarCampos()" data-toggle="modal" data-target="#documentoFacturacion">
      Agregar documento
   </button>
</div>
<!--endcan-->
<!-- Fin Boton agregar cotizacion modal -->

<!-- Mensaje Exito -->
@if(session('exito'))
<div class="alert alert-success">
   <button type="button" class="close" data-dismiss="alert">×</button>
   {{ session('exito') }}
</div>
@endif

@if(session('danger'))
    <div class="alert alert-danger">
        <button type="button" class="close" data-dismiss="alert">×</button>
        {{ session('danger') }}
    </div>
@endif
@if ($errors->any())
    <div class="errors">
        <p class="alert alert-warning" role="alert">Por favor corrige los siguientes errores</p>
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif
<!-- Fin Mensaje Exito -->
{{-- @if(count($cotizaciones) > 0) --}}
<br>

<!-- Table -->
<table id="docs" class=" table">
   <thead class="thead-dark">
      <tr>
         <th scope="col">Item</th>
         <th scope="col">No. Documento</th>
         <th scope="col">Fecha Facturacion</th>
         <th scope="col">Fecha Emision</th>
         <th scope="col">Proveedor</th>
         <th scope="col">Tipo</th>
         <th scope="col">Monto</th>
         <th scope="col">Acciones</th>
         
      </tr>
   </thead>
   <tbody>
        @php
            $i=1;
        @endphp
      @foreach ($documentos as $documento)
      <tr>
        <td> {{ $i }} </td>
        <td> {{ $documento->documento_code }} </td>
        <td> {{ $documento->created_at }} </td>
        <td> {{ $documento->fecha_emision }} </td>
        <td> {{ $documento->proveedor->nombreProveedor }} </td>
        <td> {{ $documento->tipo->tipo }} </td>
        
        <td>{{ $documento->monto }}</td>
        


        <td style="display: flex">
         <a type="button" title="Procesos" fas fa-w fa-clipboard-list
         class="fas fa-w fa-tasks m-1" style="color:gray !important; background-color:transparent; border: 0px solid;"
         href="{{route('compra.detalleDocumento',$documento->id)}}"></a>

            <button type="button" title="Editar" data-toggle="modal" data-target="#editModal"
                    class="fas fa-w fa-edit"
                    style="color:gray !important; background-color:transparent; border: 0px solid;"
                    onclick="fun_edit('{{ $documento->id }}')"></button>

            <button type="button" title="Eliminar" data-toggle="modal" data-target="#deleteModal"
                    class="fas fa-w fa-trash" style="color:gray !important; background-color:transparent; border: 0px solid;"
                    onclick="fun_delete('{{$documento->id}}')"></button>
        </td>
     </tr>
     @php
         $i++;
     @endphp
      @endforeach
   </tbody>
</table>



 <br>
 <br>
  <div class="row">
    <div class="col-md-6">
        <label for="">Facturados</label>
        <table class="table table-dark table-sm">
            <thead>
              <tr>
                <th scope="col">#</th>
                <th scope="col">Servicio</th>
                <th scope="col">Monto</th>
              </tr>
            </thead>
            <tbody>
              @for ($i = 0 ; $i < count($pendientes['facturados']);$i ++)
              <tr>
                <th scope="row">{{ $i +1 }}</th>
                <td>{{ $pendientes['facturados'][$i]->serv_name }}</td>
                <td>{{ $pendientes['facturados'][$i]->cant_asignado }}</td>
              </tr>
              @endfor
            </tbody>
          </table>

    </div>
    <div class="col-md-6">
        <label for="">Todos los servicios</label>
        <table class="table table-dark table-sm">
            <thead>
              <tr>
                <th scope="col">#</th>
                <th scope="col">Servicio</th>
                <th scope="col">Monto</th>
              </tr>
            </thead>
            <tbody>
              @for ($i = 0 ; $i < count($pendientes['pendientes']);$i ++)
              <tr>
                <th scope="row">{{ $i +1 }}</th>
                <td>{{ $pendientes['pendientes'][$i]->serv_name }}</td>
                <td>{{ $pendientes['pendientes'][$i]->monto }}</td>
              </tr>
              @endfor
            </tbody>
          </table>

    </div>
  </div>


<div class="modal fade bd-example-modal-lg" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
     aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header" style="background-color:#F2F2F2 !important;">
                <h5 class="modal-title" id="exampleModalLongTitle">
                    <i class="fas fw fa-plus-circle"></i>
                    Editar documento
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form action="{{ route('compra.editarDocumentoCompra') }}" method="POST" name="miForm">
                    @csrf
                    <div class="row">
                        <div class="form-group col-sm-6" >
                            <label for="" class="control-label">Codigo Documento: </label>
                            <input  type="text" name="documento_code" id="documento_code"
                                    class="form-control"
                                    required  autofocus>
                        </div>
                        <div class="form-group col-md-3">
                            <label for="mostrar_en_libro_compras">Agregra a libro:</label>
                            <input type="checkbox" name="mostrar" id="mostrar" class="form-control">
                        </div>
                    </div>
                    <div class="modal-footer d-flex justify-content-center">
                        <input type="hidden" name="user" value="{{auth()->user()->name}}">
                        <input type="hidden" name="documento_id" id="documento_id">
                        <button type="submit" class="btn btn-primary">
                            <i class='fas fa-check-circle'></i>
                            Guardar
                        </button>
                        <a href="" class="btn btn-primary" data-dismiss="modal">
                            <i class='fa fa-times'></i>
                            Cancelar
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body align-self-center">
                <form action="{{ route('compra.delete') }}" method="POST">
                    @csrf
                    {{ method_field('DELETE') }}
                    <div style="text-align: center">
                        <br>
                        <i class='fas fa-exclamation-circle' style='font-size:80px;color: gray;'></i>
                        <br>
                        <br>
                        <strong>
                            <h3>¿Estás seguro que deseas eliminar el registro?</h3>
                        </strong>
                        <input type="hidden" id="delete_id" name="delete_id">
                        <input type="hidden" name="user" value="{{auth()->user()->name}}">
                    </div>cd
                    <div class="modal-footer d-flex justify-content-center">
                        <button type="submit" class="btn btn-primary">
                            <i class='fas fa-check-circle'></i>
                            Eliminar
                        </button>
                        <a href="" class="btn btn-primary" data-dismiss="modal">
                            <i class='fa fa-times'></i>
                            Cancelar
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>





<!-- Paginacion de tabla -->
{{-- <div class="d-flex justify-content-center">
   {{ $cotizaciones->links() }}
</div> --}}
<!-- Fin Paginacion de tabla-->
<!-- Fin Table -->
{{-- @else
<div class="alert alert-danger">
   <strong>¡Opps! Parece que no tienes ninguna cotización registrada.</strong>
</div>
@endif --}}

@include('compra.modals.documentoFacturacion')
<script type="text/javascript">

   //Limpiar los campos de la modal de traslados
   function limpiarCampos(){
      $('#nombre_cotizacion').val(''); //Limpiando el input
      $("#categoria_id").val(""); //Seleccionando la primera opción del select
   }

   function fun_delete(id)
   {
       $("#delete_id").val(id);
   }

   function fun_edit(id) {
       var view_url = '{{ route('compra.editarDocumentoCompraData', ':id') }}';
       view_url = view_url.replace(':id', id);
       $.ajax({
           url: view_url,
           type: "GET",
           data: {
               "id": id
           },
           success: function(result) {
               $('#documento_code').val(result.documento_code);
               if(result.mostrar == 1)
                   $('#mostrar').attr('checked',true);
               else
                   $('#mostrar').attr('checked',false);

               $('#documento_id').val(result.documento_id);

           }
       });
   }


</script>
@endsection