@extends('admin.template.layout')

@section("_title", 'Configurações')

@section('content')
  <div class="container-fluid py-4">
    <div class="row">
      <div class="col">
        <div class="nav-wrapper position-relative end-0">
          <ul class="nav nav-pills nav-fill p-1" role="tablist">
            <li class="nav-item">
              <a class="nav-link mb-0 px-0 py-1 active" data-bs-toggle="tab" href="#configs-site" role="tab" aria-controls="code" aria-selected="true">
                <i class="ni ni-laptop text-sm me-2"></i> Site
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link mb-0 px-0 py-1" data-bs-toggle="tab" href="#configs-catalogo" role="tab" aria-controls="preview" aria-selected="false">
              <i class="ni ni-badge text-sm me-2"></i> Catálogo
              </a>
            </li>
          </ul>

          <div class="card card-body mt-4">
            <div class="tab-content">
              <div class="tab-pane active" id="configs-site" role="tabpanel">
                <legend class="m-0">Informações de contato</legend>
                <p class="small mb-4">Estas informações serão utilizadas no topo do seu site, além de servirem como destinatários para os formulários presentes no mesmo.</p>

                <div>
                  <div class="form-group">
                    <input type="email" class="form-control" required name="email_contato" value="{{ isset($configs) && in_array('email_contato', array_keys($configs)) ? $configs['email_contato'] : '' }}" placeholder="Email para contato">
                  </div>
  
                  <div class="form-group">
                    <input type="tel" class="form-control" required name="celular_contato" value="{{ isset($configs) && in_array('celular_contato', array_keys($configs)) ? $configs['celular_contato'] : '' }}" placeholder="Celular para contato">
                  </div>

                  <div class="form-group">
                    <input type="tel" class="form-control" required name="telefone_contato" value="{{ isset($configs) && in_array('telefone_contato', array_keys($configs)) ? $configs['telefone_contato'] : '' }}" placeholder="Telefone para contato">
                  </div>

                  <div class="form-group">
                    <input type="tel" class="form-control" required name="endereco" value="{{ isset($configs) && in_array('endereco', array_keys($configs)) ? $configs['endereco'] : '' }}" placeholder="Endereço">
                  </div>
  
                  {{-- <div class="form-group">
                    <label class="form-control-label">Redes sociais</label>
                    <p class="text-xs ps-1 mb-4">Se você deixar alguma rede em branco, ela não será exibida no site.</p>
  
                    <div class="form-group">
                      <div class="input-group">
                        <span class="input-group-text"><i class="fab fa-facebook"></i></span>
                        <input type="text" class="form-control" name="redes.facebook" value="{{ isset($configs) && in_array('redes.facebook', array_keys($configs)) ? $configs['redes.facebook'] : '' }}" placeholder="Facebook">
                      </div>
                    </div>
                    <div class="form-group">
                      <div class="input-group">
                        <span class="input-group-text"><i class="fab fa-whatsapp"></i></span>
                        <input type="text" class="form-control" name="redes.whatsapp" value="{{ isset($configs) && in_array('redes.whatsapp', array_keys($configs)) ? $configs['redes.whatsapp'] : '' }}" placeholder="WhatsApp">
                      </div>
                    </div>
                    <div class="form-group">
                      <div class="input-group">
                        <span class="input-group-text"><i class="fab fa-instagram"></i></span>
                        <input type="text" class="form-control" name="redes.instagram" value="{{ isset($configs) && in_array('redes.instagram', array_keys($configs)) ? $configs['redes.instagram'] : '' }}" placeholder="Instagram">
                      </div>
                    </div>
                  </div> --}}
                </div>

                <hr class="bg-default my-5">

                <legend class="mb-3">Informações de navegação e utilização</legend>

                {{-- REMOVIDO: INSTAGRAM SUCKS --}}
                {{-- <div class="form-group">
                  <label class="form-control-label">Instagram na página inicial</label>
                  <div class="row">
                    <div class="col-12 col-md-2 my-auto">
                      <div class="d-flex justify-content-center">
                        <div class="form-check form-switch">
                          <input class="form-check-input" type="checkbox" id="habilitar_instagram_home" name="habilitar_instagram_home" {{ isset($configs) && in_array('habilitar_instagram_home', array_keys($configs)) && $configs['habilitar_instagram_home'] == 'on' ? 'checked' : '' }}>
                          <label class="form-check-label" for="habilitar_instagram_home">Habilitar</label>
                        </div>
                      </div>
                    </div>
                    <div class="col-12 col-md-10">
                      <input type="text" class="form-control" name="username_instagram" value="{{ isset($configs) && in_array('username_instagram', array_keys($configs)) ? $configs['username_instagram'] : '' }}" placeholder="Usuário do Instagram">
                    </div>
                  </div>
                </div> --}}

                {{-- <div class="form-group">
                  <label class="form-control-label">Categoria de produtos fixada na página inicial</label>
                  <div class="row">
                    <div class="col-12 col-md-2 my-auto">
                      <div class="d-flex justify-content-center">
                        <div class="form-check form-switch">
                          <input class="form-check-input" type="checkbox" id="habilitar_categoria_produtos_home" name="habilitar_categoria_produtos_home" {{ isset($configs) && in_array('habilitar_categoria_produtos_home', array_keys($configs)) && $configs['habilitar_categoria_produtos_home'] == 'on' ? 'checked' : '' }}>
                          <label class="form-check-label" for="habilitar_categoria_produtos_home">Habilitar</label>
                        </div>
                      </div>
                    </div>
                    <div class="col-12 col-md-6">
                      <select class="form-select" name="categoria_produtos_home">
                        <option value="">Selecione</option>
                        @if (isset($categorias) && is_array($categorias) && sizeof($categorias) > 0)
                          @foreach ($categorias as $categoria)
                            <option {{ isset($configs) && isset($configs['categoria_produtos_home']) && $configs['categoria_produtos_home'] == $categoria['id'] ? 'selected' : '' }} value="{{ $categoria['id'] }}">{{ $categoria['nome'] }}</option>
                          @endforeach
                        @endif
                      </select>
                    </div>
                    <div class="col-12 col-md-4">
                      <input type="number" class="form-control" name="quantidade_produtos_home" placeholder="Quantidade de produtos para exibir" step="1" min="0" value="{{ isset($configs) && in_array('quantidade_produtos_home', array_keys($configs)) ? $configs['quantidade_produtos_home'] : '' }}">
                    </div>
                  </div>
                </div> --}}

                <div class="form-group">
                  <label class="form-control-label">Formulários de contato</label>
                  <div class="d-flex">
                    <div class="form-check form-switch">
                      <input class="form-check-input" type="checkbox" id="form_contato_enviar_email" name="form_contato_enviar_email"  {{ isset($configs) && in_array('form_contato_enviar_email', array_keys($configs)) && $configs['form_contato_enviar_email'] == 'on' ? 'checked' : '' }}>
                      <label class="form-check-label" for="form_contato_enviar_email">Enviar via e-mail</label>
                    </div>
                    <div class="form-check form-switch ms-3">
                      <input class="form-check-input" type="checkbox" id="form_contato_enviar_sms" name="form_contato_enviar_sms"  {{ isset($configs) && in_array('form_contato_enviar_sms', array_keys($configs)) && $configs['form_contato_enviar_sms'] == 'on' ? 'checked' : '' }} disabled>
                      <label class="form-check-label" for="form_contato_enviar_sms">Enviar via SMS</label>
                    </div>
                    <div class="form-check form-switch ms-3">
                      <input class="form-check-input" type="checkbox" id="form_contato_enviar_whatsapp" name="form_contato_enviar_whatsapp"  {{ isset($configs) && in_array('form_contato_enviar_whatsapp', array_keys($configs)) && $configs['form_contato_enviar_whatsapp'] == 'on' ? 'checked' : '' }} disabled>
                      <label class="form-check-label" for="form_contato_enviar_whatsapp">Enviar via WhatsApp</label>
                    </div>
                  </div>
                </div>

                <div class="form-group">
                  <input type="email" class="form-control" required name="email_notificacoes" value="{{ isset($configs) && in_array('email_notificacoes', array_keys($configs)) ? $configs['email_notificacoes'] : '' }}" placeholder="Email para notificações">
                </div>

                <div class="form-group mt-5">
                  <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" id="habilitar_logo_agencia" name="habilitar_logo_agencia" checked disabled>
                    <label class="form-check-label" for="habilitar_logo_agencia">Mostrar logo Agência Beeline</label>
                  </div>
                </div>

                <hr class="bg-default my-5">

                <legend class="mb-3">Representantes</legend>
                <div id="add-form">
                  <div class="row mb-3">
                    <div class="col-md-6">
                      <div class="form-group">
                        <label class="form-label">Localização</label>
                        <input type="text" class="form-control" data-key="localizacao">
                      </div>
                    </div>
                    <div class="col-md-6">
                      <div class="form-group">
                        <label class="form-label">Nome</label>
                        <input type="text" class="form-control" data-key="nome">
                      </div>
                    </div>
                    <div class="col-md-6">
                      <div class="form-group">
                        <label class="form-label">Email</label>
                        <input type="email" class="form-control" data-key="email">
                      </div>
                    </div>
                    <div class="col-md-6">
                      <div class="form-group">
                        <label class="form-label">Telefone</label>
                        <input type="tel" class="form-control" data-key="telefone">
                      </div>
                    </div>
                  </div>
            
                  <div class="text-end">
                    <a href="javascript:;" class="btn btn-primary btn-add-item">Adicionar representante</a>
                  </div>
                </div>
    
                <ul id="list" class="list-group mt-3">
                  @if (isset($configs['representantes']) && is_array($configs['representantes']) && sizeof($configs['representantes']) > 0)
                    @foreach ($configs['representantes'] as $representante)
                      <li class="list-group-item">
                        <h5 class="small me-3" data-key="localizacao">{{ $representante['localizacao'] }}</h5>
                        <div class="d-flex">
                          <p class="small me-3" data-key="nome">{{ $representante['nome'] }}</p>
                          <p class="small me-3" data-key="email">{{ $representante['email'] }}</p>
                          <p class="small me-3" data-key="telefone">{{ $representante['telefone'] }}</p>
                        </div>
                        <button class="edit btn btn-info btn-sm me-3">Editar</button>
                        <button class="remove btn btn-danger btn-sm">Remover</button>
                      </li>
                    @endforeach
                  @endif
                </ul>

              </div>
              <div class="tab-pane " id="configs-catalogo" role="tabpanel">
                <legend class="m-0">Configurações do catálogo</legend>
                <p class="small mb-4">Informações relacionadas ao catálogo de produtos disponível no site</p>

                {{-- <div class="form-group">
                  <label class="form-control-label">Categoria de produtos fixada na página inicial</label>
                  <div class="row">
                    <div class="col-12 col-md-2 my-auto">
                      <div class="d-flex justify-content-center">
                        <div class="form-check form-switch">
                          <input class="form-check-input" type="checkbox" id="habilitar_categoria_produtos_home_catalogo" name="habilitar_categoria_produtos_home_catalogo" {{ isset($configs) && in_array('habilitar_categoria_produtos_home_catalogo', array_keys($configs)) && $configs['habilitar_categoria_produtos_home_catalogo'] == 'on' ? 'checked' : '' }}>
                          <label class="form-check-label" for="habilitar_categoria_produtos_home_catalogo">Habilitar</label>
                        </div>
                      </div>
                    </div>
                    <div class="col-12 col-md-6">
                      <select class="form-select" name="categoria_produtos_home_catalogo">
                        <option value="">Selecione</option>
                        @if (isset($categorias) && is_array($categorias) && sizeof($categorias) > 0)
                          @foreach ($categorias as $categoria)
                            <option {{ isset($configs) && isset($configs['categoria_produtos_home_catalogo']) && $configs['categoria_produtos_home_catalogo'] == $categoria['id'] ? 'selected' : '' }} value="{{ $categoria['id'] }}">{{ $categoria['nome'] }}</option>
                          @endforeach
                        @endif
                      </select>
                    </div>
                    <div class="col-12 col-md-4">
                      <input type="number" class="form-control" name="quantidade_produtos_home_catalogo" placeholder="Quantidade de produtos para exibir" step="1" min="0" value="{{ isset($configs) && in_array('quantidade_produtos_home_catalogo', array_keys($configs)) ? $configs['quantidade_produtos_home_catalogo'] : '' }}">
                    </div>
                  </div>
                </div> --}}

                <div class="form-group">
                  <label class="form-control-label">Solicitação de orçamento</label>
                  <div class="row">
                    <div class="col-12 col-md-2 my-auto">
                      <div class="d-flex justify-content-center">
                        <div class="form-check form-switch">
                          <input class="form-check-input" type="checkbox" id="habilitar_solicitar_orcamento" name="habilitar_solicitar_orcamento" {{ isset($configs) && in_array('habilitar_solicitar_orcamento', array_keys($configs)) && $configs['habilitar_solicitar_orcamento'] == 'on' ? 'checked' : '' }}>
                          <label class="form-check-label" for="habilitar_solicitar_orcamento">Habilitar</label>
                        </div>
                      </div>
                    </div>
                    <div class="col-12 col-md-10">
                      <p class="m-0">Se esta opção estiver habilitada, permite que os usuários criem um <strong>carrinho</strong>, adicionando produtos para incluir no pedido de orçamento.</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection

