@extends('cuentas.base')

@section('cuentas_title')
  <span id="cuenta"></span>
@endsection

@section('cuentas_content')
  <div class="ui right aligned header">
    <div class="ui calendar" id="mes">
      <div class="ui input right icon">
        <input type="text" placeholder="Mes" />
        <i class="calendar icon"></i>
      </div>
    </div>
    <div class="ui icon button" id="prev_button">
      <i class="double left angle icon"></i>
    </div>
    <div class="ui icon button" id="left_button">
      <i class="left angle icon"></i>
    </div>
    <div class="ui icon disabled button" id="right_button">
      <i class="right angle icon"></i>
    </div>
    <div class="ui icon disabled button" id="next_button">
      <i class="double right angle icon"></i>
    </div>
  </div>
  <table class="ui striped table">
    <thead>
      <tr>
        <th>
          Fecha
        </th>
        <th>
          Categoría
        </th>
        <th>
          Detalle
        </th>
        <th class="right aligned">
          Debe
        </th>
        <th class="right aligned">
          Haber
        </th>
        <th class="right aligned">
          Saldo
        </th>
        <th class="right aligned">
          <button class="ui tiny blue circular icon button" id="refresh">
            <i class="refresh icon"></i>
          </button>
          <button class="ui tiny green circular icon button" id="add">
            <i class="plus icon"></i>
          </button>
        </th>
      </tr>
    </thead>
    <tbody id="transacciones"></tbody>
  </table>

  <div class="ui modal">
    <i class="close icon"></i>
    <div class="content">
      <form class="ui form">
        <input type="hidden" name="id" />
        <div class="field">
          <label>Fecha</label>
          <div class="ui calendar">
            <div class="ui input left icon">
              <i class="calendar icon"></i>
              <input type="text" name="fecha" placeholder="Fecha" />
            </div>
          </div>
        </div>
        <div class="field">
          <label>Cuenta</label>
          <select name="cuenta"></select>
        </div>
        <div class="field">
          <label>Glosa</label>
          <input type="text" name="glosa" />
        </div>
        <div class="field">
          <label>Detalle</label>
          <input type="text" name="detalle" />
        </div>
        <div class="field">
          <label>Valor</label>
          <input type="text" name="valor" />
        </div>
        <button class="ui icon button">
          <i class="plus icon"></i>
        </button>
      </form>
    </div>
  </div>
@endsection

@push('scripts')
  <script type="text/javascript" src="{{$urls->scripts}}/cuentas.show.js"></script>
  <script type="text/javascript">
    $(document).ready(() => {
      transacciones.cuenta_id = {{$cuenta_id}}
      transacciones.max = {{$max_transacciones ?? 100}}
      transacciones.setup()
    })
  </script>
@endpush