@extends('layouts.app')


@section('content')
<div class="container">
  <div class="row justify-content-center">
      <div class="w-100">
          <div class="card">
              <div class="card-header d-100">{{ __('Espaço') }}</div>
              <form action="{{ route('space.delete', ['id' => $espaco->id]) }}" method="POST">
                @csrf
                @method('DELETE')
                <a class="badge text-bg-danger" style="float: right; font-size: 15px; margin-top: -15px" 
                      onclick="event.preventDefault();
                        if (confirm('Tem certeza que deseja excluir?')) {document.getElementById('delete-form-{{ $space->id }}').submit();}" title="Deletar">
                    <i class="bi bi-trash3"></i>
                  </a>
                  <a class="badge text-bg-primary" style="float: right; font-size: 15px; margin-top: -15px; margin-right: 10px;" href="{{ route('space.edit', ['id' => $space->id]) }}" title="Editar">
                    <i class="bi bi-pencil-square"></i>
                  </a>
                </form>
          </div>
          <div class="card-body">
            <div class="row g-3">
              <div class="col-md-4">
                <label for="validationCustom01" class="form-label">Espaço</label>
                <input type="text" name="space" class="form-control" id="validationCustom01" value="{{ $espaco->space }}" disabled>
                <div class="valid-feedback">
                  Looks good!
                </div>
              </div>
              <div class="col-md-4">
                <label for="validationCustom01" class="form-label">Complexo</label>
                <input type="text" name="complexo" class="form-control" id="validationCustom01" value="{{ $espaco->complexo }}" disabled>
                <div class="valid-feedback">
                  Looks good!
                </div>
              </div>
              <div class="col-md-4">
                <label for="validationCustom01" class="form-label">UF</label>
                <input type="text" name="uf" class="form-control" id="validationCustom01" value="{{ $espaco->uf }}" disabled>
                <div class="valid-feedback">
                  Looks good!
                </div>
              </div>
            </div>
              
              
              <div class="col-12 col text-center mt-5">
                <a class="btn btn-primary" href="{{ route('category.index') }}" type="button">Voltar</a>
              </div>
          </div>
        </div>
    </div>
</div>
@endsection

<script>
    (() => {
  'use strict'

  // Buscar todos os formulários aos quais queremos aplicar estilos de validação personalizados do Bootstrap
  const forms = document.querySelectorAll('.needs-validation')

  // Evitar o envio sem validação
  Array.from(forms).forEach(form => {
    form.addEventListener('submit', event => {
      if (!form.checkValidity()) {
        event.preventDefault()
        event.stopPropagation()
      }

      form.classList.add('was-validated')
    }, false)
  })
})()
</script>