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

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

                    @php $headLine = "<i class='fa-solid fa-map-location-dot fa-2x'></i> Visite Angra - Novo Ponto Turístico"; @endphp

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

                    <div class="card-body">
                        <form action="{{ route('admin.visiteAngra.pontos.store') }}" method="post" enctype="multipart/form-data">

                            @csrf
                            @include("errors.messageFlash")

                            <div class="mb-3">
                                <input type="hidden" name="slug" value="{{ old('slug') }}">

                            <!-- Campo Corredor turístico -->
                                @include('components.inputs._selectType', [
                                        "for" => "corredor_id",
                                        "label" => "Corredor turístico",
                                        "name" => "corredor_id",
                                        "id" => null,
                                        "required" => true,
                                        "readonly" => false,
                                        "placeholder" => "Selecione um corredor...",
                                        "options" => collect($corredores)->mapWithKeys(fn($c) => [
                                            $c->id => "{$c->corredor}"
                                        ])->toArray(),
                                        "selected" => old('corredor_id'),
                                        "small" => "Selecione um corredor turístico.",
                                    ])

                            </div>

                            <div class="mb-3">

                            <!-- Campo Nome do ponto turístico -->
                                @include('components.inputs._inputType',[
                                        "for" => null,
                                        "label" => "Nome do ponto turístico",
                                        "name" => "ponto",
                                        "id" => null,
                                        "required" => true,
                                        "type" => null,
                                        "old" => old('ponto'),
                                        "oninput" => null,
                                        "readonly" => false,
                                        "small" => null,
                                    ])

                            </div>

                            <div class="mb-3">

                            <!-- Campo Subtitulo -->
                                @include('components.inputs._inputType',[
                                        "for" => null,
                                        "label" => "Subtitulo",
                                        "name" => "subtitulo",
                                        "id" => null,
                                        "required" => true,
                                        "type" => null,
                                        "old" => old('subtitulo'),
                                        "oninput" => null,
                                        "readonly" => false,
                                        "small" => null,
                                    ])

                            </div>

                            <div class="mb-3">
                                <div class="d-none" id="dataBaseCategoria">
                                    @foreach($categorias as $categoria)
                                        <span>{{ $categoria->categoria }}</span>
                                    @endforeach
                                </div>

                                <label for="categorias" class="form-label text-bold">
                                    Categorias: <span class="span-admin-create">*</span>
                                </label>

                                <div id="tag-container" class="form-control d-flex flex-wrap"></div>
                                <input type="hidden" name="categorias" id="categoriaID" value="">
                                <ul id="suggestions" class="list-group position-absolute" style="z-index:1000; max-height:200px; overflow-y:auto; display:none;"></ul>
                            </div>

                            <hr>
                            <div class="mb-3">

                                <div class="col-sm-12 col-md-3 d-flex justify-content-start align-self-center">
                                <!-- Map Modal -->
                                    @include('components.modal._mapModal',[
                                        "label" => "Clique no mapa e escolha um determinado ponto",
                                    ])
                                </div>

                                <hr/>

                                <div class="col-12">
                                <!-- 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-12">
                                <!-- 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>
                            <hr>
                            <div class="mb-3 text-wrap">
                            <!-- Campo Descreva a categoria -->
                                @include('components.inputs._textarea', [
                                            'label' => 'Descrição',
                                            'name' => 'descricao',
                                            'id' => null,
                                            'rows' => 0,
                                            'required' => false,
                                            'height' => '100px',
                                            'class' => null,
                                            'style' => null,
                                            'value' => old('descricao'),
                                        ])

                            </div>
                            <hr>

                            <div class="mb-3">

                            <!-- Campo Foto Destaque -->
                                @include('components.inputs._inputType',[
                                            "for" => null,
                                            "label" => "Foto Destaque",
                                            "name" => "foto",
                                            "id" => null,
                                            "required" => true,
                                            "type" => 'file',
                                            "old" => null,
                                            "oninput" => null,
                                            "readonly" => true,
                                            "small" => "Formatos permitidos: JPEG, PNG ou GIF. Tamanho máximo: 5 MB.",
                                            "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'),
                                    "placeholder" => "Selecione o status...",
                                    "small" => "Informe o status atual deste ponto turístico.",
                                    "onchange" => null
                                ])
                            </div>

                            @include('components.buttons._backAndSend',[
                                'routeBack' => 'admin.visiteAngra.pontos.index',
                                'textBack' => "Voltar",
                                'textSend' => "Cadastrar",
                            ])

                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection