@extends('admin.admin')
@section('title', 'Novo serviço')
@section('css')
    @include('admin.includes.quill_css')
@endsection
@section('content')
    <div class="pagetitle">
        <h1>Novo servico</h1>
        <nav>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('painel.dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{{ route('painel.servico.index') }}">Serviços</a></li>
                <li class="breadcrumb-item active">Novo serviço</li>
            </ol>
        </nav>
    </div>
    <section class="section">
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body p-5">
                        <form enctype="multipart/form-data" action="{{ isset($servico) ? route('painel.servico.update',$servico) : route('painel.servico.store') }}" method="post" class="form" enctype="multipart/form-data">
                            @csrf
                            @isset($servico) @method('PUT') @endisset
                            <div class="row">
                                <div class="col-lg-4 col-sm-12 mb-3">
                                    <label for="categoria">Categoria</label>
                                    <select name="categoria" id="categoria">
                                        @if ($categorias->count() == 0)
                                            <option value="">Nenhuma categoria cadastrada</option>
                                        @else
                                            @foreach ($categorias as $categoria)
                                                <option value="{{ $categoria->idcategoria }}" {{ isset($servico) && $servico->categoria_id == $categoria->idcategoria ? 'selected' : '' }}>{{ $categoria->categoria }}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                                <div class="col-lg-4 col-sm-12 mb-3">
                                    <label for="designacao">Designação</label>
                                    <input type="text" name="designacao" value="{{ isset($servico) ? $servico->designacao : old('designacao') }}" required>
                                </div>
                                <div class="col-lg-2 col-md-12 col-sm-12 mb-3">
                                    <label>Capa da publicação <span class="text-danger">*</span></label>
                                    <label for="file" class="btn border btn-light w-100"><i class="bi bi-camera-fill"></i> Selecionar</label>
                                    <input type="file" hidden name="capa" id="file" class="fileInput">
                                </div>
                                <div class="col-lg-2 col-md-12 col-sm-12 mb-3">
                                    <label for="preco">Preço <span class="text-danger">*</span></label>
                                    <input type="text" name="preco" value="{{ isset($servico) ? $servico->preco : old('preco') }}" id="preco">
                                </div>
                                
                                {{-- <div class="col-lg-4 col-sm-12 text-center mediaContainer mb-3"><strong>Seleciona uma imagem</strong></div> --}}
                                <div class="mb-3 col-lg-12 col-sm-12">
                                    <label for="conteudo">Descrição</label>
                                    <div class="quill-editor-full" id="quill-descricao" style="height: 200px">@if(isset($servico)) {!! $servico->descricao !!} @endif</div>
                                    <input type="hidden" value="{{ isset($servico) ? $servico->descricao : old('descricao') }}" name="descricao" id="descricao_content">
                                </div>
                                <div class="col-lg-12 mt-3 d-flex justify-content-end">
                                    <button class="btn btn-default " type="submit"><i class="bi bi-save"></i> Guardar</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
@endsection
@section('script')
    <script src="{{ asset('assets/js/default-admin.js') }}"></script>
    @include('admin.includes.quill')
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var quillDescricao = new Quill('#quill-descricao', { theme: 'snow' });
    
            document.querySelector('.form').addEventListener('submit', function(e) {
                document.getElementById('descricao_content').value = quillDescricao.root.innerHTML;
            });
        });        
    </script> 
@endsection