@extends('layout.base')

@section('page_content')
  <h2 class="ui header">Moneda - <span class="name"></span></h2>
  <h3 class="ui header" class="code"></h3>
  <table class="ui table">
    <thead>
      <tr>
        <th>Fecha</th>
        <th>Valor</th>
        <th id="add_value">
          <i class="plus icon"></i>
        </th>
      </tr>
    </thead>
    <tbody id="values"></tbody>
  </table>
  <div class="ui modal" id="add_modal">
    <div class="header">
      Agregar Valor para <span class="name"></span>
    </div>
    <div class="content">
      <form class="ui form">
        <div class="inline field">
          <label>Fecha</label>
          <div class="ui calendar">
            <div class="ui input left icon">
              <i class="calendar icon"></i>
              <input type="text" placeholder="Fecha/Hora" name="fecha" />
            </div>
          </div>
        </div>
        <div class="inline field">
          <label>Valor</label>
          <input type="text" name="valor" />
        </div>
        <div class="inline field">
          <label>Cambio con</label>
          <div class="ui dropdown">
            <input type="hidden" name="base" />
            <div class="default text">
              Cambio
            </div>
            <i class="dropdown icon"></i>
            <div class="menu"></div>
          </div>
        </div>
        <button class="ui button">Agregar</button>
      </form>
    </div>
  </div>
@endsection

@push('scripts')
  <script type="text/javascript">
    function formatDate(date) {
      return (new Intl.DateTimeFormat('es-CL', {year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit'})).format(date)
    }
    function formatValue(value, base) {
      return (new Intl.NumberFormat('es-CL', {style: 'currency', currency: base, minimumSignificantDigits: 2})).format(value)
    }
    let currency = {
      id: {{$currency_id}},
      data: {
        id: 0,
        name: '',
        code: ''
      },
      map: {
        name: '.name',
        code: '.code'
      },
      values_id: '#values',
      values: [],
      add_button: '#add_value',
      modal: '#add_modal',
      setup: function() {
        $(this.values_id).parent().hide()
        this.buildModal()
        $(this.add_button).css('cursor', 'pointer').click((e) => {
          this.addValue()
        })
        this.getData().then(() => {
          this.getValues()
        })
      },
      buildModal: function() {
        this.getCurrencies()
        $(this.modal).modal()
        $(this.modal).find('.ui.calendar').calendar()
        $(this.modal).find('form').submit((e) => {
          e.preventDefault()
          this.doAddValue()
          return false
        })
        $(this.modal).find('.ui.dropdown').dropdown()
      },
      getData: function() {
        let url = '{{$urls->api}}/currency/' + this.id
        return $.getJSON(url, (data) => {
          $.each(this.data, (i, el) => {
            this.data[i] = data.currency[i]
          })
          $.each(this.map, (i, el) => {
            $(el).html(data.currency[i])
          })
        })
      },
      getValues: function() {
        let url = '{{$urls->api}}/currency/' + this.id + '/values'
        return $.getJSON(url, (data) => {
          if (data.values.length > 0) {
            this.values = data.values
            this.populateValues()
          }
        })
      },
      populateValues: function() {
        $(this.values_id).html('')
        $.each(this.values, (i, el) => {
          let row = $('<tr></tr>').append(
            $('<td></td>').html(formatDate(el.fecha))
          ).append(
            $('<td></td>').html(formatValue(el.value, el.base.code))
          ).append(
            $('<td></td>')
          )
          $(this.values_id).append(row)
        })
        $(this.values_id).parent().show()
      },
      getCurrencies: function() {
        let url = '{{$urls->api}}/currencies'
        $.getJSON(url, (data) => {
          let dp = $(this.modal).find('.ui.dropdown')
          values = []
          $.each(data.currencies, (i, el) => {
            values.push({name: el.name, value: el.id, text: el.name})
          })
          dp.dropdown('setup menu', {values: values})
        })
      },
      addValue: function() {
        $(this.modal).find('form').trigger('reset')
        $(this.modal).modal('show')
      },
      doAddValue: function() {
        let form = $(this.modal).find('form')
        info = {
          date_time: (new Date(form.find('.ui.calendar').calendar('get date'))),
          value: form.find("[name='valor']").val(),
          base_id: form.find('.ui.dropdown').dropdown('get value')
        }
        let url = '{{$urls->api}}/currency/' + this.data.id + '/values/add'
        $.post(url, info, (data) => {
          console.debug(data)
          if (data.values[0].created) {
            window.location.reload()
            return false
          }
        })
        $(this.modal).modal('hide')
      }
    }
    $(document).ready(() => {
      currency.setup()
    })
  </script>
@endpush