@extends('layouts.admin.theme')
@section("title", env("APP_NAME") . " :: Novo Centro de Referencia")
@section('content')


    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="card shadow">

                    @php $headLine = "<i class='fa-solid fa-house-chimney-user'></i> Novo Centro de Referencia"; @endphp

                    @include('components.buttons._headLineButtonsBackAdd', [
                                'headLine' => __($headLine),
                                'routeBack' => 'admin.acaoSocial.centrosDeReferencia.index',
                                'routeBackParams' => [],
                                'nameBack' => __("Voltar"),
                                "permission" => "GERENCIADOR_DE_CENTROS_REFERENCIA",
                            ])

                    <div class="card-body">
                        <form action="{{ route('admin.acaoSocial.centrosDeReferencia.store') }}" method="post" enctype="multipart/form-data">
                            @csrf
                            @include("errors.messageFlash")
                            <input type="hidden" name="structure_id" id="structure_id" value="{{ $secretaria->id }}">
                            <input type="hidden" name="domicilio" id="domicilio" value="OUTROS">

                            <div class="row">
                                <div class="col-sm-12 col-md-6 d-flex align-items-center justify-content-center">
                                    <div class="mb-3">
                                        @include('components.tables._openPhoto', [
                                            'asset' => "/pmar/assets/img/icons/centro_referencia.png",
                                            'alt' => "Foto da unidade",
                                            'title' =>  "Foto da unidade",
                                            'text' => 'Visualizar foto',
                                            'index' => 1,
                                            'style' => "width: 200px;",
                                        ])
                                    </div>
                                </div>
                                <div class="col-sm-12 col-md-6 d-flex align-items-end">
                                    <div style="width: 100%">
                                    <!-- Campo Foto -->
                                        @include('components.inputs._inputType',[
                                            "for" => 'foto',
                                            "label" => "Foto da unidade",
                                            "name" => "foto",
                                            "id" => 'foto',
                                            "required" => false,
                                            "type" => 'file',
                                            "old" => null,
                                            "oninput" => null,
                                            "readonly" => true,
                                            "small" => null,
                                            "accept" => 'image/jpeg,image/jpg,image/png,image/gif',
                                        ])
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-sm-12 col-md-6">
                                <!-- Campo Nome do centro de referencia -->
                                    @include('components.inputs._inputType',[
                                        "for" => 'nome',
                                        "label" => "Nome do centro de referencia",
                                        "name" => "nome",
                                        "id" => 'nome',
                                        "required" => true,
                                        "type" => null,
                                        "old" => old('nome'),
                                        "oninput" => "javascript:this.value = this.value.toLocaleUpperCase('pt-BR').replace(/[^\p{L}\s]+/gu, '').replace(/\s{2,}/g,' ').trimStart()",
                                        "readonly" => false,
                                        "small" => null,
                                    ])
                                </div>
                                <div class="col-sm-12 col-md-6">
                                <!-- Campo Tipo de unidade -->
                                    @include('components.inputs._selectType', [
                                        "for" => "tipoCentroReferencia",
                                        "label" => "Tipo de unidade",
                                        "name" => "tipoCentroReferencia",
                                        "id" => "tipoCentroReferencia",
                                        "required" => true,
                                        "readonly" => false,
                                        "placeholder" => "Selecione uma unidade...",
                                        "options" => ["CRAS" => "CRAS", "CREAS" => "CREAS", "CAPR" => "CAPR", "ILPI" => "ILPI", "CIL" => "CIL"],
                                        "selected" => old('tipoCentroReferencia'),
                                        "small" => "Selecione o tipo de unidade.",
                                    ])
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-sm-12 col-md-6">
                                    <!-- Campo Telefone -->
                                    @include('components.inputs._inputType',[
                                        "for" => null,
                                        "label" => "Telefone",
                                        "name" => "telefone",
                                        "id" => null,
                                        "required" => true,
                                        "type" => null,
                                        "old" => old('telefone'),
//                                        "oninput" => "javascript:aplicarMascaraTelefone(this)",
                                        "readonly" => false,
                                        "small" => null,
                                    ])
                                </div>
                                <div class="col-sm-12 col-md-6">
                                <!-- Campo Email -->
                                    @include('components.inputs._inputType',[
                                        "for" => null,
                                        "label" => "Email",
                                        "name" => "email",
                                        "id" => null,
                                        "required" => false,
                                        "type" => 'email',
                                        "old" => old('email'),
                                        "oninput" => "javascript:this.value = this.value.toLowerCase()",
                                        "readonly" => false,
                                        "small" => null,
                                        "placeholder" => "nome@email.com",
                                    ])
                                </div>
                            </div>   

                            <hr>
                            <div class="form-check mb-3">
                                <input class="form-check-input" type="checkbox" name="possuiRecursosMultifuncionais">
                                <label class="form-check-label" for="possuiRecursosMultifuncionais">Esta unidade oferecem salas de recursos multifuncionais?</label>
                            </div>
                            <hr>

                            <div class="row">
                                <div class="col-sm-12 col-md-4">
                                <!-- Campo CEP -->
                                    @include('components.inputs._inputType',[
                                            "for" => null,
                                            "label" => "CEP",
                                            "name" => "cep",
                                            "id" => "zipCode",
                                            "required" => true,
                                            "type" => null,
                                            "old" => old('cep'),
                                            "oninput" => "javascript:aplicarMascaraCEP(this)",
                                            "readonly" => false,
                                            "small" => null,
                                        ])
                                </div>
                                <div class="col-sm-12 col-md-6">
                                <!-- Campo Logradouro -->
                                    @include('components.inputs._inputType',[
                                            "for" => null,
                                            "label" => "Logradouro",
                                            "name" => "logradouro",
                                            "id" => "street",
                                            "required" => true,
                                            "type" => null,
                                            "old" => old('logradouro'),
                                            "oninput" => "javascript:this.value = this.value.toUpperCase()",
                                            "readonly" => false,
                                            "small" => null,
                                        ])
                                </div>
                                <div class="col-sm-12 col-md-2">
                                <!-- Campo Número -->
                                    @include('components.inputs._inputType',[
                                            "for" => null,
                                            "label" => "Número",
                                            "name" => "numero",
                                            "id" => "numero",
                                            "required" => false,
                                            "type" => null,
                                            "old" => old('numero'),
                                            "oninput" => "javascript:this.value = this.value.toUpperCase()",
                                            "readonly" => false,
                                            "small" => null,
                                        ])
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12 col-md-3">
                                <!-- Campo Complemento -->
                                    @include('components.inputs._inputType',[
                                            "for" => null,
                                            "label" => "Complemento",
                                            "name" => "complemento",
                                            "id" => "complemento",
                                            "required" => false,
                                            "type" => null,
                                            "old" => old('complemento'),
                                            "oninput" => "javascript:this.value = this.value.toUpperCase()",
                                            "readonly" => false,
                                            "small" => null,
                                        ])
                                </div>
                                <div class="col-sm-12 col-md-3">
                                <!-- Campo Cidade -->
                                    @include('components.inputs._inputType',[
                                            "for" => null,
                                            "label" => "Cidade",
                                            "name" => "cidade",
                                            "id" => "city",
                                            "required" => true,
                                            "type" => null,
                                            "old" => old('cidade'),
                                            "oninput" => "javascript:this.value = this.value.toUpperCase()",
                                            "readonly" => false,
                                            "small" => null,
                                        ])
                                </div>
                                <div class="col-sm-12 col-md-3">
                                <!-- Campo Bairro -->
                                    @include('components.inputs._inputType',[
                                            "for" => null,
                                            "label" => "Bairro",
                                            "name" => "bairro",
                                            "id" => "neighborhood",
                                            "required" => true,
                                            "type" => null,
                                            "old" => old('bairro'),
                                            "oninput" => "javascript:this.value = this.value.toUpperCase()",
                                            "readonly" => false,
                                            "small" => null,
                                        ])
                                </div>
                                <div class="col-sm-12 col-md-3">
                                <!-- Campo UF -->
                                    @include('components.inputs._inputType',[
                                            "for" => null,
                                            "label" => "UF",
                                            "name" => "uf",
                                            "id" => "state",
                                            "required" => true,
                                            "type" => null,
                                            "old" => old('uf'),
                                            "oninput" => "javascript:this.value = this.value.toUpperCase()",
                                            "readonly" => false,
                                            "small" => null,
                                            "listName" => "estadosBrasileiros",
                                            "arrayList" => [
                                                'AC', 'AL', 'AM', 'AP', 'BA', 'CE', 'DF', 'ES', 'GO',
                                                'MA', 'MG', 'MS', 'MT', 'PA', 'PB', 'PE', 'PI', 'PR',
                                                'RJ', 'RN', 'RO', 'RR', 'RS', 'SC', 'SE', 'SP', 'TO'
                                            ],
                                        ])
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-sm-12 col-md-3 d-flex justify-content-center align-self-center">
                                <!-- Map Modal -->
                                    @include('components.modal._mapModal',[
                                            "label" => "Clique no mapa e escolha um determinado ponto",
                                        ])
                                </div>
                                <div class="col-sm-12 col-md-3">
                                <!-- Campo Latitude -->
                                    @include('components.inputs._inputType',[
                                            "for" => null,
                                            "label" => "Latitude",
                                            "name" => "latitude",
                                            "id" => null,
                                            "required" => true,
                                            "type" => null,
                                            "old" => old('latitude'),
                                            "oninput" => "javascript:this.value = this.value.toUpperCase()",
                                            "readonly" => false,
                                            "small" => null,
                                        ])
                                </div>
                                <div class="col-sm-12 col-md-3">
                                <!-- Campo Longitude -->
                                    @include('components.inputs._inputType',[
                                            "for" => null,
                                            "label" => "Longitude",
                                            "name" => "longitude",
                                            "id" => null,
                                            "required" => true,
                                            "type" => null,
                                            "old" => old('longitude'),
                                            "oninput" => "javascript:this.value = this.value.toUpperCase()",
                                            "readonly" => false,
                                            "small" => null,
                                        ])
                                </div>
                                <div class="col-sm-12 col-md-3">
                                <!-- Campo Status -->
                                    @include('components.inputs._selectType', [
                                        "for" => "status",
                                        "label" => "Status",
                                        "name" => "status",
                                        "required" => true,
                                        "readonly" => false,
                                        "options" => collect(App\Enums\StatusEnum::cases())
                                            ->mapWithKeys(fn($status) => [$status->name => $status->value])
                                            ->toArray(),
                                        "selected" => old('status'),
                                        "placeholder" => "Selecione o status...",
                                        "small" => "Informe o status atual da unidade.",
                                        "onchange" => null
                                    ])
                                </div>
                            </div>
                            <hr>
                            <div class="row">
                                <div class="col-12">
                                    <div class="mb-3">
                                        <label for="informacoes" class="form-label text-bold">Informações:</label>
                                        <textarea class="form-control textarea-body @error('informacoes') is-invalid @enderror" style="height: 400px" name="informacoes" id="informacoes">{{ old('informacoes') }}</textarea>
                                        @error('informacoes')
                                            <small class="text-danger text-bold">{{ $message }}</small>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-12">
                                    <div class="mb-3">
                                        @include('components.buttons._backAndSend', [
                                                'textBack' => 'Voltar', 
                                                'textSend' => 'Cadastrar', 
                                                'routeBack' => 'admin.acaoSocial.centrosDeReferencia.index'
                                            ]
                                        )
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
    </div>
</div>


@endsection