@extends('base')
@section('titulo')
CxC de Cliente
@endsection
@section('extracss')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap4.min.css">
@endsection
@section('extrajs')
    <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(){
            $('#table_cc').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 -->
@include('sessions')

@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



<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ route('documento.LCC') }}">Listado de clientes</a></li>
        <li class="breadcrumb-item active" aria-current="page">CxC de cliente {{ $cliente->nombre_cliente }}</li>
    </ol>
</nav>
<form action="{{ route('documento.docPendientesCobrar',$cliente->id) }}">
    <button class="btn btn-primary" type="submit" formtarget="_blank">Generar Reporte</button>
</form>
<br>
 <table id="table_cc" class=" table">
    <thead class="thead-dark">
       <tr>
          <th scope="col">Item</th>
          <th>File</th>
          <th>Tipo</th>

          <th scope="col">No. Documento</th>
          <th scope="col">Monto Factura</th>
          <th scope="col">Monto abonado</th>
          <th scope="col">Monto pendiente</th>
          <th scope="col">Acciones</th>
       </tr>
    </thead>
    <tbody>
        @php
            $i=1;
            $totalCxC_C=0;
        @endphp
       @foreach ($documentos as $item )
        @php
            $totalCxC_C+=$item->total_cancelar-$item->abonado;
        @endphp
       <tr>
          <td>{{ $i }}</td>
          <td>{{$item->file_code}}</td>
          <td>{{$item->tipo}}</td>
          <td>{{$item->documento_code }}</td>
          <td>$<label style="float: right">{{ number_format($item->total_cancelar,2) }}</label></td>
          <td>$<label for="" style="float: right">{{number_format($item->abonado,2) }}</label></td>
          <td>$<label for="" style="float: right">{{number_format($item->total_cancelar-$item->abonado,2) }}</label></td>
          <td style="display: flex">
               @if($item->state=='EnProceso')
                <button type="button" title="Abonar" data-toggle="modal" data-target="#abonarModal" onclick="transaccion('{{ $item->id }}','{{ $item->total_cancelar-$item->abonado }}',1)"
                    class="fas fa-receipt" style="color:gray !important; background-color:transparent; border: 0px solid;"></button>
                    <button type="button" title="Saldar" data-toggle="modal" data-target="#saldarModal" onclick="transaccion('{{ $item->id }}','{{ $item->total_cancelar-$item->abonado }}',2)"
                    class="fas fa-shopping-cart" style="color:gray !important; background-color:transparent; border: 0px solid;"></button>
                    <a href="{{ route('documento.getTransacciones',$item->id) }}" type="button" title="Transacciones" target="_blank"
                    class="fas fa-file-pdf" style="color:gray !important; background-color:transparent; border: 0px solid;"></a>
                @else
                        Saldada &nbsp;&nbsp;
                    <a href="{{ route('documento.getTransacciones',$item->id) }}" type="button" title="Transacciones" target="_blank"
                    class="fas fa-file-pdf" style="color:gray !important; background-color:transparent; border: 0px solid;"></a>
               @endif
          </td>
       </tr>
       @php
           $i++;
       @endphp
        @endforeach
    </tbody>
 </table>
 <table class="table" style="width: 100%">
    <tr>
        <td colspan="6" style="text-align: center;"><strong>Total Monto Pendiente: &nbsp;&nbsp;&nbsp;$&nbsp;{{ number_format($totalCxC_C,2) }}</strong></td>
    </tr>
 </table>
 @include('cotizacionCompleta.modals.abonarModal')
 @include('cotizacionCompleta.modals.saldarModal')
 <script>
     function transaccion(id,monto,tipo){
        if(tipo==1){
            $('#doc_id').val(id);
            $('#monto_a').val(monto);
        }
        else{
            $('#id_doc').val(id);
            $('#monto_s').val(monto);
        }
     }

     (function(){
         document.querySelectorAll('input[type="date"]').forEach((input)=>{
            var newDate = new Date();
            input.value = newDate.toISOString().split("T")[0]
         });
     })();
 </script>
@endsection