@extends('layouts.admin.theme')
@section('title', env('APP_NAME') . ' :: ' . __('Nova Área - Parque Tecnológico'))

@section('content')
@include('errors.messageFlash')

<div class="card shadow border-0">
    
    <div class="card-header bg-primary border-bottom">
        <h5 class="mb-0 fw-bolder text-white py-3">
            <i class="fa-solid fa-layer-group text-white me-2"></i>
            {{ __('Nova Área do Parque Tecnológico') }}
        </h5>
    </div>

    <div class="card-body">

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

            @csrf

            <div class="row g-4">

                {{-- TITULO --}}
                <div class="col-md-6">
                    <label for="titulo" class="form-label fw-semibold">
                        <i class="fa-solid fa-heading me-1 text-muted"></i>
                        {{ __('Título') }}
                    </label>

                    <input type="text"
                           name="titulo"
                           id="titulo"
                           class="form-control form-control-lg @error('titulo') is-invalid @enderror"
                           placeholder="Digite o título da área"
                           value="{{ old('titulo') }}"
                           required>

                    @error('titulo')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                {{-- ORDEM --}}
                <div class="col-md-3">
                    <label for="ordem" class="form-label fw-semibold">
                        <i class="fa-solid fa-sort-numeric-down me-1 text-muted"></i>
                        {{ __('Ordem') }}
                    </label>

                    <input type="number"
                           name="ordem"
                           id="ordem"
                           class="form-control form-control-lg @error('ordem') is-invalid @enderror"
                           value="{{ old('ordem', 0) }}"
                           min="0">

                    @error('ordem')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                {{-- STATUS --}}
                <div class="col-md-3 d-flex align-items-end">
                    <div class="form-check form-switch fs-5">
                        <input class="form-check-input"
                               type="checkbox"
                               id="status"
                               name="status"
                               value="1"
                               {{ old('status', true) ? 'checked' : '' }}>

                        <label class="form-check-label ms-2" for="status">
                            <!-- <i class="fa-solid fa-toggle-on text-success me-1"></i> -->
                            {{ __('Ativo') }}
                        </label>
                    </div>
                </div>

                {{-- DESCRIÇÃO --}}
                <div class="col-md-12">
                    <label for="descricao" class="form-label fw-semibold">
                        <i class="fa-solid fa-align-left me-1 text-muted"></i>
                        {{ __('Descrição') }}
                    </label>

                    <textarea name="descricao"
                              id="descricao"
                              rows="4"
                              class="form-control @error('descricao') is-invalid @enderror"
                              placeholder="Descreva esta área do parque tecnológico...">{{ old('descricao') }}</textarea>

                    @error('descricao')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                {{-- IMAGEM --}}
                <div class="col-md-6">
                    <label for="imagem" class="form-label fw-semibold">
                        <i class="fa-solid fa-image me-1 text-muted"></i>
                        {{ __('Imagem') }}
                    </label>

                    <input type="file"
                           name="imagem"
                           id="imagem"
                           class="form-control @error('imagem') is-invalid @enderror"
                           accept="image/*">

                    @error('imagem')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror

                    <div class="mt-3">
                        <img id="previewImagem"
                             src=""
                             class="img-fluid rounded shadow-sm d-none"
                             style="max-height:200px;">
                    </div>
                </div>

            </div>

            {{-- BOTÕES --}}
            <div class="mt-4 border-top pt-3 d-flex justify-content-end gap-2">

                <a href="{{ route('admin.parqueTecnologico.index', ['tab' => 'areas']) }}"
                   class="btn btn-light border">
                    <i class="fa-solid fa-arrow-left me-1"></i>
                    {{ __('Cancelar') }}
                </a>

                <button type="submit" class="btn btn-success px-4">
                    <i class="fa-solid fa-floppy-disk me-1"></i>
                    {{ __('Salvar Área') }}
                </button>

            </div>

        </form>

    </div>
</div>


{{-- PREVIEW DA IMAGEM --}}
<script>

document.getElementById('imagem').addEventListener('change', function(e){

    const preview = document.getElementById('previewImagem');
    const file = e.target.files[0];

    if(file){
        preview.src = URL.createObjectURL(file);
        preview.classList.remove('d-none');
    }

});

</script>

@endsection