@section('items')
  @if (isset($imagens) && is_array($imagens) && sizeof($imagens) > 0)
    @foreach ($imagens as $imagem)
      <div class="item">
        <div class="img" style="--bk-image: url({{ url('storage/' . $imagem['path']) }})"></div>
        <div class="info">
          <div class="d-flex align-items-center">
            <h5>{{ $imagem['nome'] }}</h5>
            <input type="text" style="display: none" class="edit_input form-control form-control-sm mb-2" value="{{ $imagem['nome'] }}">
            <a href="javascript:;" data-id="{{ $imagem['id'] }}" class="edit ms-2 small text-secondary"><i class="fas fa-pen"></i></a>
          </div>
          <span>{{ $imagem['file']['basename'] }}</span>
          <span>{{ $imagem['file']['size'] }}</span>
        </div>
        <div class="actions">
          <div class="d-flex">
            <div class="form-check form-switch">
              <input class="form-check-input" type="checkbox" id="ativo_produto_{{ $imagem['id'] }}" name="ativo_produto" value="1" data-id="{{ $imagem['id'] }}" {{ $imagem['ativo'] == true ? 'checked' : '' }}>
              <label class="form-check-label" for="ativo_produto_{{ $imagem['id'] }}">Ativo</label>
            </div>
            <div class="form-check form-switch ms-3">
              <input class="form-check-input" type="checkbox" id="principal_produto_{{ $imagem['id'] }}" name="principal_produto" value="1" data-id="{{ $imagem['id'] }}" {{ $imagem['principal'] == true ? 'checked' : '' }}>
              <label class="form-check-label" for="principal_produto_{{ $imagem['id'] }}">Principal</label>
            </div>
          </div>
          <a href="javascript:;" class="btn btn-sm btn-danger mb-0 mt-2" data-id="{{ $imagem['id'] }}">Excluir</a>
        </div>
      </div>
    @endforeach
  @endif
@endsection

