@extends('layouts.admin')

@section('content')

<div class="container-fluid">

    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="h3 mb-0 text-gray-800">Novo Curso</h1>
        <a href="{{ route('cursos.index') }}" class="btn btn-sm btn-secondary shadow-sm">
            <i class="fas fa-arrow-left fa-sm"></i> Voltar
        </a>
    </div>

    <form action="{{ route('cursos.store') }}" method="POST" enctype="multipart/form-data">
        @csrf

        <div class="row">
            {{-- Coluna Principal --}}
            <div class="col-xl-8 col-lg-7">
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">Informações do Curso</h6>
                    </div>
                    <div class="card-body">
                        <div class="form-group">
                            <label for="titulo">Título do Curso</label>
                            <input type="text" class="form-control @error('curso_titulo') is-invalid @enderror"
                                id="curso_titulo" name="curso_titulo" value="{{ old('curso_titulo') }}" required>
                            @error('curso_titulo') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        <div class="form-group">
                            <label for="curso_descricao">Descrição Curta</label>
                            <input type="text" class="form-control @error('curso_descricao') is-invalid @enderror"
                                id="curso_descricao" name="curso_descricao" value="{{ old('curso_descricao') }}" required>
                            @error('curso_descricao') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                            <div class="row mt-3">
                    <div class="col-md-12 form-group">
                        <label for="imagem">Imagem de Capa do Curso (Thumbnail):</label>
                        <input type="file" name="curso_path" class="form-control-file @error('curso_path') is-invalid @enderror">
                        <small class="text-muted">Formatos aceitos: JPG, PNG, WEBP. Tamanho máximo: 2MB.</small>
                        @error('curso_path') <div class="invalid-feedback d-block">{{ $message }}</div> @enderror
                    </div>
                </div>

                <div class="form-group mt-3">
                    <label for="curso_texto">Conteúdo (Texto):</label>
                    <textarea name="curso_texto" id="editor" class="form-control @error('curso_texto') is-invalid @enderror">{{ old('curso_texto') }}</textarea>


                    @error('curso_texto') <small class="text-danger">{{ $message }}</small> @enderror
                </div>

                <div class="row mt-4">

                        <div class="form-group">
                            <label for="url">URL de Destino (Interna ou Externa) - <br>
                             <b>   PARA IR PARA PÁGINA DE 'CURSOS' É NECESSÁRIO DEIXAR A URL COMO "/cursos-lista" </b></label>
                            <input type="text" class="form-control @error('curso_url') is-invalid @enderror"
                                id="curso_url" name="curso_url" value="{{ old('curso_url') }}" required>
                            @error('curso_url') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                    </div>

     <div class="card-body">


                        <hr>

                        <div class="form-group">
                            <div class="custom-control custom-switch">
                                <input type="checkbox" class="custom-control-input" id="curso_pub" name="curso_pub" checked>
                                <label class="custom-control-label" for="curso_pub">Ativo</label>
                            </div>
                        </div>

                        <hr>

                        <div class="text-right">
                            <button type="submit" class="btn btn-success btn-icon-split shadow-sm">
                                <span class="icon text-white-50">
                                    <i class="fas fa-check"></i>
                                </span>
                                <span class="text">Salvar Novo Curso</span>
                            </button>
                        </div>

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

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


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

@endsection



@push('scripts')

<script>
    // Atualiza apenas o nome do arquivo no label do Bootstrap
    $('.custom-file-input').on('change', function() {
        let fileName = $(this).val().split('\\').pop();

        $(this)
            .next('.custom-file-label')
            .addClass("selected")
            .html(fileName);
    });
</script>

@push('scripts')


<style>
    .cke_editable {
        min-height: 400px;
    }
</style>

<script src="{{ asset('ckeditor/ckeditor.js') }}"></script>

<script>
document.addEventListener("DOMContentLoaded", function () {

    if (typeof CKEDITOR === "undefined") {
        console.error("CKEDITOR não carregou");
        return;
    }

    CKEDITOR.replace('editor', {

        height: 400,
        language: 'pt-br',

        allowedContent: true,

        extraPlugins: 'uploadimage,image2',

        removePlugins: 'image',

        uploadUrl: "{{ route('ckeditor.upload', ['_token' => csrf_token()]) }}",

        imageUploadUrl: "{{ route('ckeditor.upload', ['_token' => csrf_token()]) }}",

        filebrowserUploadUrl: "{{ route('ckeditor.upload', ['_token' => csrf_token()]) }}",

        filebrowserUploadMethod: 'form'

    });

});
</script>




@endpush