@extends('layouts.admin.theme')
@section("title", env("APP_NAME") . " :: Novo Guia Turístico")
@section('content')

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

                    <form action="{{ route('admin.guias.store') }}" method="post" enctype="multipart/form-data">

                        @php $headLine = "<i class='fa-solid fa-left-right'></i> Novo Guia Turístico"; @endphp

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

                        <div class="card-body">
                            @csrf
                            @include("errors.messageFlash")
                            <div class="mb-3">
                                
                                <!-- Campo Nome completo -->
                                @include('components.inputs._inputType',[
                                    "for" => null,
                                    "label" => "Nome completo",
                                    "name" => "fullName",
                                    "id" => null,
                                    "required" => true,
                                    "type" => null,
                                    "old" => old('fullName'),
                                    "oninput" => "javascript:this.value = this.value.toUpperCase()",
                                    "readonly" => false,
                                    "small" => null,
                                ])
                                
                            </div>
                            <div class="mb-3">
                                
                                <!-- Campo CPF -->
                                @include('components.inputs._inputType',[
                                    "for" => null,
                                    "label" => "CPF",
                                    "name" => "cpf",
                                    "id" => null,
                                    "required" => true,
                                    "type" => null,
                                    "old" => old('cpf', session("cpfTmp")),
                                    "oninput" => "javascript:aplicarMascaraCPF(this)",
                                    "readonly" => false,
                                    "small" => null,
                                ])
                                
                            </div>
                            <div class="mb-3">
                                
                                <!-- Campo Cadastur -->
                                @include('components.inputs._inputType',[
                                    "for" => null,
                                    "label" => "Cadastur",
                                    "name" => "cadastur",
                                    "id" => null,
                                    "required" => true,
                                    "type" => null,
                                    "old" => old('cadastur'),
                                    "oninput" => "javascript:this.value = this.value.replace(/\D/g, '')",
                                    "readonly" => false,
                                    "small" => null,
                                ])
                                
                            </div>

                            <div class="mb-3">
                                
                                <!-- Campo Telefone -->
                                @include('components.inputs._inputType',[
                                    "for" => null,
                                    "label" => "Telefone",
                                    "name" => "phoneNumber",
                                    "id" => null,
                                    "required" => true,
                                    "type" => null,
                                    "old" => old('phoneNumber'),
                                    "oninput" => "javascript:aplicarMascaraTelefone(this)",
                                    "readonly" => false,
                                    "small" => null,
                                ])
                                
                            </div>

                            <div class="mb-3">
                                <!-- 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 class="mb-3">
                                
                                <!-- Campo Categoria -->
                                @include('components.inputs._selectType', [
                                    "for" => "categoria",
                                    "label" => "Categoria",
                                    "name" => "categoria",
                                    "id" => "categoriaGuiaTuristico",
                                    "required" => true,
                                    "readonly" => false,
                                    "placeholder" => "Selecione uma categoria...",
                                    "options" => collect(App\Enums\StatusGuia::cases())
                                        ->mapWithKeys(fn($status) => [$status->name => $status->value])
                                        ->toArray(),
                                    "selected" => old('categoria'),
                                    "small" => "Selecione a categoria do guia.",
                                ])
                                
                            </div>

                            <div class="mb-3 text-wrap d-none" id="divCategoriaOutros">
                                
                                <!-- Campo Descreva a categoria -->
                                @include('components.inputs._textarea', [
                                    'label' => 'Descreva a categoria',
                                    'name' => 'categoriaOutros',
                                    'id' => null,
                                    'rows' => 0,
                                    'required' => false,
                                    'height' => '100px',
                                    'class' => null,
                                    'style' => null,
                                    'value' => old('categoriaOutros'),
                                ])
                                
                            </div>

                            <hr/>

                            <div class="mb-3">
                                <!-- Campo Tipo de domicilio -->
                                @include('components.inputs._selectType', [
                                    "for" => "domicilio",
                                    "label" => "Tipo de domicilio",
                                    "name" => "domicilio",
                                    "required" => true,
                                    "readonly" => false,
                                    "options" => collect(App\Enums\StatusDomicilio::cases())
                                        ->mapWithKeys(fn($status) => [$status->name => $status->value])
                                        ->toArray(),
                                    "selected" => old('domicilio'),
                                    "placeholder" => "Selecione o status...",
                                    "small" => "Informe o tipo de dominílio.",
                                    "onchange" => null
                                ])
                            </div>
                            <div class="mb-3">
                                
                                <!-- 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="mb-3">
                                
                                <!-- 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="mb-3">
                                
                                <!-- 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 class="mb-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="mb-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="mb-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="mb-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 class="mb-3">
                                <!-- Campo Comprovante -->
                                @include('components.inputs._inputType',[
                                    "for" => null,
                                    "label" => "Comprovante",
                                    "name" => "comprovante",
                                    "id" => null,
                                    "required" => false,
                                    "type" => 'file',
                                    "old" => null,
                                    "oninput" => null,
                                    "readonly" => true,
                                    "small" => null,
                                    "accept" => 'image/jpeg,image/jpg,image/png,image/gif,.pdf',
                                ])
                            </div>
                            
                            <div class="mb-3">
                                <hr/>
                                <!-- Map Modal -->
                                @include('components.modal._mapModal',[
                                    "label" => "Clique no mapa para escolher um Ponto Turístico",
                                ])
                                <hr/>
                            </div>
                            
                            <div class="my-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="mb-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>

                            <hr/>

                            <div class="mb-3">
                                <!-- Campo Foto -->
                                @include('components.inputs._inputType',[
                                    "for" => null,
                                    "label" => "Foto",
                                    "name" => "photo",
                                    "id" => null,
                                    "required" => false,
                                    "type" => 'file',
                                    "old" => null,
                                    "oninput" => null,
                                    "readonly" => true,
                                    "small" => null,
                                    "accept" => 'image/jpeg,image/jpg,image/png,image/gif',
                                ])
                            </div>

                            <div class="mb-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', $user->status ?? ''),
                                    "placeholder" => "Selecione o status...",
                                    "small" => "Informe o status atual do usuário.",
                                    "onchange" => null
                                ])
                            </div>

                            @include('components.buttons._backAndSend', [
                                    'textBack' => 'Voltar', 
                                    'textSend' => 'Cadastrar', 
                                    'routeBack' => 'admin.guias.verify'
                                ]
                            )
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

@endsection