@extends('metronic.base')
@section('extracss')
    <style>
        .concepto {
            min-width: 150px !important;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .money {
            text-align: right;
            width: 200px;
        }

        .money::before {
            content: "$";
            float: left;
            font-weight: bolder;

        }

        .money:empty::before {
            content: "";
        }
    </style>
@endsection
@section('extrajs')
    <script>
        $(function() {
            $('#erp-datatable tfoot th:not(:nth-last-child(2)):not(:last-child)').each(function() {
                $(this).html('<input type="text" />');
            });
            var total_columns = $("#erp-datatable thead").find("tr")[0].cells.length;

            var initialLoad = false;
            var table = $('#erp-datatable').DataTable({
                processing: true,
                serverSide: true,
                stateSave: true,
                scrollX: false,
                autoWidth: false,
                "dom": "<'row'" +
                    "<'col-sm-6 d-flex align-items-center justify-content-start'l>" +
                    "<'col-sm-6 d-flex align-items-center justify-content-end'f>" +
                    ">" +
                    "<'table-responsive'tr>" +
                    "<'row'" +
                    "<'col-sm-12 col-md-5 d-flex align-items-center justify-content-center justify-content-md-start'i>" +
                    "<'col-sm-12 col-md-7 d-flex align-items-center justify-content-center justify-content-md-end'p>" +
                    ">",
                {!! App::isLocale('es')
                    ? "language: {url:'" . asset('metronic/assets/js/es-Es.json') . "'},"
                    : "language: {url:'" . asset('metronic/assets/js/es-Es.json') . "'}," !!}
                ajax: {
                    url: '{{ route('Contabilidad.indexData') }}',
                    data: function (d) {
                        
                        d.period = $('#filter-period').val();
                    }
                },
                initComplete: function() {
                    var i = 0,
                        total_cols_busq = total_columns - 2;
                    this.api().columns().every(function() {
                        if (i < total_cols_busq) {
                            var column = this;
                            $("input", $("#erp-datatable tfoot th")[i])
                                .on('change',
                                    function() { 
                                        column.search($(this).val(), false, false, true).draw();
                                    });
                            i++;
                        }
                    });
                    if (typeof getUrlVars()['search'] !== 'undefined') {
                        var search_val = decodeURIComponent(getUrlVars()['search']);
                        this.api().search(search_val).draw();
                    }
                    table = $('#erp-datatable').DataTable();
                    new $.fn.dataTable.Buttons(table, {
                        name: 'btnCleanSearch',
                        buttons: [{
                            text: '{{ __('Limpiar') }}',
                            action: function(e, dt, node, config) {
                                dt.search('').draw();
                            },
                            className: 'btn btn-secondary btnClear mx-2'
                        }]
                    });

                    table
                        .buttons('btnCleanSearch', null)
                        .containers()
                        .insertAfter('.dataTables_filter');
                },
                stateSaveParams: function(settings, data) {
                    if (!initialLoad) {
                        //se hacen pequeños los campos de búsqueda
                        var th, total_cols_busq = total_columns - 2;
                        for (i = 0; i < total_cols_busq; i++) {
                            var col_search_val = data.columns[i].search.search;
                            th = $('#erp-datatable tfoot').find('th:nth-child(' + (i + 1) + ')');
                            th.find('input').attr('size', 5);
                            if (col_search_val !== "") {
                                th.find('input').val(col_search_val);
                            }
                        }
                        initialLoad = true;
                    }
                },
                order: [
                    [total_columns - 1, "desc"]
                ],
                columnDefs: [{
                    targets: [-1],
                    visible: false,
                    searchable: false
                }, ],
                columns: [{
                        data: 'fecha',
                        name: 'partida_contables.fecha_contable',
                        orderable: true,
                        searchable: true
                    },
                    {
                        data: 'codigo',
                        name: 'full_code',
                        orderable: false,
                        searchable: true
                    },
                    {
                        data: 'concepto',
                        name: 'concepto',
                        orderable: true,
                        searchable: true
                    },
                    {
                        data: 'beneficiario',
                        name: 'beneficiario',
                        orderable: true,
                        searchable: true
                    },
                    {
                        data: 'acciones',
                        name: 'acciones',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'id',
                        name: 'partida_contables.id'
                    },
                ]
            });

            // Recargar tabla cuando cambia el select
            $('#filter-period').change(function() {
                table.draw();
            });

            var dTable = $(".datatable").DataTable();
            $(".dataTables_filter input")
                .unbind()
                .bind("input", function(e) {
                    if (this.value.length >= 3 || e.keyCode == 13) {
                        dTable.search(this.value).draw();
                    }
                    if (this.value == "") {
                        dTable.search("").draw();
                    }
                    return;
                });
        });
    </script>

@endsection
@section('content')
    @include('contabilidad.modals.agregarPartidaModal')
    @include('contabilidad.modals.anularModal')
    @include('sessions')
    <div class="container-fluid">
        <button class="btn btn-primary mb-4" data-bs-toggle="modal" data-bs-target="#kt_modal_1"><i class="ki-outline ki-add-files fs-2"></i> Crear Partida</button>
        <div class="row mb-4">
            <div class="col-md-3">
                <label for="filter-period">Período:</label>
                <select id="filter-period" class="form-select" data-control="select2">
                    <option value="">{{ __('Seleccionar Periodo') }}</option>
                    @foreach ($periodosActivos as $periodo)
                        <option value="{{ $periodo->id }}" {{ $periodo->id == $ultimoPeriodoActivo->id ? 'selected' : '' }}>
                            {{ $periodo->label }}
                        </option>
                    @endforeach
                </select>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                @component('components.table')
                    @slot('thead')
                        <th>{{ __('Fecha Conta.') }}</th>
                        <th>{{ __('Codigo') }}</th>
                        <th>{{ __('Concepto') }}</th>
                        <th>{{ __('Beneficiario') }}</th>
                        <th>{{ __('Acciones') }}</th>
                        <th>{{ __('ID') }}</th>
                    @endslot
                    @slot('tfoot')
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                    @endslot
                @endcomponent
                {{-- <div class="">
                    <table class="table table-bordered table-hover w-150 mt-2">
                        <thead class="bg-primary text-white">
                            <tr>
                                <th>#</th>
                                <th>Fecha Conta.</th>
                                <th>Codigo</th>
                                <th>Concepto</th>
                                <th width="150">Beneficiario</th>
                                {{-- <th width="100">Monto</th> estaba comentado
                                <th>Acciones</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!--{{ $x = 1 }}-->
                            @foreach ($partidas as $item)
                                <tr>
                                    <td>{{ $x++ }}</td>
                                    <td>{{ date('d/m/Y', strtotime($item->fecha_contable)) }}</td>
                                    <td @if ($item->anulada == 1) style="color:red;" @endif>
                                        {{ $item->tipo->codigo . $item->pre_correlativo . $item->correlativo }}</td>
                                    <!--class="concepto"-->
                                    <td>{{ $item->concepto }}</td>
                                    <td>{{ $item->beneficiario }}</td>
                                    <!--class"money"-->
                                    {{-- <td class="text-right">{{number_format($item->monto,2)}}</td> estaba comentado
                                    <td>
                                        <a href="{{ route('Contabilidad.detallePartida', $item->id) }}"><i
                                                class="ki-outline ki-notepad-bookmark fs-2x text-primary mx-2"></i></a>
                                        @if ($item->abierta == 0)
                                            <a href="{{ route('ReportesContabilidad.RPReporteN', [$item->id, 0]) }}" title="Reporte de Contabilidad PDF"><i
                                                    class="ki-outline ki-note-2 fs-2x text-danger-emphasis mx-2"></i></a>
                                            <a href="{{ route('ReportesContabilidad.RPReporteN', [$item->id, 1]) }}"><i
                                                    class="far fa-file-excel"></i></a>
                                        @endif
                                        @if ($item->anulada != 1 && $item->abierta == 0)
                                            <button type="button" title="Anular" data-toggle="modal"
                                                data-target="#anularModal" class="ki-outline ki-pencil fs-2 text-dark"
                                                style="background-color:transparent; border: 0px solid;"
                                                onclick="fun_anular('{{ $item->id }}')" title="Editar"></button>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>

            </div> --}}
            </div>
        </div>
    </div>
    <script>
        function fun_anular(id) {

            $("#anular_id").val(id);

        }
    </script>
@endsection