@extends('painel-admin.menu')
@section('title', 'Ecommerce')
@section('php')
@stop
@section('content')
  @if(Session::has('success'))
    @php
      $data = Session::get('success');
    @endphp

    @if (is_array($data))
      @foreach ($data as $msg)
        <div class="alert alert-success" role="alert">
          <i class="fa fa-check"></i>
          {{ $msg }}
        </div>
      @endforeach
    @else
      <div class="alert alert-success" role="alert">
        <i class="fa fa-check"></i>
        {{ $data }}
      </div>
    @endif
  @endif

  @if(Session::has('error'))
    @php
      $data = Session::get('error');
    @endphp

    @if (is_array($data))
      @foreach ($data as $msg)
        <div class="alert alert-danger" role="alert">
          <i class="fa fa-times"></i>
          {{ $msg }}
        </div>
      @endforeach
    @else
      <div class="alert alert-danger" role="alert">
        <i class="fa fa-times"></i>
        {{ $data }}
      </div>
    @endif
  @endif
  @csrf
  <form method="POST" id="formEnvioDados" action="{{route('ecommerce.store')}}" >
    @csrf
    <div class="row">
      <div class="col-md-10 col-12">
        <h1>Cadastro do Ecommerce</h1>
      </div>
      <div class="col-md-2 col-12 text-right">
        <button type="submit" class="btn btn-primary" id="btnSalvar">Cadastrar</button></a>
      </div>
    </div>
    <br>
    <div class="row">
      <div class="col-md-12">
        <label>Selecione o Cliente</label>
        <select id="cnpjCliente" class="custom-select @error('cnpjCliente') is-invalid @enderror select2" name="cnpjCliente" autocomplete="cnpjCliente" autofocus>
        </select>
        @if ($errors->has('cnpjCliente'))
          <p class="text-danger">{{ $errors->first('cnpjCliente') }}</p>
        @endif
      </div>
    </div>
    <div class="row mt-2">
      <div class="col-md-2">
        <label>Domínio</label>
        <input type="text" class="form-control" value="{{ old('dominio') }}" name="dominio">
        @if ($errors->has('dominio'))
          <p class="text-danger">{{ $errors->first('dominio') }}</p>
        @endif
      </div>
      <div class="col-md-10">
        <label>Endereço</label>
        <input type="text"  class="form-control" id="endereco" name="endereco" value="{{ old('endereco') }}" required="required">
        @if ($errors->has('endereco'))
          <p class="text-danger">{{ $errors->first('endereco') }}</p>
        @endif
      </div>
    </div>
    <div class="row mt-2">
      <div class="col-md-6">
        <label>Razão Social</label>
        <input type="text" class="form-control" id="razaoSocial" value="{{ old('razaoSocial') }}" name="razaoSocial">
        @if ($errors->has('razaoSocial'))
          <p class="text-danger">{{ $errors->first('razaoSocial') }}</p>
        @endif
      </div>
      <div class="col-md-6">
        <label>Fantasia</label>
        <input type="text"  class="form-control" id="fantasia" name="fantasia" value="{{ old('fantasia') }}" required="required">
        @if ($errors->has('fantasia'))
          <p class="text-danger">{{ $errors->first('fantasia') }}</p>
        @endif
      </div>
    </div>
    <div class="row mt-2">
      <div class="col-md-6">
        <label>Telefone</label>
        <input type="text" class="form-control" maxlength="20" id="telefone" data-mask="(00)00000-0000" value="{{ old('fone') }}" name="fone">
        @if ($errors->has('fone'))
          <p class="text-danger">{{ $errors->first('fone') }}</p>
        @endif
      </div>
      <div class="col-md-6">
        <label>E-mail</label>
        <input type="email" class="form-control" id="email" value="{{ old('email') }}" name="email">
        @if ($errors->has('email'))
          <p class="text-danger">{{ $errors->first('email') }}</p>
        @endif
      </div>
    </div>
  </form>


  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-theme/0.1.0-beta.10/select2-bootstrap.min.css" rel="stylesheet" />
  <style>
    .select2-container {
      width: 100% !important;
    }

    .select2-selection--single {
      border: 1px solid #ced4da;
      border-radius: 4px;
      padding: 10px;
      height: 40px !important;
      box-sizing: border-box; 
    }

    .select2-selection__arrow {
      height: 38px; 
    }

    .select2-selection__rendered {
      color: #495057; 
      line-height: 40px; 
    }

    .select2-container--default .select2-selection--single .select2-selection__placeholder {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 14px;
      color: #6c757d;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .select2-container--default.select2-container--focus .select2-selection--single {
      border-color: #80bdff; 
    }

  </style>
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/i18n/pt-BR.js"></script>
  <script>
    var currentItemId = 'Ecommerce-link';
    
    var $j = jQuery.noConflict();
    $j(document).ready(function() {
    
      $j('#cnpjCliente').select2({
        theme: 'default',
        language: "pt-BR",
        width: '100%',
        ajax: {
          url: '/buscar-empresa-ecommerce',
          dataType: 'json',
          delay: 250,
          data: function (params) {
            return {
              q: params.term
            };
          },
          processResults: function (data) {
            return {
              results: data.results
            };
          },
            cache: true
        },
        minimumInputLength: 1,
        placeholder: 'Digite a razão social ou fantasia para buscar'
      });

      $j('#cnpjCliente').on('select2:select', function (e) { 
        var data = e.params.data;
        $('#razaoSocial').val(data.razaoSocial);
        $('#fantasia').val(data.fantasia);
        $('#endereco').val(data.endereco);
        $('#telefone').val(data.telefone);
        $('#email').val(data.email);
        
      });       
    });

    document.getElementById('btnSalvar').addEventListener('click', function(event) {
      event.preventDefault();

      Swal.fire({
        title: 'Confirmação',
        text: 'Deseja realmente gravar esse Ecommerce?',
        icon: 'question',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Confirmar',
        cancelButtonText: 'Cancelar'
      }).then((result) => {
        if (result.isConfirmed) {
          document.getElementById('formEnvioDados').submit();
        }
      });  
    });
  </script>
@endsection