@extends('admin.template.layout')

@section("_title", 'Catálogo > Produtos')

@section('_head')
  <link href="{{ url('admin/quill/quill.snow.css') }}" rel="stylesheet">
  <link href="{{ url('admin/choices.js/choices.css') }}" rel="stylesheet">
  <link href="{{ url('admin/css/pages/produtos.css') }}" rel="stylesheet">
@endsection

@section('content')
  <div class="container-fluid py-4">
    <div class="row">
      <div class="col">
        <div class="card">
          <div class="card-header">
            <div class="d-flex justify-content-between align-items-center">
              <h5 class="card-title mb-0">Produtos</h5>
              <a href="#" id="btn_nova_atividade" class="btn btn-primary"><i class="fas fa-plus me-2"></i> Adicionar produto</a>
            </div>
          </div>
          <div class="card-body">
            <div class="table-responsive">
              <table class="table align-items-center mb-0" id="tabela_produtos">
                <thead>
                  <tr>
                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Nome</th>
                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">SLUG</th>
                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Linhas</th>
                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Marca</th>
                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Categorias</th>
                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Estoque disponível</th>
                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Status</th>
                    <th class="text-secondary opacity-7"></th>
                  </tr>
                </thead>
                <tbody>
                  @if (isset($produtos) && is_array($produtos) && sizeof($produtos) > 0)
                    @foreach ($produtos as $produto)
                      <tr>
                        <td>
                          <div class="d-flex align-items-center">
                            @if (!is_null($produto['imagem']))
                              <div class="img me-3" style="--bk-imagem: url({{ url('storage/' . $produto['imagem']['path']) }})"></div>
                            @endif
                            <h6 class="text-xs mb-0 ">{{ $produto['nome'] }}</h6>
                          </div>
                        </td>
                        <td>
                          <p class="text-xs mb-0">{{ $produto['slug'] }}</p>
                        </td>
                        <td>
                          <p class="text-center text-xs mb-0">{{ implode(', ', $produto['linhas']) }}</p>
                        </td>
                        <td>
                          <p class="text-center text-xs mb-0">{{ $produto['marca']['nome'] }}</p>
                        </td>
                        <td>
                          <p class="text-center text-xs mb-0">{{ implode(', ', $produto['categorias']) }}</p>
                        </td>
                        <td class="align-middle text-center">
                          <span class="text-xs font-weight-bold">{{ $produto['estoque'] }}</span>
                        </td>
                        <td class="align-middle text-center text-sm">
                          @if ($produto['ativo'] == true)
                            <span class="badge badge-sm bg-success">
                              <i class="fas fa-check me-2"></i> Ativo
                            </span>
                            @else
                              <span class="badge badge-sm bg-danger">
                                <i class="fas fa-times me-2"></i> Inativo
                              </span>
                            @endif
                        </td>
                        <td class="align-middle text-end">
                          <a href="javascript:;" class="btn btn-sm btn-dark font-weight-bold text-xs" data-imagens="{{ $produto['id'] }}">
                            Imagens
                          </a>
                          <a href="javascript:;" class="btn btn-sm btn-info font-weight-bold text-xs" data-edit="{{ $produto['id'] }}">
                            Editar
                          </a>
                          <a href="javascript:;" class="btn btn-sm btn-danger font-weight-bold text-xs" data-delete="{{ $produto['id'] }}" data-ativo="{{ $produto['ativo'] === 1 ? 'sim' : 'nao' }}">
                            Excluir
                          </a>
                        </td>
                      </tr>
                    @endforeach
                  @endif
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection

@section('_foot')
  <script src="{{ url('admin/quill/quill.min.js') }}"></script>
  <script src="{{ url('admin/quill/DynamicQuillTools.js') }}"></script>
  <script src="{{ url('admin/choices.js/choices.js') }}"></script>

  <script>
    const URL_FORM_PRODUTO = "{{ route('admin.catalogo.produtos.form') }}";
    const URL_EXCLUIR_PRODUTO = "{{ route('admin.catalogo.produtos.excluir.post') }}";
    const URL_IMAGENS_PRODUTO = "{{ route('admin.catalogo.produtos.imagens') }}";
    $(document).ready(function () {
      $('#btn_nova_atividade').click(function () {
        core.load_modal(URL_FORM_PRODUTO);
      });

      $('[data-edit]').click(function () {
        let id = $(this).attr('data-edit');
        core.load_modal(URL_FORM_PRODUTO, { data: { id } });
      });

      $('[data-delete]').click(function () {
        let id = $(this).attr('data-delete');
        let options = {
          icon: 'question',
          html: `Você realmente deseja excluir este produto? Esta ação não poderá ser desfeita!`,
          title: 'Excluir produto',
          showConfirmButton: false,
          showDenyButton: true,
          showCancelButton: true,
          confirmButtonText: 'Apenas desativar',
          denyButtonText: 'Sim, excluir',
          cancelButtonText: 'Cancelar'
        }

        if ($(this).attr('data-ativo') === 'sim') {
          options.showConfirmButton = true;
          options.html = options.html + '<br><br><small>Você pode apenas desativar o produto para ocultá-lo do site.</small>';
        }

        Swal.fire(options).then((result) => {
          if (result.isConfirmed === true || result.isDenied === true) {
            $.ajax({
              headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
              method: 'post',
              url: URL_EXCLUIR_PRODUTO,
              data: {
                id, 
                func: (result.isDenied === true) ? 'excluir' : 'desativar'
              },
              success: function (res) {
                if (res.status === 'success') {
                  location.reload();
                }
              }
            })
          }
        });
      });

      $('[data-imagens]').click(function () {
        let id = $(this).attr('data-imagens');
        core.load_modal(URL_IMAGENS_PRODUTO, { data: { id } });
      });
    });
  </script>
@endsection