@extends('base')
@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="//cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">
    <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;
        }
    </style>   
@endsection
@section('extrajs')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/5.5.2/bootbox.min.js"></script>
    <script src="//cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
    <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>
    <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>
    <table class="table table-striped" 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>
    </table>
    
@endsection