@section('_foot') 
  <script>
    function events_items(upload = true) {
      let container = $('#list');

      container.find('.edit').unbind('click').on('click', function () {
        let item = $(this).closest('.list-group-item');
        let dados = item.find('[data-key]');

        item.html('');

        dados.each(function (index, el) {
          let input = $('<input>', {
            name: $(el).attr('data-key'),
            value: $(el).text(),
            "data-backup": $(el).text(),
            class: "form-control form-control-sm mb-2"
          });

          item.append(input);
        });

        item.append($('<button>', {
          class: "btn btn-success btn-sm save me-3",
          text: "Salvar"
        }));

        item.append($('<button>', {
          class: "btn btn-secondary btn-sm cancel me-3",
          text: "Cancelar"
        }));

        events_items()
      });

      container.find('.cancel, .save').unbind('click').on('click', function () {
        let item = $(this).closest('.list-group-item');
        let func = $(this).hasClass('cancel') ? 'cancelar' : 'salvar';
        let inputs = item.find('input');

        item.html('');

        let flex = $('<div>', { class: "d-flex" });
        let id = core.uniqid();

        inputs.each(function (index, input) {
          let tag = '<p>'; let container = flex;
          if (index === 0) {
            tag = "<h5>";
            container = item;
          }

          let el = $(tag, {
            class: "small me-3", 
            text: func == 'salvar' ? $(input).val() : $(input).attr('data-backup'),
            "data-key": $(input).attr('name')
          });

          container.append(el);
        });

        item.append(flex);

        item.append($('<button>', {
          class: "edit btn btn-info btn-sm me-3",
          text: "Editar"
        }));

        item.append($('<button>', {
          class: "remove btn btn-danger btn-sm",
          text: "Remover"
        }));

        events_items();
      });

      container.find('.remove').unbind('click').on('click', function () {
        let btn = $(this);
        if (btn.attr('data-clicked') == 'true') {
          btn.closest('.list-group-item').remove();
          events_items();
        } else {
          let bkp = btn.html();
          btn.html('<i class="fas fa-check me-2"></i> Confirmar');
          btn.attr('data-clicked', 'true');
          setTimeout(() => {
            btn.attr('data-clicked', 'false')
            btn.html(bkp);
          }, 2000);
        }
      });

      // gerar inputs para back
      if (upload) {
        let data = [];
        container.find('.list-group-item').each(function (count, item) {
          item = $(item);
  
          
          let obj = {};
          
          item.find('[data-key]').each(function (index, el) {
            obj[$(el).attr('data-key')] = $(el).text();
          });
          
          data.push(obj);
        });
        
        container.find('input[name="representantes"]').remove();
        let i = $('<input>', {
          type: "hidden",
          name: `representantes`,
          value: JSON.stringify(data)
        }).appendTo(container);
  
        i.trigger('change');
      }
    }
    
    $(document).ready(function () {
      var SPMaskBehavior = function (val) {
        return val.replace(/\D/g, '').length === 11 ? '(00) 00000-0000' : '(00) 0000-00009';
      },
      spOptions = {
        onKeyPress: function(val, e, field, options) {
          field.mask(SPMaskBehavior.apply({}, arguments), options);
        }
      };

      $('#item-phone').mask(SPMaskBehavior, spOptions);
    
      $(document).on('change', 'input, select', function () {
        let input = $(this);
        let chave = input.attr('name');
        let valor = input.val();
        if (input.attr('type') == 'checkbox' && input.prop('checked') === false) valor = 'off'; 
  
        $.ajax({
          headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
          method: 'post',
          url: "{{ route('admin.configuracoes.salvar.post') }}",
          data: { chave, valor },
          success: function (res) {
            if (res.status === 'success') {
              input.addClass('is-valid');
  
              setTimeout(() => {
                input.removeClass('is-valid');
              }, 5000);
            }
          }
        })
      });
      
      $('.btn-add-item').click(function () {
        let form = $('#add-form');
        let list = $('#list');
        let inputs = form.find('[data-key]');

        let li = $('<li>', {
          class: "list-group-item"
        });

        let flex = $('<div>', { class: "d-flex" });
        let id = core.uniqid();

        inputs.each(function (index, input) {
          let tag = '<p>'; let container = flex;
          if (index === 0) {
            tag = "<h5>";
            container = li;
          }

          let el = $(tag, {
            class: "small me-3", 
            text: $(input).val(),
            "data-key": $(input).attr('data-key')
          });

          container.append(el);
        });

        li.append(flex);

        li.append($('<button>', {
          class: "edit btn btn-info btn-sm me-3",
          text: "Editar"
        }));

        li.append($('<button>', {
          class: "remove btn btn-danger btn-sm",
          text: "Remover"
        }));

        list.append(li);
        events_items();
      });

      events_items(false)
    });
  </script>
@endsection