@extends('admin.template.layout')

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

@section('_head')
  <link href="{{ url('admin/quill/quill.snow.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">Categorias de produtos</h5>
              <a href="#" id="btn_nova_atividade" class="btn btn-primary"><i class="fas fa-plus me-2"></i> Adicionar categoria</a>
            </div>
          </div>
          <div class="card-body">
            <div class="table-responsive">
              <table class="table align-items-center mb-0" id="tabela_categorias">
                <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">Status</th>
                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Produtos vinculados</th>
                    <th class="text-secondary opacity-7"></th>
                  </tr>
                </thead>
                <tbody>
                  @if (isset($categorias) && is_array($categorias) && sizeof($categorias) > 0)
                    @foreach ($categorias as $categoria)
                      <tr>
                        <td>
                          <h6 class="text-xs mb-0 ">{{ $categoria['nome'] }}</h6>
                        </td>
                        <td>
                          <p class="text-xs mb-0">{{ $categoria['slug'] }}</p>
                        </td>
                        <td class="align-middle text-center text-sm">
                          @if ($categoria['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-center">
                          <span class="text-xs font-weight-bold">{{ $categoria['produtos'] }}</span>
                        </td>
                        <td class="align-middle text-end">
                          <a href="javascript:;" class="btn btn-sm btn-info font-weight-bold text-xs" data-edit="{{ $categoria['id'] }}">
                            Editar
                          </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>
    const URL_FORM_CATEGORIA = "{{ route('admin.catalogo.categorias.form') }}";
    $(document).ready(function () {
      $('#btn_nova_atividade').click(function () {
        core.load_modal(URL_FORM_CATEGORIA);
      });

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