@if (isset($produto))
  <div id="modal_holder">
    <div class="modal fade" id="produto_form" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false" role="dialog" aria-labelledby="produto_form_title" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
          <form method="post" action="{{ route('admin.catalogo.produtos.form.post') }}" class="m-0">
            <input type="hidden" name="id" value="{{ $produto['id'] }} ">
            <div class="modal-header">
              <h5 class="modal-title" id="produto_form_title">Arquivos</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
              
              <div class="form-group text-center d-flex flex-column align-items-center">
                <label>Enviar novas imagens</label>
                <a href="javascript:;" class="btn btn-info btn-sm btn-enviar">Procurar arquivos</a>
                <input type="file" name="imagens[]" multiple class="d-none">
              </div>

              <div id="uploading" class="mb-4">
                
              </div>

              <div id="holder_imagens">
                
              </div>
            </div>
            <div class="modal-footer">
              <a href="javascript:;" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</a>
            </div>
          </form>
        </div>
      </div>
    </div>

    <script>
      $('#modal_holder').ready(function () {
        // core.quill.construct($('#produto_form').find('#descricao_produto'));
        // core.quill.construct($('#produto_form').find('#especificacoes_produto'));
        // core.ajaxForm($('#produto_form').find('form'), {
        //   title: 'Nova produto',
        //   onSuccess: function (result) {
        //     core.current_modal.hide();
        //     location.reload();
        //   }
        // });  

        let refresh = function () {
          $.ajax({
            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
            url: "{{ route('admin.catalogo.produtos.list') }}",
            method: 'get',
            data: {
              produto: "{{ $produto['id'] }}"
            },
            success: function (result) {
              $('#holder_imagens').html('');
              let el = $(result).appendTo($('#holder_imagens'));

              el.find('.btn-danger').click(function () {
                let id = $(this).attr('data-id');
                Swal.fire({
                  icon: 'question',
                  title: 'Excluir imagem',
                  text: 'Você tem certeza que deseja remover esta imagem?',
                  showConfirmButton: true,
                  showCancelButton: true,
                  confirmButtonText: 'Sim, excluir',
                  cancelButtonText: 'Não'
                }).then(function (response) {
                  if (response.isConfirmed) {
                    $.ajax({
                      headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                      method: 'post',
                      url: "{{ route('admin.catalogo.produtos.imagens.excluir') }}",
                      data: {
                        id
                      },
                      success: function (r) {
                        if (r.status === 'success') {
                          refresh();
                        }
                      }
                    })
                  }
                })
              });

              el.find('.edit').click(function () {
                let container = $(this).parent();
                let id = $(this).attr('data-id');

                if ($(this).hasClass('editing')) {
                  $(this).removeClass('editing');
                  container.find('h5').show();
                  container.find('.edit_input').hide();
                  container.find('i').attr('class', 'fas fa-pen');
                  let nome = container.find('.edit_input').val();

                  $.ajax({
                    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                    method: 'post',
                    url: "{{ route('admin.catalogo.produtos.imagens.renomear') }}",
                    data: {
                      id, nome
                    },
                    success: function (r) {
                      if (r.status === 'success') {
                        refresh();
                      }
                    }
                  })
                } else {
                  $(this).addClass('editing');
                  container.find('h5').hide();
                  container.find('.edit_input').show();
                  container.find('i').attr('class', 'fas fa-check');
                  container.find('.edit_input').focus().select();
                }

              });

              el.find('[name="ativo_produto"]').change(function () {
                let ativo = $(this).prop('checked');
                let id = $(this).attr('data-id');

                $.ajax({
                    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                    method: 'post',
                    url: "{{ route('admin.catalogo.produtos.imagens.toggle') }}",
                    data: {
                      id, ativo
                    },
                    success: function (r) {
                      if (r.status === 'success') {
                        refresh();
                      }
                    }
                  })
              });

              el.find('[name="principal_produto"]').change(function () {
                let principal = $(this).prop('checked');
                let id = $(this).attr('data-id');

                $.ajax({
                    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                    method: 'post',
                    url: "{{ route('admin.catalogo.produtos.imagens.toggle') }}",
                    data: {
                      id, principal
                    },
                    success: function (r) {
                      if (r.status === 'success') {
                        refresh();
                      }
                    }
                  })
              });
            }
          })
        };

        refresh();

        $('.btn-enviar').click(function () {
          $('[name="imagens[]"]').click();
        });

        $('[name="imagens[]"]').change(async function () {
          let files = $(this).prop('files');
          let arr_files = [];

          // criando front
          for (let file of files) {
            let html = `
              <div class="item">
                <h5 class="small">${file.name}</h5>
                <div class="progress-wrapper">
                  <div class="progress-info">
                    <div class="progress-percentage">
                      <span class="text-sm font-weight-bold">0%</span>
                    </div>
                  </div>
                  <div class="progress">
                    <div class="progress-bar bg-gradient-primary" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
                  </div>
                </div>
              </div>
            `;

            let e = $(html).appendTo($('#uploading'));
            
            arr_files.push({
              element: e,
              file: file
            });
          }

          // subindo imagens
          new Promise(function (resolve, reject) {
            $(arr_files).each(async function (index, obj) {
              let formData = new FormData();
              formData.append("imagem", obj.file);
              formData.append("produto", "{{ $produto['id'] }}");

              $.ajax({
                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                url: "{{ route('admin.catalogo.produtos.imagens.upload') }}",
                method: "POST",
                type: "POST",
                data: formData,
                contentType: false,
                processData: false,
                xhr: function() {
                  var xhr = new window.XMLHttpRequest();
      
                  xhr.upload.addEventListener("progress", function(evt) {
                    if (evt.lengthComputable) {
                      var percentComplete = evt.loaded / evt.total;
                      percentComplete = parseInt(percentComplete * 100);
      
                      obj.element.find('.progress-percentage span').text(`${percentComplete}%`);
                      obj.element.find('.progress-bar').width(`${percentComplete}%`);
                    }
                  }, false);
      
                  return xhr;
                },
                success: function(result) {
                  console.log(result);
                  resolve(result);
                }
              });
            });
          }).then(function () {
            setTimeout(() => {
              $('#uploading').fadeOut(300, function () {
                $('#uploading').html('').fadeIn();
                refresh();
              })
            }, 1000);

          });
        });

      });
    </script>
  </div>
@endif