@extends('layout', ['title' => 'Dashboard'])
@section('content')

  <a href="#" class="btn" data-bs-toggle="modal" data-bs-target="#modal-simple">
    <i class="fas fa-lock-open" style="margin-right: 5px;"></i>
    Obtine access la un sheet
  </a>

  {!! Form::open(['url' => '/process/Permission/']) !!}
    <div class="modal modal-blur fade" id="modal-simple" tabindex="-1" style="display: none;" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">(+) Permission</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            Pentru a te inscrie intr-un sheet ai nevoie de parola.<br>
            <br>
            <label>Parola</label>
            <input type="password" name="password" class="form-control">
          </div>
          <div class="modal-footer">
            <button type="button" class="btn me-auto" data-bs-dismiss="modal">Close</button>
            {!! Form::submit('Request access', ['class' => 'btn btn-primary']) !!}
          </div>
        </div>
      </div>
    </div>
  {!! Form::close() !!}
  <br>
  <div class="card-tabs">
    <div class="tab-content">
      
      @foreach(DB::table('sheets')->get() as $sheet)
        @if(access_to_sheet($sheet->id))
          <div id="tab-bottom-{{ $loop->iteration }}" class="card tab-pane {{ ($loop->iteration == 1) ? ('active show') : ('') }}" role="tabpanel">
            <div class="table-responsive">
              <table class="table table-vcenter card-table">
                <thead>
                  <tr>
                    <th class="w-1">#</th>
                    @foreach(DB::table('sheet_columns')->where('sheet', $sheet->id)->get() as $column)
                      <th>
                        {!! substr(implode(' ', array_map(function($word) { return strlen($word) > 2 ? '<br>' . $word : $word; }, explode(' ', $column->name))), 4); !!}
                      </th>
                    @endforeach
                    <th class="w-1"><a href="{{ url('/row/'.$sheet->id) }}"><i class="fas fa-plus" style="margin-right: 2px;"></i> add</a></th>
                  </tr>
                </thead>
                <tbody>
                  @foreach(DB::table('sheet_data')->where('for_sheet', $sheet->id)->get() as $sheet_data)

                    <tr>
                      <td>{{ $loop->iteration }}</td>
                      @foreach(DB::table('sheet_columns')->where('sheet', $sheet->id)->get() as $column)
                        <td>
                          <span>{{ json_decode($sheet_data->json_data, true)[$column->id] ?? '' }}</span>
                          <textarea type="text" name="edit_column" sheet="{{ $sheet->id }}" database_index="{{ $sheet_data->id }}" column="{{ $column->id }}" style="display: none;" class="form-control">{{ json_decode($sheet_data->json_data, true)[$column->id] ?? '' }}</textarea>
                        </td>
                      @endforeach   
                      <td>
                        @if(me()->admin)
                          <a href="{{ url('/row/delete/'.$sheet_data->id) }}" style="color: red; float: right;" onclick="return confirm('ESTI SIGURA?')">
                            <i class="fas fa-trash"></i>
                          </a>
                        @endif
                      </td>                         
                    </tr>

                  @endforeach
                  
                </tbody>
              </table>
            </div>

          </div>
        @endif
      @endforeach
      
      <!-- Cards navigation -->
      <ul class="nav nav-tabs nav-tabs-bottom" role="tablist">
        @foreach(DB::table('sheets')->get() as $sheet)
          @if(access_to_sheet($sheet->id))
            <li class="nav-item" role="presentation"><a href="#tab-bottom-{{ $loop->iteration }}" class="nav-link {{ $loop->iteration == 1 ? 'active' : '' }}" data-bs-toggle="tab" aria-selected="true" role="tab">{{ $sheet->name }}</a></li>
          @endif
        @endforeach
        
      </ul>
    </div>
  </div>
  <br>
  <i class="text-muted">Tip: Double click on something to edit...</i>

  <script type="text/javascript">
    $(document).ready(function () {
      $('td').on('dblclick', function () {
        var input = $(this).find('textarea');
        var span = $(this).find('span');

        input.css('display', '');
        span.css('display', 'none');

        
      });
      $('textarea').on('keydown', function (event) {
        if (event.keyCode === 13 && !event.shiftKey) {
          var sheet = $(this).attr('sheet');
          var database_index = $(this).attr('database_index');
          var column = $(this).attr('column');

          event.preventDefault();

          var self = $(this);

          $.get('https://work.velcea-partners.ro/change?sheet=' + sheet + '&database_index=' + database_index + '&column=' + column + '&newval=' + encodeURIComponent($(this).val()), function(data) {
            self.css('display', 'none');

            var span = self.closest('td').find('span');
            span.css('display', '');
            span.html(self.val());

            return;            
          });
        }
      });
    });


  </script>
@endsection