@extends('theme::layout.layout_dashboard')

@section('title', ''.env('APP_NAME_DASHBOARD').' | Criar Escola')

@section('content')
<div class="container mx-auto px-4 py-8">
    <!-- Formulário para Criar Novo Grupo -->
    <div class="bg-white shadow-md rounded-lg p-6">
        <div class="flex items-center justify-between mb-6">
            <h2 class="text-2xl font-bold text-gray-800 uppercase">Criar Escola</h2>
            <a href="{{ url('/admin/exile/escolas/index') }}" class="flex items-center text-blue-600 hover:text-blue-800">
                <i data-feather="arrow-left" class="mr-2"></i> Voltar
            </a>
        </div>

        <p class="text-gray-600 mb-6" style="margin-top: -1em;">
            Essas informações serão exibidas publicamente, portanto, tome cuidado com o que você compartilha.
        </p>

        @if ($errors->any())
            <div class="bg-red-50 border-l-4 border-red-400 p-4 mb-6">
                <ul class="list-disc pl-5 text-red-700">
                    @foreach ($errors->all() as $error)
                        <li class="mt-1">{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form action="{{ route('modulodesign.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="space-y-6">
              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <label for="nome" class="block text-sm font-medium text-gray-700">Nome da Escola</label>
                  <input type="text" id="nome" name="nome" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500" placeholder="Ex: UNOPAR" required>
                </div>
                <div>
                  <label for="apelido" class="block text-sm font-medium text-gray-700">Apelido</label>
                  <input type="text" id="apelido" name="apelido" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500" placeholder="Ex: UNOPAR-GO" required>
                </div>
              </div>

              <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                  <label for="endereco" class="block text-sm font-medium text-gray-700">Endereço</label>
                  <input type="text" id="endereco" name="endereco" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500" placeholder="Ex: Av. Ramos Ferreira" required>
                </div>
                <div>
                  <label for="bairro" class="block text-sm font-medium text-gray-700">Bairro</label>
                  <input type="text" id="bairro" name="bairro" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500" placeholder="Ex: Centro" required>
                </div>
                <div>
                  <label for="numendereco" class="block text-sm font-medium text-gray-700">Nº</label>
                  <input type="text" id="numendereco" name="numendereco" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500" placeholder="Ex: 115" required>
                </div>
              </div>

              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <label for="cidade" class="block text-sm font-medium text-gray-700">Cidade</label>
                  <input type="text" id="cidade" name="cidade" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500" placeholder="Ex: Manaus" required>
                </div>
                <div>
                  <label for="estado" class="block text-sm font-medium text-gray-700">Estado</label>
                  <select id="estado" name="estado" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
                    <option value="AC">Acre</option>
                    <option value="AL">Alagoas</option>
                    <option value="AP">Amapá</option>
                    <option value="AM">Amazonas</option>
                    <option value="BA">Bahia</option>
                    <option value="CE">Ceará</option>
                    <option value="DF">Distrito Federal</option>
                    <option value="ES">Espírito Santo</option>
                    <option value="GO">Goiás</option>
                    <option value="MA">Maranhão</option>
                    <option value="MT">Mato Grosso</option>
                    <option value="MS">Mato Grosso do Sul</option>
                    <option value="MG">Minas Gerais</option>
                    <option value="PA">Pará</option>
                    <option value="PB">Paraíba</option>
                    <option value="PR">Paraná</option>
                    <option value="PE">Pernambuco</option>
                    <option value="PI">Piauí</option>
                    <option value="RJ">Rio de Janeiro</option>
                    <option value="RN">Rio Grande do Norte</option>
                    <option value="RS">Rio Grande do Sul</option>
                    <option value="RO">Rondônia</option>
                    <option value="RR">Roraima</option>
                    <option value="SC">Santa Catarina</option>
                    <option value="SP">São Paulo</option>
                    <option value="SE">Sergipe</option>
                    <option value="TO">Tocantins</option>
                  </select>
                </div>
              </div>

              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <label for="cep" class="block text-sm font-medium text-gray-700">CEP</label>
                  <input type="text" id="cep" name="cep" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500" placeholder="Ex: 68005-000" required>
                </div>
                <div>
                  <label for="modalidade" class="block text-sm font-medium text-gray-700">Modalidade</label>
                  <select id="modalidade" name="modalidade" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
                    <option value="1">Ens. Fundamental</option>
                    <option value="2">Ens. Médio</option>
                    <option value="3">Ens. Superior</option>
                  </select>
                </div>
              </div>

              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <label for="logo" class="block text-sm font-medium text-gray-700">Logo (Recomendada)</label>
                  <input type="file" id="logo" name="logo" class="mt-1 block w-full text-sm text-gray-500 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500">
                </div>
                <div>
                  <label for="secretario" class="block text-sm font-medium text-gray-700">Nome Secretário(a)</label>
                  <input type="text" id="secretario" name="secretario" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500" placeholder="Ex: CARLOS MIGUEL" required>
                </div>
              </div>

              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <label for="diretor" class="block text-sm font-medium text-gray-700">Nome Diretor(a) / Reitor(a)</label>
                  <input type="text" id="diretor" name="diretor" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500" placeholder="Ex: JOSE MIGUEL" required>
                </div>
                <div>
                  <label for="ass_sec" class="block text-sm font-medium text-gray-700">Assinatura Secretário(a)</label>
                  <input type="text" id="ass_sec" name="ass_sec" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500" placeholder="Ex: cmiguel" required>
                </div>
              </div>

              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <label for="ass_dir" class="block text-sm font-medium text-gray-700">Assinatura Diretor(a) / Reitor(a)</label>
                  <input type="text" id="ass_dir" name="ass_dir" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500" placeholder="Ex: jmiguel" required>
                </div>
                <div>
                  <label for="numrg_sec" class="block text-sm font-medium text-gray-700">Nº RG Secretário(a)</label>
                  <input type="text" id="numrg_sec" name="numrg_sec" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500" placeholder="Ex: 8562558" required>
                </div>
              </div>

              <div class="grid grid-cols-1 md:grid-cols-1 gap-4">
                <div>
                  <label for="numrg_dir" class="block text-sm font-medium text-gray-700">Nº RG Diretor(a) / Reitor(a)</label>
                  <input type="text" id="numrg_dir" name="numrg_dir" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500" placeholder="Ex: 8562558" required>
                </div>
              </div>
            </div>
        
            <div class="mt-8">
                <button type="submit" class="w-full md:w-auto px-6 py-2 bg-blue-600 text-white font-medium rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500" style="width: 100%; text-transform: uppercase;">
                    <i data-feather="plus" class="inline-block mr-2"></i>Criar Escola
                </button>
            </div>
        </form>
        
    </div>
</div>
@endsection