@extends('layouts.app')

@section('custom-styles')
  <!-- daterange picker -->
  <link rel="stylesheet" href="/plugins/daterangepicker/daterangepicker.css">
  <!-- Select2 -->
  <link rel="stylesheet" href="/plugins/select2/css/select2.min.css">
  <link rel="stylesheet" href="/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">
  <link rel="stylesheet" href="/css/tva-select2.css">
  <!-- DataTables -->
  <link href="/plugins/datatables/dataTables.bootstrap4.min.css" rel="stylesheet">
  <link href="/plugins/datatables-autofill/css/autoFill.bootstrap4.min.css" rel="stylesheet">
  <link href="/plugins/datatables-buttons/css/buttons.bootstrap4.min.css" rel="stylesheet">
  <link href="/plugins/datatables-colreorder/css/colReorder.bootstrap4.min.css" rel="stylesheet">
  <link href="/plugins/datatables-datetime/css/dataTables.dateTime.min.css" rel="stylesheet">
  <link href="/plugins/datatables-fixedcolumns/css/fixedColumns.bootstrap4.min.css" rel="stylesheet">
  <link href="/plugins/datatables-fixedheader/css/fixedHeader.bootstrap4.min.css" rel="stylesheet">
  <link href="/plugins/datatables-keytable/css/keyTable.bootstrap4.min.css" rel="stylesheet">
  <link href="/plugins/datatables-responsive/css/responsive.bootstrap4.min.css" rel="stylesheet">
  <link href="/plugins/datatables-rowgroup/css/rowGroup.bootstrap4.min.css" rel="stylesheet">
  <link href="/plugins/datatables-rowreorder/css/rowReorder.bootstrap4.min.css" rel="stylesheet">
  <link href="/plugins/datatables-scroller/css/scroller.bootstrap4.min.css" rel="stylesheet">
  <link href="/plugins/datatables-searchbuilder/css/searchBuilder.bootstrap4.min.css" rel="stylesheet">
  <link href="/plugins/datatables-searchpanes/css/searchPanes.bootstrap4.min.css" rel="stylesheet">
  <link href="/plugins/datatables-select/css/select.bootstrap4.min.css" rel="stylesheet">
  <link href="/plugins/datatables-staterestore/css/stateRestore.bootstrap4.min.css" rel="stylesheet">  
@endsection

@section('content-header')
    <div class="col-sm-6">
        <h1 class="m-0"><i class="nav-icon fas fa-money-check-alt"></i> {{ __('Cuenta principal') }}</h1>
    </div><!-- /.col -->
    <div class="col-sm-6">
        <ol class="breadcrumb float-sm-right">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item active">Cuenta principal</li>
        </ol>
    </div><!-- /.col -->
@endsection

