@extends('admin.layout.base')

@section('page_content')
  <div id="equipos">
    <div class="ui container">
      <div class="ui header">
        EQUIPOS NOTARIA
      </div>
      <div class="ui grid">
        @foreach ($equipos as $i => $equipo)
          <div class="row">
            <div class="nine wide column">
              <div class="ui top attached segment">
                <div class="ui header">
                  {{$equipo->titulo}}
                </div>
              </div>
              <table class="ui bottom attached celled table">
                <tbody>
                  @foreach ($equipo->miembros as $j => $miembro)
                    <tr>
                      <td>
                        @if (isset($miembro->nombre))
                          {{$miembro->nombre}}
                        @endif
                      </td>
                      <td>
                        @if (isset($miembro->email))
                          {{$miembro->email}}
                        @endif
                      </td>
                      <td class="center aligned">
                        <i class="remove icon" data-equipo="{{$i}}" data-id="{{$j}}"></i>
                      </td>
                    </tr>
                  @endforeach
                </tbody>
                <tfooter>
                  <tr>
                    <td colspan="3">
                      <form class="ui form" data-equipo="{{$i}}">
                        <div class="inline fields">
                          <div class="inline field">
                            <input type="text" name="nombre" placeholder="Nombre" />
                          </div>
                          <div class="inline field">
                            <input type="text" name="email" placeholder="Email" />
                          </div>
                          <button class="ui inverted dark-blue button">CREAR</button>
                        </div>
                      </form>
                    </td>
                  </tr>
                </tfooter>
              </table>
            </div>
          </div>
        @endforeach
      </div>
    </div>
  </div>
@endsection

@push('scripts')
  <script type="text/javascript">
    $(document).ready(() => {
      $('.remove.icon').css('cursor', 'pointer').click(function(e) {
        var equipo = $(this).attr('data-equipo')
        var id = $(this).attr('data-id')
        $.post('{{$urls->admin}}/equipos/remove', {equipo: equipo, id: id}, (data) => {
          if (data.estado) {
            window.location.reload()
          }
        })
      })
      $('form').submit(function(e) {
        var equipo = $(this).attr('data-equipo')
        var nombre = $(this).find("input[name='nombre']").val()
        var email = $(this).find("input[name='email']").val()
        $.post('{{$urls->admin}}/equipos/add', {equipo: equipo, nombre: nombre, email: email}, (data) => {
          if (data.estado) {
            window.location.reload()
            return
          }
        })

        e.preventDefault()
        return false
      })
    })
  </script>
@endpush