@extends('metronic.base')
@section('extracss')

    <style>
        .select2-container--default .select2-selection--single {
            height: 37px;
        }

        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 37px;
        }

        .dataTables_length {
            display: none !important;
        }

        #no_records_row {
            display: table-row !important;
        }
    </style>
@endsection
@section('extrajs')

    <script src="{{ URL::asset('js/banco/conciliacion.js') }}"></script>
@endsection
@section('content')
    <h2 class="text-center">Conciliacion Bancaria</h2>
    @include('sessions')
    <h5 class="alert alert-warning">Seleccione la cuenta, y el rango de fechas</h5>
    <h5 class="alert alert-info"><b>Importante:</b> para poder realizar el procedimiento de conciliación bancaria, la cuenta
        seleccionada debe poseer movimientos, ya sea cargos o abonos. En la lista que se presente, seleccionar los registros
        a conciliar y luego dar clic en el botón <b>Conciliar</b></h5>
    <input type="hidden" id="url_data" value="{{ route('banco.GETTransactions') }}">
    <div class="d-flex ali">
        <div class="form-group w-25 mx-1">
            <label for="">Cuenta</label>
            <select class="form-control" id="cuentas_bancarias" onchange="onDataInputsChange()">
                @foreach ($cuentas as $cuenta)
                    <option value="{{ $cuenta->id }}">{{ $cuenta->nombre_banco }}-{{ $cuenta->numero_cuenta }}</option>
                @endforeach
            </select>
        </div>
        <div class="d-flex w-50 mx-1">
            <div class="form-group w-50 mx-1">
                <label for="">Desde</label>
                <input type="date" class="form-control" name="fecha_desde" id="fecha_desde"
                    onchange="onDataInputsChange()">
            </div>
            <div class="form-group w-50 mx-1">
                <label for="">Hasta</label>
                <input type="date" class="form-control" name="fecha_hasta" id="fecha_hasta"
                    onchange="onDataInputsChange()">
            </div>
        </div>
        <div class="form-group w-25 d-flex align-items-end">
            <form action="{{ route('banco.Conciliar') }}" method="post" id="conciliacionForm">
                @csrf
                <input type="hidden" id="input_conciliaciones" name="conciliaciones">
            </form>
            <button type="submit" class="btn btn-primary" id="btn_conciliar" onclick="conciliarTransaciones()" disabled
                id="btn-guardar">Conciliar</button>
        </div>
    </div>

    <br>
    <table class="table table-bordered table-hover" id="table_transaccion">
        <thead class="bg-dark text-white">
            <th>Fecha Contable</th>
            <th>Tipo</th>
            <th>Referencia</th>
            <th>Nombre / Motivo</th>
            <th colspan="2">Monto</th>
            <th>¿Conciliar?</th>
        </thead>
        <tbody>

        </tbody>
        <tfoot>
            <tr id="no_records_row" style="display: none;">
                <td colspan="7" class="text-center">Sin registros. Para realizar una conciliación por favor seleccione una cuenta que posea movimientos, ya sea cargos o abonos y seleccione un rango de fecha que contenga los movimientos.</td>
            </tr>
        </tfoot>
    </table>
@endsection