@section('content')

  <!-- Main content -->
  <section class="content">
    <div class="container-fluid">        
        <div class="row">
            <div class="col-md-12">

                <div class="card">

                    <div class="card-header">
                      {{-- <h3 class="card-title">{{ __('cuenta-principal.lista.titulo') }}</h3> --}}
                      <a href="{{ route('cuenta-principal.create') }}" class="btn bg-primary">Nuevo Movimiento</a>                      
                      <div class="card-tools">
                        <div class="input-group input-group-sm" style="width: 183px;">
                          <button type="button" class="btn btn-default btn-block" data-toggle="collapse" data-target="#searchFilters" aria-expanded="false" aria-controls="searchFilters">Búsqueda avanzada &nbsp;<i class="fa fa-search"></i></button>
                        </div>
                      </div>
                    </div>
                    <!-- /.card-header -->

                    <div class="card-body table-responsive p-0">

                      <!-- search filters -->
                      <form action="{{ route('cuenta-principal.search') }}" method="POST" novalidate="novalidate">
                        @csrf
                        <div class="collapse @if (isset($someFilter) && $someFilter === true) show @endif" id="searchFilters">
                          <div class="card card-body">
                            <div class="row">

                              <div class="col-sm-12">
                                <h3 class="m-0"><i class="nav-icon fas fa-filter fa-xs"></i> Filtros de búsqueda</h3><br>
                              </div>

                              {{-- Concepto - Moneda - Rango fechas --}}                              

                              <div class="col-md-3">
                                <div class="input-group mb-3">
                                  <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="fas fa-file-invoice" title="Rubro"></i></span>
                                  </div>
                                  <select class="select2bs4" multiple="multiple" data-placeholder="Rubro/s" name="concepto_id[]">
                                    @foreach($conceptos as $id=>$descripcion )
                                      <option value="{{ $id }}" @if (@isset($concepto_id)) @foreach ($concepto_id as $item) @if ($item == $id) selected @endif @endforeach @endif >{{ $descripcion }}</option>
                                    @endforeach
                                  </select>
                                </div>
                              </div>

                              <div class="col-md-2">
                                <div class="input-group mb-3">
                                  <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="fas fa-dollar-sign" title="Moneda"></i></span>
                                  </div>
                                  <select class="select2bs4" multiple="multiple" data-placeholder="Moneda/s" name="moneda_id[]">
                                    @foreach($monedas as $id=>$simbolo )
                                      <option value="{{ $id }}" @selected($moneda_id === $id) >{{ $simbolo }}</option>
                                    @endforeach
                                  </select>
                                </div>
                              </div>

                              <div class="col-md-3">
                                <div class="input-group">
                                    <button type="button" class="btn btn-default float-right" id="daterange-btn">
                                    <i class="far fa-calendar-alt"></i> &nbsp;Rango fecha
                                    <i class="fas fa-caret-down"></i>
                                    </button>
                                    <div id="reportrange">
                                        <span></span>
                                    </div>
                                    <input type="hidden" name="fecha_inicio" id="fecha_inicio" value="{{ $fecha_inicio??'' }}">
                                    <input type="hidden" name="fecha_fin" id="fecha_fin" value="{{ $fecha_fin??'' }}">
                                </div>
                                <!-- /.input group -->                           
                              </div>                               

                              <div class="col-sm-12 text-right">
                                <a href="{{ route('cuenta-principal.index') }}" class="btn btn-default"><i class="fa fa-sync"></i>&nbsp;Limpiar</a>
                                <button type="submit" class="btn btn-warning">Buscar &nbsp;<i class="fa fa-search"></i></button>
                              </div>

                            </div>
                          </div>
                        </div>
                      </form>
                      <!-- /search filters -->

                    </div>
                    <!-- /.card-body -->

                </div>
                <!-- /.card -->

                <div class="card">

                  <div class="card-header">
                    @if(!@empty(session('message')))
                        @switch(session('type'))
                            @case('OK')
                              <div class="alert alert-success alert-dismissible">
                                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                <h5><i class="icon fas fa-check"></i> Listo!</h5>
                                {{ session('message') }}
                              </div>
                                @break
                            @default
                              <div class="alert alert-warning alert-dismissible">
                                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                <h5><i class="icon fas fa-exclamation-triangle"></i> Atención!</h5>
                                {{ session('message') }}
                              </div>
                        @endswitch
                    @endif
                  </div>
                  <!-- /.card-header -->

                  <div class="card-body">

                    <table id="proveedoresTable" class="table table-bordered table-striped">
                      <thead>
                        <tr>
                          {{-- <th class="text-center">Rubro</th> --}}
                          <th class="text-center">Fecha</th>
                          <th class="text-center">Descripción</th>
                          <th class="text-center">Forma de cobro/pago</th>
                          <th class="text-center">Crédito</th>
                          <th class="text-center">Débito</th>
                          <th class="text-center">Saldo</th>
                          <th class="text-center">Fecha venc.</th>
                          <th class="text-center">Estado</th>
                          {{-- <th class="text-center">Acciones</th> --}}
                        </tr>
                      </thead>
                      <tbody>
                          @foreach($registros as $registro)
                          <tr>
                              {{-- <td class="align-middle">{{ $registro->concepto->descripcion }}</td> --}}
                              <td class="text-center align-middle">{{ $registro->created_at?->format('d/m/Y') }}</td>
                              <td class="align-middle">{{ $registro->descripcion }}</td>
                              <td class="text-center align-middle">{{ $registro->origenPago->descripcion }}</td>
                              <td class="align-middle">@if ($registro->importe > 0) {{ $registro->moneda->simbolo }} {{ number_format($registro->importe, 2) }} @endif</td>
                              <td class="align-middle">@if ($registro->importe < 0) {{ $registro->moneda->simbolo }} {{ number_format($registro->importe, 2) }} @endif</td>
                              <td class="align-middle">{{ $registro->moneda->simbolo }} {{ number_format($registro->saldo, 2) }}</td>
                              <td class="text-center align-middle">{{ $registro->fecha_vencimiento?->format('d/m/Y') }}</td>
                              <td class="text-center align-middle">{{ $registro->estado_id->label() }}</td>
                              {{-- <td class="text-center align-middle">
                                <a class="btn btn-success btn-sm" href="{{ route('cuenta-principal.show', $registro->id) }}">
                                  <i class="fas fa-eye"></i> Ver
                                </a>
                                <a class="btn btn-info btn-sm" href="{{ route('cuenta-principal.edit', $registro->id) }}">
                                  <i class="fas fa-edit"></i> Editar
                                </a>
                                <a class="btn btn-danger btn-sm delete-button" data-toggle="modal" data-target="#modal-delete" data-form-action="{{ route('cuenta-principal.destroy', $registro->id) }}" title="Eliminar socio" style="cursor:pointer;">
                                  <i class="fas fa-trash-alt"></i> Borrar
                                </a>                                    
                              </td> --}}
                          </tr>                          
                          @endforeach
                      </tbody>
                      <tfoot>
                        <tr>
                            <th colspan="7" style="text-align:right">Total:</th>
                            <th></th>
                        </tr>
                      </tfoot>
                    </table>

                  </div>
                  <!-- /.card-body -->

                </div>
                <!-- /.card -->

            </div>
        </div>
    </div><!-- /.container-fluid -->
  </section>
  <!-- /.content -->

  <div class="modal fade" id="modal-delete" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
      <div class="modal-content">
        <form id="delete-form" action="" method="POST">
          @csrf
          @method('DELETE')
        <div class="modal-header">
          <h4 class="modal-title">Eliminar</h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body">
          <p>¿Confirmas eliminar la socio?</p>
        </div>
        <div class="modal-footer justify-content-between">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
          <button type="submit" class="btn btn-danger">Eliminar</button>
        </div>
        </form>
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>

