@extends('admin.template.layout')

@section("_title", 'Contatos')

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

@section('items')
  @if (isset($contatos) && is_array($contatos) && sizeof($contatos) > 0)
    @foreach ($contatos as $contato)
      <tr>
        <td class="text-center">{{ $contato['id'] }}</td>
        <td>
          <p class="text-xs mb-0">{{ $contato['assunto'] }}</p>
        </td>
        <td>
          <p class="text-center text-xs mb-0">{{ Helper::format_datetime($contato['created_at']) }}</p>
        </td>
        <td>
          <p class="text-center text-xs mb-0">
            @if (isset($contato['request']['cidade']) && isset($contato['request']['estado']))
              {{ $contato['request']['cidade'] . ' - ' . $contato['request']['estado'] }}
            @else
              Desconhecido
            @endif
          </p>
        </td>
        <td class="text-center">
          @php $class = "bg-warning"; @endphp
          @switch($contato['status'])
            @case('Visualizada')
              @php $class = "bg-info"; @endphp
            @break
            @case('Resolvida')
              @php $class = "bg-success"; @endphp
            @break
            @case('Cancelada')
              @php $class = "bg-danger"; @endphp
            @break
          @endswitch
          <span class="badge badge-sm {{ $class }}">
            {{ $contato['status'] }}
          </span>
        </td>
        <td class="align-middle text-end">
          <a href="javascript:;" class="btn btn-sm btn-info font-weight-bold text-xs" data-edit="{{ $contato['id'] }}">
            Visualizar
          </a>
          {{-- <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
@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">Contatos enviados pelo site</h5>
              <div class="form-group w-30 m-0">
                <label>Categorias do produto <span class="text-danger">*</span></label>
                <select class="selectpicker" name="filtro_contato" multiple required>
                  @if (isset($status) && is_array($status))
                    @foreach ($status as $stt)
                      <option {{ $stt == 'Pendente' ? 'selected' : '' }} value="{{ $stt }}">{{ $stt }}</option>
                    @endforeach
                  @endif
                </select>
              </div>
            </div>
          </div>
          <div class="card-body">
            <div class="table-responsive">
              <table class="table native align-items-center mb-0" id="tabela_contatos">
                <thead>
                  <tr>
                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">#</th>
                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Assunto</th>
                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Data e hora</th>
                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Localização</th>
                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Status</th>
                    <th class="text-secondary opacity-7"></th>
                  </tr>
                </thead>
                <tbody>
                  @yield('items')
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection

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

  <script>
    const URL_FORM_CONTATO = "{{ route('admin.contatos.form') }}";

    $(document).ready(function () {  
      let el = $('[name="filtro_contato"]')[0];
      let choice = new Choices(el, {
        delimiter: ',',
        editItems: true,
        maxItemCount: -1,
        removeItemButton: true,
      });

      function refresh() {
        let status = choice.getValue().map((i) => {
          return i.value;
        });

        $.ajax({
          headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
          url: "{{ route('admin.contatos.list') }}",
          method: 'get',
          data: { status },
          success: function (html) {
            $('#tabela_contatos tbody').html(html);
            events();
          }
        })
      }


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

          setTimeout(() => {
            refresh();
          }, 2000);
        });
      }
    
      events();

      el.addEventListener('change', function (event) {
        refresh();
      })
    });
  </script>
@endsection