@endsection

@section('custom-scripts')
    <!-- InputMask -->
    <script src="/plugins/moment/moment.min.js"></script>
    <script src="/plugins/inputmask/jquery.inputmask.min.js"></script>
    <!-- date-range-picker -->
    <script src="/plugins/daterangepicker/daterangepicker.js"></script>

  <!-- Select2 -->
  <script src="/plugins/select2/js/select2.full.min.js"></script>

  <!-- DataTables  & Plugins -->
  <script src="/plugins/jszip/jszip.min.js"></script>
  <script src="/plugins/pdfmake/pdfmake.min.js"></script>
  <script src="/plugins/pdfmake/vfs_fonts.js"></script>
  <script src="/plugins/datatables/dataTables.min.js"></script>
  <script src="/plugins/datatables/dataTables.bootstrap4.min.js"></script>
  <script src="/plugins/datatables-autofill/js/dataTables.autoFill.min.js"></script>
  <script src="/plugins/datatables-autofill/js/autoFill.bootstrap4.min.js"></script>
  <script src="/plugins/datatables-buttons/js/dataTables.buttons.min.js"></script>
  <script src="/plugins/datatables-buttons/js/buttons.bootstrap4.min.js"></script>
  <script src="/plugins/datatables-buttons/js/buttons.colVis.min.js"></script>
  <script src="/plugins/datatables-buttons/js/buttons.html5.min.js"></script>
  <script src="/plugins/datatables-buttons/js/buttons.print.min.js"></script>
  <script src="/plugins/datatables-colreorder/js/dataTables.colReorder.min.js"></script>
  <script src="/plugins/datatables-datetime/js/dataTables.dateTime.min.js"></script>
  <script src="/plugins/datatables-fixedcolumns/js/dataTables.fixedColumns.min.js"></script>
  <script src="/plugins/datatables-fixedheader/js/dataTables.fixedHeader.min.js"></script>
  <script src="/plugins/datatables-keytable/js/dataTables.keyTable.min.js"></script>
  <script src="/plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
  <script src="/plugins/datatables-responsive/js/responsive.bootstrap4.js"></script>
  <script src="/plugins/datatables-rowgroup/js/dataTables.rowGroup.min.js"></script>
  <script src="/plugins/datatables-rowreorder/js/dataTables.rowReorder.min.js"></script>
  <script src="/plugins/datatables-scroller/js/dataTables.scroller.min.js"></script>
  <script src="/plugins/datatables-searchbuilder/js/dataTables.searchBuilder.min.js"></script>
  <script src="/plugins/datatables-searchbuilder/js/searchBuilder.bootstrap4.min.js"></script>
  <script src="/plugins/datatables-searchpanes/js/dataTables.searchPanes.min.js"></script>
  <script src="/plugins/datatables-searchpanes/js/searchPanes.bootstrap4.min.js"></script>
  <script src="/plugins/datatables-select/js/dataTables.select.min.js"></script>
  <script src="/plugins/datatables-staterestore/js/dataTables.stateRestore.min.js"></script>
  <script src="/plugins/datatables-staterestore/js/stateRestore.bootstrap4.min.js"></script>

  <script>
    $('#modal-delete').on('show.bs.modal', function (event) {
    
      var button = $(event.relatedTarget);
      $('#delete-form').attr('action', button.data('form-action'));
    
    });

    $(function () {

      //Initialize Select2 Elements
      $('.select2').select2()

      //Initialize Select2 Elements
      $('.select2bs4').select2({
        theme: 'bootstrap4'
      })

        //Datemask dd/mm/yyyy
        $('#datemask').inputmask('dd/mm/yyyy', { 'placeholder': 'dd/mm/yyyy' })
        //Datemask2 mm/dd/yyyy
        $('#datemask2').inputmask('mm/dd/yyyy', { 'placeholder': 'mm/dd/yyyy' })
        //Money Euro
        $('[data-mask]').inputmask()

        //Date picker
        $('#reservationdate').datetimepicker({
            format: 'L'
        });

        //Date and time picker
        $('#reservationdatetime').datetimepicker({ icons: { time: 'far fa-clock' } });

        //Date range picker
        $('#reservation').daterangepicker()
        //Date range picker with time picker
        $('#reservationtime').daterangepicker({
        timePicker: true,
        timePickerIncrement: 30,
        locale: {
            format: 'DD/MM/YYYY hh:mm A'
        }
        })
        //Date range as a button
        $('#daterange-btn').daterangepicker(
        {
            ranges   : {
            'Hoy'       : [moment(), moment()],
            'Ayer'   : [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
            'Últimos 7 días' : [moment().subtract(6, 'days'), moment()],
            'Últimos 30 días': [moment().subtract(29, 'days'), moment()],
            'Este mes'  : [moment().startOf('month'), moment().endOf('month')],
            'Último mes'  : [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            },
            startDate: moment().subtract(29, 'days'),
            endDate  : moment()
        },
        function (start, end) {
            $('#reportrange span').html(start.format('DD/MM/YYYY') + ' - ' + end.format('DD/MM/YYYY'))
            $('#fecha_inicio').val(start.format('yyyy-MM-DD 00:00:00'));
            $('#fecha_fin').val(end.format('yyyy-MM-DD 23:59:59'));
        }
        )

      $("#proveedoresTable").DataTable({
        responsive: true, 
        lengthChange: false, 
        autoWidth: false,        
        layout: {
            topStart: {
                buttons: [
                  "copy", 
                  "excel", 
                  {
                      extend: 'pdfHtml5',
                      orientation: 'landscape',
                      pageSize: 'A4',
                      filename: 'cuenta_principal_{{ date("YmdHis") }}',
                      title: 'Listado de movimientos de la cuenta principal - {{ config("app.name") }}',
                      customize : function(doc){
                          // Get the number of columns in the table
                          const numColumns = doc.content[1].table.body[0].length;
                          
                          doc.content[1].table.widths = Array(numColumns).fill('*'); // Create an array of '*' for each column
                          // doc.content[1].table.widths = ['auto', 'auto', 'auto', '50%', 'auto', 'auto']; // Example with mixed widths
                      }
                  },
                  "print"
                ] //"csv","colvis"
            },
            // bottomStart: {
            //   info: {
            //       empty: 'Ningún dato disponible en esta tabla.'
            //   }
            // }
        },
        language: {
            url: '/plugins/datatables-i18n/es-ES.json',
        },
        "footerCallback": function(row, data, start, end, display) {
            var api = this.api();

            // Helper function to remove formatting and convert to number
            var intVal = function(i) {
                return typeof i === 'string' ?
                    i.replace(/[\$,]/g, '') * 1 :
                    typeof i === 'number' ?
                    i : 0;
            };

            // Calculate total for the 'Salary' column (assuming it's the 4th column, index 3)
            var creditoTotal = api
                .column(3, { page: 'current' }) // Sum only visible data on the current page
                .data()
                .reduce(function(a, b) {
                    return intVal(a) + intVal(b);
                }, 0);

            // Update the footer cell for the 'Salary' column
            // $(api.column(3).footer()).html('TOTAL: $' + creditoTotal.toLocaleString());

            // Calculate total for the 'Salary' column (assuming it's the 4th column, index 3)
            var debitoTotal = api
                .column(4, { page: 'current' }) // Sum only visible data on the current page
                .data()
                .reduce(function(a, b) {
                    return intVal(a) + intVal(b);
                }, 0);

            // Update the footer cell for the 'Salary' column
            // $(api.column(4).footer()).html('TOTAL: $' + debitoTotal.toLocaleString());


            // Total over all pages
            granTotalCreditos = api
                .column(3)
                .data()
                .reduce((a, b) => intVal(a) + intVal(b), 0);
    
            // Total over this page
            totalPaginaCreditos = api
                .column(3, { page: 'current' })
                .data()
                .reduce((a, b) => intVal(a) + intVal(b), 0);

            // Total over all pages
            granTotalDebitos = api
                .column(4)
                .data()
                .reduce((a, b) => intVal(a) + intVal(b), 0);
    
            // Total over this page
            totalPaginaDebitos = api
                .column(4, { page: 'current' })
                .data()
                .reduce((a, b) => intVal(a) + intVal(b), 0);
    
            // Update footer
            api.column(6).footer().innerHTML =
                'En esta pagina $ ' + (totalPaginaCreditos + totalPaginaDebitos) + ' ( $ ' + (granTotalCreditos + granTotalDebitos) + ' total)';
            }
      });

    });
  </script>
@endsection